Uwierzytelnij się za pomocą Google z JavaScript

Możesz zezwolić użytkownikom na uwierzytelnianie w Firebase przy użyciu ich kont Google. Możesz użyć pakietu SDK Firebase do przeprowadzenia procesu logowania przez Google lub przeprowadzić proces logowania ręcznie, korzystając z biblioteki Zaloguj się przez Google i przekazując wynikowy token identyfikacyjny do Firebase.

Zanim zaczniesz

1. Dodaj Firebase do swojego projektu JavaScript .
2. Włącz Google jako metodę logowania w konsoli Firebase:
   1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
   2. Na karcie Metoda logowania włącz metodę logowania Google i kliknij Zapisz .

Obsługuj proces logowania za pomocą pakietu SDK Firebase

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu ich kont Google jest obsługa procesu logowania za pomocą pakietu SDK JavaScript Firebase. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub innym środowisku innym niż przeglądarka, musisz ręcznie obsłużyć proces logowania).

Aby obsłużyć proces logowania za pomocą pakietu SDK JavaScript Firebase, wykonaj następujące kroki:

1. Utwórz instancję obiektu dostawcy Google:

   Web modular API

   Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

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

   Web namespaced API

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

2. Opcjonalnie : określ dodatkowe zakresy OAuth 2.0, których chcesz zażądać od dostawcy uwierzytelniania. Aby dodać zakres, wywołaj addScope . Na przykład:

   Web modular API

   Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

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

   Web namespaced API

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

   Zobacz dokumentację dostawcy uwierzytelniania .
3. Opcjonalnie : aby zlokalizować przepływ OAuth dostawcy na preferowany język użytkownika bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, zaktualizuj kod języka w instancji Auth przed uruchomieniem przepływu OAuth. Na przykład:

   Web modular API

   Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

   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 namespaced API

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

4. Opcjonalnie : określ dodatkowe niestandardowe parametry dostawcy OAuth, które chcesz wysłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters na zainicjowanym dostawcy z obiektem zawierającym klucz określony w dokumentacji dostawcy OAuth i odpowiednią wartość. Na przykład:

   Web modular API

   Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   auth_google_provider_params.js

   Web namespaced API

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   google-signin.js

   Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Więcej szczegółów znajdziesz w dokumentacji dostawcy uwierzytelniania .
5. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy Google. Możesz poprosić użytkowników o zalogowanie się na konta Google, otwierając wyskakujące okienko lub przekierowując na stronę logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.
   • Aby zalogować się za pomocą wyskakującego okna, wywołaj signInWithPopup :

     Web modular API

     Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

     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 namespaced API

     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

     Zauważ również, że możesz pobrać token OAuth dostawcy Google, którego można użyć do pobrania dodatkowych danych za pomocą interfejsów API Google.

     W tym miejscu można także wychwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w Dokumentach referencyjnych uwierzytelniania .

   • Aby zalogować się poprzez przekierowanie na stronę logowania, wywołaj signInWithRedirect : postępuj zgodnie z najlepszymi praktykami podczas korzystania z funkcji „signInWithRedirect”.

     Web modular API

     Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

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

     Web namespaced API

     firebase.auth().signInWithRedirect(provider);
     index.js

     Następnie możesz także pobrać token OAuth dostawcy Google, wywołując metodę getRedirectResult podczas ładowania strony:

     Web modular API

     Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

     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 namespaced API

     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

     W tym miejscu można także wychwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w Dokumentach referencyjnych uwierzytelniania .

Obsługa błędów związanych z kontem-istniejącym-z różnymi-poświadczeniami

Google służy zarówno jako dostawca poczty e-mail, jak i dostawcy tożsamości społecznościowej. Dostawcy tożsamości e-mail są autorytatywni w przypadku wszystkich adresów e-mail powiązanych z ich hostowaną domeną e-mail, podczas gdy dostawcy tożsamości e-mail w mediach społecznościowych potwierdzają tożsamość e-mail na podstawie jednorazowego potwierdzenia adresu e-mail. Użytkownik logujący się za pomocą Google nigdy nie spowoduje tego błędu, gdy jego konto jest hostowane w Google, nawet jeśli zarejestrował się przy użyciu hasła lub identyfikatora tożsamości społecznościowej.

Jeśli w konsoli Firebase włączyłeś ustawienie Jedno konto na adres e-mail , gdy użytkownik próbuje zalogować się do dostawcy (takiego jak Google) za pomocą adresu e-mail, który już istnieje dla innego dostawcy użytkownika Firebase (takiego jak Facebook), pojawi się błąd auth/account-exists-with-different-credential jest zgłaszane wraz z obiektem AuthCredential (tokenem identyfikatora Google). Aby dokończyć logowanie do wybranego dostawcy, użytkownik musi najpierw zalogować się do istniejącego dostawcy (Facebook), a następnie połączyć się z poprzednim AuthCredential (tokenem Google ID).

Tryb wyskakujący

Jeśli używasz signInWithPopup , możesz obsłużyć błędy auth/account-exists-with-different-credential za pomocą kodu podobnego do poniższego przykładu:

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

Tryb przekierowania

