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

Para registrar seu projeto no Google, é necessário acessar a página Google Identity Platform, lá temos a opção de gerar a identificação para todas as plataformas permitidas pelo Google (Android, IOS, Web, TVs & Devices), no nosso exemplo iremos configurar para um projeto web, vá em Faça login o Google e clique em Um toque para a web (Figura 1).

Figura 1 - Selecionando a opção para web

Na tela de Sign-in para websites, clique no botão Get started (Figura 2).

Figura 2 - Iniciando a configuração do seu projeto no Google

Criando projeto

Você será direcionado para a tela que explica o processo de configuração do Google Sign-in, clique em Google APIs console e em seguida no botão Criar Projeto (Figura 3) para iniciar o preenchimento dos dados necessários para cadastrar seu projeto.

Figura 3 - Iniciando a configuração do projeto

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

Figura 3.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 3.2).

Figura 3.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 4).

Figura 4 - Selecionando o tipo de usuário

Após isso, 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 4.1).

Figura 4.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 4.2).

Figura 4.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 4.3). 

Figura 4.3 - Cadastro Usuário Teste

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

Figura 4.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 5.

Figura 5 - 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 6) para sermos direcionados para a página de credenciais de nosso projeto.

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

Clique em Criar Credenciais (1 da figura 6.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 6.1 - Selecionando o cliente OAuth

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

Figura 6.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 6.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 6.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 6.4 - 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 7). Deverá aparecer a página do Google solicitando o login e a senha do usuário (Figura 7.1).

Figura 7 - Selecionando ícone do Google

Figura 7.1 - Login do Google no projeto Cronapp