Autenticar usando o login do Facebook com JavaScript
Permita que seus usuários se autentiquem com o Firebase usando suas contas do Facebook integrando o login do Facebook ao seu app. Você pode integrar o login do Facebook usando o SDK do Firebase para realizar o fluxo de login ou realizando o fluxo de login do Facebook manualmente e passando o token de acesso resultante para o Firebase.
Na guia Método de login, ative o método de login pelo Facebook
e especifique o ID e o secret do app recebidos do Facebook.
Em seguida, verifique se o URI de redirecionamento do OAuth (por exemplo, my-app-12345.firebaseapp.com/__/auth/handler) está listado como um dos URIs de redirecionamento do OAuth na página de configurações do app Facebook. No site Facebook for Developers, acesse Product Settings > Facebook Login.
Processar o fluxo de login com o SDK do Firebase
Se você está desenvolvendo um app da Web, a maneira mais fácil de autenticar seus usuários com o Firebase usando contas do Twitter é processando o fluxo de login com o SDK para JavaScript do Firebase. Se quiser autenticar um usuário no Node.js ou outro ambiente fora do navegador, precisará processar o fluxo de login manualmente.
Para processar o fluxo de login com o SDK do Firebase para JavaScript, siga estas etapas:
Crie uma instância do objeto do provedor do Facebook:
Versão 9 para a Web
import { FacebookAuthProvider } from "firebase/auth";
const provider = new FacebookAuthProvider();
Opcional: especifique escopos adicionais do OAuth 2.0 que você
quer solicitar do provedor de autenticação. Para adicionar um escopo, chame addScope. Exemplo:
Opcional: para localizar o fluxo de OAuth do provedor para o idioma preferido do usuário sem passar explicitamente os parâmetros de OAuth personalizados relevantes, atualize o código do idioma na instância de Auth antes de iniciar o fluxo de OAuth. Exemplo:
Versão 9 para a Web
import { getAuth } from "firebase/auth";
const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
Opcional: especifique outros parâmetros personalizados do provedor de OAuth que quiser enviar com a solicitação de OAuth. Para adicioná-los, chame setCustomParameters no provedor inicializado usando um objeto que tenha a chave especificada na documentação do provedor de OAuth e o valor correspondente. Por exemplo:
Os parâmetros de OAuth reservados e obrigatórios não são permitidos e serão ignorados.
Consulte a referência do provedor de autenticação para mais detalhes.
Faça a autenticação com o Firebase usando o objeto de provedor do Facebook. Você pode solicitar que os usuários façam login com a conta deles do Facebook por meio de uma janela pop-up ou redirecionando-os à página de login do provedor. O método de redirecionamento é recomendável para dispositivos móveis.
Para fazer login com uma janela pop-up, chame signInWithPopup:
Versão 9 para a Web
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;
// ...
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.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;
// 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;
// ...
});
Além disso, é possível recuperar o token de OAuth do provedor do Facebook, que pode ser usado para recuperar outros dados por meio das APIs do Facebook.
Em seguida, você também pode recuperar o token de OAuth do provedor do Facebook. Basta chamar getRedirectResult quando a página carregar:
Versão 9 para a Web
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;
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.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;
}).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;
// ...
});
Como processar erros account-exists-with-different-credential
Se você ativou a configuração Uma conta por endereço de e-mail no Console do Firebase, quando um usuário tentar se conectar a um provedor (como o Facebook) com um e-mail que já existe em outro provedor de usuário do Firebase (como o Google), o erro auth/account-exists-with-different-credential será exibido com um objeto AuthCredential (token de acesso do Facebook). Para concluir o login no provedor pretendido, o usuário deverá, primeiro, fazer login no provedor existente (Google) e, em seguida, vinculá-lo ao AuthCredentialanterior (token de acesso do Facebook).
Modo de pop-up
Se você usar signInWithPopup, poderá solucionar erros auth/account-exists-with-different-credential utilizando código, como o do exemplo a seguir:
// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
// An error happened.
if (error.code === 'auth/account-exists-with-different-credential') {
// Step 2.
// User's email already exists.
// The pending Facebook credential.
var pendingCred = error.credential;
// The provider account's email address.
var email = error.email;
// Get sign-in methods for this email.
auth.fetchSignInMethodsForEmail(email).then(function(methods) {
// Step 3.
// If the user has several sign-in methods,
// the first method in the list will be the "recommended" method to use.
if (methods[0] === 'password') {
// Asks the user their password.
// In real scenario, you should handle this asynchronously.
var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
auth.signInWithEmailAndPassword(email, password).then(function(result) {
// Step 4a.
return result.user.linkWithCredential(pendingCred);
}).then(function() {
// Facebook account successfully linked to the existing Firebase user.
goToApp();
});
return;
}
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = getProviderForProviderId(methods[0]);
// At this point, you should let the user know that they already have an account
// but with a different provider, and let them validate the fact they want to
// sign in with this provider.
// Sign in to provider. Note: browsers usually block popup triggered asynchronously,
// so in real scenario you should ask the user to click on a "continue" button
// that will trigger the signInWithPopup.
auth.signInWithPopup(provider).then(function(result) {
// Remember that the user may have signed in with an account that has a different email
// address than the first one. This can happen as Firebase doesn't control the provider's
// sign in flow and the user is free to login using whichever account they own.
// Step 4b.
// Link to Facebook credential.
// As we have access to the pending credential, we can directly call the link method.
result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
// Facebook account successfully linked to the existing Firebase user.
goToApp();
});
});
});
}
});
Modo de redirecionamento
O processamento desse erro é similar no modo de redirecionamento. No entanto, nele, as credenciais pendentes devem ser armazenadas em cache entre os redirecionamentos de página usando, por exemplo, o armazenamento de sessão.
Avançado: processar o fluxo de login manualmente
Você também pode fazer a autenticação com o Firebase usando uma conta do Facebook por meio do fluxo de login com o SDK para JavaScript de Login do Facebook:
Integre o Login do Facebook no seu app de acordo com os documentos do desenvolvedor.
Não deixe de configurar o login do Facebook com seu código de 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 listener no estado de autenticação do Facebook:
Na chamada de retorno sobre o estado de autenticação do Facebook, troque o token da resposta de autenticação do Facebook por uma credencial do Firebase e faça login nessa plataforma:
Versão 9 para a Web
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.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, verifique também se o usuário do Facebook já fez login no Firebase para evitar uma nova autenticação desnecessária:
Versão 9 para a Web
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;
}
Faça login do usuário com a conta dele do Facebook e receba o token de acesso do Facebook do usuário. Por exemplo, faça login do usuário em um navegador conforme descrito na seção Processar fluxo de login manualmente, mas envie o token de acesso ao seu app do Node.js em vez de usá-lo no app do cliente.
Depois de receber o token de acesso do Facebook, use-o para criar um
objeto de credencial e faça o login do usuário com essa credencial:
Versão 9 para a Web
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.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;
// ...
});
Na seção Autenticação, abra a página Método de login.
Adicione um URI como o seguinte à lista de domínios autorizados:
chrome-extension://CHROME_EXTENSION_ID
Somente as operações pop-up (signInWithPopup, linkWithPopup e reauthenticateWithPopup) estão disponíveis
para as extensões do Chrome. Isso ocorre porque as extensões não podem usar
redirecionamentos de HTTP. Chame esses métodos usando um script de página em segundo plano porque,
se usar o pop-up de ação do navegador, ele será cancelado pelo pop-up de autenticação. Os métodos
pop-up só podem ser usados em extensões que usam
o Manifest V2. O Manifest V3
mais recente só permite scripts em segundo plano na forma de service workers, que não podem realizar as operações
pop-up.
No arquivo de manifesto da sua extensão do Chrome, adicione o URL https://apis.google.com à lista de permissões content_security_policy.
Como personalizar o domínio de redirecionamento para o login do Facebook
O Firebase provisionará um subdomínio exclusivo para o projeto
https://my-app-12345.firebaseapp.com no momento da criação dele.
Esse subdomínio também será usado como mecanismo de redirecionamento para o login do OAuth. Esse domínio precisaria ter
permissão para todos os provedores OAuth compatíveis. No entanto, isso significa que os usuários talvez vejam esse
domínio ao entrar no Facebook antes do redirecionamento de volta para o aplicativo:
Continuar para: https://my-app-12345.firebaseapp.com.
Para evitar a exibição do subdomínio, configure um domínio personalizado com o Firebase Hosting:
Siga as etapas de 1 a 3 em
Configurar o domínio para o Hosting. Quando você verifica
a propriedade do domínio, o Hosting provisiona um certificado SSL para o domínio personalizado.
Adicione o domínio personalizado à lista de domínios autorizados no
Console do Firebase: auth.custom.domain.com.
No console para desenvolvedores do Facebook ou na página de configuração do OAuth, adicione o URL da página de redirecionamento à lista de permissões, que estará acessível no seu domínio personalizado: https://auth.custom.domain.com/__/auth/handler.
Ao inicializar a biblioteca do JavaScript, especifique seu domínio personalizado com o campo authDomain:
Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e
vinculada às credenciais, que podem ser o número do telefone,
o nome de usuário e a senha ou as informações do provedor de autenticação. Essa nova
conta é armazenada como parte do projeto do Firebase e pode ser usada para identificar
um usuário em todos os apps do projeto, seja qual for o método de login utilizado.
Nos apps, a maneira recomendada de saber o status de autenticação do seu usuário é
definindo um observador no objeto Auth. É possível, então, receber as informações básicas de perfil do usuário do objeto User. Consulte
Gerenciar usuários.
Nas
Regras de segurança do Firebase Realtime Database e do Cloud Storage, é possível
receber o ID exclusivo do usuário conectado da variável auth
e usar esse ID para controlar quais dados um usuário pode acessar.