CODEWITHSUNDEEP
javascriptangularjstranslationrecaptcha
Knut Holm
Knut Holm

Reputation: 4162

angular-recaptcha: Change language with site language change

I have website which uses three different languages switchable by user. Language switch is done on client side by JavaScript (AngularJS).

I am using reCAPTCHA 2 on my website and need to change language of reCAPTCHA when the user switches languge of website.

I know already that I can force the language by this code when the reCAPTCHA is initialized:

<script src="https://www.google.com/recaptcha/api.js?hl=cs"></script>

However, when you need reloading reCAPTCHA, you use this code and it doesn't take any parameter for custom language:

grecaptcha.reset();

Is it possible to do that without refreshing the page and re-initialization of reCAPTCHA widget with different language?

EDIT

I am using angular-recaptcha to render the widget. This means that:

This is code which renders reCAPTCHA widget:

<div
    vc-recaptcha
    key="'---- YOUR PUBLIC KEY GOES HERE ----'"
></div>

This is the code which insludes reCAPTCHA API into my web:

<script
  src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit&hl=cs"
  async defer
></script>

Upvotes: 8

Views: 6746

Answers (5)

Guna Sekaran
Guna Sekaran

Reputation: 563

How to set ng-recaptcha language on init:

 <re-captcha class="g-recaptcha"
             siteKey="asdfasdfasdfasdfasdasd"
             [(ngModel)]="myRecaptcha"
             name="captcha"
             #recaptcha></re-captcha>

app.module.ts

import {RecaptchaModule ,RECAPTCHA_LANGUAGE} from 'ng-recaptcha';

const getDomainBaseUrl = location.toString();
export const language = baseUrl.toLocaleLowerCase();

...


 providers: [
    ...

    {
      provide: RECAPTCHA_LANGUAGE,
      useValue: language,
    },

  ],

Upvotes: 0

ClaraFrazao
ClaraFrazao

Reputation: 95

I just stumbled on this question. I know it has been asked a while ago but I think the best way to do this is to use the method useLang from the service inside a $watch in the variable lang. So in the html identify the lang we are on:

<div id="g-recaptcha" class="g-recaptcha" vc-recaptcha key="domainkey" lang="$root.lang" on-success="setResponse(response)"></div>

And, if you can, inside the directive just put the $watch on that variable:

scope.$watch('lang', function(){
        if(scope.widgetId!=null){
           vcRecaptcha.useLang(scope.widgetId,scope.lang);
        }
});

Upvotes: 0

lilogzki
lilogzki

Reputation: 11

You can simply just add the value in "lang" directive.

<div vc-recaptcha key="publicKey" lang="en"></div>

Upvotes: 1

Tarmo
Tarmo

Reputation: 1276

I think this is a duplicate question. Please see one proposed solution here:

Change ReCaptcha language OnClick

To summarize:

It is not possible to do set recaptcha language through javascript directly at the moment. As you stated, it is however possible using the parameter 'hl' during script loading.

If you need to change the language of your application dynamically without reloading the page, you can do this by removing the recaptcha script link from the head section and instead, loading it directly with a call from javascript. When your user changes the language by clicking a button, you can now reload recaptcha with the new language by calling the load function again.

Upvotes: 1

Buzinas
Buzinas

Reputation: 11725

You can simply empty the div.g-recaptcha and load the script again (programmaticaly).

The function below should do the trick:

function changeRecaptchaLanguage(language) {
  document.querySelector('.g-recaptcha').innerHTML = '';

  var script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?hl=' + language;
  script.async = true;
  script.defer = true;
  document.querySelector('head').appendChild(script);
}

Take a look at the example in the snippet below: 

function changeRecaptchaLanguage(language) {
  document.querySelector('.g-recaptcha').innerHTML = '';
  
  var script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?hl=' + language;
  script.async = true;
  script.defer = true;
  document.querySelector('head').appendChild(script);
}

var curr = 'en';

changeRecaptchaLanguage(curr);

document.querySelector('button').addEventListener('click', function() {
  curr = curr === 'en' ? 'pt-BR' : 'en';
  changeRecaptchaLanguage(curr);
});
<div>Other stuff</div>
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<button>Change language</button>

Upvotes: 10

Related Questions