Dashboard de Produtividade Pessoal T1E11: BugCT1-4 Alterando para login com Google Identity Services (GIS)

INTRODUÇÃO

Post anterior: Dashboard de Produtividade Pessoal T1E10: BugCT1-4 Erro ao inicializar GAPI

O objetivo deste post é apresentar um prompt para o Gemini 2.5 Pro (Prévia), no qual é feito um pedido de alteração no App Dashboard de Produtividade Pessoal (D2P), para que o login seja feito usando a nova biblioteca Google Identidy Services (GIS).

Prompt para o Gemini 2.5 Pro (Prévia)

Gemini, peço que você mesmo faça as mudanças necessárias para atualizar o sistema de autenticação do "App Dashboard de Produtividade Pessoal (D2P)", a fim de utilizar a nova biblioteca Google Identity Services (GIS), pois tenho pouco conhecimento da tecnologia. Segue abaixo o link do D2P no Google Drive.

Resposta do Gemini 2.5 Pro (Prévia)

Com certeza! Embora eu não possa acessar diretamente o link do Google Drive para modificar os arquivos por questões de segurança, posso fornecer a você o código exato e um guia passo a passo detalhado para que você mesmo possa fazer as alterações.

É um processo mais simples do que parece. Você basicamente substituirá o código antigo pelo novo.

---

Guia de Atualização para o Google Identity Services (GIS)

Siga estes passos para atualizar o sistema de autenticação do seu "App Dashboard de Produtividade Pessoal (D2P)".

Passo 1: Atualizar o Script no seu arquivo index.html

1. Remova a linha antiga: Procure no seu arquivo HTML principal a linha que carrega a biblioteca antiga do Google e a apague. Ela será parecida com uma destas:

   HTML

   <script src="https://apis.google.com/js/api.js"></script>
   

   ou

   HTML

   <script src="https://apis.google.com/js/platform.js" async defer></script>
   

2. Adicione a nova linha: Agora, adicione o script da nova biblioteca do Google Identity Services (GIS). É recomendado colocá-lo antes do fechamento da tag </body>.

   HTML

   <script src="https://accounts.google.com/gsi/client" async defer></script>
   

Passo 2: Atualizar o HTML do Botão de Login

O novo método do Google renderiza o botão de forma diferente.

1. Remova o botão antigo: Encontre e apague o div do botão de login antigo. Ele se parece com isto:

   HTML

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

2. Adicione os novos divs: No lugar onde o botão de login deve aparecer, adicione o seguinte código HTML. Ele irá configurar e renderizar o novo botão "Fazer login com o Google".

   HTML

   <div id="g_id_onload"
        data-client_id="SEU_CLIENT_ID.apps.googleusercontent.com"
        data-callback="handleCredentialResponse"
   

data-auto_prompt="false">

</div>

<div class="g_id_signin"

data-type="standard"

data-size="large"

data-theme="outline"1

data-text="sign_in_with"

data-shape="rectangular"

data-logo_alignment="left">2

</div>

```

**Atenção:** Substitua `SEU_CLIENT_ID.apps.googleusercontent.com` pelo seu **Client ID** real, que você pode encontrar no seu [Google Cloud Console](https://console.cloud.google.com/apis/credentials).

Passo 3: Atualizar o Código JavaScript

Esta é a mudança principal. Você substituirá a lógica de inicialização e a função de callback.

1. Remova o código antigo: Apague as funções JavaScript relacionadas à inicialização do gapi.auth2 e o callback onSignIn. O código a ser removido será parecido com este:

   JavaScript

   /* * REMOVA TODO ESTE BLOCO DE CÓDIGO ANTIGO
    */
   function start() {
     gapi.load('auth2', function() {
       auth2 = gapi.auth2.init({
         client_id: 'SEU_CLIENT_ID.apps.googleusercontent.com',
         scope: 'email'
       });
     });
   

}

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId());
  console.log('Name: ' + profile.getName());
  // ... etc
}

// A chamada para start() também deve ser removida
// start(); 
```

2. Adicione a nova função de callback: Adicione o seguinte código JavaScript ao seu projeto. Esta função, handleCredentialResponse, será chamada automaticamente após o usuário fazer login com sucesso.

   JavaScript

   /* * ADICIONE ESTE NOVO BLOCO DE CÓDIGO
    */
   function handleCredentialResponse(response) {
     // A resposta do Google é um token JWT (JSON Web Token).
     // Precisamos decodificá-lo para ver as informações do usuário.
     const responsePayload = jwt_decode(response.credential);
   
     console.log("Login bem-sucedido!");
     console.log("ID: " + responsePayload.sub);
     console.log('Nome Completo: ' + responsePayload.name);
     console.log('E-mail: ' + responsePayload.email);
     console.log("URL da Imagem: " + responsePayload.picture);
   
     // =================================================================
     // AQUI você deve adicionar a lógica que acontece após o login.
     // Por exemplo, esconder o botão de login, mostrar o dashboard,
     // salvar os dados do usuário, etc.
     // =================================================================
   }
   
   /**
    * Função auxiliar para decodificar o token JWT retornado pelo Google.
    * @param {string} token O token JWT.
    * @returns {object} O payload do token como um objeto JSON.
   

*/

function jwt_decode(token) {

var base64Url = token.split('.')[1];

var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');

var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c)3 {

return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);

}).join(''));

    return JSON.parse(jsonPayload);
}
```

Passo 4: Atualizar a Função de Logout (Opcional)

Se você tiver uma função de signOut, ela também precisa ser atualizada.

1. Remova a função antiga:

   JavaScript

   /* * REMOVA ESTA FUNÇÃO ANTIGA
    */
   function signOut() {
     var auth2 = gapi.auth2.getAuthInstance();
     auth2.signOut().then(function () {
       console.log('User signed out.');
     });
   }
   

2. Adicione a nova lógica (se necessário): O novo sistema é mais focado em gerenciar o estado do login no lado do seu aplicativo. Para fazer o "logout", você pode simplesmente limpar os dados do usuário que você salvou e atualizar a interface. O Google oferece uma função para impedir o login automático na próxima visita:

   JavaScript

   /* * ADICIONE ESTA NOVA LÓGICA DE LOGOUT
    */
   function signOut() {
     // Informa ao Google para não selecionar automaticamente a conta na próxima vez.
     google.accounts.id.disableAutoSelect();
   
     console.log('Logout realizado.');
   
     // =================================================================
     // AQUI você deve adicionar a lógica para limpar a sessão do seu app
     // e atualizar a interface (ex: mostrar o botão de login novamente).
     // Por exemplo: window.location.reload();
     // =================================================================
   }
   

---

Ao concluir estes passos, o erro idpiframe_initialization_failed será resolvido e seu aplicativo estará utilizando a mais moderna e segura biblioteca de autenticação do Google.

CONCLUSÃO

No próximo post veremos o resultado desta mudança no App Dashboard de Produtividade Pessoal, para login usando Google Identity Services (GIS).

Próximo post: Dashboard de Produtividade Pessoal T1E12: BugCT1-4 Código pronto para login com Google Identity Services (GIS)