MENU Mário Valney

Como colocar o login do Google no meu site?

API - Google 11 de junho de 2015 63 comentários
API - Google
  • 11 - 06 - 15
  •        
  • 63

E ae pessoal, tudo bem?

Hoje vamos aprender como colocar o login do Google no nosso site usando apenas Javascript.
Isso! Será client-side <3

Por que usar isso?

Bem… esse é o primeiro passo para começar a usar as APIs do Google que necessitam de autenticação.

O que é OAuth 2.0?

As APIs do Google utilizam o protocolo OAuth 2.0 para autenticação/autorização do usuário. E isso serve tanto para aplicações no servidor (server side), quanto para, como é o nosso caso, aplicações client-side.

Como funciona a autenticação?

A primeira coisa a se fazer é obter as credenciais da sua aplicação/projeto no Console do Google para Desenvolvedores.

Quando seu usuário efetuar o login, sua aplicação irá solicitar um token de acesso. Você usará esse token nas chamadas da API que deseja usar.

Criando um projeto no Google Developers Console

Precisaremos das credenciais de um projeto (provavelmente você já vai ter um projeto, visto que está querendo usar uma API do Google, mas vamos ensinar a criar do zero).

  1. Visite o Google Developers Console.
  2. Selecione um projeto ou crie um:
    • No campo Project name escreva o nome do seu projeto.
    • Em Project ID use o ID gerado ou tente um outro ID (esse ID deve ser único no mundo).
    • Clique em Create e espere o projeto ser criado.
    • Clique no nome do projeto que você acabou de criar e já pode começar a editá-lo.
  3. Na sidebar em APIs & auth escolha “Consent Screen” ou “Tela de Consentimento”:
    • Escolha um e-mail em Email Address e especifique um Product Name:
      Tela de Consentimento
  4. Clique em Create a new Client ID e na caixa de diálogo que abrir:
    • Escolha o tipo da aplicação em Application type. No nosso exemplo, será Web application.
    • Em Authorized JavaScript origins devemos especificar quais domínios podem fazer esse request, no nosso caso será http://localhost.
    • Não deixe nada em Authorized redirect URI e clique em Create Client ID
      Criando ID do Cliente
  5. Agora você já tem os dados necessários.

Nota: Use um único projeto para todas as plataformas, OK? Se você tiver uma aplicação que tenha a versão Android, iOS e Web, por exemplo, basta criar diferentes Client ID para cada um, mas tudo dentro de um único projeto.

Criando nossa página

Crie uma página HTML e insira o código abaixo:
só não repara no código… fiz o mais simples possível :P

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="SEU_ID_DO_CLIENTE">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,600,700,400);

      body {
        margin: 0;
        padding: 10%;
        text-align: center;
        font-family: 'Open Sans';
        background: #F8F8F8;
      }

      .user {
          padding: 50px 20px;
          background: #FFFFFF;
          border-radius: 2px;
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          width: 330px;
          display: block;
          margin: 0 auto;
      }

      #user-photo {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: block;
        margin: 0 auto 10px auto;
      }

      h1 {
        display: block;
        margin: 0 auto;
        text-align: center;
        font-weight: lighter;
      }

      #user-name {
        color: #0066AA;
        font-weight: bold;
      }

      #user-email {
        display: block;
        margin: 0 auto;
        text-align: center;
        color: #0066AA;
      }

      .g-signin2,
      .g-signin2 .abcRioButton {
        display: block;
        margin: 20px auto 0 auto;
        text-align: center;
      }
    </style>
  </head>   
  <body>
    <div class="user">
      <img id="user-photo" src="https://mariovalney.com/wp-content/uploads/2015/06/user-anonimo.jpg">
      <h1>Olá, <span id="user-name">visitante</span>!</h1>
      <p id="user-email"></p>
    </div>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" data-width="370" data-height="50" data-longtitle="true" data-lang="pt-BR"></div>

    <script>
      function onSignIn(response) {
            // Conseguindo as informações do seu usuário:
            var perfil = response.getBasicProfile();

            // Conseguindo o ID do Usuário
            var userID = perfil.getId();

            // Conseguindo o Nome do Usuário
            var userName = perfil.getName();

            // Conseguindo o E-mail do Usuário
            var userEmail = perfil.getEmail();

            // Conseguindo a URL da Foto do Perfil
            var userPicture = perfil.getImageUrl();

            document.getElementById('user-photo').src = userPicture;
            document.getElementById('user-name').innerText = userName;
            document.getElementById('user-email').innerText = userEmail;

            // Recebendo o TOKEN que você usará nas demais requisições à API:
            var LoR = response.getAuthResponse().id_token;
            console.log("~ le Tolkien: " + LoR);
        };
    </script>
  </body>
</html>

Não vai esquecer de colocar o seu Client ID, hein…

Você também pode ver funcionando.

Só precisa clicar no botão e pronto: ao efetuar o login, será executada a função onSignIn, que recebe um parâmetro com o qual podemos executar o método getBasicProfile(), conforme a documentação.

Se você abrir o console (F12), vai ver que imprimimos o Token, além disso, sua foto, seu nome e o seu e-mail devem ter aparecido na tela.

Conclusão

É isso pessoal.
Mais informações na documentação oficial.

Como podem ver é extremamente simples a implementação, porem é a base para iniciarmos o desenvolvimento de uma aplicação que use as APIs client-side do Google.

Espero que tenham gostado, deixem seus comentários e compartilhem para espalhar a palavra.
Abraços e até a próxima!

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



    Não se preocupe: não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


    Deixe seu comentário! Dúvida sobre como comentar
    ou vai postar código? Leia antes.