Central de Atendimento Nuvem

Como criar um aplicativo de Login no Facebook for Developers?

Saiba como criar, adicionar e configurar o Aplicativo na sua conta do Facebook para Developers e ativar o Login via Facebook na sua loja Nuvemshop.

Última atualização: 14/06/2022

Com a conta do Facebook for Developers criada e configurada, siga os passos abaixo para adicionar e configurar o Aplicativo de Login do Facebook

Dessa forma, seus clientes poderão criar um cadastro, ou fazer login em sua loja, a partir da conta do Facebook.

Passos de configuração

1. Criar aplicativo no Facebook for Developers

1.1. Acessar o 🌐 Facebook for Developers  e clicar em "Criar aplicativo".

Tela do Facebook for Developers, com o botão "Criar aplicativo" em destaque
 Se não encontrar essa tela, no cabeçalho da página, clique em "Meus aplicativos".

1.2. Na próxima tela, selecionar a opção "Consumidor" e clicar em "Avançar".

Menu de criação do aplicativo, com a opção "Consumidor" e o botão "Avançar" em destaque
1.3. Em seguida, você deve informar um nome para o aplicativo (será exibido somente no seu painel Facebook for Developers) e um e-mail para receber notificações. Caso queira, também é possível vincular uma conta do Gerenciador de Negócios do Facebook, clicando na setinha para selecionar a conta.

Para concluir, clicar em "Criar aplicativo".

Menu de criação do aplicativo, com os campos de informações básicas e o botão "Avançar" em destaque
1.4. Para garantir a sua segurança, irá aparecer uma janela para você informar a senha da conta do Facebook

Janela para informar a senha da conta do Facebook, com o botão "Enviar" em destaque

Delete

2. Habilitar o aplicativo Login do Facebook

Após concluir a primeira etapa, siga os passos abaixo para configurar e habilitar o Login do Facebook em sua Nuvemshop.

2.1. Na janela do painel, procurar pelo aplicativo Login do Facebook e clique em "Configurar".

Menu de opções do painel Facebook for Developers, com a opção "Login do Faceboo" e o botão "Configurar" em destaque
2.2. Agora, você deve clicar na opção "Web" (WWW).

Selecionar a plataforma do aplicativo, com o botão "Web" em destaque
2.3. No primeiro passo, você terá que adicionar o URL do seu site (endereço web/domínio próprio ou compartilhado). Feito isso, clique em "Save" e em "Continuar".

Campo para informar a URL do site, com os botões "Save" e "Continuar" em destaque
2.4. Para as próximas etapas, clicar em "Avançar" até finalizar essa parte da configuração, isso porque a Nuvemshop já possui essa parte da integração configurada, você só precisará informar o endereço (domínio) da sua loja. Veja o GIF de exemplo:

GIF de exemplo para avançar nas etapas de criação do aplicativo

Delete

3. Configurar o aplicativo de Login do Facebook

O Facebook exige que sua loja tenha uma página para a Política de Privacidade, Exclusão de dados (LGPD)Termos de Serviço e forneça mais algumas informações para garantir a segurança do Aplicativo.

Delete

Info

Se ainda não criou as páginas em sua loja, siga o tutorial 👉 Como criar páginas de conteúdo?

3.1. Ainda na mesma janela da etapa anterior, no menu esquerdo, seguir o caminho "Configurações > Básico". Você deverá preencher os seguintes campos:

Configurações básicas do aplicativo de login do Facebook, com os campos a preencher em destaque

  • Nome de exibição: inserir novamente o nome que elegeu para seu aplicativo.
  • Domínios do aplicativo: preencher com as URLs de sua loja com WWW e sem WWW.
  • URL da Política de Privacidade: adicionar o link para a política de privacidade de sua loja.
  • URL dos Termos de Serviço: adicionar o link para os termos de serviço de sua loja.
  • Exclusão de dados do usuário: para se adequar à LGPD, informar o link para a página de exclusão de dados do usuário.
  • Categoria: selecionar a categoria "Compras".
Delete

Warning

Para que o Login do Facebook seja ativado, a loja deve estar acessível. Caso esteja com o modo "Página em Construção" ativado, o Facebook não conseguirá localizar as páginas.

Desative o modo "Página em Construção" seguindo os passos do tutorial 👉 Desativando o modo Página em construção.

3.2. A seção "Verificação" é opcional, indicamos que a faça somente se precisar acessar determinados dados do Aplicativo.

Sessão de verificação da empresa para o aplicativo Login do Facebook
Para mais informações sobre, consulte 🌐 Sobre a verificação da empresa.

3.3. Na última parte, preencher os seguintes campos e clicar em "Salvar alterações" para continuar.

Campos para preencher com os dados do encarregado de proteção de dados e URL do site. Botão "Salvar alterações" em destaque

  • Informações de contato do responsável pela proteção dos dados: estas informações não são obrigatórias, mas caso vá vender internacionalmente, recomendamos preencher todos os campos.
  • Site: se não estiver automaticamente preenchido, informe novamente o endereço de sua loja.
Delete

4. Alterar para o Acesso avançado (Advanced Access)

Para ativar o Login do Facebook em sua loja, você deve alterar a permissão de acesso de Padrão para Avançado.

4.1. No menu esquerdo, seguir o caminho "Análise do aplicativo > Permissões e recursos".

Menu lateral do site, com o caminho "Análise do aplicativo" e "Permissões e recursos" em destaque
4.2. Ao lado direito, procurar pela permissão "Public_profile" e verificar se o nível de acesso está definido como "Standard access" ou "Advanced Access", como no exemplo:

Nível de acesso do perfil público, com o nível "Advanced Access" configurado
Se estiver com o nível "Standard Access", você terá que liberar o acesso Avançado (Advanced Access). Para isso, basta clicar no botão "Obter acesso avançado".

4.3. Abrirá uma janela de confirmação. Leia os termos de uso e, caso concorde, marque que concorda e depois no botão "Confirmar".

Janela com os termos de uso para concordar com as configurações. Botão "confirmar" em destaque
4.4. O nível de acesso para a permissão "Public_profile" será atualizado para "Advanced Access" (Acesso avançado).

Delete

5. Habilitar o acesso ao e-mail

Agora, será necessário habilitar a permissão para e-mail.

5.1. Ainda no menu "Análise do aplicativo > Permissões e recursos", procurar pela permissão e-mail. Assim como ocorreu na etapa anterior, se a permissão e-mail estiver configurada com o nível "Standard Access", você deve liberar o acesso Avançado (Advanced Access). Para isso, basta clicar no botão "Obter acesso avançado".

Nível de acesso do e-mail, com o nível "Standard Access" configurado. Botão "Obter acesso avançado" em destaque
5.2. Abrirá uma janela de confirmação. Leia os termos de uso e, caso concorde, marque que concorda e depois no botão "Confirmar".

Janela com os termos de uso para concordar com as configurações. Botão "confirmar" em destaque
5.3. O nível de acesso para a permissão "e-mail" será atualizado para "Advanced Access" (Acesso avançado).

Delete

6. Configurar a autenticação do cliente

Para garantir que os clientes façam o login em um ambiente seguro, é obrigatório que ative todas as autenticações para minimizar qualquer tipo de ataque.

6.1. No menu esquerdo, seguir o caminho "Login do Facebook > Configurações"

Menu lateral do site, com o caminho "Login do Facebook" e "Configurações" em destaque
6.2. Na seção "Configurações de OAuth do Cliente", você deve ativar todas as opções de autenticações, igual o exemplo abaixo:

Configurações de Oauth do cliente, com os botões para habilitar em destaque
6.3. Depois, será preciso adicionar o domínio com WWW e sem WWW no campo "URLs de redirecionamento do OAuth", igual o exemplo abaixo:

Campo para incluir o domínio da loja com e sem WWW

Delete

Warning

Ative a opção entrada "SDK" e "Login de dispositivos" somente se a sua loja possui alguma aplicação. Feito isso, adicione o endereço de domínios igual o exemplo acima no campo Domínios permitidos para o SDK do JavaScript.

6.4. Ao finalizar as configurações, clique em "Salvar Alterações" para concluir.

Delete

7. Ativar o aplicativo Login do Facebook

Quando finalizar as configurações do aplicativo para o Login do Facebook, você deve alterar o modo do aplicativo de "Desenvolvimento" para "Ao vivo".

7.1. No painel de configuração do aplicativo, próximo do cabeçalho, procure pela opção "Modo Aplicativo".

Opção "Modo do aplicativo" em destaque
7.2. Por padrão, o Facebook for Developers deixa o aplicativo configurado em modo de "Desenvolvimento". Para torná-lo público, basta clicar na bolinha preta. Ele será alterado para "Ao vivo" e ficará na cor azul.

Visualização do clique para habilitar o modo "Ao vivo" do aplicativo
7.3. Ao publicar o aplicativo, siga os passos do tutorial 👉 Como ativar o Login via Facebook para seu cliente? para ativá-lo em sua loja.

Delete


Pronto! 🙌

O aplicativo foi criado em sua conta Facebook para Developers e seus clientes poderão fazer o login em sua loja com suas contas da rede social.

O artigo ajudou você?