有道翻译API接入实战：为你的网站或应用添加翻译功能

// 假设文件：server.js 或 routes/translate.js
const express = require('express');
const router = express.Router();
const crypto = require('crypto');
const axios = require('axios'); // 需要安装axios

// 你的有道智云应用配置（应从环境变量读取，切勿硬编码）
const APP_KEY = process.env.YOUDAO_APP_KEY;
const APP_SECRET = process.env.YOUDAO_APP_SECRET;
const API_URL = 'https://openapi.youdao.com/api';

router.post('/api/translate', async (req, res) => {
    try {
        const { text, from = 'auto', to = 'en' } = req.body; // 从前端获取

        const salt = Date.now().toString(); // 随机数
        const curtime = Math.round(Date.now() / 1000).toString(); // 秒级时间戳
        const input = text.length > 20 ? text.substring(0, 10) + text.length + text.substring(text.length - 10) : text;

        // 生成签名
        const signStr = APP_KEY + input + salt + curtime + APP_SECRET;
        const sign = crypto.createHash('md5').update(signStr).toString('hex');

        // 构建请求参数
        const params = new URLSearchParams();
        params.append('q', text);
        params.append('from', from);
        params.append('to', to);
        params.append('appKey', APP_KEY);
        params.append('salt', salt);
        params.append('sign', sign);
        params.append('signType', 'v3');
        params.append('curtime', curtime);

        // 发送请求到有道API
        const response = await axios.post(API_URL, params, {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });

        // 将结果返回给前端
        res.json(response.data);
    } catch (error) {
        console.error('翻译API调用失败:', error);
        res.status(500).json({ error: '翻译服务暂时不可用' });
    }
});

module.exports = router;

# 假设文件：app.py 或 translate_route.py
from flask import Flask, request, jsonify
import hashlib
import time
import requests
from urllib.parse import urlencode
import os

app = Flask(__name__)

# 配置（应从环境变量读取）
APP_KEY = os.environ.get('YOUDAO_APP_KEY')
APP_SECRET = os.environ.get('YOUDAO_APP_SECRET')
API_URL = 'https://openapi.youdao.com/api'

def truncate(q):
    """处理长文本"""
    if not q:
        return q
    size = len(q)
    return q if size <= 20 else q[0:10] + str(size) + q[size-10:size]

@app.route('/api/translate', methods=['POST'])
def translate():
    data = request.json
    text = data.get('text', '')
    from_lang = data.get('from', 'auto')
    to_lang = data.get('to', 'en')

    salt = str(int(time.time() * 1000))  # 随机数
    curtime = str(int(time.time()))      # 秒级时间戳
    sign_input = truncate(text)

    # 生成签名
    sign_str = APP_KEY + sign_input + salt + curtime + APP_SECRET
    sign = hashlib.md5(sign_str.encode('utf-8')).hexdigest()

    # 构建请求数据
    post_data = {
        'q': text,
        'from': from_lang,
        'to': to_lang,
        'appKey': APP_KEY,
        'salt': salt,
        'sign': sign,
        'signType': 'v3',
        'curtime': curtime
    }

    try:
        # 发送请求
        response = requests.post(API_URL, data=post_data)
        result = response.json()
        return jsonify(result)
    except Exception as e:
        print(f"翻译API调用失败: {e}")
        return jsonify({'error': '翻译服务暂时不可用'}), 500

if __name__ == '__main__':
    app.run(debug=True)

<!-- 翻译工具小部件 -->
<div class="translation-widget" id="translationWidget">
    <h3>在线即时翻译</h3>
    <div class="input-area">
        <textarea id="sourceText" placeholder="请输入要翻译的文本..." rows="4"></textarea>
        <div class="lang-selectors">
            <select id="fromLang">
                <option value="auto">自动检测</option>
                <option value="zh-CHS">中文</option>
                <option value="en">英语</option>
                <option value="ja">日语</option>
                <!-- 更多语言选项 -->
            </select>
            <span class="swap-icon" id="swapLang">⇄</span>
            <select id="toLang">
                <option value="en">英语</option>
                <option value="zh-CHS">中文</option>
                <option value="ja">日语</option>
                <!-- 更多语言选项 -->
            </select>
        </div>
        <button id="translateBtn">开始翻译</button>
    </div>
    <div class="result-area">
        <div class="result-header">翻译结果</div>
        <div id="translatedText" class="translated-text">翻译结果将显示在这里...</div>
        <div class="result-meta" id="resultMeta"></div> <!-- 用于显示源语言检测结果等 -->
    </div>
    <div class="error-area" id="errorArea" style="display:none; color:red;"></div>
