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.
Possuir uma conta Google.
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 google, é necessário acessar a página Google Identity Platform, lá temos a opção de gerar a identificação para todas as plataformas permitidas pelo Google (Android, IOS, Web, TVs & Devices), no nosso exemplo iremos configurar para um projeto web, vá em Faça login o Google e clique em Um toque para a web (Figura 1).
Figura 1 - Selecionando a opção para web
Na tela de Sign-in para websites, clique no botão Get started (Figura 2)
Figura 2 - Iniciando a configuração do seu projeto no Google
Você será direcionado para a tela que explica o processo de configuração do Google Sign-in, clique em Google APIs console e em seguida non botão Criar Projeto (Figura 3) para iniciar o preenchimento dos dados necessários para cadastrar seu projeto.
Figura 3 - Iniciando a configuração do projeto
Precisamos aceitar os termos e condições do Google (Figura 4).
Figura 4 - Aceitando os termos e condições
Informe o nome do projeto e em Local a sua organização desejada, após isso clique em Criar (figura 5).
Figura 5 - Informando o nome do projeto
Após a criação do projeto, você vai ser direcionado ao Painel principal, após isso, clique em Tela de consentimento OAuth em APIs e serviços, selecione o tipo de usuário desejado e clique em Criar (figura 6)
Figura 6 - Selecionando o tipo de usuário
Após isso, você será direcionado para uma área onde precisará preencher os dados solicitados que serão exibidos na tela de consentimento aos usuários finais, você informará quem você é e como entrar em contato, precisará preencher os campos que possuírem um " * " serão obrigató
Tela de consentimento OAuth
2Escopos3
Usuários de teste4
Resumo
obrigatórios ( 2 da figura , em seguida, nos escopos, são descritas as permissões que você solicita que os usuários autorizem para o app. Com elas, o projeto tem acesso a tipos específicos de dados privados do usuário na Conta do Google
- Tela de consentimento OAuth: Quando você usa o OAuth 2.0 para autorização, seu app solicita autorizações para um ou mais escopos de acesso de uma Conta do Google. O Google exibe uma tela de consentimento para o usuário que inclui um resumo do seu projeto e das políticas dele, além do escopo de acesso solicitado.
- Informações do app:
- Preencherá o nome do seu aplicativo que irá pedir as permissões;
- E-mail para suporte;
- Selecionará a sua logo.
Domínio do app:
- Preencherá com um link que levará os usuários para a página inicial do aplicativo;
- Um link onde levará os usuários a ler a Política de Privacidade do aplicativo;
- Um link onde levará para seus Termos de Serviço do aplicativo.
- Domínios autorizados:
- Área onde poderá adicionar um domínio personalizado
- Dados de contato do desenvolvedor:
- Seu endereço de e-mail, o Google usa esses endereços de e-mail para notificar você sobre todas as alterações no projeto.
- Informações do app:
- Escopos: Nos escopos, são descritas as permissões que você solicita que os usuários autorizem para o app. Com elas, o projeto tem acesso a tipos específicos de dados privados do usuário na Conta do Google
Após finalizarmos, será informado o ID e Chave secreta gerados para o seu projeto (Figura 7).
Figura 7 - Chave e ID gerados.
Agora estamos prontos para inserir essas informações em nosso projeto Cronapp, permitindo que os usuários do nosso projeto acessem o sistema utilizando usa conta Google.
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 Google.
Coletar URI do login social 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 8 abaixo:
Figura 8 - URL de teste no Cronapp
A URI que devemos autorizar será: "URL+/signin/NomeDaRedeSocial".
O endereço que devemos informar ao Google (usando o exemplo da Figura 8) seria: https://app-9-176-10060.ide.cronapp.io/signin/google
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. |
Adicionar a URI no projeto Google
Precisamos acessar o Google Cloud Platform, após logarmos seremos direcionados ao painel de nosso projeto.
Clicamos no botão sanduíche → APIs e serviços → Credenciais (Figura 9) para sermos direcionados para a página de credenciais de nosso projeto.
Figura 9 - Acessando a página de credenciais de nosso projeto
Selecione o ID do cliente OAuth 2.0 do projeto que estamos criando (Figura 10) para inserirmos a URI temporária do nosso projeto do Cronapp.
Figura 10 - Selecionando o cliente OAuth
Agora basta inserir a URI temporária que coletamos no nosso projeto do Cronapp e salvar (Figura 10).
Figura 11 - Autorizando URI de teste no Google
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 Google continua a mesma) clicar no ícone do Google para ser direcionado à página de login da rede social (Figura 11).
Figura 12 - Login do Google no projeto Cronapp
Nessa página
| Índice |
|---|