O que é o login social do Google?
Com o login social do Google, seus clientes podem se cadastrar na sua loja em segundos, sem a necessidade de lembrar de senhas complicadas, dando mais agilidade ao checkout da sua loja.
Importante saber:
Se o usuário não tiver uma conta criada em sua loja, ao clicar em acessar com o Google será preenchido os dados: nome completo e e-mail, para que o usuário finalize o cadastro com os demais dados.
Caso o usuário já tenha uma conta com o e-mail do Google, o login social permitirá realizar o login de forma automática.
Como configurar o login social do Google?
Etapa 1 - Localizando o aplicativo no painel da sua loja
01 - Acesse a seção “Aplicativos” dentro do menu “Soluções” no canto esquerdo do seu painel da Loja Integrada.
02 - Na seção de Aplicativos, localize “Login social via Google” e clique em configurar.
Para preencher as informações solicitadas no aplicativo, você precisará realizar a criação de uma aplicação no Google API Console. Para isso, siga os passos abaixo.
Etapa 2 - Criando uma aplicação no Google API Console
01 - Acesse a página de criação de projeto, no Google API Console: https://console.cloud.google.com/projectcreate. Caso você não tenha nenhum projeto criado, será preciso aceitar os termos de uso. Para isso, marque a caixa de seleção “Eu concordo…” e clique em "Concordar e continuar”.
Importante: é recomendado que o login no Google API Console seja feito com o mesmo endereço de e-mail utilizado para acesso e administração da loja.
02 - Após concordar com os termos, dê um nome para seu projeto e clique em "Criar”.
03 - Em seguida, você será redirecionado para o painel do Google Console. Aguarde a carregar por completo a página, e selecione o projeto criado no passo anterior, através da notificação que aparecerá no canto direito da tela.
Caso essa notificação não apareça, você pode selecionar o projeto no canto superior esquerdo da tela, conforme a imagem abaixo.
04 - No menu lateral, no item “APIs e serviços”, selecione a opção “Tela de permissão OAuth".
05 - Selecione o tipo “Externo” e clique em "Criar”.
06 - Preencha os dados, conforme a imagem de exemplo abaixo:
Nome do app: você pode colocar o nome da sua loja.
E-mail para suporte do usuário
Logotipo do app: opcional - não será exibido a menos que você submeta seu aplicativo para aprovação.
Domínio do app: página inicial e política de privacidade: preencha com as respectivas páginas de sua loja. O campo "Link dos Termos de Serviço do Aplicativo" não precisa ser preenchido.
Domínios autorizados: se você possui um domínio próprio, preencha-o sem https:// e www. (Exemplo: "minhaloja.com"). Caso não tenha um domínio próprio, preencha exatamente com "
lojaintegrada.com.br".Dados de contato do desenvolvedor: preencha com um e-mail para contato.
Após os dados serem preenchidos, clique em “Salvar e continuar”.
07 - Na etapa seguinte, clique em “Adicionar ou remover escopos”.
08 - Selecione os escopos .../auth/userinfo.email e .../auth/userinfo.profile e clique em “Atualizar".
09 - Verifique se o bloco de "Escopos não confidenciais" foi preenchido e atualizado, conforme a imagem de exemplo abaixo. Após, clique em “Salvar e continuar”.
10 - Em (“Usuários de teste”), para o que precisamos não será necessário ser preenchida, basta apenas prosseguir, clicando em “Salvar e continuar”.
11 - Em "Resumo”, verifique os dados inseridos e clique no botão “Voltar para o painel”.
Etapa 3 - Criando credenciais
01 - No menu lateral, no item “APIs e serviços”, selecione a opção “Credenciais".
02 - Na parte superior da tela, clique em “Criar credenciais" e selecione a opção “ID do cliente OAuth”.
03 - Para o campo “Tipo de aplicativo”, selecione “Aplicativo da Web”, e, caso queira, altere o campo “Nome”, para melhor identificação:
Atenção: os próximos passos são de extrema importância para que seu aplicativo seja inicializado corretamente em sua loja.
04 - No bloco “Origens JavaScript autorizadas”, clique em “Adicionar URI” e preencha com a URL de sua loja
Exemplo: https://www.minhaloja.com
05 - No bloco "URIs de redirecionamento autorizados”, preencha com o mesmo endereço de sua loja, acrescido de /conta/login/google.
06 - Clique em "Criar”.
07 - Em seguida, será mostrada a seguinte tela com alguns informações da credencial criada.
Copie o campo “ID do Cliente”, pois esse código deverá ser colado no campo “Google Client ID” no aplicativo usado para configurar o login social no painel da Loja Integrada.
Etapa 4 - Ativando o login social na sua loja
01 - No aplicativo "Login Social via Google", preencha o campo "Google client ID" com a informação copiada no passo anterior.
02 - Caso queira, na seção "Personalização" você pode editar a forma como o botão do login social via Google irá aparecer no checkout da sua loja.
03 - Clique em "Salvar alterações" e pronto! O login social via Google será habilitado no checkout da sua loja.
Como obter o Google Client ID de uma aplicação já criada?
Se por acaso, você fechar acidentalmente ou perder o “id do cliente" de sua aplicação criada anteriormente, basta acessar a página de “Credenciais” e clicar no botão indicado na imagem abaixo, para copiar novamente.