</div>

document.addEventListener('DOMContentLoaded', function() {
    const sourceText = document.getElementById('sourceText');
    const fromLang = document.getElementById('fromLang');
    const toLang = document.getElementById('toLang');
    const translateBtn = document.getElementById('translateBtn');
    const swapBtn = document.getElementById('swapLang');
    const translatedText = document.getElementById('translatedText');
    const resultMeta = document.getElementById('resultMeta');
    const errorArea = document.getElementById('errorArea');

    // 翻译函数
    async function performTranslation() {
        const text = sourceText.value.trim();
        if (!text) {
            alert('请输入要翻译的文本');
            return;
        }

        // 显示加载状态
        translateBtn.textContent = '翻译中...';
        translateBtn.disabled = true;
        errorArea.style.display = 'none';

        try {
            const response = await fetch('/api/translate', { // 调用我们自己的后端接口
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    text: text,
                    from: fromLang.value,
                    to: toLang.value
                })
            });

            const data = await response.json();

            if (data.errorCode === '0') { // 有道API成功代码为'0'
                translatedText.textContent = data.translation[0];
                // 显示额外信息，如检测到的语言
                if (data.l) {
                    resultMeta.textContent = `检测到源语言: ${data.l.split('2')[0]}`;
                }
            } else {
                throw new Error(`翻译失败: ${data.errorCode}`);
            }
        } catch (error) {
            console.error('翻译请求错误:', error);
            errorArea.textContent = `发生错误: ${error.message}，请稍后重试。`;
            errorArea.style.display = 'block';
            translatedText.textContent = '翻译过程发生错误。';
        } finally {
            // 恢复按钮状态
            translateBtn.textContent = '开始翻译';
            translateBtn.disabled = false;
        }
    }

    // 绑定翻译按钮事件
    translateBtn.addEventListener('click', performTranslation);
    // 可选：回车键触发翻译
    sourceText.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.key === 'Enter') {
            performTranslation();
        }
    });

    // 语言交换功能
    swapBtn.addEventListener('click', function() {
        const temp = fromLang.value;
        fromLang.value = toLang.value;
        // 如果交换后源语言是“自动检测”，目标语言设为中文（常见情况）
        if (fromLang.value === 'auto' && temp === 'zh-CHS') {
            toLang.value = 'en';
        } else {
            toLang.value = temp === 'auto' ? 'zh-CHS' : temp;
        }
    });
});

.translation-widget {
    max-width: 800px;
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    background-color: #f9fbfd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.translation-widget h3 {
    margin-top: 0;
    color: #1a73e8;
    border-bottom: 2px solid #e8f0fe;
    padding-bottom: 10px;
}
.input-area textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.3s;
}
.input-area textarea:focus {
    outline: none;
    border-color: #1a73e8;
}
.lang-selectors {
    display: flex;
    align-items: center;
    margin: 15px 0;
    gap: 15px;
}
.lang-selectors select {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    font-size: 15px;
    background-color: white;
}
.swap-icon {
    cursor: pointer;
    font-size: 20px;
    padding: 8px 12px;
    background: #f1f3f4;
    border-radius: 50%;
    user-select: none;
}
.swap-icon:hover {
    background: #e8eaed;
}
#translateBtn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
#translateBtn:hover:not(:disabled) {
    background-color: #0d62d9;
}
#translateBtn:disabled {
    background-color: #9fc2f5;
    cursor: not-allowed;
}
.result-area {
    margin-top: 25px;
    border-top: 1px dashed #dadce0;
    padding-top: 20px;
}
.result-header {
    font-weight: bold;
    color: #5f6368;
    margin-bottom: 10px;
}
.translated-text {
    min-height: 80px;
    padding: 18px;
    background-color: white;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.result-meta {
    font-size: 14px;
    color: #80868b;
    margin-top: 10px;
    font-style: italic;
}
.error-area {
    margin-top: 15px;
    padding: 10px;
    background-color: #fce8e6;
    border-radius: 6px;
    font-size: 14px;
}