Menu
Feedback
Comece aqui
Tutoriais


Tutoriais
Conceitos básicos de autenticação
Cadastrar Client Id e Client Secret para login com Google
2 min de leitura

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":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_1.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.

  1. Entrar no link https://console.developers.google.com/;

  2. Clicar em Credenciais, na aba lateral;

  3. Clique em Criar Projeto;

    {"base64":"  ","img":{"width":1900,"height":337,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":33507,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_2.png"}}

  4. Dê um nome ao projeto e clique em Criar;

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAALklEQVR4nGPIzc19CQYPHzxgyM3N2bJly+49e44eP84gICLz79/vL1++3L//AADt1Bn40ew/OwAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_3.png","width":520,"height":365,"type":"png"}}

  5. No topo da página, clicar no botão Criar credenciais;

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFklEQVR4nGOYPXv24iUrZORU3717BwAq4QbqFpYfuQAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_4.png","width":418,"height":41,"type":"png"}}

  6. Clicar na opção ID do cliente OAuth;

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAJUlEQVR4nAEaAOX/ABkZG3h4eL6+vufn5wA5ODi+vr7U1NT7+/ug6Q71PcNt/AAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_5.png","width":511,"height":291,"type":"png"}}

  7. Clicar no botão Configurar tela de consentimento;

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFUlEQVR4nGPw8A7mE1E4ceLkly9fAB1WBl5ZL917AAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_6.png","width":704,"height":209,"type":"png"}}

  8. Escolha o tipo de usuário desejado para a sua loja (Interno ou Externo) e clique no botão Criar;

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAAMklEQVR4nAEnANj/AFxcXYaGhrS0tM3NzQBdXFqGhoasq6vAwMAAEhcf29rZ2NjY8fHxjL8WQ3CJQRcAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_7.png","width":508,"height":386,"type":"png"}}

  9. Nome do app: será exibido aos seus clientes no momento do login;

  10. E-mail para suporte do usuário: para que os usuários contatem você com perguntas sobre o consentimento;

  11. Logotipo do app: corresponde ao logotipo da sua loja;

  12. 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
  13. Dados de contato do desenvolvedor: o Google usa esses endereços de e-mail para notificar você sore todas as alterações do projeto;

  14. 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":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_8.png"}}

  15. Clicar no item do menu lateral esquerdo Credenciais;

  16. 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":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_9.png"}}

  17. Nome: para identificação interna;

  18. 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;

  19. URIs de redirecionamento autorizados: cadastrar a URL de serviço da VTEX:

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

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAIAAADETxJQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAM0lEQVR4nAEoANf/AF5XWWZhYqOfoQA4MzRjX2DHw8MAY1xcs62t6uTkAB8aH9HOzvDt7VU/E5Iw1wOiAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_10.png","width":596,"height":798,"type":"png"}}

  20. Após concluído, serão apresentadas suas credenciais:

    {"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMElEQVR4nGMQEhISFhbx8QmorKxiEBIS4ubi09HWDQkJYcjJyVm9etW/f3+PHz8OAKT3DTAiky/4AAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_11.png","width":472,"height":407,"type":"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":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/autentica%C3%A7%C3%A3o/conceitos-b%C3%A1sicos-de-autentica%C3%A7%C3%A3o/cadastrar-client-id-e-client-secret-para-login-com-google_12.png"}}
      Depois de cumprir esses passos, salve as alterações.
Contribuidores
1
Photo of the contributor
+ 1 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Configurar preço e disponibilidade de SKUs regionalmente
« Anterior
Cadastrar Client Id e Segredo do cliente para login com Facebook
Próximo »
Contribuidores
1
Photo of the contributor
+ 1 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na VTEX Community
Junte-se à nossa comunidade
Solicite suporte à VTEX
Receba assistência personalizada com nossos especialistas
Abra um ticket de suporte
GitHubDeveloper PortalComunidadeFeedback