Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Аутентификация с использованием Twitter в JavaScript

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

Прежде чем вы начнете

  1. Добавьте Firebase в свой проект JavaScript .
  2. В консоли Firebase откройте раздел Auth .
  3. На вкладке Способ входа включите поставщика Twitter .
  4. Добавьте ключ API и секрет API из консоли разработчика этого провайдера в конфигурацию провайдера:
    1. Зарегистрируйте свое приложение в качестве приложения для разработчиков в Твиттере и получите ключ API OAuth своего приложения и секрет API .
    2. Убедитесь, что ваш URI перенаправления OAuth Firebase (например my-app-12345.firebaseapp.com/__/auth/handler ) установлен в качестве URL-адреса обратного вызова авторизации на странице настроек вашего приложения в конфигурации вашего приложения Twitter .
  5. Нажмите Сохранить .

Обработка процесса входа с помощью Firebase SDK

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

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

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

    Web version 9

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();

    Web version 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. Необязательно : чтобы локализовать поток OAuth поставщика на предпочитаемый пользователем язык без явной передачи соответствующих настраиваемых параметров OAuth, обновите код языка в экземпляре Auth перед запуском потока OAuth. Например:

    Web version 9

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

    Web version 8

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

    Web version 9

    provider.setCustomParameters({
      'lang': 'es'
    });

    Web version 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    Зарезервированные обязательные параметры OAuth не допускаются и будут игнорироваться. Дополнительные сведения см. в справочнике по поставщику аутентификации .
  4. Выполните аутентификацию в Firebase, используя объект поставщика Twitter. Вы можете предложить своим пользователям войти в систему со своими учетными записями Twitter, открыв всплывающее окно или перенаправив на страницу входа. Метод перенаправления предпочтительнее на мобильных устройствах.
    • Чтобы войти с помощью всплывающего окна, вызовите signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
      
          // The signed-in user info.
          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.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          var token = credential.accessToken;
          var secret = credential.secret;
      
          // 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;
          // ...
        });
      Также обратите внимание, что вы можете получить токен OAuth провайдера Twitter, который можно использовать для получения дополнительных данных с помощью API Twitter.

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

    • Чтобы войти, перенаправив на страницу входа, вызовите signInWithRedirect :

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      Затем вы также можете получить токен OAuth провайдера Twitter, вызвав getRedirectResult при загрузке вашей страницы:

      Web version 9

      import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
          // ...
      
          // The signed-in user info.
          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.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
            // You can use these server side with your app's credentials to access the Twitter API.
            var token = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // 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;
          // ...
        });
      Здесь также можно ловить и обрабатывать ошибки. Список кодов ошибок можно найти в Справочной документации по аутентификации.

Обработка процесса входа вручную

Вы также можете пройти аутентификацию в Firebase с помощью учетной записи Twitter, обработав процесс входа, вызвав конечные точки Twitter OAuth:

  1. Интегрируйте проверку подлинности Twitter в свое приложение, следуя документации разработчика . В конце процесса входа в Twitter вы получите токен доступа OAuth и секрет OAuth.
  2. Если вам нужно войти в приложение Node.js, отправьте маркер доступа OAuth и секрет OAuth в приложение Node.js.
  3. После успешного входа пользователя в Twitter замените токен доступа OAuth и секрет OAuth на учетные данные Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
    .
  4. Аутентифицируйтесь в Firebase, используя учетные данные Firebase:

    Web version 9

    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);
        // ...
      });

    Web version 8

    // 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;
        // ...
      });

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

Если вы создаете приложение-расширение Chrome, вы должны добавить свой идентификатор расширения Chrome:

  1. Откройте свой проект в консоли Firebase .
  2. В разделе « Аутентификация » откройте страницу « Метод входа ».
  3. Добавьте в список авторизованных доменов URI, подобный следующему:
    chrome-extension://CHROME_EXTENSION_ID
    .

Для расширений Chrome доступны только всплывающие операции ( signInWithPopup , linkWithPopup и reauthenticateWithPopup ), поскольку расширения Chrome не могут использовать перенаправления HTTP. Вы должны вызывать эти методы из сценария фоновой страницы, а не из всплывающего окна действия браузера, так как всплывающее окно проверки подлинности отменит всплывающее окно действия браузера. Методы всплывающих окон можно использовать только в расширениях, использующих Manifest V2 . В более новом Manifest V3 разрешены только фоновые сценарии в виде сервис-воркеров, которые вообще не могут выполнять операции с всплывающими окнами.

Убедитесь, что в файле манифеста вашего расширения Chrome вы добавили URL-адрес https://apis.google.com в белый список content_security_policy .

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

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

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

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

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

Чтобы выйти из системы, вызовите signOut :

Web version 9

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

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

Web version 8

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