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.

Essa forma de autenticação possui algumas vantagens em relação a forma tradicional de login: Acesso direto pelo usuário sem a necessidade de realizar cadastro, preencher formulários e não precisar lembrar do cadastro para cada site; a validação das informações do usuário possui uma confiabilidade maior, já que foram validadas pela rede social e além disso, sites integrados com redes sociais costumam ter um engajamento maior por parte de seus usuários.

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. Projeto do tipo web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link (Criando Projeto Web).

Obs.:

Na imagem 6 do tutorial Criando Projeto Web, o campo "Login por redes sociais" da janela "Informe/selecione os campos" deve estar marcado como "Sim".

Visão geral: exemplo

Nesse tutorial iremos aprender a configurar login social em sua aplicação ou site desenvolvido pelo CronApp, permitindo que o usuário da seu sistema logue utilizando uma das suas redes sociais (Figura 1).


Figura 1 - Exemplo de autenticações com o Login social em projeto web

Obter ID e chave secreta da rede social

Para que sua aplicação ou site possa utilizar o Social Login, é necessário adquirir um ID e chave secreta para o seu sistema diretamente no site da rede social, na área destinada a desenvolvedores. Isso permitirá a troca de informações entre sua aplicação e a rede social. 

Abaixo seguem os links para os tutoriais que ensina o processo de aquisição do ID e chave secreta em diferente redes sociais. Os passos mostrados nesses tutoriais podem ser alterados ou atualizados nos sites das respectivas redes sociais, nesse caso, essas informações deverão ser encontradas na área de desenvolvimento da rede social.

Usuários do CronApp

Não é necessário obter ID ou chave secreta para permitir que usuários loguem em seu sistema utilizando o cadastro do CronApp, basta que seu sistema possua permissão para realizar o login social (Figura 5) e esteja ativo o login pelo CronApp (Figura 4).

Utilizando o Sign-Up

No modelo tradicional, para um usuário acessar um sistema pela primeira vez deverá realizar um cadastro preenchendo um formulário. Porém, quando utilizamos o acesso por Login social, o processo de cadastro em nosso sistema ocorre de forma automática, sem a necessidade de preenchimento de formulários.

Com Sign Up, quando o usuário acessa a tela de login e clica no ícone da sua rede social (Figura 1), o sistema o direciona para uma página de login que possui uma autorização previamente concedida ao nosso projeto (Figura 2). Após o usuário informar o seu Login e senha, os dados são validados na rede social, o usuário é redirecionado para a página da nossa aplicação e as informações de login e um token de autenticidade do usuário será armazenada em nosso banco de dados, cadastrando-o como um novo usuário em nosso sistema.

Na próxima vez que o usuário retornar a nossa aplicação e realizar o login, os dados serão duplamente validados: primeiro na rede social que escolheu para fazer o login, confirmando a autenticidade do usuário, senha e token enviado por nossa aplicação (salvo no cadastro ou login anterior) e posteriormente na nossa aplicação, garantindo que o usuário já possui registro.

Figura 2 - Login utilizando o Sign Up

Passos para configuração no CronApp

O processo de configuração no CronApp é parecido para todas as redes sociais. Nesse tutorial, iremos configurar o login social para contas do Google.

Com o ID e chave secreta obtidas no passo anterior, vamos configurar nossa aplicação no CronApp.

1. Adicionando acesso de uma rede social

As configurações e permissões das redes sociais que poderão ser utilizadas para acessar sua aplicação, ficam no arquivo social.properties, que está no diretório Código Fonte → Principal → Códigos Fonte Servidor (Figura 3). 

Figura 3 - Localização do arquivo social.properties

 

Acessando esse arquivo veremos algumas redes sociais já cadastradas, porém ainda sem suas autorizações configuradas (Figura 4).

Figura 4 - Arquivo social.properties

 

Para que o CronApp permita que sua aplicação seja autenticada com o login de alguma rede social, devemos adicionar a propriedade "autoSignUp" (como explicado anteriormente) através do campo "Nova propriedade", clicar no botão "+" e posteriormente informar o valor "true", como na figura 5. 

Figura 5 - Adição da propriedade autoSingUp

 

Para cada rede social existem 3 propriedades:

  1. "redeSocial": define se sua aplicação permitirá a autenticação por essa rede social. Valores possíveis: true ou false;
  2. "redeSocial.appId": propriedade onde devemos informar o ID gerado por sua aplicação junto a rede social e
  3. "redeSocial.appSecret", propriedade onde devemos informa a chave secreta gerada por sua aplicação junto a rede social.

Agora vamos inserir o Id e a chave gerados anteriormente (Figura 6) e salvamos o arquivo.

Figura 6 - Adição do Id e Chave secreta

2. Testando o acesso

Como explicado nos tutoriais de aquisição do ID e Chave secreta de cada rede social, é necessário autorizar a URI temporária gerada pelo CronApp. Com esse passo configurado, vamos realizar o login de um usuário registrado no Google.

Vamos rodar nossa aplicação (F9), clicar no ícone do google e seremos direcionado para uma tela de Login do Google (Figura 2). Após informamos nosso login e senha, seremos redirecionados para a tela da nossa aplicação, porém já logados.

Figura 7 - Login em nossa aplicação

 

Se verificarmos em nosso banco de dados, veremos que os dados do usuário e seu o token de segurança, gerado pelo google para este usuário, estão salvos (Figura 8).

Figura 8 - Dados do usuário e seu token gerado pela Google

 

 

Nesta Página