Configurar Login Social – Magento 2
Neste tutorial será apresentado como realizar a configuração da função de login social .
Primeiramente no painel administrativo do Magento, será necessário seguir o caminho: Lojas → Configuração → Extensões Amasty → Login Social e expanda a seção Configurações Gerais .
- Habilitar Social Login – Defina como Sim para ativar a exibição de botões de mídia social, que permitem o login via redes sociais.
- Adicionar Login Social para – Use a seleção múltipla para adicionar botões de login de mídia social a vários lugares no site.
- Formato dos botões de login – Especifique as formas dos botões: redonda, retangular ou quadrada.
- Habilitar Ajax Popup – Defina como Sim para ativar o pop-up AJAX para registro e login.
- Posição do botão de login – Escolha o local para exibir os botões de login social.
- Redirecionar após o login – Selecione a página necessária, para onde direcionar os clientes após o login social.
Após habilitar as configurações apresentadas anteriormente será necessário definir quais redes sociais serão usadas para o login e realizar a configuração especifica da rede social.
Habilitado – Defina como ‘Sim’ para ativar a exibição do botão de login do Google.
Para que o login funcione será necessário criar um App do google, para isso siga os passos apresentados abaixo:
1- Para criar o Google App, acesse https://cloud.google.com/console/project.
2- Clique no botão CRIAR PROJETO e defina as configurações do seu aplicativo.
3- Especifique o nome do seu projeto. O ID do projeto será gerado automaticamente. O Google também pode pedir para especificar uma organização para anexá-lo a um projeto. Nesse caso, selecione uma organização à qual sua conta G-suite pertence. Em seguida, pressione o botão CRIAR.
4- 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.
5- 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 Amasty Social Login para Magento 2, acesse APIs e Serviços → Credenciais conforme mostrado na captura de tela abaixo.
6- Na janela Credenciais, pressione o botão + CRIAR CREDENCIAIS. Em seguida, aparece um menu suspenso, onde você precisa selecionar a opção OAuth Client ID.
7- 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.
8- No primeiro passo, você precisa selecionar se o ramal será Interno ou Externo. Como a extensão Social Login M2 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.
9- 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.
10- Depois de preencher todas as linhas necessárias, pressione o botão SALVAR E CONTINUAR.
11- 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.
12- Na terceira etapa, você pode adicionar usuários que podem acessar quem pode acessar seu aplicativo no modo de teste. Para adicionar novos usuários, clique no botão + NOVOS USUÁRIOS.
13- Em seguida, uma janela pop-up aparecerá. Aqui, você pode inserir até 100 e-mails de usuários que poderão acessar o aplicativo. Pressione o botão ADICIONAR. Em seguida, clique em SALVAR E CONTINUAR.
14- Na terceira etapa, você pode ler o resumo de suas configurações. Pressione o botão VOLTAR AO PAINEL.
15- Depois de ser redirecionado para o painel do projeto, vá novamente para APIs e Serviços → Credenciais e selecione + CRIAR CREDENCIAIS → OAuth Client ID. Desta vez, você será direcionado para a criação de ID do cliente OAuth. Para prosseguir, selecione o tipo de aplicativo da Web.
16- Depois de definir a configuração como aplicativo da Web, campos adicionais aparecerão. Preencha-os conforme exigido pelo Google e clique no botão CRIAR.
17- Após a criação bem-sucedida de Credenciais OAuth, uma janela pop-up com um ID e Segredo do Cliente será exibida. Copie o ID do cliente e o segredo do cliente, insira sua chave de API (ID do cliente) e o segredo da API (segredo do cliente) nos campos apropriados no back-end e salve a configuração.
Após todos os passos o login socia pela conta do google já estará habilitado.
Habilitado – Defina como Sim para ativar a exibição do botão de login do Facebook .
1- Para criar um aplicativo do Facebook, acesse Facebook Developers
2- Você pode usar o guia em vídeo para configurar o login do Facebook
Abaixo está o passo a passo para criação do aplicativo:
1- Primeiro, siga este link (Desenvolvedores do Facebook) e registre-se como desenvolvedor ou faça login.
2- Em seguida, clique no botão ‘Criar aplicativo’ .
3- Escolha o tipo de aplicativo ‘Consumidor’ na lista e clique em ‘Avançar’ .
4- Especifique o nome do aplicativo, seu e-mail de contato e uma conta do Gerenciador de Negócios, se você já tiver uma (opcional).
5- Clique no botão ‘Configurar’ no cartão de produto de login do Facebook para prosseguir.
6- Em seguida, navegue até Configurações → Básico no menu à esquerda e preencha os campos correspondente.
7- O ID do aplicativo e o segredo do aplicativo serão gerados automaticamente. Preencha o campo App Domains e escolha a categoria do seu app .
Permanecendo na seção ‘Configurações → Básico’ role para baixo para clicar no botão Adicionar plataforma para escolher a plataforma para seus aplicativos sociais.
8- Depois de clicar no botão Adicionar plataforma, você verá a grade com vários tipos de plataforma. Selecione Web .
9- Caso você esteja selecionando uma plataforma por meio das configurações de início rápido, ela se parecerá com o seguinte:
10- Depois de especificar o tipo de plataforma, insira a URL do seu site aqui e clique no botão Salvar alterações .
Ative o Login OAuth do cliente e preencha os URIs de redirecionamento OAuth válidos na guia Casos De Uso -> Personalizar -> Configurações
Para aplicar a configuração, altere o Status de In development para Live .
Insira sua chave do consumidor ( chave de API ) (corresponde ao ID do aplicativo da conta de desenvolvedor do Facebook) e segredo do consumidor ( segredo da API ) (corresponde ao segredo do aplicativo da conta de desenvolvedor do Facebook) nas configurações de extensão geral e salve a configuração.
Após todos os passos o login socia pela conta do google já estará habilitado.
Basta clicar no botão Começar para prosseguir com a verificação.
Qualquer dúvida envie para [email protected]