Fábrica de Código

Criando um Projeto e um Client id no Google Developer Console

Antes de integrar seu app com qualquer produto do Google é necessário criar um projeto e um client ID no Google Developer Console.

Para criar um projeto, basta seguir os passos abaixo

1 – Acessar a página do Google Developer Console

2 – Selecione ou crie um novo projeto clicando no botão “Criar projeto”

Criando um projeto no Google console


Nota: Use o mesmo projeto para todas as versões do seu aplicativo, seja ele Web, Android, IOS. Cada um com um Client ID diferente.

3 – Na tela que abrir, informe o nome do projeto e clique em “Criar”.

Criando projeto no google Console

4 – No menu clique em “Gerenciador de API”

Menu do Google

5 – Em seguida clique em “Credenciais”

Gerenciando as credenciais

6 – Clique em “Create credentials” e selecione a opção “ID do cliente OAuth”

Criando ID do cliente OAuth

7 – Na nova tela que abrir clique em “Configurar tela de consentimento”, em seguida escolha um e-mail e informe o nome do produto e clique em “Salvar”.

8 – Na próxima tela informe o tipo de aplicativo “Aplicativo da Web”, informe um nome e as origens de JavaScript autorizadas e clique em “Criar”

a – Você pode informar varias origens de javascript. Essas origens habilitam seu aplicativo para funcionar com diferentes endereços.
b – No nosso tutorial vamos adicionar a URL http://localhost:8080 como pode ser visto na imagem abaixo

Criando chave do aplicativo web

Após seguir todos esse passos o Cliente ID é criado e com isso o acesso ao Google API’s pelo seu app está habilitado.

Clientt ID criado

Adicionado o botão de login ao seu web app

Exemplo 1

Nesse exemplos criamos o botão que recomentado pelo Google.

Exemplo 1

Os arquivos html e javascript abaixo, produzem o exemplo acima.

Arquivo html

<html lang="pt-br">
<head>
  <!DOCTYPE html>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--
    Seu Google client ID
    Esse client ID foi criado no passo anterior
  -->
  <meta name="google-signin-client_id" content="783017677176-jl5qbms08409ts13boc6i7i8bodr44gt.apps.googleusercontent.com">

  <title>Google authentication - Exemplo 1</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
  <div class="container body-content">
    <div class="box-login">
      <h2>Login</h2>

      <!-- html do botão -->
      <div id="meu-botao"></div>

      <hr/>
      <a href="javascript:void(0);" onclick="signOut();">Sign out</a>
    </div>
    <hr />
    <footer>
      <p>&copy; Fábrica de Código</p>
    </footer>
  </div>

  <script src="scripts/example1.js"></script>

  <!--Google Platform Library-->
  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>

  <!--JQuery e Bootstrap - Não são obrigatórios para ao autenticação -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Arquivo javascript

/**
  Renderiza o botão de login na tela
*/
function renderButton() {
    gapi.signin2.render('meu-botao', {
        'scope': 'email profile https://www.googleapis.com/auth/plus.login', // solicitando acesso ao profile e ao e-mail do usuário
        'width': 250,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
    });
}

/**
  Função executada quando o login é efetuado com sucesso
*/
function onSuccess(googleUser) {
    // Recuperando o profile do usuário
    var profile = googleUser.getBasicProfile();
    console.log("ID: " + profile.getId()); // Don't send this directly to your server!
    console.log("Name: " + profile.getName());
    console.log("Image URL: " + profile.getImageUrl());
    console.log("Email: " + profile.getEmail());

    // Recuperando o token do usuario. Essa informação você necessita passar para seu backend
    var id_token = googleUser.getAuthResponse().id_token;
    console.log("ID Token: " + id_token);
}

/**
  Função executada quando ocorrer falha no logn
*/
function onFailure(error) {
    console.log(error);
}

/**
  Função de deslogar o usuário
*/
function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        console.log('User signed out.');
    });
}

Exemplo 2

Você também pode criar um botão para adaptar ao layout do seu web app, mas para isso você deve seguir os guidelines do Google e usar as cores e os ícones apropriados.

Exemplo 2

O html, javascript e css abaixo produzem o exemplo acima.

Arquivo html

