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 GitHub.
  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 GitHub é necessário acessar a página Developer settings. Após logar na sua conta do GitHub, iremos registrar nossa aplicação no GitHub, clique no botão "Register a new application" (Figura 1).


Figura 1 - Adicionando uma aplicação no GitHub

 

Na próxima tela, vamos informar o nome da nossa aplicação, o endereço, uma descrição e clicar em "Register application" (Figura 2). 


Figura 2 - Criando número de identificação

 

Finalizando essa etapa, seremos direcionados para a página que contém o Client ID e Client Secret (Chave secreta), como podemos ver na Figura 3.


Figura 3 - Iniciando as configurações da sua aplicação no facebook

 

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

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 URL temporária gerada pelo CronApp para o seu projeto entre os endereços autorizados na conta GitHub.

1. Coletar URL temporária 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 4 abaixo:


Figura 4 - URL de teste no CronApp

 

Usando como exemplo a Figura 4, devemos informar o endereço: https://app-9-176-10060.ide.cronapp.io

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 na URL autorizada.

2. Adicionar a URL no projeto GitHub

Precisamos acessar novamente o Developer settings do GitHub e clicar no nome do nosso projeto (Figura 5).


Figura 5 - Acessando as configurações do projeto

 

Após isso, basta inserir a URL coletada anteriormente no campo "Authorization callback URL" e clicar no botão "Update application" (Figura 6).


Figura 6 - Autorizando URI de teste no Facebook


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


Figura 7 - Login do GitHub no projeto CronApp

 

 

Nesta Página