Você pode permitir que seus usuários se autentiquem no Firebase usando suas contas do Facebook integrando o Login do Facebook ao seu aplicativo. Você pode integrar o login do Facebook usando o SDK do Firebase para realizar o fluxo de login ou executando o fluxo de login do Facebook manualmente e passando o token de acesso resultante para o Firebase.
Antes de você começar
- Adicione o Firebase ao seu projeto JavaScript .
- No site Facebook for Developers , obtenha o App ID e um App Secret para seu aplicativo.
- Habilite o login do Facebook:
- No console do Firebase , abra a seção Auth .
- Na guia Método de login , habilite o método de login do Facebook e especifique o ID do aplicativo e o segredo do aplicativo que você obteve do Facebook.
- Em seguida, certifique-se de que seu URI de redirecionamento OAuth (por exemplo,
my-app-12345.firebaseapp.com/__/auth/handler
) esteja listado como um dos seus URIs de redirecionamento OAuth na página de configurações do seu aplicativo do Facebook no site Facebook for Developers no Produto Configurações > Configuração de login do Facebook .
Lidar com o fluxo de login com o SDK do Firebase
Se você estiver criando um aplicativo da Web, a maneira mais fácil de autenticar seus usuários no Firebase usando suas contas do Facebook é lidar com o fluxo de login com o SDK JavaScript do Firebase. (Se quiser autenticar um usuário no Node.js ou em outro ambiente que não seja de navegador, você deverá manipular o fluxo de login manualmente.)
Para lidar com o fluxo de login com o SDK JavaScript do Firebase, siga estas etapas:
- Crie uma instância do objeto provedor do Facebook:
import { FacebookAuthProvider } from "firebase/auth";
const provider = new FacebookAuthProvider();var provider = new firebase.auth.FacebookAuthProvider();
- Opcional : Especifique escopos adicionais do OAuth 2.0 que você deseja solicitar do provedor de autenticação. Para adicionar um escopo, chame
addScope
. Por exemplo: Consulte a documentação do provedor de autenticação .provider.addScope('user_birthday');
provider.addScope('user_birthday');
- Opcional : para localizar o fluxo OAuth do provedor para o idioma preferencial do usuário sem passar explicitamente os parâmetros OAuth personalizados relevantes, atualize o código do idioma na instância do Auth antes de iniciar o fluxo OAuth. Por exemplo:
import { getAuth } from "firebase/auth";
const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage(); - Opcional : Especifique parâmetros adicionais do provedor OAuth customizado que você deseja enviar com a solicitação OAuth. Para adicionar um parâmetro personalizado, chame
setCustomParameters
no provedor inicializado com um objeto contendo a chave conforme especificado na documentação do provedor OAuth e o valor correspondente. Por exemplo: Parâmetros OAuth obrigatórios reservados não são permitidos e serão ignorados. Consulte a referência do provedor de autenticação para obter mais detalhes.provider.setCustomParameters({
'display': 'popup'
});provider.setCustomParameters({
'display': 'popup'
}); - Autentique-se com o Firebase usando o objeto de provedor do Facebook. Você pode solicitar que seus usuários façam login com suas contas do Facebook abrindo uma janela pop-up ou redirecionando para a página de login. O método de redirecionamento é preferido em dispositivos móveis.
- Para fazer login com uma janela pop-up, chame
signInWithPopup
: Observe também que você pode recuperar o token OAuth do provedor do Facebook, que pode ser usado para buscar dados adicionais usando as APIs do Facebook.import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();
signInWithPopup(auth, provider)
.then((result) => {
// The signed-in user info.
const user = result.user;
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
const credential = FacebookAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
// IdP data available using getAdditionalUserInfo(result)
// ...
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = FacebookAuthProvider.credentialFromError(error);
// ...
});firebase
.auth()
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// The signed-in user info.
var user = result.user;
// IdP data available in result.additionalUserInfo.profile.
// ...
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var accessToken = credential.accessToken;
// ...
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte os documentos de referência de autenticação .
- Para fazer login redirecionando para a página de login, chame
signInWithRedirect
: siga as práticas recomendadas ao usar `signInWithRedirect`. Em seguida, você também pode recuperar o token OAuth do provedor do Facebook chamandoimport { getAuth, signInWithRedirect } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(auth, provider);firebase.auth().signInWithRedirect(provider);
getRedirectResult
quando sua página for carregada: É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte os documentos de referência de autenticação .import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();
getRedirectResult(auth)
.then((result) => {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
const credential = FacebookAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const user = result.user;
// IdP data available using getAdditionalUserInfo(result)
// ...
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// AuthCredential type that was used.
const credential = FacebookAuthProvider.credentialFromError(error);
// ...
});firebase.auth()
.getRedirectResult()
.then((result) => {
if (result.credential) {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = credential.accessToken;
// ...
}
// The signed-in user info.
var user = result.user;
// IdP data available in result.additionalUserInfo.profile.
// ...
}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
- Para fazer login com uma janela pop-up, chame
Tratamento de erros de conta existente com credenciais diferentes
Se você ativou a configuração Uma conta por endereço de e-mail no console do Firebase , quando um usuário tenta fazer login em um provedor (como o Facebook) com um e-mail que já existe para o provedor de outro usuário do Firebase (como o Google), o erro auth/account-exists-with-different-credential
é lançada junto com um objeto AuthCredential
(token de acesso do Facebook). Para concluir o login no provedor pretendido, o usuário deve primeiro fazer login no provedor existente (Google) e depois vincular-se ao antigo AuthCredential
(token de acesso do Facebook).
Modo pop-up
Se você usar signInWithPopup
, poderá lidar com erros auth/account-exists-with-different-credential
com código como o exemplo a seguir:
import {
getAuth,
linkWithCredential,
signInWithPopup,
FacebookAuthProvider,
} from "firebase/auth";
try {
// Step 1: User tries to sign in using Facebook.
let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
// Step 2: User's email already exists.
if (error.code === "auth/account-exists-with-different-credential") {
// The pending Facebook credential.
let pendingCred = error.credential;
// Step 3: Save the pending credential in temporary storage,
// Step 4: Let the user know that they already have an account
// but with a different provider, and let them choose another
// sign-in method.
}
}
// ...
try {
// Step 5: Sign the user in using their chosen method.
let result = await signInWithPopup(getAuth(), userSelectedProvider);
// Step 6: Link to the Facebook credential.
// TODO: implement `retrievePendingCred` for your app.
let pendingCred = retrievePendingCred();
if (pendingCred !== null) {
// As you have access to the pending credential, you can directly call the
// link method.
let user = await linkWithCredential(result.user, pendingCred);
}
// Step 7: Continue to app.
} catch (error) {
// ...
}
Modo de redirecionamento
Este erro é tratado de maneira semelhante no modo de redirecionamento, com a diferença de que a credencial pendente deve ser armazenada em cache entre os redirecionamentos de página (por exemplo, usando armazenamento de sessão).
Avançado: lidar com o fluxo de login manualmente
Você também pode autenticar com o Firebase usando uma conta do Facebook gerenciando o fluxo de login com o SDK JavaScript de login do Facebook:
- Integre o login do Facebook ao seu aplicativo seguindo a documentação do desenvolvedor . Certifique-se de configurar o Login do Facebook com o ID do seu aplicativo do Facebook:
<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
FB.init({
/**********************************************************************
* TODO(Developer): Change the value below with your Facebook app ID. *
**********************************************************************/
appId: '<YOUR_FACEBOOK_APP_ID>',
status: true,
xfbml: true,
version: 'v2.6',
});
</script> - Também configuramos um ouvinte no estado de autenticação do Facebook:
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
- Depois de integrar o Login do Facebook, adicione um botão de Login do Facebook em suas páginas da web:
<fb:login-button
data-auto-logout-link="true"
scope="public_profile,email"
size="large"
></fb:login-button> - No retorno de chamada do estado de autenticação do Facebook, troque o token de autenticação da resposta de autenticação do Facebook por uma credencial do Firebase e faça login no Firebase:
É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte os documentos de referência de autenticação .import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();
function checkLoginState(response) {
if (response.authResponse) {
// User is signed-in Facebook.
const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
unsubscribe();
// Check if we are already signed-in Firebase with the correct user.
if (!isUserEqual(response.authResponse, firebaseUser)) {
// Build Firebase credential with the Facebook auth token.
const credential = FacebookAuthProvider.credential(
response.authResponse.accessToken);
// Sign in with the credential from the Facebook user.
signInWithCredential(auth, credential)
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = FacebookAuthProvider.credentialFromError(error);
// ...
});
} else {
// User is already signed-in Firebase with the correct user.
}
});
} else {
// User is signed-out of Facebook.
signOut(auth);
}
}function checkLoginState(response) {
if (response.authResponse) {
// User is signed-in Facebook.
var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
unsubscribe();
// Check if we are already signed-in Firebase with the correct user.
if (!isUserEqual(response.authResponse, firebaseUser)) {
// Build Firebase credential with the Facebook auth token.
var credential = firebase.auth.FacebookAuthProvider.credential(
response.authResponse.accessToken);
// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
} else {
// User is already signed-in Firebase with the correct user.
}
});
} else {
// User is signed-out of Facebook.
firebase.auth().signOut();
}
} - Além disso, você deve verificar se o usuário do Facebook ainda não está conectado ao Firebase para evitar uma nova autenticação desnecessária:
import { FacebookAuthProvider } from "firebase/auth";
function isUserEqual(facebookAuthResponse, firebaseUser) {
if (firebaseUser) {
const providerData = firebaseUser.providerData;
for (let i = 0; i < providerData.length; i++) {
if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
providerData[i].uid === facebookAuthResponse.userID) {
// We don't need to re-auth the Firebase connection.
return true;
}
}
}
return false;
}function isUserEqual(facebookAuthResponse, firebaseUser) {
if (firebaseUser) {
var providerData = firebaseUser.providerData;
for (var i = 0; i < providerData.length; i++) {
if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
providerData[i].uid === facebookAuthResponse.userID) {
// We don't need to re-auth the Firebase connection.
return true;
}
}
}
return false;
}
Avançado: autenticar com Firebase em Node.js
Para autenticar com o Firebase em um aplicativo Node.js:
- Faça login do usuário com sua conta do Facebook e obtenha o token de acesso do usuário no Facebook. Por exemplo, faça login do usuário em um navegador conforme descrito na seção Tratar o fluxo de login manualmente , mas envie o token de acesso para seu aplicativo Node.js em vez de usá-lo no aplicativo cliente.
- Depois de obter o token de acesso do Facebook do usuário, use-o para criar um objeto Credential e, em seguida, faça login do usuário com a credencial:
import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
.then((result) => {
// Signed in
const credential = FacebookAuthProvider.credentialFromResult(result);
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = FacebookAuthProvider.credentialFromError(error);
// ...
});// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
.then((result) => {
// Signed in
var credential = result.credential;
// ...
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
Autenticar com Firebase em uma extensão do Chrome
Se você estiver criando um aplicativo de extensão do Chrome, consulte o guia Documentos fora da tela .
Personalizando o domínio de redirecionamento para login no Facebook
Na criação do projeto, o Firebase provisionará um subdomínio exclusivo para o seu projeto: https://my-app-12345.firebaseapp.com
.
Isso também será usado como mecanismo de redirecionamento para login do OAuth. Esse domínio precisaria ser permitido para todos os provedores OAuth suportados. No entanto, isso significa que os usuários podem ver esse domínio ao fazer login no Facebook antes de redirecionar de volta para o aplicativo: Continue para: https://my-app-12345.firebaseapp.com .
Para evitar a exibição do seu subdomínio, você pode configurar um domínio personalizado com Firebase Hosting:
- Siga as etapas 1 a 3 em Configure seu domínio para hospedagem . Quando você verifica a propriedade do seu domínio, a Hosting fornece um certificado SSL para o seu domínio personalizado.
- Adicione seu domínio personalizado à lista de domínios autorizados no console do Firebase :
auth.custom.domain.com
. - No console do desenvolvedor do Facebook ou na página de configuração do OAuth, coloque na lista de permissões o URL da página de redirecionamento, que estará acessível em seu domínio personalizado:
https://auth.custom.domain.com/__/auth/handler
. - Ao inicializar a biblioteca JavaScript, especifique seu domínio personalizado com o campo
authDomain
:var config = {
apiKey: '...',
// Changed from 'my-app-12345.firebaseapp.com'.
authDomain: 'auth.custom.domain.com',
databaseURL: 'https://my-app-12345.firebaseio.com',
projectId: 'my-app-12345',
storageBucket: 'my-app-12345.appspot.com',
messagingSenderId: '1234567890'
};
firebase.initializeApp(config);
Próximos passos
Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais (ou seja, nome de usuário e senha, número de telefone ou informações do provedor de autenticação) com as quais o usuário fez login. Essa nova conta é armazenada como parte do seu projeto do Firebase e pode ser usada para identificar um usuário em todos os aplicativos do seu projeto, independentemente de como o usuário faz login.
Em seus aplicativos, a maneira recomendada de saber o status de autenticação do seu usuário é definir um observador no objeto
Auth
. Você pode então obter as informações básicas do perfil do usuário no objetoUser
. Consulte Gerenciar usuários .Nas regras de segurança do Firebase Realtime Database e do Cloud Storage , você pode obter o ID de usuário exclusivo do usuário conectado na variável
auth
e usá-lo para controlar quais dados um usuário pode acessar.
Você pode permitir que os usuários façam login no seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente.
Para desconectar um usuário, chame signOut
:
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});