Skip to end of metadata
Go to start of metadata

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.

Requisitos:

  1. Possuir uma conta Google.
  2. Configurar o seu projeto no CronApp para permitir o login por redes sociais, veja como fazer em: Adicionar Login por redes sociais em sua aplicação.

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 (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

 

Você será direcionado para a tela que explica o processo de configuração do Google Sign-in, clique no botão "Configure a project" (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 4), informe o nome do projeto (Figura 5), selecione o tipo de OAuth Cliente e informe o endereço do projeto (Figura 6).

Figura 4 - Aceitando os termos e condições



Figura 5 - Informando o nome do projeto



Figura 6 - Especificar o OAuth cliente e a URL do projeto

 

Após finalizarmos, será informado o ID e Chave secreta gerados para o seu projeto (Figura 7).

Figura 7 - Chave e ID gerados.


Agora estamos prontos para inserir essas informações em nosso projeto CronApp, permitindo que os usuários do nosso projeto acessem o sistema utilizando usa conta Google.  

Autorizando a URI de Debug do CronApp na rede social

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.

1. Coletar URI do login social do projeto no CronApp

Para descobrirmos a URL gerada pelo CronApp, basta rodar (F9) ou debugar (F11) a aplicação e copiar a URL no endereço no browser, como na Figura 8 abaixo:


Figura 8 - 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 8) seria:  https://app-9-176-10060.ide.cronapp.io/signin/google

Atenção:

A URL de teste do CronApp é alterada sempre que o workspace for fechado e aberto novamente. Nesse caso, será necessário inserir o novo endereço nas URIs autorizadas.

2. Adicionar a URI no projeto Google

Precisamos acessar o Google Cloud Platform, após logarmos seremos direcionados ao painel de nosso projeto.

Clicamos no botão sanduíche () →  APIs e serviços →  Credenciais (Figura 9) para sermos direcionados para a página de credenciais de nosso projeto.

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


Selecione o ID do cliente OAuth 2.0 do projeto que estamos criando (Figura 10) para inserirmos a URI temporária do nosso projeto do CronApp.

Figura 10 - Selecionando o cliente OAuth


Agora basta inserir a URI temporária que coletamos no nosso projeto do CronApp e salvar (Figura 10).


Figura 10 - Autorizando URI de teste no Google


Para testar, basta rodar a sua aplicação na IDE do CronApp e na tela de login (verificando sempre se a URI de teste cadastrada no Google continua a mesma) clicar no ícone do Google para ser direcionado à página de login da rede social (Figura 11).

Figura 11 - Login do Google no projeto CronApp

 

 

 

Nesta Página