Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Autenticação
Conceitos básicos de autenticação
Cadastrar Client Id e Segredo do cliente para login com Facebook
Cadastrar Client Id e Segredo do cliente para login com Facebook

Para ativar o login via Facebook, é necessário acessar Configurações da conta > Autenticação pelo Admin VTEX e preencher os campos Client ID e Segredo do cliente, conforme detalhado no artigo Configurar login com Facebook e Google.

{"base64":"  ","img":{"width":922,"height":531,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19286,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_1.png"}}

Para obter essas credenciais, siga as instruções de cada etapa abaixo:

  1. Criar aplicativo
  2. Configurar Login do Facebook no aplicativo
  3. Realizar configurações básicas do aplicativo

1. Criar aplicativo

Para começar, você precisa cadastrar um aplicativo no Facebook, seguindo os passos abaixo:

  1. Entre no Meta for Developers.

  2. Crie uma conta de desenvolvedor do Facebook.

  3. Na barra superior, clique em Meus aplicativos.

  4. Clique em Criar aplicativo.

  5. Clique em Permitir que as pessoas entrem com a própria conta do Facebook, dentre as opções ilustradas abaixo.

    {"base64":"  ","img":{"width":837,"height":602,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":95452,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_2.png"}}

  6. Clique em Avançar.

  7. Preencha o nome do app e o email de contato do responsável pelo aplicativo, nos campos ilustrados abaixo.

    {"base64":"  ","img":{"width":1039,"height":467,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":70494,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_3.png"}}

  8. Clique em Criar aplicativo.

2. Configurar Login do Facebook no aplicativo

O próximo passo é configurar o produto Login do Facebook no aplicativo que você criou. Para isso, siga as instruções abaixo:

  1. Clique em Produtos no menu lateral ou no **Painel **do Meta for Developers, destacado a seguir.

    {"base64":"  ","img":{"width":1899,"height":730,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":142730,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_4.png"}}

  2. Clique em Configurar e, em seguida, na opção Configurações.

    {"base64":"  ","img":{"width":1060,"height":351,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":47587,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_5.png"}}

  3. Defina os estados como na imagem abaixo:

    {"base64":"  ","img":{"width":961,"height":735,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":101478,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_6.png"}}

    Insira as URLs abaixo em URIs de redirecionamento do OAuth válidos, substituindo {{HOST_URL}} pela URL base de sua loja e {{accountName}} pelo nome da sua conta VTEX como descrito no Admin:

    • https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx
    • https://{{HOST_URL}}/api/vtexid/pub/authentication/oauth/authorizationcode
    • https://{{accountName}}.myvtex.com/api/vtexid/pub/authentication/oauth/authorizationcode
  4. No final da página, clique no botão Salvar alterações.

3. Realizar configurações básicas do aplicativo

Por fim, você precisa preencher algumas informações sobre o app para concluir o processo de cadastro. Nesta etapa, você vai obter o Client Id e o Segredo do cliente que serão utilizados nas configurações do login com o Facebook realizadas no Admin VTEX. Siga os passos abaixo:

  1. No menu lateral do Meta for Developers, vá em Configurações do app e clique em Básico:

    {"base64":"  ","img":{"width":292,"height":114,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":5882,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Authentication/Authentication%20basics/cadastrar-client-id-e-segredo-do-cliente-para-login-com-facebook_7.png"}}

  2. Copie o valor do campo ID do Aplicativo. Você deverá informar este valor no campo Client ID ao configurar o login com Facebook no Admin VTEX.

  3. Em Chave Secreta do Aplicativo, clique no botão Mostrar e, em seguida, copie o valor do campo. Você deverá informar este valor no campo Segredo do cliente ao configurar o login com Facebook no Admin VTEX.

  4. No campo URL da Política de Privacidade, adicione o link para a política de privacidade da sua loja.

  5. Em Ícone do aplicativo (1024 x 1024), insira um ícone para seu aplicativo de exatamente 1024x1024 pixels e fundo transparente.

  6. Selecione uma Categoria. Para lojas, a sugestão é utilizar Compras.

  7. Abaixo neste formulário, preencha as Informações de contato do encarregado da proteção dos dados com os dados da empresa responsável pela loja.

  8. No final da página, clique em Salvar alterações.

Após concluir todas essas etapas, você pode utilizar o Client ID e o Segredo do cliente obtidos para configurar o login com Facebook na sua loja, conforme detalhado no artigo Configurar login com Facebook e Google.

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback