Configurar login social com Facebook

O conector oficial do Logto para login social do Facebook.

dica:

Este guia assume que você tem um entendimento básico dos Conectores (Connectors) do Logto. Para aqueles que não estão familiarizados, consulte o guia de Conectores para começar.

Introdução

O conector do Facebook fornece uma maneira concisa para seu aplicativo usar o sistema de autenticação OAuth 2.0 do Facebook.

Registre uma conta de desenvolvedor do Facebook

Registre-se como um Desenvolvedor do Facebook se você ainda não tiver uma conta

Configure um aplicativo do Facebook

1. Visite a página de Apps.
2. Clique no seu aplicativo existente ou crie um novo se necessário.
   • O tipo de aplicativo selecionado é de sua escolha, mas deve ter o produto Facebook Login.
3. Na página do painel do aplicativo, role até a seção "Adicionar um produto" e clique no botão "Configurar" no cartão "Facebook Login".
4. Pule a página de início rápido do Facebook Login e clique na barra lateral -> "Produtos" -> "Facebook Login" -> "Configurações".
5. Na página de Configurações do Facebook Login, preencha ${your_logto_origin}/callback/${connector_id} no campo "Valid OAuth Redirect URIs". O connector_id pode ser encontrado na barra superior da página de detalhes do conector do Logto Admin Console. Exemplo:
   • https://logto.dev/callback/${connector_id} para produção
   • https://localhost:3001/callback/${connector_id} para testes no ambiente local
6. Clique no botão "Salvar alterações" no canto inferior direito.

Compor o JSON do conector

1. Na página do painel do aplicativo do Facebook, clique na barra lateral -> "Configurações" -> "Básico".
2. Você verá o "App ID" e o "App secret" no painel.
3. Clique no botão "Mostrar" ao lado da caixa de entrada do App secret para copiar seu conteúdo.
4. Preencha as configurações do conector do Logto:
   • Preencha o campo clientId com a string do App ID.
   • Preencha o campo clientSecret com a string do App secret.
   • Preencha o campo scope com uma lista separada por vírgula ou espaço de permissões em string. Se você não especificar um escopo, o escopo padrão é email,public_profile.

Testar login com usuários de teste do Facebook

Você pode usar as contas dos usuários de teste, desenvolvedores e administradores para testar o login com o aplicativo relacionado em ambos os modos de aplicativo de desenvolvimento e ao vivo.

Você também pode colocar o aplicativo ao vivo diretamente para que qualquer usuário do Facebook possa fazer login com o aplicativo.

• Na página do painel do aplicativo, clique na barra lateral -> "Funções" -> "Usuários de Teste".
• Clique no botão "Criar usuários de teste" para criar um usuário de teste.
• Clique no botão "Opções" do usuário de teste existente, e você verá mais operações, por exemplo, "Alterar nome e senha".

Publicar configurações de login do Facebook

Normalmente, apenas os usuários de teste, administradores e desenvolvedores podem fazer login com o aplicativo relacionado em modo de desenvolvimento.

Para permitir que usuários normais do Facebook façam login com o aplicativo no ambiente de produção, talvez seja necessário mudar seu aplicativo do Facebook para o modo ao vivo, dependendo do tipo de aplicativo. Por exemplo, o aplicativo de tipo empresarial puro não tem o botão de alternância "ao vivo", mas isso não impedirá seu uso.

1. Na página do painel do aplicativo do Facebook, clique na barra lateral -> "Configurações" -> "Básico".
2. Preencha os campos "URL da Política de Privacidade" e "Exclusão de dados do usuário" no painel, se necessário.
3. Clique no botão "Salvar alterações" no canto inferior direito.
4. Clique no botão de alternância "Ao vivo" na barra superior do aplicativo.

Tipos de configuração

Nome	Tipo
clientId	string
clientSecret	string
scope	string

Referências

• Facebook Login - Documentation - Facebook for Developers
  • Construir manualmente um fluxo de login
  • Guia de Permissões