Login Rede Social - Google

Olá

O login rápido e fácil é uma solução de trabalho para aumentar o número de clientes cadastrados e melhorar sua experiência.

• Reduz o tempo de cadastro dos clientes
• Oferece a possibilidade de fazer login através de contas sociais
• Permite que os clientes recuperem senhas facilmente
• Permite autorização sem visitar a página de registro
• Permite redirecionar clientes para qualquer página

1 - Criação App do Google

2 - Configurações Gerais

3 - Configurações do Google  Login

1 - Criação do App do Google

Primeiro acesse a url abaixo para criarmos as chaves necessárias para configuração do Login Social Google:

Para criar o Google App, acesse https://cloud.google.com/console/project

Clique no botão CRIAR PROJETO e defina as configurações do seu aplicativo.

Especifique o nome do seu projeto. O ID do projeto será gerado automaticamente ou poderá escolher um se desejar. O Google também pode pedir para especificar uma organização para anexá-la a um projeto. Nesse caso, selecione uma organização à qual sua conta G-suíte pertence. Em seguida, pressione o botão CRIAR.

Após a criação bem-sucedida do projeto, uma nova mensagem aparecerá na barra de notificações. Por favor, pressione o link Selecionar Projeto na notificação ou após aparecer na lista clique nos 3 pontinhos e em configurações.

Você será redirecionado para o painel principal do projeto recém-criado. Para prosseguir com a criação de novas credenciais para a extensão Login Social , acesse a partir do menu superior esquerdo (ao lado do logo do google cloud), APIs e Serviços → Credenciais conforme mostrado na captura de tela abaixo.

Na janela Credenciais, pressione o botão + CRIAR CREDENCIAIS. Em seguida, aparece um menu suspenso, onde você precisa selecionar a opção ID do cliente do OAuth.

Caso você não tenha criado nenhuma credencial para este projeto antes, o Google solicitará que você configure uma tela de consentimento. É uma etapa obrigatória, pois aqui você pode definir o nome da extensão e outros detalhes que o cliente poderá ver ao concordar em usar o login social em sua loja.

Para iniciar a configuração da tela de consentimento OAuth, pressione o botão CONFIGURAR TELA DE CONSENTIMENTO.

No primeiro passo, você precisa selecionar se será Interno ou Externo. Como a extensão Login Social visa auxiliar no login rápido do cliente, selecione a opção Externo, conforme mostrado na captura de tela de exemplo abaixo. Pressione o botão CRIAR.

Na próxima etapa, você precisa preencher alguns dados da sua loja, por exemplo, adicionar nome do aplicativo, e-mail de contato de suporte, ícone do aplicativo etc. Para obter mais informações, consulte as dicas do Google no lado esquerdo desta página.

Depois de preencher todas as linhas necessárias, pressione o botão "SALVAR E CONTINUAR".

Na segunda etapa, denominada ESCOPO, basta pressionar o botão "SALVAR E CONTINUAR". Como uma tela de consentimento OAuth é criada logo no início da configuração do projeto, não há credenciais para adicionar aos escopos. Você criará todas as credenciais necessárias algumas etapas depois e elas serão adicionadas automaticamente aos escopos.

Na terceira etapa, você pode adicionar usuários que podem acessar seu aplicativo no modo de teste. Não será necessário criar nenhum usuário teste. Basta clicar no botão "SALVAR E CONTINUAR".

Na quarta etapa (Resumo), você pode ler o resumo de suas configurações. Pressione o botão VOLTAR AO PAINEL.

Depois de ser redirecionado para o painel do projeto, vá novamente para APIs e Serviços → Credenciais e selecione + CRIAR CREDENCIAIS → ID do cliente do OAuth. Desta vez, você será direcionado para a criação de ID do cliente OAuth. Para prosseguir, selecione o tipo de aplicativo da Web.

Depois de definir a configuração como aplicativo da Web, campos adicionais aparecerão. Preencha-os conforme exigido pelo Google sendo que Origens JavaScript autorizadas será o seu domínio raiz (ex: https://www.seusite.com.br) e URIs de redirecionamento autorizados será o dominio raiz com a continuação da url /amajaxlogin/google/index/ (ex: https://www.seusite.com.br/amajaxlogin/google/index/ ), clique no botão CRIAR.

Após a criação bem-sucedida de Credenciais OAuth, uma janela pop-up com um ID e Chave secreta do Cliente será exibida. Copie o ID do cliente e a chave secreta do cliente, insira sua chave de API (ID do cliente) e o segredo da API (segredo do cliente) nos campos apropriados no back-end na configuração do módulo e salve a configuração.

Para finalizarmos, será necessário publicar o aplicativo e retirá-lo do modo Teste. Para isso acesse no menu à esquerda Tela de permissão OAuth e clique no botão Publicar Aplicativo.

Será exibido um alerta Enviar para produção. Leia as instruções informadas pelo Google e clique no botão Confirmar.

Agora na mesma tela clique no botão Prepare-se Para a Verificação

Confirme novamente clicando no botão Salvar e Continuar.

Em escopos, somente clique no botão Salvar e Continuar

Insira as informações opcionais caso as tenham e clique no botão Salvar e Continuar

Agora é só confirmar o consentimento “Meu uso dos escopos do OAuth está de acordo com a” checando o check-box e clicar no botão Enviar para Verificação

Pronto com isso seu app estará em produção e estará em verificação. Caso o Google reconheça algo que deva ser adequado, eles irão lhe informar através de seu email para as adequações necessárias neste app.

O Google também irá lhe enviar um email com instruções para a verificação de seu domínio caso necessário. Siga as instruções para ser feita a verificação.

2 - Configurações Gerais

2 - Configurações Gerais.

Habilitar login do Ajax - habilite ou desabilite a extensão neste campo.

3 - Configurações do Google Login

Aqui irá habilitar o Login do Google, Irá inserir  a chave da API e a chave secreta da API , obtidas no passo anterior.

Assim que o App ID e o App Secret forem salvos, você verá o botão social do Facebook colocado na janela pop-up de login.