Ten błąd jest obsługiwany w podobny sposób w trybie przekierowania, z tą różnicą, że oczekujące dane uwierzytelniające muszą być buforowane pomiędzy przekierowaniami stron (na przykład przy użyciu magazynu sesji).

Zaawansowane: ręcznie obsługuj proces logowania

Możesz także uwierzytelnić się w Firebase przy użyciu konta Google, obsługując proces logowania za pomocą biblioteki Zaloguj się przez Google:

1. Zintegruj usługę Zaloguj się przez Google ze swoją aplikacją, postępując zgodnie z przewodnikiem integracji . Pamiętaj, aby skonfigurować logowanie Google przy użyciu identyfikatora klienta Google wygenerowanego dla projektu Firebase. Identyfikator klienta Google swojego projektu znajdziesz na stronie Dane uwierzytelniające Twojego projektu w Konsoli programisty .
2. W wywołaniu zwrotnym wyniku logowania zamień token identyfikacyjny z odpowiedzi uwierzytelniającej Google na dane uwierzytelniające Firebase i użyj go do uwierzytelnienia w 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);
       // ...
     });
   }
   

Zaawansowane: Uwierzytelniaj się za pomocą Firebase w Node.js

Aby uwierzytelnić się w Firebase w aplikacji Node.js:

1. Zaloguj się na konto Google i uzyskaj token identyfikacyjny Google użytkownika. Można to osiągnąć na kilka sposobów. Na przykład:
   • Jeśli Twoja aplikacja ma interfejs przeglądarki, użyj logowania Google zgodnie z opisem w sekcji Ręczna obsługa procesu logowania . Uzyskaj token identyfikatora Google z odpowiedzi uwierzytelniającej:

     var id_token = googleUser.getAuthResponse().id_token

     Następnie wyślij ten token do swojej aplikacji Node.js.
   • Jeśli Twoja aplikacja działa na urządzeniu z ograniczonymi możliwościami wprowadzania danych, takim jak telewizor, możesz skorzystać z procedury logowania się Google na telewizorach i urządzeniach .
2. Po otrzymaniu tokena identyfikatora Google użytkownika użyj go do zbudowania obiektu Credential, a następnie zaloguj użytkownika przy użyciu poświadczeń:

   Web modular API

   Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

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

   Web namespaced API

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

Uwierzytelnij się w Firebase w rozszerzeniu Chrome

Jeśli tworzysz aplikację rozszerzenia Chrome, musisz dodać identyfikator rozszerzenia Chrome:

1. Otwórz swój projekt w konsoli Firebase .
2. W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
3. Dodaj identyfikator URI podobny do poniższego do listy autoryzowanych domen:

   chrome-extension://CHROME_EXTENSION_ID

Tylko operacje na wyskakujących okienkach ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, ponieważ rozszerzenia Chrome nie mogą korzystać z przekierowań HTTP. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniające anuluje wyskakujące okienko akcji przeglądarki. Metody wyskakujące mogą być używane tylko w rozszerzeniach korzystających z Manifest V2 . Nowszy Manifest V3 pozwala tylko na skrypty działające w tle w postaci pracowników usług, którzy w ogóle nie mogą wykonywać operacji w wyskakujących okienkach.

Upewnij się, że w pliku manifestu rozszerzenia Chrome dodałeś adres URL https://apis.google.com do listy dozwolonych content_security_policy .

Dostosowywanie domeny przekierowania do logowania Google

Podczas tworzenia projektu Firebase udostępni dla Twojego projektu unikalną subdomenę: https://my-app-12345.firebaseapp.com .

Będzie to również używane jako mechanizm przekierowania podczas logowania OAuth. Ta domena będzie musiała być dozwolona dla wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się do Google przed przekierowaniem z powrotem do aplikacji: Przejdź do: https://my-app-12345.firebaseapp.com .

Aby uniknąć wyświetlania swojej subdomeny, możesz skonfigurować domenę niestandardową w Firebase Hosting:

1. Wykonaj kroki od 1 do 3 w sekcji Konfigurowanie domeny do hostingu . Kiedy zweryfikujesz własność domeny, Hosting wystawi certyfikat SSL dla Twojej domeny niestandardowej.
2. Dodaj swoją domenę niestandardową do listy autoryzowanych domen w konsoli Firebase : auth.custom.domain.com .
3. W konsoli programisty Google lub na stronie konfiguracji OAuth dodaj do białej listy adres URL strony przekierowania, która będzie dostępna w Twojej domenie niestandardowej: https://auth.custom.domain.com/__/auth/handler .
4. Podczas inicjowania biblioteki JavaScript określ swoją domenę niestandardową za pomocą pola authDomain :

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, w jaki sposób użytkownik się loguje.

• W aplikacjach zalecanym sposobem sprawdzenia stanu uwierzytelnienia użytkownika jest ustawienie obserwatora w obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektu User . Zobacz Zarządzanie użytkownikami .

• W regułach bezpieczeństwa bazy danych Firebase Realtime i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

Możesz zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut :

Web modular API

Dowiedz się więcej o modułowym interfejsie API sieci Web z możliwością zmiany drzewa i uaktualnij interfejs API z przestrzenią nazw.

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 namespaced API

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