Uwierzytelnij się za pomocą logowania Google za pomocą JavaScript

Możesz pozwolić swoim użytkownikom na uwierzytelnianie się w Firebase przy użyciu ich kont Google, integrując Logowanie Google ze swoją aplikacją. Możesz zintegrować Logowanie przez Google przy użyciu pakietu Firebase SDK do przeprowadzenia procesu logowania lub ręcznie przeprowadzając proces logowania przez Google i przekazując otrzymany token identyfikatora do Firebase.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript .
  2. Włącz Logowanie przez Google w konsoli Firebase:
    1. W konsoli Firebase otwórz sekcję Auth.
    2. Na karcie Logowanie w metodzie umożliwienia logowania metody Google i kliknij Zapisz.

Obsługuj proces logowania za pomocą pakietu Firebase SDK

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 Firebase JavaScript SDK. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub innym środowisku innym niż przeglądarka, musisz ręcznie obsłużyć przepływ logowania).

Aby obsłużyć proces logowania za pomocą pakietu Firebase JavaScript SDK, wykonaj te czynności:

  1. Utwórz instancję obiektu dostawcy Google:

    Wersja internetowa 9

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Wersja internetowa 8

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. Opcjonalnie: określić dodatkowe zakresy OAuth 2.0, który chcesz wniosek dostawcy uwierzytelniania. Aby dodać zakres, zadzwoń addScope . Na przykład:

    Wersja internetowa 9

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

    Wersja internetowa 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    Zobacz dokumentację dostawcy uwierzytelniania .
  3. Opcjonalne: Aby zlokalizować usługodawcy OAuth przepływ do preferowanego języka użytkownika bez wyraźnego przejściu odpowiednich parametrów niestandardowych OAuth, zaktualizuj kod języka na przykład Autentyczna przed rozpoczęciem przepływu OAuth. Na przykład:

    Wersja internetowa 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();
    auth_set_language_code.js

    Wersja internetowa 8

    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 parametry dostawcy zwyczaj OAuth że chcesz wysłać z prośbą OAuth. Aby dodać parametr niestandardowy, zadzwoń setCustomParameters na zainicjowany dostawcy z obiektu zawierającego klucz, jak określono w dokumentacji dostawcy OAuth i odpowiednią wartość. Na przykład:

    Wersja internetowa 9

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

    Wersja internetowa 8

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    Zarezerwowane wymagane parametry OAuth są niedozwolone i zostaną zignorowane. Zobacz odniesienie dostawcy uwierzytelniania dla więcej szczegółów.
  5. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy Google. Możesz poprosić użytkowników o zalogowanie się na ich konta Google, otwierając wyskakujące okienko lub przekierowując na stronę logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, call signInWithPopup :

      Wersja internetowa 9

      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;
    // ...
  }).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 AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js

      Wersja internetowa 8

      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;
    // ...
  }).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
      Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Google, którego można użyć do pobrania dodatkowych danych za pomocą interfejsów Google API.

      Tutaj też możesz wyłapać i obsłużyć błędy. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .

    • Aby zalogować się poprzez przekierowanie do strony logowania, zadzwoń signInWithRedirect :

      Wersja internetowa 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Wersja internetowa 8

      firebase.auth().signInWithRedirect(provider);
      index.js
      Następnie można również pobierać dostawcy Google tokenu OAuth wywołując getRedirectResult gdy twój strona ładuje się:

      Wersja internetowa 9

      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;
  }).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 AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js

      Wersja internetowa 8

      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;
  }).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
      Tutaj też możesz wyłapać i obsłużyć błędy. Aby uzyskać listę kodów błędów mają zapoznać się z Autentycznymi Odniesienia Docs .

Uwierzytelnij się w Firebase w rozszerzeniu Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, musisz dodać swój identyfikator rozszerzenia do Chrome:

  1. Otwórz swój projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otworzyć stronę logowania metody.
  3. Dodaj URI takiego do listy autoryzowanych dziedzinach: 
    chrome-extension://CHROME_EXTENSION_ID

Tylko operacje popup ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, a rozszerzenia Chrome nie może użyć przekierowania HTTP. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniania anuluje wyskakujące okienko akcji przeglądarki. Metody popup może być stosowane wyłącznie w rozszerzeniach korzystających Manifest V2 . Nowsza Oczywisty V3 pozwala tylko skrypty tło w postaci pracowników usług, które nie mogą wykonywać operacje popup w ogóle.

W oczywisty make plików twojego rozszerzenia Chrome pewność, że dodasz https://apis.google.com URL do content_security_policy allowlist.

Następne kroki

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

  • W aplikacjach, zalecanym sposobem poznać stan swojego uwierzytelniania użytkownika jest ustawić obserwatora na Auth obiektu. Następnie można uzyskać podstawowe informacje o profilu użytkownika od User obiektu. Patrz Zarządzanie użytkownikami .

  • W bazie danych Firebase Realtime i Cloud Storage zasad bezpieczeństwa , można uzyskać podpisanego w unikalnym identyfikatorem użytkownika użytkownika z auth zmiennej i użyć go do kontroli, jakie dane dostępu może użytkownik.

Można zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania przez łączenie auth poświadczenia dostawcy do istniejącego konta użytkownika.

Aby wylogować użytkownika, zadzwoń signOut :

Wersja internetowa 9

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

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

Wersja internetowa 8

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