Como criar um sistema de login usando Google com Javascript e PHP

Baixar arquivos

Neste tutorial de desenvolvimento web você vai aprender a configurar o sistema autenticação do Google One Tap para criar um sistema de login em suas aplicações usando Javascript e PHP.

Assista o vídeo e aprenda.

Para criar um sistema de login usando Google One Tap com Javascript, você pode seguir os seguintes passos:

1. Crie uma conta de desenvolvedor no Console do Google e adicione um projeto.

2. Adicione o Google One Tap ao seu projeto. Para fazer isso, você precisará habilitar a API do Google One Tap e criar um ID de cliente OAuth.

3. Adicione o script do Google One Tap ao seu site. Você pode fazer isso adicionando a seguinte linha de código ao seu HTML:

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

4. Crie um botão de login no seu site. Você pode usar o seguinte código HTML para criar um botão:

<button id="login-button">Fazer login com o Google</button>Copiar

5. Adicione o código JavaScript para inicializar o Google One Tap e lidar com o retorno de chamada do login. O código deve ser semelhante ao seguinte:

// Inicialize o Google One Tap
google.accounts.id.initialize({
  client_id: 'SEU_ID_DE_CLIENTE_OAUTH',
  callback: handleCredentialResponse
});
// Manipula a resposta de credenciais
function handleCredentialResponse(response) {
  if (response.credential) {
    // As credenciais do usuário estão disponíveis em response.credential
    console.log('Credenciais do usuário:', response.credential);
  } else {
    // O usuário não fez login
    console.log('O usuário não fez login.');
  }
}
// Adicione um ouvinte de eventos ao botão de login
document.getElementById('login-button').addEventListener('click', function() {
  // Solicite as credenciais do usuário
  google.accounts.id.prompt(notification => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // O usuário não visualizou ou pulou a notificação
      console.log('O usuário não visualizou ou pulou a notificação.');
    } else {
      // A notificação foi exibida e o usuário interagiu com ela
      console.log('O usuário interagiu com a notificação.');
    }
  });
});

Copiar

Com esses passos, você deve ter um sistema de login funcional usando Google One Tap com Javascript. Lembre-se de substituir SEU_ID_DE_CLIENTE_OAUTH pelo ID de cliente OAuth que você criou no Console do Google.