javascript - Come ottenere un token di autenticazione per l'API di Google Cloud Translation all'interno del browser (estensione chrome)

Sto cercando di creare un'estensione per Chrome che utilizzi l'API di traduzione di Google Cloud. Ho seguito una serie di istruzioni su molte pagine diverse della documentazione di Google Translate e per lo sviluppo di estensioni Chrome, ma ancora non riesco a capire come utilizzare effettivamente l'API da un browser.

Il punto più lontano a cui sono arrivato è stato seguendo una parte della guida Quickstart in cui si crea un account di servizio, si ottiene un file chiave dell'account di servizio (scaricato come file .json), si installa e inizializza l'SDK di Google, si imposta la variabile d'ambiente GOOGLE_APPLICATION_CREDENTIALS al percorso del file chiave JSON dell'account di servizio, e poi si effettua una richiesta curl usando gcloud auth application-default print-access-token per ottenere un token di accesso da inserire come parte dell'intestazione della richiesta: "Authorization: Bearer (token qui)". Ho recuperato con successo una traduzione in questo modo.

Ma nell'ambiente di un'estensione non puoi eseguire comandi come gcloud, quindi questo non funziona. Sono riuscito a recuperare manualmente un token di accesso usando il comando gcloud, e poi a incollarlo nel mio codice JavaScript come parte dell'intestazione della richiesta (ad esempio xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ya29.c.Elr6BRuTfOtherRandomLetters');). Ma quel token di accesso scade dopo 60 minuti, quindi non funziona in modo sostenibile.

Ho anche provato a usare il metodo identity.getAuthToken (dopo aver aggiornato le cose in manifest.json come dice la documentazione), ma non ha funzionato. Usare il mio ID client dell'account di servizio come client_id sotto oauth2 in manifest.json ha prodotto un errore "Invalid client ID" da identity.getAuthToken. D'altra parte, generare un OAuth2 Client ID dalla Google Console e usare myoauth2clientid.apps.googleusercontent.com come client_id sotto oauth2 e ["https://www.googleapis.com/auth/cloud-translation", "https://www.googleapis.com/auth/cloud-platform"] come scopes sotto oauth2 ha prodotto un errore "OAuth2 not granted or revoked" da identity.getAuthToken.

Generare una chiave API dalla pagina della Console di Google e usarla direttamente come parametro key della mia richiesta di traduzione non ha nemmeno funzionato: ho ricevuto un errore "La richiesta non contiene una chiave API valida."

Sono davvero perso qui. Qualsiasi aiuto sarebbe fantastico.

Risposta n. 1

Anch'io (alla prima pubblicazione) ho seguito gli stessi passaggi che hai fatto tu, ma con l'aiuto della risposta di @magicnumber ho trovato una soluzione per tradurre testi (da qualsiasi lingua all'inglese) nella mia estensione Chrome usando una APIkey invece di un file di chiave dell'account di servizio.

Prima crea una funzione di traduzione (qui ho usato il pattern Async -> Await):

 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;
  }

Quindi chiama la funzione asincrona che restituirà una promessa, ad esempio:

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

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

La risposta dall'API di traduzione di Google dovrebbe apparire come:

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

Infine, per evitare di violare la Content Security Policy, nel mio caso, ho dovuto aggiungere il dominio dell'API di traduzione alla chiave delle autorizzazioni nel file manifest.json della mia estensione:

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

Risposta n. 2

Ho seguito gli stessi passaggi che te e non posso nemmeno fare affidamento su gcloud per l'autenticazione.

Ciò che mi ha permesso di superare l'errore "La richiesta manca di una chiave API valida" è stato usare la sintassi di query descritta qui https://codelabs.developers.google.com/codelabs/cloud-translation-intro/index.html#5

Nel mio caso ho usato:

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"