<html lang="pt-br">
<head>
  <!DOCTYPE html>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google authentication - Exemplo 2</title>
  <link rel="stylesheet" href="css/style.css">

  <!-- Fonte Roboto do Google -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
  <div class="container body-content">
    <div class="box-login">
      <h2>Login</h2>

      <!-- Código html do botão de login -->
      <div id="gSignInWrapper">
        <div id="customBtn" class="customGPlusSignIn">
          <span class="icon"></span>
          <span class="buttonText">Logar com o Google</span>
        </div>
      </div>
      <div id="name"></div>

      <hr/>
      <a href="javascript:void(0);" onclick="signOut();">Sign out</a>
    </div>

    <hr />
    <footer>
      <p>&copy; Fábrica de Código</p>
    </footer>
  </div>

  <script src="scripts/example2.js"></script>

  <!-- Google api -->
  <script src="https://apis.google.com/js/api:client.js"></script>

  <!--JQuery e Bootstrap - Não são obrigatórios para ao autenticação -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <!-- função para iniciar o app -->
  <script>startApp();</script>
</body>
</html>

Arquivo javascript

/**
  Função para iniciar o app
*/
var startApp = function() {
  gapi.load('auth2', function(){
    auth2 = gapi.auth2.init({
      //nesse exemplo o client id também pode ser informado pela meta tag "google-signin-client_id"
      //caso ele não seja informado aqui
      client_id: '783017677176-jl5qbms08409ts13boc6i7i8bodr44gt.apps.googleusercontent.com',
      cookiepolicy: 'single_host_origin',
      scope: 'profile email' // solicitando acesso ao profile e ao e-mail do usuário
    });
    auth2.attachClickHandler(document.getElementById('customBtn'), {}, onSuccess, onFailure);
  });
};

/**
  Função executada quando o login é efetuado com sucesso
*/
function onSuccess(googleUser) {
    // Recuperando o profile do usuário
    var profile = googleUser.getBasicProfile();
    console.log("ID: " + profile.getId()); // Don't send this directly to your server!
    console.log("Name: " + profile.getName());
    console.log("Image URL: " + profile.getImageUrl());
    console.log("Email: " + profile.getEmail());

    // Recuperando o token do usuario. Essa informação você necessita passar para seu backend
    var id_token = googleUser.getAuthResponse().id_token;
    console.log("ID Token: " + id_token);
}
/**
  Função executada quando ocorrer falha no logn
*/
function onFailure(error) {
    console.log(error);
}

/**
  Função de deslogar o usuario
*/
function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        console.log('User signed out.');
    });
}

Arquivo css

#customBtn {
  display: inline-block;
  background: #4285f4;
  color: white;
  width: 250px;
  border-radius: 5px;
  white-space: nowrap;
}
#customBtn:hover {
  cursor: pointer;
}
span.label {
  font-weight: bold;
}
span.icon {
  background: url('https://google-developers.appspot.com/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 42px;
  border-right: #2265d4 1px solid;
}
span.buttonText {
  display: inline-block;
  vertical-align: middle;
  padding-left: 42px;
  padding-right: 42px;
  font-size: 14px;
  font-weight: bold;
  /* Use the Roboto font that is loaded in the <head> */
  font-family: 'Roboto', sans-serif;
}

Integrando os dados no backend

Depois de recuperar os dados do usuário via javascript, você pode mandar essas informações para o seu servidor e salvar no banco de dados.

A única informação que você precisa mandar para o seu servidor o o “token_id”, com ele você consegue recuperar todas as informações do usuário. Veja o exemplo abaixo.

function onSuccess(googleUser) {
    // Recuperando o token do usuario.
    var id_token = googleUser.getAuthResponse().id_token;

    // post com jQuery para enviar o token to usuário para o servidor
    $.post( "http://www.seuservidor.com.br/token",
      function(id_token) {
        console.log('sucesso')
      });
}

Para validar o token no seu servidor, você pode fazer um GET no servidor do google passando como parâmetro o “token_id”.

https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=TOKEN DO USUÁRIO

Como retorno você vai obter o json abaixo:

{
 "iss": "https://accounts.google.com",
 "sub": "110169484474386276334",
 "azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "iat": "1433978353",
 "exp": "1433981953",
 "email": "emaildousuario@gmail.com",
 "email_verified": "true",
 "name" : "Nome do usuário",
 "picture": "https://lh4.googleusercontent.com/-kYgzyAWpZzJ/ABCDEFGHI/AAAJKLMNOP/tIXL9Ir44LE/s99-c/photo.jpg",
 "given_name": "Nome",
 "family_name": "do Usuário",
 "locale": "pt-br"
}

Conclusão

É extremamente simples adicionar a autenticação do Google com seu web app, a documentação do Google tambem é muito completa e possui varios exemplos.

Caso você queira ver a documentação do google clique aqui

Para fazer o download do código fonte de exemplo acesse nosso repositório no GItHub