Cadastrar Client Id e Client Secret para login com Google

Conceitos básicos de autenticação

Para ativar o funcionamento de login por OAuth2 via Google, é necessário acessar o VTEX ID pelo seu admin e preencher os campos Client ID e Client Secret, conforme detalhado neste artigo.

${"base64":" ","img":{"width":1990,"height":1130,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":116789,"url":"//images.ctfassets.net/alneenqid6w5/67wXwVN1RaDZ5oOy6XrTSe/a508065cf5028f3a806edad050a0f6e6/google_PT.png"}}$

Esses valores são obtidos a partir de um projeto que precisa ser criado no serviço de APIs do Google Cloud Platform.

De forma simplificada, basta seguir os passos a seguir:

Os passos abaixo descrevem procedimentos em uma plataforma externa e podem estar desatualizados. Mais informações sobre esses procedimentos podem ser encontradas nos artigos Setting up OAuth 2.0 e OpenID Connect da documentação do Google.

Entrar no link https://console.developers.google.com/;
Clicar em Credenciais, na aba lateral;
Clique em Criar Projeto;
${"base64":" ","img":{"width":1900,"height":337,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":33507,"url":"//images.ctfassets.net/alneenqid6w5/7d7axXgcKs8SKcG0YekU8m/15e9e1be0ef0b9bfd4f6cd23833f52a6/Criar_Projeto_Google_PT.png"}}$
Dê um nome ao projeto e clique em Criar;
${"base64":"","img":{"width":520,"height":365,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25826,"url":"//images.ctfassets.net/alneenqid6w5/1PB6BTeU4I6YOqySuwcS4W/dcb58074e3fb0668c4ea336bee08870a/Novo_Projeto_Google_PT.png"}}$
No topo da página, clicar no botão Criar credenciais;
${"base64":"","img":{"width":418,"height":41,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":4620,"url":"//images.ctfassets.net/alneenqid6w5/5bGcIsahuvFskIQBn8X8bl/e5cbd9523888845caa07211cdec356cf/Criar_Credenciais_Google_PT.png"}}$
Clicar na opção ID do cliente OAuth;
${"base64":"","img":{"width":511,"height":291,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21586,"url":"//images.ctfassets.net/alneenqid6w5/5CBmKjKYTYOMkkQImIMcI4/68b13531dab5020ea4e40f69f34a58e2/ID_cliente_OAuth_Google_PT.png"}}$
Clicar no botão Configurar tela de consentimento;
${"base64":"","img":{"width":704,"height":209,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25123,"url":"//images.ctfassets.net/alneenqid6w5/3mprVJpYy6wdtJJEhhbi1s/2c7660f7dea9b320ca24df57e89910a2/Configurar_Tela_Consentimento_Google_PT.png"}}$
Escolha o tipo de usuário desejado para a sua loja (Interno ou Externo) e clique no botão Criar;
${"base64":"","img":{"width":508,"height":386,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30942,"url":"//images.ctfassets.net/alneenqid6w5/yxxE4AdTY0yuNClfZwXHL/7579b27f325d7e2c31444ba21a29a017/Tipo_usu__rio_PT.png"}}$
Nome do app: será exibido aos seus clientes no momento do login;
E-mail para suporte do usuário: para que os usuários contatem você com perguntas sobre o consentimento;
Logotipo do app: corresponde ao logotipo da sua loja;
Domínios autorizados: devem ser incluídos os domínios que poderão interagir com essa API, que devem ser, pelo menos, o domínio de sua loja e o domínio da VTEX:
- loja.com, como exemplo, sempre sem o "www" ou correspondente
- vtex.com.br, relativo aos nossos servidores de backend
Dados de contato do desenvolvedor: o Google usa esses endereços de e-mail para notificar você sore todas as alterações do projeto;
Clicar no botão Salvar e continuar;
${"base64":"","img":{"width":585,"height":1464,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":198587,"url":"//images.ctfassets.net/alneenqid6w5/2jKyTCl5FeeMsS2iAw0aKa/db5c3ff4f9ca43f8a50e51bfb49376ac/Configura____es_Tela_Consentimento_PT.png"}}$
Clicar no item do menu lateral esquerdo Credenciais;
Escolher Aplicativo da Web, em Tipo de aplicativo;
${"base64":"","img":{"width":795,"height":407,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":32984,"url":"//images.ctfassets.net/alneenqid6w5/1sq6ByDBoYtGLeiU3Xsmgx/1b63eaf43364a7d6f1ebe2330b396a72/Credenciais_Aplicativo_Web_Google_PT.png"}}$
Nome: para identificação interna;
Origens JavaScript autorizadas: cadastrar os endereços exatos que poderão usar este método de autenticação, o que corresponde ao seu site; exemplo https://www.loja.com. Também é recomendado cadastrar o endereço https://{{accountName}}.myvtex.com de sua conta, onde {{accountName}} é o nome da sua conta como descrito no menu administrativo da loja;
URIs de redirecionamento autorizados: cadastrar a URL de serviço da VTEX:

-https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx

${"base64":"","img":{"width":596,"height":798,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":61103,"url":"//images.ctfassets.net/alneenqid6w5/4HsRII0LeoGMYqWoioWi0o/91105aa43df17443cfecdcad79acc3a4/Configura____es_Aplicativo_Web_PT.png"}}$
Após concluído, serão apresentadas suas credenciais:
${"base64":"","img":{"width":472,"height":407,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":32659,"url":"//images.ctfassets.net/alneenqid6w5/58KAqlnXhKoAqgq6Gcc80K/2aea225da796a27ea6974766b984a493/Cliente_OAuth_criado_Google_PT.png"}}$
- Copie o ID do cliente do Google e cole no campo Client Id no admin do VTEX ID.
- Copie a chave secreta do cliente do Google e cole no campo Client Secret no admin do VTEX ID.
  ${"base64":" ","img":{"width":1990,"height":1130,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":116789,"url":"//images.ctfassets.net/alneenqid6w5/67wXwVN1RaDZ5oOy6XrTSe/a508065cf5028f3a806edad050a0f6e6/google_PT.png"}}$
  Depois de cumprir esses passos, salve as alterações.