MENU It's me: Mário!

Como implementar o botao de singin with google

Como colocar o login do Google no meu site?

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

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="http://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 preoculpe, 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.

  • Victor Hugo

    Olá! Estou seguindo seus passos mas após o login eu não consigo redirecionar para outra página. Você sabe como proceder?

    • Olá.
      Esse exemplo não cita o redirecionamento ou navegação após conseguir conectar com a conta.
      Aconselho dar uma olhada completa na documentação para uma aplicação mais complexa: https://developers.google.com/identity/sign-in/web/

      • Fernando Jungblut

        ola, estou tentando fazer o redicionamento e nao estou conseguindo por acaso vc pode me dizer onde eu faco isso ? obrigado

        • Olá Fernando.
          Esse login é feito via JavaScript, então a resposta pode ser tratada exatamente com essa linguagem, no caso, a função disparada ao logar.

          Use window.location.href = "http://exemplo.com/redirecionamento";

          • Fernando Jungblut

            Ola, sim depois consegui até consegui fazer ele funcionar somente quando abre o popup

            Preciso ver uma outra coisa, espero muito que vc consiga me ajuda ou talvez montar um tutorial, como eu faço para usar a API para conseguir colocar assinatura de email para cada usuário no gsuite usa do variáveis tipo nome sobre nome é talz, as informações eu já tenho preenchida no usuário. Se poder me ajuda eu agradeço muuuuito. Ou poder me dá uma luz. Vi a documentação e não compreendi muito bem

  • Danilo

    Olá Mario, obrigado pelo exemplo. Estou tentando rodar esse exemplo localmente, mas o botão “Sign in with Google” não aparece.
    Coloquei o meu cliente ID no campo indicado corretamente.
    Sabe o que pode ser?

    • Olá, Danilo!

      Você criou o projeto no Console de Desenvolvedores e preencheu as tags “google-signin-scope” e o “google-signin-client_id”? Dá uma conferida nisso ae :D

      • Danilo

        Olá Mario, obrigado pela resposta.

        Na verdade eu coloquei corretamente o “google-signin-client_id”. A besteira que fiz foi tentar rodar com o protocolo file://, sendo que especificamos http://localhost como origem Javascript autorizada.

        Foi só instalar um servidor web que rodou direitinho.

        Obrigado pelo artigo, é uma boa iniciação para o uso das Google APIs !

  • Fabio Barbieri
    • Olá, Fabio.
      Não tenho certeza se tem como permitir o login de apenas algum domínio.
      Minha sugestão é que você faça essa verificação após o login do Google, ou seja, a pessoa pode fazer o login com o Gmail ou qualquer e-mail Google, mas sua aplicação não continua o fluxo e informa que não pode usar aquele e-mail.

      Abraços

  • Francisco Maciel

    Olá Mário! Excelente tópico!
    Seguindo seus passos consegui obter o botão, e meu site “loga com o google” mas após o login eu não consigo redirecionar para minha página inicial. A página que eu quero que o usuário veja assim que fizer login. Dei uma olhada na documentação e não encontrei a solução. O que você me aconselha ? grato.

    • Francisco, após o login é executada a função onSignIn use ela para redirecionar sua página.

      Abraços

  • Maykon Santos

    OBRIGADO MESMO MÁRIO DEUS CONTINUE ABENÇOANDO VC !!!!!

  • Renato Souza

    Onde configuro o redirecionamento e como protejo minha página para ninguém acessar ela sem fazer login?

    • As formas de evitar o acesso à informação sem o login são muitas. Vejo duas, pelo menos: ou você vai requisitar via JS/Ajax o conteúdo após o login ou vai fazer a autenticação via back-end (pra criar uma Sessão no PHP, por exemplo).

      Sobre redirecionamento, é javascript apenas. O método onSignIn é chamado após o login.

  • João Carlos

    Legal o tuto, Mario.
    Mas tem como pegar o nome e email do user, pois preciso destes dados para armazenar em meu banco de dados ?

    • Tem sim, Carlos.
      Na documentação você vai ver que dentro da função onSignIn você pode usar o método getEmail do getBasicProfile, por exemplo.

      Documentação aqui.

  • Alexandre Galvão Alves

    Não está aparecendo o botão de login, vi nas perguntas vc respondendo uma duvida parecida com a minha sobre preenchimento de scope mas não vi isso no console… na verdade o console não é mais o mesmo dos prints acima, dificultando bastante o entendimento, Pode me ajudar?

    • Olá, Alexandre.

      Tudo bem? Sobre o console ter mudado, foi apenas layout. Se você ler o que está escrito e procurar na tela, vai achar.

      No caso, após criar o projeto, a sidebar ou menu lateral, se não estiver fechado, terá o texto “Visão Geral” e “Credenciais”.

      Em “Visão Geral” você ativa as APIs que quer e em “Credenciais” você pode ir nas várias abas que eu cito: a aba “Credenciais” (segundo print) e a aba “Tela de consentimento” (primeiro print).

      Em “Credenciais” há um botão azul “Criar credenciais” o qual vai abrir uma janela, quando você clicar nele. Selecione “Chave de API” (afinal é isso que buscamos) e depois “Chave de Navegador” (afinal será usado no browser).

      Abraços

      • Alexandre Galvão Alves

        criei a chave de navegador, mas ainda não apareceu o botão

        • Talvez esteja com algum problema no seu código.

          Cole-o num pastebin e posta aqui para eu dar uma olhada quando puder.

  • Alexandre Galvão Alves
    • Então cara… o erro tá aí ( Error: redirect_uri_mismatch ).

      E ele explica: “The JavaScript origin in the request, http://muambalivre.com.br, does not match the ones authorized for the OAuth client. Visit https://console.developers.goo… to update the authorized JavaScript origins.”

      Que traduzindo fica: “A origem do pedido JavaScript, http://muambalivre.com.br, não coincide com uma das [origens] autorizadas para o cliente OAuth. Visite https://console.developers.goo… para atualizar as origens JavaScript.”

      Para resolver, é só ir no console do projeto e autorizar esse domínio.

      • Alexandre Galvão Alves

        eu coloquei o site la sim -> http://imgur.com/gmbWfU2
        ou estou mexendo no local errado?

        • Tu trocou o valor da metatag google-signin-client_id da linha 6?
          Confere se está igual ao do console.
          Além disse, confere se criou um Cliente OAuth

          • Alexandre Galvão Alves

            o valor do content da metatag google-signin-client_id está com o mesmo valor do meu id do cliente no console e tem o site listado na seção de “IDs do cliente OAuth 2.0”

            • Se está com o valor do ID do Cliente (não é só o número, tem o “.apps.googleusercontent.com” também) e o código escrito ali, está tudo certo.

              Então só pode ser algum erro de digitação ou não sei…

              • Alexandre Galvão Alves

                Deu certo, o erro estava acontecendo quando estava tentando la do meu serviço, acredito que bloquearam o uso a oauth ou algo do tipo. Uma ultima coisa seria a seguinte, estou usando a função onSignIn para redirecionar a page como vc disse em outra resposta aí na pagina mas ela está acontecendo assim que a page é carregada e não quando o usuário clica no botão.

                • onSignIn dispara quando aAPI retorna que o usuário está logado.
                  O loggin pode acontecer logo depois do carregamento da página, se o usuário estiver logado (repare que o token é impresso).

                  Então uma alternativa é: criar uma variável e só permitir o fluxo depois do click do botão (altera o valor da variável no evento “click”) ou já considera que se o ser humano entrar loggado ele não precisa fazer o loggin novamente.

  • Daniel NC

    Cara, show de bola! Funciona muito bem! MAS, não estou conseguindo colocar um botão com a mesma classe mas com Logout. Vc manja algo?

    • Olá, Daniel.
      O login do Google não serve para fazer login/logout do seu sistema. O gerenciamento das seções tem que ser criado por você, ou seja, não é seguro usar o token do Google para verificar se o usuário está logado no seu sistema, pois alguém mal intencionado pode tentar burlar isso pelo Front-end.

      O uso mais indicado é só para verificação de autenticidade mesmo, por exemplo, em vez de ter usuário e senha para criar a seção no seu site, você armazena a conta da pessoa, então se ela entrar por esse botão do Google corretamente, é porque ela é ela mesma, aí você cria a seção. O logout seria na sua própria seção.

      É por isso que quando entramos em um site com a conta do Google não saímos do nosso e-mail, por exemplo.

  • Alexandre Galvão Alves

    Tem como colocar uma imagem para startar o login? mechendo apenas no width não consigo deixar o botão responsivo da forma que preciso, ele fica bem diferente dos botões das outras redes sociais que uso uma imagem.. com isso o do google está quebrando a responsividade do meu site, ficando muito estranho. Tem como usar img?

    • A página é sua, então sim.
      Você pode fazer de várias maneiras, já que está montando o front-end:

      – Com o CSS colocar uma imagem de background.
      – Criar o botão como quiser e no evento de Click dele você disparar o Click no botão do Google.

  • Olá, Guilherme.

    Não consegui reproduzir o erro aqui não, mas isso deve acontecer se a API não conseguiu achar a marcação (HTML) devida ou algum problema de carregamento.

  • Alexandre Galvão Alves

    mais uma duvida Mário, o login no meu site pelo pc funciona normalmente… mas se ele for acessado pelo celular ele não faz o login. Meu site n tem ouro dominio ou subdominio movel em que eu possa estar colocando registrando para que seja liberado la, é a mesma url. Acredito que seja outra coisa que ficou sem setar la no console, pode me dar uma luz?

    • Alexandre Galvão Alves

      ???

      • Alexandre, eu respondo os comentários sempre que possível.
        Gostaria muito de poder ficar apenas respondendo comentários e dúvidas tanto aqui no meu site quanto em grupos de desenvolvimento, porém não posso. Então peço que não fique respondendo seus comentários com “???” sob pena de ser marcado como SPAM aqui.

        Obrigado.

    • Alexandre, nos meus testes o meu exemplo funcionou no meu celular sim.
      Para dar uma olhada no que pode estar ocorrendo no seu site, precisaria do link.

      Abraços

      • Alexandre Galvão Alves
        • De primeira, no console afirma que o main.js tá dando 404.

          Mas consegui fazer login pelo computador, emulando um celular.

          No meu Android retornou um erro afirmando que http://www.muambalivre.com.br não combina com uma das origens autorizadas no projeto. Verifica isso ae.

          Abraços

          • Alexandre Galvão Alves

            o main.js eu esqueci de tirar a chamada, vlw por lembrar

            e sobre o site n está autorizado da uma olhada aqui http://pt-br.tinypic.com/view.php?pic=1x3bk&s=9#.V6fFSk0rKUk

            obs: tb testei mudando a chave de api para *.muambalivre.com.br/* como mostra no exemplo la do site

            obs(2): acontece o mesmo problema para fazer login com o facebook

            • Talvez seja algum problema no seu servidor que esteja enviando a URL de forma diferente no header… não sei.

  • Salloni Mercante

    Olá Mário, Tudo bem?

    Segui todos os passos aqui do seu tutorial e tudo parece correto, mas ao clicar no botão, logo após permitir o acessos as informações do perfil e ao e-mail, nada acontece, tudo fica igual e no console, nenhuma informação é mostrada também. O que pode ser?

    • Não sei, Salloni.
      Nenhuma informação de erro foi impressa?
      Tem como colocar online? Se não, cola o código no pastebin e posta aqui.

      Abraços

      • Salloni Mercante

        Oi Mário, não aparecia nenhum erro, aí fui colocar online par te mostrar, e quando fui testar, funcionou, acredito que o problema era algo relacionado a porta, mesmo assim, obrigado pela ajuda e disposição
        abraço

  • Gustavo Madi

    Mário,

    Obrigado pelo post, muito bom, poderia me ajuda:

    Eu fiz um menu do google com css3 ficando assim e coloquei o data-onsuccess=”onSignIn” na div, mas quando clico não acontece nada: Google

    agora se eu colocar apenas assim: apresenta o Login do GMAIL, teria como eu personalizar o meu menu ?

    Obrigado.