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