Аутентификация с использованием входа в Facebook с помощью JavaScript

Вы можете разрешить пользователям аутентифицироваться в Firebase с помощью своих аккаунтов Facebook, интегрировав функцию «Вход через Facebook» в своё приложение. Вы можете интегрировать функцию «Вход через Facebook» либо с помощью Firebase SDK для реализации процесса входа, либо вручную реализуя процесс входа через Facebook и передавая полученный токен доступа в Firebase.

Прежде чем начать

  1. Добавьте Firebase в свой проект JavaScript .
  2. На сайте Facebook для разработчиков получите идентификатор приложения и секретный ключ приложения для вашего приложения.
  3. Включить вход через Facebook:
    1. В консоли Firebase откройте раздел «Аутентификация» .
    2. На вкладке «Способ входа» включите способ входа через Facebook и укажите идентификатор приложения и секретный ключ приложения , полученные от Facebook.
    3. Затем убедитесь, что ваш URI перенаправления OAuth (например, my-app-12345.firebaseapp.com/__/auth/handler ) указан как один из URI перенаправления OAuth на странице настроек вашего приложения Facebook на сайте Facebook for Developers в разделе «Настройки продукта» > «Конфигурация входа в Facebook» .

Управляйте процессом входа с помощью Firebase SDK

Если вы разрабатываете веб-приложение, самый простой способ аутентификации пользователей в Firebase с использованием их аккаунтов Facebook — это обработка процесса входа с помощью Firebase JavaScript SDK. (Если вы хотите аутентифицировать пользователя в Node.js или другой среде, отличной от браузера, вам необходимо вручную обрабатывать процесс входа.)

Чтобы организовать процесс входа с помощью Firebase JavaScript SDK, выполните следующие действия:

  1. Создайте экземпляр объекта поставщика Facebook:

    Web 

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web 

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. Необязательно : укажите дополнительные области действия OAuth 2.0, которые вы хотите запросить у поставщика аутентификации. Чтобы добавить область действия, вызовите addScope . Например:

    Web 

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web 

    provider.addScope('user_birthday');
    facebook.js
    См. документацию поставщика аутентификации .
  3. Необязательно : чтобы локализовать поток OAuth провайдера на предпочитаемый пользователем язык без явной передачи соответствующих настраиваемых параметров OAuth, обновите код языка в экземпляре аутентификации перед запуском потока 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();
    auth_set_language_code.js

    Web 

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Необязательно : укажите дополнительные параметры поставщика OAuth, которые вы хотите отправить вместе с запросом OAuth. Чтобы добавить пользовательский параметр, вызовите setCustomParameters для инициализированного поставщика с объектом, содержащим ключ, указанный в документации поставщика OAuth, и соответствующее значение. Например:

    Web 

    provider.setCustomParameters({
  'display': 'popup'
});
    auth_facebook_provider_params.js

    Web 

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    Зарезервированные обязательные параметры OAuth не допускаются и будут игнорироваться. Подробнее см. в справочнике поставщика аутентификации .
  5. Аутентификация в Firebase с использованием объекта провайдера Facebook. Вы можете предложить пользователям войти в систему, используя их аккаунты Facebook, открыв всплывающее окно или перенаправив их на страницу входа. Метод перенаправления предпочтительнее на мобильных устройствах.
    • Чтобы войти с помощью всплывающего окна, вызовите signInWithPopup :

      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);

    // ...
  });
      auth_facebook_signin_popup.js

      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;

    // ...
  });
      facebook.js
      Также обратите внимание, что вы можете получить токен OAuth провайдера Facebook, который можно использовать для извлечения дополнительных данных с помощью API Facebook.

      Здесь вы также можете перехватывать и обрабатывать ошибки. Список кодов ошибок см. в справочной документации по аутентификации .

    • Чтобы войти в систему, перейдя на страницу входа, вызовите signInWithRedirect : Следуйте рекомендациям по использованию `signInWithRedirect`.

      Web 

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web 

      firebase.auth().signInWithRedirect(provider);
      index.js
      Затем вы также можете получить токен OAuth провайдера Facebook, вызвав 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);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      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;
    // ...
  });
      facebook.js
      Здесь вы также можете перехватывать и обрабатывать ошибки. Список кодов ошибок см. в справочной документации по аутентификации .

Аутентификация с помощью Firebase в расширении Chrome

Если вы создаете приложение-расширение Chrome, см. руководство по Offscreen Documents .

Следующие шаги

После первого входа пользователя в систему создаётся новая учётная запись, которая привязывается к учётным данным, использованным при входе (имя пользователя и пароль, номер телефона или информация о поставщике аутентификации). Эта новая учётная запись хранится в вашем проекте Firebase и может использоваться для идентификации пользователя в каждом приложении проекта, независимо от способа входа.

  • В ваших приложениях рекомендуемый способ узнать статус аутентификации пользователя — установить наблюдателя для объекта Auth . После этого вы сможете получить основную информацию о профиле пользователя из объекта User . См. раздел Управление пользователями .

  • В правилах безопасности Firebase Realtime Database и Cloud Storage вы можете получить уникальный идентификатор вошедшего в систему пользователя из переменной auth и использовать его для управления данными, к которым пользователь может получить доступ.

Вы можете разрешить пользователям входить в ваше приложение с использованием нескольких поставщиков аутентификации, связав учетные данные поставщика аутентификации с существующей учетной записью пользователя.

Чтобы выйти из системы пользователя, вызовите signOut :

Web 

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web 

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js