1

No código sugerido pelo Google, no seguinte link: https://developers.google.com/identity/sign-in/web

O botão gerado é similar a imagem a seguir. Mas, caso eu deseje alterar os textos que são exibidos (de acordo com o idioma do usuário ou idioma regional), qual seria o caminho mais direto e que fique explicito no código, mas, usando os padrões já existentes e fornecidos pela própria API, a exemplo do data-theme="dark"?

inserir a descrição da imagem aqui

Gerado pelo código a seguir:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

1 Resposta 1

1

Fácil meu amigo, ja pensou em usar css para isso?

.g-signin2:before{
  content: ' meu texto ';
  color: red;  
}
<div class="g-signin2" data-onsuccess="onSignIn">google</div>

No exemplo eu criei um psdeudo elemento, usando o before que significa antes, mas com after você consegue escrever depois. Mas se quiser substituir todo o texto, você pode usar javascript

A Api do google realmente pensou em algo nesse sentido, usando javascript você pode ver este exemplo retirado do site da google

<html>
<head>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>

Voce tambem pode especificar as configurações do botão do google login definindo data attributes, por exemplo:

<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">

Neste link você consegue conferir os atribures configuraveis do google sigin

inserir a descrição da imagem aqui

ps: tente text ao inves de texto nos attributos de configuração.

Para internacionalizar o texto, recomendo utilizar a biblioteca i18n

5
  • Mas, quando esta logado o texto é outro. Vou ter que testar para alterar a propriedade? Penso que eles devem ter previsto isso e teriam uma solução que não precise ajustar por css, ou js Commented 12/12/2019 às 14:04
  • vou complementar minha resposta Commented 12/12/2019 às 14:11
  • obrigado pela ajuda. Mais um detalhe,o que você acha mais interessante, criar diferentes classes para os diferentes textos ou alterar o texto via javascript? Commented 12/12/2019 às 15:06
  • via javascript nessa lib que indiquei voce usa uma variavel e ele mesmo se encarrega de colocar o valor baseado na reagiao da pessoa Commented 12/12/2019 às 15:28
  • Ah legal. Passo o texto que o google manda para a biblioteca. Perfeito, valeu! Commented 12/12/2019 às 15:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .