Вы можете разрешить своим пользователям аутентифицироваться в Firebase, используя их учетные записи Facebook, интегрировав вход через Facebook в свое приложение. Вы можете интегрировать вход в Facebook либо с помощью Firebase SDK для выполнения процесса входа, либо выполнив процесс входа в Facebook вручную и передав полученный токен доступа в Firebase.
Прежде чем начать
- Добавьте Firebase в свой проект JavaScript .
- На сайте Facebook для разработчиков получите идентификатор приложения и секрет приложения для своего приложения.
- Включить вход через Facebook:
- В консоли Firebase откройте раздел Auth .
- На вкладке «Метод входа» включите метод входа в Facebook и укажите идентификатор приложения и секрет приложения, полученные от Facebook.
- Затем убедитесь, что ваш URI перенаправления OAuth (например,
my-app-12345.firebaseapp.com/__/auth/handler
) указан в качестве одного из ваших URI перенаправления OAuth на странице настроек вашего приложения Facebook на сайте Facebook для разработчиков в Продукте. Настройки > Конфигурация входа в Facebook .
Управляйте процессом входа в систему с помощью Firebase SDK
Если вы создаете веб-приложение, самый простой способ аутентификации ваших пользователей в Firebase с использованием их учетных записей Facebook — это обработка процесса входа с помощью Firebase JavaScript SDK. (Если вы хотите аутентифицировать пользователя в Node.js или другой среде, отличной от браузера, вам придется обрабатывать процесс входа вручную.)
Чтобы обработать процесс входа с помощью Firebase JavaScript SDK, выполните следующие действия:
- Создайте экземпляр объекта провайдера Facebook:
Web
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web
var provider = new firebase.auth.FacebookAuthProvider();
- Необязательно : укажите дополнительные области OAuth 2.0, которые вы хотите запросить у поставщика аутентификации. Чтобы добавить область, вызовите
addScope
. Например:См. документацию поставщика аутентификации .Web
provider.addScope('user_birthday');
Web
provider.addScope('user_birthday');
- Необязательно : чтобы локализовать поток OAuth поставщика на предпочитаемый пользователем язык без явной передачи соответствующих пользовательских параметров OAuth, обновите код языка в экземпляре Auth перед запуском потока OAuth. Например:
Web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Необязательно : укажите дополнительные пользовательские параметры поставщика OAuth, которые вы хотите отправить с запросом OAuth. Чтобы добавить настраиваемый параметр, вызовите
setCustomParameters
у инициализированного поставщика с объектом, содержащим ключ, указанный в документации поставщика OAuth, и соответствующее значение. Например:Зарезервированные обязательные параметры OAuth не разрешены и будут игнорироваться. Дополнительные сведения см. в справочнике по поставщику аутентификации .Web
provider.setCustomParameters({ 'display': 'popup' });
Web
provider.setCustomParameters({ 'display': 'popup' });
- Выполните аутентификацию в Firebase, используя объект провайдера Facebook. Вы можете предложить своим пользователям войти в свою учетную запись Facebook, открыв всплывающее окно или перенаправив на страницу входа. Метод перенаправления предпочтителен на мобильных устройствах.
- Чтобы войти в систему с помощью всплывающего окна, вызовите
signInWithPopup
:Также обратите внимание, что вы можете получить токен OAuth провайдера Facebook, который можно использовать для получения дополнительных данных с помощью API Facebook.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; // 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); // ... });
Web
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; // ... });
Здесь также можно ловить и обрабатывать ошибки. Список кодов ошибок можно найти в справочной документации по аутентификации .
- Чтобы войти в систему путем перенаправления на страницу входа, вызовите
signInWithRedirect
: следуйте рекомендациям при использовании `signInWithRedirect`.Затем вы также можете получить токен OAuth провайдера Facebook, вызвавWeb
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
при загрузке вашей страницы:Здесь также можно ловить и обрабатывать ошибки. Список кодов ошибок можно найти в справочной документации по аутентификации .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; // 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); // ... });
Web
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; // ... });
- Чтобы войти в систему с помощью всплывающего окна, вызовите
Аутентификация с помощью Firebase в расширении Chrome
Если вы создаете приложение-расширение Chrome, см. руководство по Offscreen Documents .
Следующие шаги
После того, как пользователь входит в систему в первый раз, создается новая учетная запись пользователя, которая связывается с учетными данными (то есть именем пользователя и паролем, номером телефона или информацией поставщика аутентификации), с которыми пользователь вошел в систему. Эта новая учетная запись хранится как часть вашего проекта Firebase и может использоваться для идентификации пользователя в каждом приложении вашего проекта, независимо от того, как пользователь входит в систему.
В ваших приложениях рекомендуемый способ узнать статус аутентификации вашего пользователя — установить наблюдателя на объекте
Auth
. Затем вы можете получить базовую информацию профиля пользователя из объектаUser
. См. Управление пользователями .В правилах безопасности Firebase Realtime Database и Cloud Storage Firebase вы можете получить уникальный идентификатор пользователя, вошедшего в систему, из переменной
auth
и использовать его для управления тем, к каким данным пользователь может получить доступ.
Вы можете разрешить пользователям входить в ваше приложение с использованием нескольких поставщиков аутентификации , связав учетные данные поставщика аутентификации с существующей учетной записью пользователя.
Чтобы выйти из системы, вызовите signOut
:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });