Uwierzytelniaj przez Google za pomocą JavaScriptu

Możesz zezwolić użytkownikom na uwierzytelnianie w Firebase za pomocą kont Google. Możesz użyć pakietu SDK Firebase, aby przeprowadzić proces logowania się przez Google, lub przeprowadzić go ręcznie za pomocą biblioteki Zaloguj się przez Google i przekazać wynikowy token identyfikacyjny do Firebase.

Zanim zaczniesz

Dodaj Firebase do projektu JavaScript.
Włącz Google jako metodę logowania w Firebasekonsoli:
1. W Firebasekonsoli otwórz sekcję Uwierzytelnianie.
2. Na karcie Metoda logowania włącz metodę logowania Google i kliknij Zapisz.
Wskazówka: jeśli wolisz używać interfejsu wiersza poleceń Firebase, uruchom polecenie firebase init auth, aby skonfigurować dostawców uwierzytelniania, a następnie uruchom polecenie firebase deploy --only auth, aby wdrożyć zmiany w projekcie.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelniania użytkowników w Firebase za pomocą 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 przeglądarki, musisz ręcznie obsłużyć proces logowania).

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

Utwórz instancję obiektu dostawcy 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

Opcjonalnie: określ dodatkowe zakresy protokołu OAuth 2.0, o które chcesz poprosić dostawcę uwierzytelniania. Aby dodać zakres, wywołaj funkcję addScope. Przykład:
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
```
Zapoznaj się z dokumentacją dostawcy uwierzytelniania.

Opcjonalnie: aby dostosować obsługę protokołu OAuth dostawcy do preferowanego języka użytkownika bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, zaktualizuj kod języka w instancji Auth przed rozpoczęciem obsługi protokołu OAuth. Przykład:

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

Opcjonalnie: określ dodatkowe parametry niestandardowego dostawcy OAuth, które chcesz wysłać wraz z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters w przypadku zainicjowanego dostawcy, używając obiektu zawierającego klucz określony w dokumentacji dostawcy protokołu OAuth i odpowiednią wartość. Przykład:
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
Zarezerwowane wymagane parametry OAuth są niedozwolone i będą ignorowane. Więcej informacji znajdziesz w materiałach referencyjnych dotyczących dostawcy uwierzytelniania.

Uwierzytelnij w Firebase za pomocą obiektu dostawcy Google. Możesz poprosić użytkowników o zalogowanie się za pomocą kont Google, otwierając wyskakujące okienko lub przekierowując ich na stronę logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.

Aby zalogować się w wyskakującym okienku, wywołaj funkcję 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

Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Google, który może służyć do pobierania dodatkowych danych za pomocą interfejsów API Google.

W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej autoryzacji.

Aby zalogować się przez przekierowanie na stronę logowania, wywołaj signInWithRedirect:Podczas korzystania z funkcji `signInWithRedirect` postępuj zgodnie ze sprawdzonymi metodami.

Web

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

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

Web

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

Następnie możesz też pobrać token OAuth dostawcy Google, wywołując getRedirectResult po załadowaniu strony:

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

W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej autoryzacji.

Obsługa błędów account-exists-with-different-credential

Jeśli w Firebase konsoli włączysz ustawienie Jedno konto na adres e-mail, gdy użytkownik spróbuje zalogować się u dostawcy (np. Google) za pomocą adresu e-mail, który już istnieje u innego dostawcy (np. Facebook) dla innego użytkownika Firebase, zostanie zgłoszony błąd auth/account-exists-with-different-credential wraz z obiektem AuthCredential (token identyfikatora Google). Aby zalogować się u wybranego dostawcy, użytkownik musi najpierw zalogować się u obecnego dostawcy (Facebook), a następnie połączyć się z poprzednim dostawcą AuthCredential (tokenem identyfikatora Google).

Jeśli używasz signInWithPopup, możesz obsługiwać błędy auth/account-exists-with-different-credential za pomocą kodu podobnego do tego 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

W trybie przekierowania ten błąd jest obsługiwany w podobny sposób, z tą różnicą, że oczekujące dane logowania muszą być przechowywane w pamięci podręcznej między przekierowaniami stron (np. przy użyciu pamięci sesji).

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

Zintegruj Zaloguj się przez Google z aplikacją, postępując zgodnie z przewodnikiem po integracji. Skonfiguruj Logowanie przez Google za pomocą identyfikatora klienta Google wygenerowanego dla Twojego projektu w Firebase. Identyfikator klienta Google projektu znajdziesz na stronie Dane logowania w konsoli deweloperów projektu.

W wywołaniu zwrotnym wyniku logowania wymień token identyfikatora z odpowiedzi uwierzytelniania Google na dane logowania Firebase i użyj ich 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: uwierzytelnianie w Firebase w Node.js

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

Zaloguj użytkownika za pomocą jego konta Google i uzyskaj token identyfikatora Google użytkownika. Możesz to zrobić na kilka sposobów. Na przykład:
- Jeśli Twoja aplikacja ma interfejs przeglądarki, użyj Logowania przez Google zgodnie z opisem w sekcji Ręczne obsługiwanie procesu logowania. Pobierz token tożsamości Google z odpowiedzi auth:
```
var id_token = googleUser.getAuthResponse().id_token
```
  Następnie wyślij ten token do aplikacji Node.js.
- Jeśli Twoja aplikacja działa na urządzeniu o ograniczonych możliwościach wprowadzania danych, np. na telewizorze, możesz użyć procesu logowania przez Google na telewizorach i urządzeniach.

Po uzyskaniu tokena identyfikatora Google użytkownika użyj go do utworzenia obiektu Credential, a następnie zaloguj użytkownika za pomocą tych danych logowania:

Web

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

// 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

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, zapoznaj się z przewodnikiem po dokumentach poza ekranem.

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

Będzie on też używany jako mechanizm przekierowania w przypadku logowania za pomocą OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się w Google przed przekierowaniem z powrotem do aplikacji: Kontynuuj: https://my-app-12345.firebaseapp.com.

Aby uniknąć wyświetlania subdomeny, możesz skonfigurować własną domenę za pomocą Firebase Hosting:

Wykonaj kroki 1–3 w artykule Konfigurowanie domeny na potrzeby Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny.
Dodaj własną domenę do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com.
W konsoli deweloperów 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.

Podczas inicjowania biblioteki JavaScript określ swoją własną domenę w polu 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: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z danymi logowania, 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 w ramach Twojego projektu w Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od sposobu logowania.

Zalecanym sposobem sprawdzania stanu autoryzacji użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.
W Firebase Realtime Database i Cloud Storage regułach bezpieczeństwa możesz pobrać unikalny identyfikator użytkownika zalogowanego ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

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

Web

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

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

Uwierzytelniaj przez Google za pomocą JavaScriptu Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.