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 GitHub.

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

Os passos abaixo pressupõe que o usuário já tenha feito a leitura da documentação Login por redes sociais.

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 mostrado na Figura 1.1. 

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 abaixo e informa o endereço, uma descrição e clicar em Register application (Figura 2).

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

1. Application name: Insira o nome da sua aplicação;
2. 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;
3. Application description: Poderá adicionar uma descrição ao seu projeto, porém, é opcional;
4. 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, 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 - Iniciando as configurações da sua aplicação no facebook

Configurando o projeto no Cronapp

Agora estamos prontos para 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.

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 no projeto Cronapp