Аутентификация с помощью Google и JavaScript

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

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me set up and use Firebase Authentication with Google Sign-In in my app.

Подготовка

1. Добавьте Firebase в свой проект JavaScript.
2. Включите Google в качестве поставщика услуг входа для проекта Firebase:
   1. В консоли Firebase выберите Безопасность > Аутентификация.
   2. На вкладке Способ входа включите поставщика для входа через Google.
   3. Нажмите Сохранить.

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

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

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

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

   Web

   import { GoogleAuthProvider } from "firebase/auth";
   
   const provider = new GoogleAuthProvider();
   auth_google_provider_create.js

   Web

   var provider = new firebase.auth.GoogleAuthProvider();
   google-signin.js

2. Необязательно. Укажите дополнительные области действия OAuth 2.0, которые вы хотите запросить у поставщика услуг аутентификации. Чтобы добавить область действия, вызовите метод addScope. Пример:

   Web

   provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
   auth_google_provider_scopes.js

   Web

   provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
   google-signin.js

   Ознакомьтесь с документацией поставщика услуг аутентификации.
3. Необязательно. Чтобы локализовать поток 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();
   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({
     'login_hint': 'user@example.com'
   });
   auth_google_provider_params.js

   Web

   provider.setCustomParameters({
     'login_hint': 'user@example.com'
   });
   google-signin.js

   Зарезервированные обязательные параметры OAuth не допускаются и будут игнорироваться. Подробнее о поставщике аутентификации…
5. Выполните аутентификацию в Firebase с помощью объекта поставщика Google. Вы можете предложить пользователям войти в аккаунт Google, открыв всплывающее окно или перенаправив их на страницу входа. На мобильных устройствах рекомендуется использовать метод переадресации.
   • Чтобы войти в систему с помощью всплывающего окна, вызовите функцию signInWithPopup:

     Web

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

     Web

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

     Обратите внимание, что вы можете получить токен OAuth поставщика Google, который можно использовать для получения дополнительных данных с помощью API Google.

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

   • Чтобы войти в аккаунт, перейдя на страницу входа, вызовите метод 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 поставщика Google, вызвав getRedirectResult при загрузке страницы:

     Web

     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);
         // ...
       });
     auth_google_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 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;
         // ...
       });
     google-signin.js

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

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 в расширении Chrome

Если вы создаете приложение для расширения Chrome, ознакомьтесь с руководством по работе с документами вне экрана.

Дальнейшие действия

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

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

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

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

Чтобы выйти из аккаунта пользователя, вызовите функцию signOut:

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

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

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