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 no Linkedin.
  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 Linkedin, é necessário acessar a página Linkedin Develope,clicar na aba My Apps (Meus aplicativos) e em seguida clicar no botão "Criar aplicativo" (Figura 1).

 
Figura 1 - Adicionando uma aplicação no Linkedin

 

Na próxima tela, devemos preencher um pequeno formulário com algumas informações, aceitar os termos de uso da API do Linkedin e clicar em "Enviar" (Figura 2).


Figura 2 - Preenchimento do formulário


Após a finalização do formulário, seremos direcionados a página "Meus aplicativos", a ID (Código de cliente) e chave secreta (Segredo de cliente) estará na aba Autenticação (Figura 3).


Figura 3 - Verificação de segurança

 

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

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

1. Coletar URI 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


A URI que devemos autorizar será: "URL+/signin/NomeDaRedeSocial".

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

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 nas URIs autorizadas.

2. Adicionar a URI no projeto Linkedin

Precisamos acessar novamente acessar a página Linkedin Develope, clicar na aba My Apps (Meus aplicativos) e em seguida clicar no aplicativo criado anteriormente (Figura 5).


Figura 5 - Acessando as configurações do projeto

 

Ao clicarmos na aba Autenticação em "Application Settings", encontraremos o campo OAuth 2.0, nela vamos adicionar a URI coletada no passo acima para permitir o acesso por esse endereço (Figura 6). Por último, clicamos em "Atualizar".


Figura 6 - Autorizando URI de teste no Linkedin


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 Linkedin continua a mesma) clicar no ícone do Linkedin para ser direcionado à página de login da rede social (Figura 7).



Figura 7 - Login do Linkedin no projeto CronApp

 

 

 

Nesta Página