O Social Login permite que usuários acessem sua aplicação ou site sem a necessidade de fazer um cadastro prévio, utilizando o login e senha de alguma rede social.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

1. Possuir uma conta Google.

2. Projeto com a opção Login por Redes Sociais habilitada. Caso haja dúvidas de como criar esse tipo de projeto acesse o link Login por Redes Sociais.

Passos

Os passos abaixo pressupõe que o usuário já tenha feito a leitura da documentação Login por redes sociais.

Criando projeto no Google APIs

Acesse a página Google APIs console, faça o login com seu usuário, e em seguida, clique no botão Criar Projeto (Figura 1) para iniciar o preenchimento dos dados necessários para cadastrar seu projeto.

Figura 1 - Iniciando a configuração do projeto

Precisamos aceitar os termos e condições do Google (Figura 1.1).

Figura 1.1 - Aceitando os termos e condições

Informe o nome do projeto e após isso, em Local a sua organização desejada, após isso clique em Criar (figura 1.2).

Figura 1.2 - Informando o nome do projeto

Tela de consentimento OAuth

Após a criação do projeto, você vai ser direcionado ao painel principal, após isso, clique em Tela de consentimento OAuth em APIs e serviços, selecione o tipo de usuário desejado e clique em Criar (Figura 2).

Figura 2 - Selecionando o tipo de usuário

Você será direcionado para uma área onde precisará preencher os dados solicitados que serão exibidos na tela de consentimento aos usuários finais, você informará quem você é e como entrar em contato, precisará preencher os campos que possuírem um " * " pois eles são obrigatórios.

Tela de consentimento OAuth: Quando você usa o OAuth 2.0 para autorização, seu app solicita autorizações para um ou mais escopos de acesso de uma Conta do Google. O Google exibe uma tela de consentimento para o usuário que inclui um resumo do seu projeto e das políticas dele, além do escopo de acesso solicitado (Figura 2.1).

Figura 2.1 - Preenchimento Tela de consentimento OAuth

1. Informações do app:
   • Preencherá o nome do seu aplicativo que irá pedir as permissões;
   • E-mail para suporte;
   • Selecionará seu logo.

2. Domínio do app: 

   • Preencherá com um link que levará os usuários para a página inicial do aplicativo;
   • Um link onde levará os usuários a ler a Política de Privacidade do aplicativo;
   • Um link onde levará para seus Termos de Serviço do aplicativo.
3. Domínios autorizados:
   • Área onde poderá adicionar um domínio personalizado
4. Dados de contato do desenvolvedor: 
   • Seu endereço de e-mail, o Google usa esses endereços de e-mail para notificar você sobre todas as alterações no projeto.

Escopos: são descritas as permissões que você solicita que os usuários autorizem para o app. Com elas, o projeto tem acesso a tipos específicos de dados privados do usuário na Conta do Google (Figura 2.2).

Figura 2.2 - Preenchimento Escopos

1. Escopos não confidenciais: Os escopos não confidenciais solicitam acesso a dados públicos dos usuários.
2. Escopos confidenciais: Os escopos confidenciais solicitam acesso a dados particulares dos usuários.
3. Escopos restritos: Os escopos restritos solicitam acesso a dados altamente confidenciais dos usuários.

Usuários de teste: Área destinada a adicionar usuários de teste à aplicação. Enquanto o status de publicação mostrar a opção "Testando", apenas os usuários de teste conseguirão acessar o aplicativo. O limite de usuários permitidos antes da verificação do app é de 100, contabilizado durante todo o ciclo de vida do app (Figura 2.3). 

Figura 2.3 - Cadastro Usuário Teste

Resumo: Mostra o resumo dos dados que foram preenchidos anteriormente em outros tópicos (Figura 2.4).

Figura 2.4 - Resumo das informações preenchidas

Coletar URI do login social do projeto no Cronapp

Se quisermos testar o login social durante o desenvolvimento da nossa aplicação, precisamos informar a URI temporária gerada pelo Cronapp para o seu projeto entre os endereços autorizados na conta Google. Para descobrirmos a URL gerada pelo Cronapp, basta rodar a aplicação e copiar a URL no endereço no browser, como na Figura 3.

Figura 3 - URL de teste no Cronapp

A URI que devemos autorizar será: "URL+/signin/NomeDaRedeSocial".

O endereço que devemos informar ao Google (usando o exemplo da Figura 5) seria: https://app-30-134-10658.ide.cronapp.io/signin/google

Adicionar a URI no projeto Google

Precisamos acessar o Google Cloud Platform, após logarmos seremos direcionados ao painel de nosso projeto. Voltamos ao menu lateral APIs e serviços e clicamos em Credenciais (Figura 4) para sermos direcionados para a página de credenciais de nosso projeto.

Figura 4 - Acessando a página de credenciais de nosso projeto

Clique em Criar Credenciais (1 da figura 4.1) e em seguida em ID do cliente OAuth (2 da figura 6.1) para inserirmos a URI temporária do nosso projeto do Cronapp.

Figura 4.1 - Selecionando o cliente OAuth

Selecione o tipo do aplicativo, nesse exemplo estamos usando Aplicativo da Web e siga os passos da figura 4.2.

Figura 4.2 - Autorizando URI de teste no Google

1. Área onde deverá selecionar o tipo da aplicação e o nome do cliente OAuth2.0 que estamos criando
2. Deverá inserir a URL sem o /signin/google da aplicação que pegamos no tópico Coletar URI do login social, nesse caso ficará: https://app-30-134-10658.ide.cronapp.io/
3. Novamente irá precisar pegar a url do tópico Coletar URL do login social, só que agora com o /signin/google, ficará:  https://app-30-134-10658.ide.cronapp.io/signin/google e clique em criar.

Após isso, como mostrado na figura 4.3 será gerado o seu ID de cliente e sua Chave secreta que usaremos no nosso projeto, estamos prontos para inserir essas informações em nosso projeto Cronapp, permitindo que os usuários do nosso projeto acessem o sistema utilizando uma conta Google.

Figura 4.3 - ID e Chave secreta gerados

Configurando o projeto no Cronapp 

De volta ao projeto, vamos até Projeto em menu do sistema e selecionaremos Configurações (destaque 1 da Figura 5). Na janela de Configuração, vamos clicar na aba Redes Sociais (2), substituir o campo appId (3) do Google pelo Cliente ID e appSecret (4) também do Google pelo Client Secret e clicar em Salvar ao final.

Figura 5 - Configurando ID e Chave no projeto

Testando

Para testar, vamos abrir a aplicação do projeto no navegador web e clicar no ícone do Google (Figura 6). Deverá aparecer a página do Google solicitando o login e a senha do usuário (Figura 6.1).

Figura 6 - Selecionando ícone do Google

Figura 6.1 - Login do Google no projeto Cronapp