Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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: elimina a necessidade de cadastro em diferentes sistemas; evita a falta de segurança em possuir uma senha para todos os sistemas ou a dificuldade de lembrar de uma senha para cada sistema; os dados obtidos do usuário possui validação prévia, gerando maior confiabilidade e sites integrados com redes sociais costumam ter um engajamento maior por parte de seus usuários.
Image Added
Figura 1 - Acesso a aplicação através do login de diferentes redes sociais
Âncora | ||||
---|---|---|---|---|
|
Habilitar o Login social
Durante a criação de um projeto no Cronapp, habilite a opção Login por redes sociais na segunda janela de configurações (destaque 1 na Figura 2.1).
Figura 2.1 - Habilitando o login social durante a criação do projeto
Se o projeto já existir, acesse o arquivo app.config (localizado em src/config/app.config
) e na janela de Configurações clique na aba Configurações do Projeto, habilite a opção Login por Redes Sociais (destaque 1 da figura) para exibir a aba Redes Sociais (destaque 2 da figura 2.2).
Figura 2.2 - Habilitando o login social após o projeto criado
Credenciais da Aplicação
Para o próximo passo é necessário acessar a área de desenvolvimento das redes sociais (Google, Facebook, Linkedin e Github), cadastrar a sua aplicação e obter o Id e chave secreta do cliente OAuth 2.0 dentro de cada rede social. Em todas as redes sociais, com exceção do Cronapp, é necessário informar a URI de SingIn da aplicação para autorização. Essa URI é formado por:
https://<Domínio da Aplicação>/signin/<Rede Social>
Para obter o domínio da aplicação durante o desenvolvimento, rode o projeto (destaque 1 da figura 3.1), execute a aplicação e obtenha a URL de teste (2 da Figura 3.1).
Figura 3.1 - Obtendo a URL de teste do Cronapp
Com base no exemplo da figura 3.1, a URI de signin de cada rede social seria
- Google: https://app-19-33-19686.ide.cronapp.io/signin/google
- Facebook: https://app-19-33-19686.ide.cronapp.io/signin/facebook
- Linkedin: https://app-19-33-19686.ide.cronapp.io/signin/linkedin
- Github: https://app-19-33-19686.ide.cronapp.io/signin/github
Dica |
---|
A URL de teste é alterada constantemente, dessa forma, fique sempre atento se o domínio do Projeto permanece o mesmo após cada execução, caso contrário, será necessário adicionar o novo endereço nas configurações de sua aplicação nas redes sociais. |
Configurações
De volta a janela de configurações do Cronapp, acesse a aba Redes Sociais, habilitada habilitada no primeiro passo. Cadastraremos aqui o ID e o segredo da aplicação obtida em cada rede social.
Figura 4.1 - Aba Redes Sociais da Janela de configurações do Projeto
- Inscrição Automática: ative para permitir que novos usuários se cadastrem na sua aplicação através do Login social, ao desabilitar, somente usuários cadastrados anteriormente poderão logar via rede social.
- Rede Social: nome das redes sociais disponíveis no Cronapp.
- Habilitar rede social: selecione as redes sociais que poderão ter login social na sua aplicação.
- ID da Aplicação: ID obtida na área de desenvolvimento da rede social.
- Segredo da aplicação: segredo obtido na área de desenvolvimento da rede social.
Font-End web
Acesse a página login.view.html (endereço src/main/webapp/views/login.view.html
) e arraste o componente Login Social para a tela, como na figura abaixo.
Image Added
Figura 4.2 - Componente visual web Login Social
Por padrão, o componente visual login Social já insere o ícone de todas as redes sociais suportadas nativamente pelo Cronapp, caso não queira usar alguma, selecione seu ícone e remova (Figura ).
Image Added
Figura 4.3 - Remoção do ícone de rede social
Font-End mobile
Acesse a página login.view.html (endereço src/main/mobileapp/www/views/login.view.html
) e siga os passos da Figura x
Image Added
Figura 4.4 - Configuração dos ícones de login das redes sociais no mobile
- arraste o componente ícone para a tela e selecione na propriedade Ícone, o que melhor representa a rede social usada;
- clique no botão "..." do evento Ao clicar para abrir a janela de seleção de eventos;
- selecione a aba Funções;
- escolha o bloco Login por Redes Sociais e preencha os parâmetros:
- socialNetwork, informe o nome da rede social: "cronapp","facebook","github","google" ou "linkedin",
- Limpar Dados de Login ao Sair, marque ou desmarque a opção.
Faça o mesmo procedimento para cada rede social.
Teste
Nessa página
Índice |
---|