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.
Possuir uma conta Google.
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, 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
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.
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
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. |
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 11 - 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 12 - Login do Google no projeto Cronapp
Nessa página
| Índice |
|---|