Вы можете разрешить своим пользователям проходить аутентификацию в Firebase, используя их учетные записи Google. Вы можете использовать Firebase SDK для выполнения процесса входа в Google или выполнить процесс входа вручную, используя библиотеку Sign In With Google и передав полученный токен идентификатора в Firebase.
Прежде чем начать
- Добавьте Firebase в свой проект JavaScript .
- Включите Google в качестве метода входа в консоли Firebase :
- В консоли Firebase откройте раздел Auth .
- На вкладке «Метод входа» включите метод входа Google и нажмите « Сохранить» .
Управляйте процессом входа в систему с помощью Firebase SDK
Если вы создаете веб-приложение, самый простой способ аутентификации ваших пользователей в Firebase с использованием их учетных записей Google — это обработка процесса входа с помощью Firebase JavaScript SDK. (Если вы хотите аутентифицировать пользователя в Node.js или другой среде, отличной от браузера, вам придется обрабатывать процесс входа вручную.)
Чтобы обработать процесс входа с помощью Firebase JavaScript SDK, выполните следующие действия:
- Создайте экземпляр объекта провайдера Google:
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
var provider = new firebase.auth.GoogleAuthProvider();
- Необязательно : укажите дополнительные области OAuth 2.0, которые вы хотите запросить у поставщика аутентификации. Чтобы добавить область, вызовите
addScope
. Например: См. документацию поставщика аутентификации .provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- Необязательно : чтобы локализовать поток OAuth поставщика на предпочитаемый пользователем язык без явной передачи соответствующих пользовательских параметров OAuth, обновите код языка в экземпляре Auth перед запуском потока OAuth. Например:
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Необязательно : укажите дополнительные пользовательские параметры поставщика OAuth, которые вы хотите отправить с запросом OAuth. Чтобы добавить настраиваемый параметр, вызовите
setCustomParameters
у инициализированного поставщика с объектом, содержащим ключ, указанный в документации поставщика OAuth, и соответствующее значение. Например: Зарезервированные обязательные параметры OAuth не разрешены и будут игнорироваться. Дополнительные сведения см. в справочнике по поставщику аутентификации .provider.setCustomParameters({ 'login_hint': 'user@example.com' });
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- Аутентификация в Firebase с использованием объекта провайдера Google. Вы можете предложить своим пользователям войти в систему с помощью своих учетных записей Google, открыв всплывающее окно или перенаправив на страницу входа. Метод перенаправления предпочтителен на мобильных устройствах.
- Чтобы войти в систему с помощью всплывающего окна, вызовите
signInWithPopup
: Также обратите внимание, что вы можете получить токен OAuth поставщика Google, который можно использовать для получения дополнительных данных с помощью API Google.import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // This gives you a Google Access Token. You can use it to access the Google API. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; // 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 = GoogleAuthProvider.credentialFromError(error); // ... });
firebase.auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google 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; // ... });
Здесь также можно ловить и обрабатывать ошибки. Список кодов ошибок можно найти в справочной документации по аутентификации .
- Чтобы войти в систему путем перенаправления на страницу входа, вызовите
signInWithRedirect
: следуйте рекомендациям при использовании `signInWithRedirect`. Затем вы также можете получить токен OAuth провайдера Google, вызвавimport { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
при загрузке страницы: Здесь также можно ловить и обрабатывать ошибки. Список кодов ошибок можно найти в справочной документации по аутентификации .import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Google Access Token. You can use it to access Google APIs. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; // 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 = GoogleAuthProvider.credentialFromError(error); // ... });
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google 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 , когда пользователь пытается войти в систему у провайдера (например, Google) с адресом электронной почты, который уже существует для другого провайдера пользователя Firebase (например, Facebook), возникает ошибка. auth/account-exists-with-different-credential
выбрасывается вместе с объектом AuthCredential
(токен идентификатора Google). Чтобы завершить вход в систему предполагаемого провайдера, пользователь должен сначала войти в систему существующего провайдера (Facebook), а затем связать его с прежним AuthCredential
(токеном идентификатора Google).
Всплывающий режим
Если вы используете signInWithPopup
, вы можете обрабатывать ошибки auth/account-exists-with-different-credential
с помощью кода, подобного следующему примеру:
import { getAuth, linkWithCredential, signInWithPopup, GoogleAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Google. let result = await signInWithPopup(getAuth(), new GoogleAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Google credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the Google credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
Режим перенаправления
Эта ошибка обрабатывается аналогичным образом в режиме перенаправления, с той разницей, что ожидающие учетные данные должны кэшироваться между перенаправлениями страниц (например, с использованием хранилища сеансов).
Дополнительно: обработка процесса входа вручную.
Вы также можете пройти аутентификацию в Firebase, используя учетную запись Google, обработав процесс входа с помощью библиотеки Sign In With Google:
- Интегрируйте функцию «Вход через Google» в свое приложение, следуя руководству по интеграции . Обязательно настройте вход в Google с использованием идентификатора клиента Google, сгенерированного для вашего проекта Firebase. Идентификатор клиента Google вашего проекта можно найти на странице учетных данных консоли разработчика вашего проекта.
- В обратном вызове результата входа замените токен идентификатора из ответа аутентификации Google на учетные данные Firebase и используйте его для аутентификации в Firebase:
function handleCredentialResponse(response) { // Build Firebase credential with the Google ID token. const idToken = response.credential; const credential = GoogleAuthProvider.credential(idToken); // Sign in with credential from the Google 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 credential that was used. const credential = GoogleAuthProvider.credentialFromError(error); // ... }); }
Дополнительно: аутентификация с помощью Firebase в Node.js
Чтобы пройти аутентификацию с помощью Firebase в приложении Node.js:
- Войдите в систему, используя свою учетную запись Google, и получите токен Google ID пользователя. Вы можете сделать это несколькими способами. Например:
- Если у вашего приложения есть интерфейс браузера, используйте вход в Google, как описано в разделе «Обработка процесса входа в систему вручную» . Получите токен Google ID из ответа аутентификации:
Затем отправьте этот токен в свое приложение Node.js.var id_token = googleUser.getAuthResponse().id_token
- Если ваше приложение работает на устройстве с ограниченными возможностями ввода, например на телевизоре, вы можете использовать процедуру входа в Google для телевизоров и устройств .
- Если у вашего приложения есть интерфейс браузера, используйте вход в Google, как описано в разделе «Обработка процесса входа в систему вручную» . Получите токен Google ID из ответа аутентификации:
- Получив токен Google ID пользователя, используйте его для создания объекта Credential, а затем войдите в систему пользователя с помощью учетных данных:
import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth"; // Build Firebase credential with the Google ID token. const credential = GoogleAuthProvider.credential(id_token); // Sign in with credential from the Google user. const auth = getAuth(); 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.customData.email; // The AuthCredential type that was used. const credential = GoogleAuthProvider.credentialFromError(error); // ... });
// Build Firebase credential with the Google ID token. var credential = firebase.auth.GoogleAuthProvider.credential(id_token); // Sign in with credential from the Google 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; // ... });
Аутентификация с помощью Firebase в расширении Chrome
Если вы создаете приложение-расширение Chrome, см. руководство по Offscreen Documents .
Настройка домена перенаправления для входа в Google
При создании проекта Firebase предоставит для вашего проекта уникальный поддомен: https://my-app-12345.firebaseapp.com
.
Это также будет использоваться в качестве механизма перенаправления для входа в систему OAuth. Этот домен необходимо будет разрешить для всех поддерживаемых поставщиков OAuth. Однако это означает, что пользователи могут видеть этот домен при входе в Google перед перенаправлением обратно в приложение: Продолжить: https://my-app-12345.firebaseapp.com .
Чтобы не отображать свой субдомен, вы можете настроить собственный домен с помощью Firebase Hosting :
- Выполните шаги 1–3 в разделе «Настройка домена для Hosting . Когда вы подтверждаете право собственности на домен, Hosting предоставляет сертификат SSL для вашего личного домена.
- Добавьте свой собственный домен в список авторизованных доменов в консоли Firebase :
auth.custom.domain.com
. - В консоли разработчика Google или на странице настройки OAuth добавьте в белый список URL-адрес страницы перенаправления, которая будет доступна в вашем личном домене:
https://auth.custom.domain.com/__/auth/handler
. - При инициализации библиотеки JavaScript укажите свой личный домен в поле
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
Следующие шаги
После того, как пользователь входит в систему в первый раз, создается новая учетная запись пользователя, которая связывается с учетными данными (то есть именем пользователя и паролем, номером телефона или информацией поставщика аутентификации), с которыми пользователь вошел в систему. Эта новая учетная запись хранится как часть вашего проекта Firebase и может использоваться для идентификации пользователя в каждом приложении вашего проекта, независимо от того, как пользователь входит в систему.
В ваших приложениях рекомендуемый способ узнать статус аутентификации вашего пользователя — установить наблюдателя на объекте
Auth
. Затем вы можете получить базовую информацию профиля пользователя из объектаUser
. См. Управление пользователями .В правилах безопасности Firebase Realtime Database и Cloud Storage Firebase вы можете получить уникальный идентификатор пользователя, вошедшего в систему, из переменной
auth
и использовать его для управления тем, к каким данным пользователь может получить доступ.
Вы можете разрешить пользователям входить в ваше приложение с использованием нескольких поставщиков аутентификации , связав учетные данные поставщика аутентификации с существующей учетной записью пользователя.
Чтобы выйти из системы, вызовите signOut
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });