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 GitHub.
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
Precisamos informar a URI temporária gerada pelo Cronapp para o seu projeto entre os endereços autorizados na conta Github. 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.
1.1.
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. |
Figura 1.1 - Copiando URL do projeto
Registrando projeto
Voltando para o Github, na próxima tela, vamos informar alguns dados da nossa aplicação, siga os passos da figura x 2 o endereço, uma descrição e clicar em "Register application" (Figura 2).
Figura 2 - Criando número de identificação
- Application name: Insira o nome da sua aplicação;
- Homepage URL: Insira a URL que copiamos após executar o seu projeto, no nosso exemplo ficará: https://app-28-198-10017.ide.cronapp.io;
- Application description: Poderá adicionar uma descrição ao seu projeto, porém, é opcional;
- Authorization callback URL: A URI que devemos autorizar será: "URL+/signin/NomeDaRedeSocial". O endereço que devemos informar ao
- Github (usando o exemplo da Figura
- 1.1) seria: https://app-28-198-10017.ide.cronapp.io/signin/github.
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, porém, para a chave aparecer você precisa clicar em Generate a new client secret (1 da figura 2.1) e em seguida inserir sua senha, após isso, a chave será gerada, clique no símbolo de copiar (2 da figura 2.1) para copiarmos a chave pois o próximo passo do tutorial será a inclusão do Client ID e da Client Secret no projeto.
Figura 2.1 Figura 3 - Iniciando as configurações da sua aplicação no facebook
Configurando o projeto no Cronapp
Agora estamos prontos para inserir essas informações inserir o Client ID e Client Secret (Chave secreta) 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.
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.ioA 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.
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 Github pelo Cliente ID e appSecret (4) também do Google pelo Client Secret e clicar em Salvar ao final.
Figura 3 - Configurando ID e Chave no projeto
Testando
Para testar, vamos abrir a aplicação do projeto no navegador web e clicar no ícone do Github (Figura 4). Deverá aparecer a página do Github solicitando o login do usuário, caso já esteja logado, aparecerá apenas para autorizar. (Figura 4.1)
Figura 4 - Selecionando ícone do Google
Figura 4.1 - Logando no Github
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
Nessa pagina
| Índice |
|---|