Google Translate API key is not utilized correctly

Describe the bug Adding a Google Translate API key works (it is added as an Authorization header to the request), but it is not compatible with the same endpoint that is being used for anonymous translation, so you will still hit rate limiting.

Extension Version i18n Ally 2.5.5

Framework/i18n package you are using react-i18next

To Reproduce Steps to reproduce the behavior:

1. Acquire a Google Translate API Key (through https://cloud.google.com/translate)
2. Add key via the i18n-ally settings.
3. Translate strings.
4. Hit error code 429 after a few strings.

Device Infomation

• OS: Windows
• Version: 10 Pro
• VS Code Version: 1,55,0

Extension Log The same as https://github.com/lokalise/i18n-ally/issues/304.

Related This is related to https://github.com/lokalise/i18n-ally/issues/310.

Solution The current solution just tries to append Auth headers to this call: ${this.apiRoot}/translate_a/single?client=gtx&sl=${from}&tl=${to}&hl=zh-CN&dt=t&dt=bd&ie=UTF-8&oe=UTF-8&dj=1&source=icon&q=${encodeURI(options.text)}

Where the apiRoot is https://translate.googleapis.com.

Once you have aquired a key, you are supposed to use another apiRoot: https://translation.googleapis.com.

The URL would look like this: ${this.apiRoot}/language/translate/v2?key=${key}&q=${encodeURI(options.text)}&source=${from}&target=${to}&alt=json

This would be an easy fix with a switch case whether a key is supplied.

One caveat is that the response looks vastly different between the two endpoints. The free endpoints gives a lot of contextual information, while the new key-guarded one is pretty bare bones. It’s trivial to extract the translations in a similar way, but I’m not sure how (or if) the contextual is used.

I’ll show a comparison below:

Old/Free: (Hello World from en to fr)

{
    "sentences": 
        [{
            "trans": "Bonjour le monde",
            "orig": "hello world",
            "backend": 10
        }],
    "src": "en",
    "spell": {}
}

New/Key: (Hello World from en to es)

{
  "data": {
    "translations": [
      {
        "translatedText": "Hola Mundo"
      }
    ]
  }
}

What are your thoughts about this? Any implications I’m not thinking about? I’d be down for submitting my local fix as a PR (I just patched the extension.js file to test it out) for further discussion.

[ziofat]

@bratzie Great job on this. Hoping @antfu will merge it soon.

[bratzie]

I’m also gettin 400 error when using my api key.

Failed to translate "We will issue your payout on this date." (en-GB->fr-FR)
🐛 ERROR: Error: Request failed with status code 400
Error: Request failed with status code 400
	at createError (/Users/petergombos/.vscode/extensions/lokalise.i18n-ally-2.5.7/dist/extension.js:7847:15)
	at settle (/Users/petergombos/.vscode/extensions/lokalise.i18n-ally-2.5.7/dist/extension.js:8122:12)
	at IncomingMessage.handleStreamEnd (/Users/petergombos/.vscode/extensions/lokalise.i18n-ally-2.5.7/dist/extension.js:7197:11)
	at IncomingMessage.emit (events.js:327:22)
	at endReadableNT (_stream_readable.js:1220:12)

Works fine without a key though

Yep, it’s expected. The “free” endpoint supports a wider variety of locales (such as en-GB and fr-FR). The key protected one supports the formats from this link: https://cloud.google.com/translate/docs/languages. I’ll submit a PR to only use the first two letters when using that endpoint which should make the experience better for most. 😃