Implementando um serviço de Login com Google API

Então pessoal,

Neste ponto vamos fugir um pouco do assunto de Java, e vamos partir para seu primo funcional, JavaScript.

Aqui estarei mostrando como faremos para implementar um sistema de Login do Google +. Uma vez que é muito parecido com a implementação de OAuth2.0 usado na implementação de Login usando a API do Facebook.

GITHUB: https://github.com/leonardox/portal

Entenda o seguinte:

Há várias opções para gerenciar o fluxo de login:

• Fluxo do cliente, que usa JavaScript e HTML. Essa abordagem é a mais fácil de ser implementada, mas é limitada, visto que você só pode fazer uma chamada de API do Google enquanto o usuário está ativo em seu site.
• Fluxo do servidor, o que você usa quando seu servidor precisa acessar as APIs do Google em nome do usuário, como quando o usuário está off-line. Essa abordagem exige que seja transmitido um código de autorização único de seu cliente para seu servidor que é usado para adquirir um acesso e tokens de atualização para seu servidor.

Então,

Para adicionar o botão de login do Google+ em sua página, você precisa:

1. Criar um ID do cliente e segredo do cliente.
2. Incluir o script do Google+ em sua página.
3. Adicionar o botão em sua página.
4. Gerenciar o login com um retorno de chamada JavaScript.

1: criar um ID do cliente e segredo do cliente

Para criar um ID do cliente e segredo do cliente, crie um projeto do Console de APIs do Google, ative a API do Google+, crie um ID do cliente OAuth 2.0 e registre suas origens do JavaScript:

1. No Console de APIs do Google, selecione Criar no menu suspenso à esquerda e digite o nome do projeto (como "Exemplo").
2. No painel Serviços, ative a API do Google+ e qualquer outra API que seu aplicativo exija.
3. No painel Acesso à API, clique em Criar um ID do cliente OAuth 2.0.
   1. No campo Nome do produto, digite um nome para seu aplicativo (como "Exemplo"), e clique em Avançar. É opcional fornecer o logotipo do produto.
   2. Na seção Configurações do ID do cliente, execute as seguintes etapas:
      • Selecione Aplicativo da Web para o tipo de aplicativo.
      • Clique no link Mais opções.
      • No campo URIs de redirecionamento autorizadas, exclua a URI de exemplo.
      • No campo Origens autorizadas do JavaScript , acrescente o primeiro dos URLs abaixo para desenvolvimento. Os dois últimos são exemplos de URLs de produção.

        http://localhost:8080
        http://mysite.example.com
        https://mysite.example.com

      • Clique no botão Criar ID do cliente.
4. No painel Acesso à API, localize a seção ID do cliente para aplicativo da Web e anote ou copie o ID do cliente e o Segredo do cliente que depois serão necessários para executar o exemplo

2: incluir o script do Google+ em sua página

Antes de sua tag </body>, inclua o seguinte script:

    <!-- Coloque esse JavaScript assíncrono antes de sua tag </body> -->
    <script type="text/javascript">
      (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client:plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
    </script>

O exemplo acima segue a prática recomendada do uso do carregamento assíncrono do arquivo JavaScript para obter melhor desempenho.

Em seguida, adicione o botão de login em seu aplicativo.

 3: adicionar um botão em sua página

Observe que abaixo do Script do google coloquei outras funcões que irão tratar corretamente o login com o google,
Estas funções farão o tratamento, quando o servidor do google retornar o authCode.

Enfim, insira um botão para q o usuário o clique.

Escolha um lugar em sua página onde você quer que o botão seja exibido e insira a seguinte marcação HTML. Você deve substituir o CLIENT_IDcom o valor do ID do cliente que você criou anteriormente:

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>