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 Facebook.
  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 Facebook, é necessário acessar a página facebook for developers. Vamos começar adicionando nossa aplicação ao nosso registro do Facebook. Clicando no botão "Criar aplicativo" (Figura 1).

Figura 1 - Adicionando uma aplicação no facebook

 

Na próxima tela, vamos informar o nome da nossa aplicação, o e-mail e clicar em "Crie um número de identificação do aplicativo" (Figura 2). Na tela seguinte será solicitado a inserção do código de verificação de segurança (Figura 3).


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



Figura 3 - Verificação de segurança

 

Finalizando essa etapa, seremos direcionados para o painel de aplicativos, selecione o botão "configurar" do quadro "Login do Facebook" (Figura 4).


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

 

Informe a plataforma da sua aplicação, em nosso exemplo estamos usando para um sistema web (Figura 5). Na tela seguinte, informe a URL do seu projeto e clique em "Save" (Figura 6).


Figura 5 - Seleção de plataformas



Figura 6 - Informando a URL do sistema web


Na próxima etapa, o Facebook irá informar uma série de passos para incluir o login social em sua aplicação. Porém, como estamos usando o CronApp, essas informações serão desnecessárias, visto que o CronApp abstrai esse processo (Figura 7).


Figura 7 -  Informações abstraídas pelo CronApp

 

No painel lateral, clicamos em Configurações  Básico para exibir o ID e a Chave secreta do aplicativo. Por segurança, o facebook solicita que seja informado a senha do usuário da aplicação antes de exibir a chave de secreta (Figura 8).

Figura 8 - ID e Chave secreta do aplicativo


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

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

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 9 abaixo:


Figura 9 - URL de teste no CronApp


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

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

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 Facebook

Precisamos acessar novamente o facebook for developers e no seletor "Meus aplicativos", clicamos no nome do nosso projeto (Figura 10) e seremos direcionados ao painel de nosso projeto.

Figura 9 - Acessando as configurações do projeto

 

Após isso, vamos em Produtos na aba lateral, clicamos em Login do Facebook  Configurações, inserimos a URI coletada durante Passo anterior no campo "URIs de redirecionamento do OAuth válidos" e clicamos em "Salvar alterações" (Figura 10).

 


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

 

 

Nesta Página