javascript - Cách lấy token xác thực cho Google Cloud Translation API trong trình duyệt (tiện ích mở rộng chrome)

Tôi đang cố gắng tạo một tiện ích mở rộng Chrome sử dụng Google Cloud Translation API. Tôi đã làm theo rất nhiều hướng dẫn trên nhiều trang khác nhau trong tài liệu về Google Translate và phát triển tiện ích mở rộng Chrome nhưng tôi vẫn không thể hiểu cách thực sự sử dụng API từ trong trình duyệt.

Điều xa nhất mà tôi đã đạt được là từ việc làm theo một phần hướng dẫn Quickstart, nơi bạn tạo một tài khoản dịch vụ, lấy tệp khóa tài khoản dịch vụ (tải xuống dưới dạng tệp .json), cài đặt và khởi tạo Google SDK, đặt biến môi trường GOOGLE_APPLICATION_CREDENTIALS thành đường dẫn của tệp khóa JSON của tài khoản dịch vụ, và sau đó thực hiện một yêu cầu curl sử dụng gcloud auth application-default print-access-token để lấy mã truy cập được sử dụng làm một phần của tiêu đề yêu cầu: "Authorization: Bearer (token here)". Đã thành công trong việc lấy bản dịch theo cách đó.

Nhưng trong môi trường của một tiện ích mở rộng, bạn không thể chạy các lệnh như gcloud nên điều đó không hoạt động. Tôi đã có thể tự thủ công lấy token truy cập bằng cách sử dụng lệnh gcloud, sau đó dán nó vào mã javascript của mình như một phần của header yêu cầu (ví dụ: xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ya29.c.Elr6BRuTfOtherRandomLetters');). Nhưng token truy cập đó hết hạn sau 60 phút nên điều đó không hoạt động bền vững.

Tôi cũng đã thử sử dụng phương thức identity.getAuthToken (sau khi cập nhật các thứ trong manifest.json theo hướng dẫn của tài liệu), nhưng điều đó không hiệu quả. Việc sử dụng ID khách hàng của tài khoản dịch vụ của tôi làm client_id dưới oauth2 trong manifest.json dẫn đến lỗi "Invalid client ID" từ identity.getAuthToken. Mặt khác, việc tạo một ID khách hàng OAuth2 từ Google Console và sử dụng myoauth2clientid.apps.googleusercontent.com làm client_id dưới oauth2 và ["https://www.googleapis.com/auth/cloud-translation", "https://www.googleapis.com/auth/cloud-platform"] làm scopes dưới oauth2 dẫn đến lỗi "OAuth2 not granted or revoked" từ identity.getAuthToken.

Tạo một khóa API từ trang Google Console, và sử dụng trực tiếp nó làm tham số key của truy vấn dịch của tôi, thậm chí còn không hoạt động: tôi nhận được lỗi "Yêu cầu thiếu một khóa API hợp lệ."

Tôi thực sự bối rối ở đây. Bất kỳ sự giúp đỡ nào cũng sẽ tuyệt vời.

Câu trả lời #1

Tôi (lần đầu đăng bài) cũng đã trải qua các bước giống bạn nhưng nhờ câu trả lời của @magicnumber, tôi đã tìm ra giải pháp để dịch văn bản (từ bất kỳ ngôn ngữ nào sang tiếng Anh) trong Tiện ích Chrome của mình bằng APIkey thay vì tệp khóa tài khoản dịch vụ.

Đầu tiên tạo một hàm dịch (Tôi đã sử dụng mẫu Async -> Await ở đây):

 async function translate(strSourceText,strApiKey)
  {
    var url = `https://translation.googleapis.com/language/translate/v2?key=${strApiKey}`
    let response = await fetch(url, {
      method: 'POST',
      headers : { 
        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         target: "en",
         format: "text",
         q: strSourceText
       }),
    }); 
    let data = await response.json()
    return data;
  }

Sau đó gọi hàm bất đồng bộ sẽ trả về một lời hứa Ví dụ:

query="כלב" //Hebrew word for dog 🐶

translate(query,  "YOURVALIDAPIKEYGOESHERE")
  .then(response => console.log(response.data))
  .catch(reason => console.log(reason.message));

Phản hồi từ API Dịch của Google nên trông như sau:

{
  "data": {
    "translations": [
      {
        "translatedText": "Dog",
        "detectedSourceLanguage": "iw"
      }
    ]
  }
}

Cuối cùng, để tránh vi phạm Chính sách Bảo mật Nội dung, trong trường hợp của tôi, tôi đã phải thêm tên miền API dịch vào khóa quyền trong tệp manifest.json của tiện ích mở rộng của tôi:

"permissions": ["https://translation.googleapis.com/language/translate/v2/*"],

Câu trả lời #2

Tôi đã trải qua các bước giống bạn và cũng không thể dựa vào gcloud để xác thực.

Điều đã giúp tôi vượt qua lỗi "Yêu cầu thiếu khóa API hợp lệ" là sử dụng cú pháp truy vấn được mô tả tại đây https://codelabs.developers.google.com/codelabs/cloud-translation-intro/index.html#5

Trong trường hợp của tôi, tôi đã sử dụng:

curl -s -X POST -H "Content-Type: application/json" \
    --data "{
  'q': 'The Great Pyramid of Giza (also known as the Pyramid of Khufu or the
        Pyramid of Cheops) is the oldest and largest of the three pyramids in
        the Giza pyramid complex.',
  'source': 'en',
  'target': 'es',
  'format': 'text'
}" "https://translation.googleapis.com/language/translate/v2?key=YOURVALIDAPIKEYHERE"