Ta strona została przetłumaczona przez Cloud Translation API.

Uwierzytelniaj przez Google za pomocą JavaScriptu

Możesz zezwolić użytkownikom na uwierzytelnianie się w Firebase przy użyciu ich kont Google. Możesz użyć pakietu SDK Firebase, aby przeprowadzić proces logowania się w Google, lub przeprowadzić go ręcznie za pomocą biblioteki Logowanie z Google i przekazać uzyskany token identyfikatora do Firebase.

Zanim zaczniesz

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

Obsługa procesu logowania za pomocą pakietu SDK Firebase

Jeśli tworzysz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników za pomocą 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 poza przeglądarką, 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 OAuth 2.0, o które chcesz poprosić dostawcę usługi 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 zlokalizować proces OAuth dostawcy w preferowanym języku użytkownika bez przekazywania wprost odpowiednich niestandardowych parametrów OAuth, przed rozpoczęciem procesu OAuth zaktualizuj kod języka w instancji uwierzytelniania. 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 dostawcy OAuth, które chcesz wysłać z prośbą OAuth. Aby dodać parametr niestandardowy, wywołaj metodę setCustomParameters w zainicjowanym dostawcy z obiektem zawierającym klucz zgodnie z dokumentacją dostawcy OAuth i odpowiednią wartością. 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 zignorowane. Więcej informacji znajdziesz w materiałach referencyjnych dostawcy usług uwierzytelniania.

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

Aby zalogować się w wyskakującym okienku, zadzwoń pod numer 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

Pamiętaj też, że możesz pobrać token OAuth dostawcy Google, który możesz wykorzystać do pobierania dodatkowych danych za pomocą interfejsów API Google.

Tutaj możesz też wykrywać i rozwiązywać błędy. Listę kodów błędów znajdziesz w dokumentacji na temat autoryzacji.

Aby zalogować się przez przekierowanie na stronę logowania, wywołaj funkcję signInWithRedirect: Stosuj sprawdzone metody podczas używania funkcji 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

Następnie możesz też pobrać token OAuth dostawcy Google, wywołując funkcję 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

Tutaj możesz też wykrywać i rozwiązywać błędy. Listę kodów błędów znajdziesz w dokumentacji na temat autoryzacji.

Obsługa błędów „Konto istnieje, ale ma inne dane logowania”

Jeśli w konsoli Firebase masz włączone ustawienie 1 konto na adres e-mail, gdy użytkownik spróbuje zalogować się u dostawcy (np. Google) za pomocą adresu e-mail, który jest już używany przez innego użytkownika Firebase u dostawcy (np. Facebooka), zostanie wygenerowany błądauth/account-exists-with-different-credential wraz z obiektem AuthCredential (tokenem identyfikacyjnym Google). Aby dokończyć logowanie do wybranego dostawcy, użytkownik musi najpierw zalogować się w dostawcy, którego używał wcześniej (Facebook), a potem połączyć konto z tym dostawcą AuthCredential (token 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:

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ą zostać zapisane w pamięci podręcznej między przekierowaniami stron (np. za pomocą pamięci sesji).

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

Zintegruj logowanie przez Google ze swoją aplikacją, postępując zgodnie z przewodnikiem po integracji. Pamiętaj, aby skonfigurować logowanie Google za pomocą identyfikatora klienta Google wygenerowanego dla Twojego projektu Firebase. Identyfikator klienta Google projektu znajdziesz na stronie danych logowania w Konsoli deweloperów.

W funkcji zwracającej wyniki logowania zastąp token identyfikacyjny z odpowiedzi uwierzytelniania Google przez 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 na jego konto Google i pobierz jego token tożsamości Google. Możesz to zrobić na kilka sposobów. np.:
- Jeśli aplikacja ma interfejs przeglądarki, użyj funkcji Zaloguj się przez Google zgodnie z opisem w sekcji Ręczne przetwarzanie procesu logowania. Pobierz token tożsamości Google z odpowiedzi autoryzacji:
```
var id_token = googleUser.getAuthResponse().id_token
```
  Następnie wyślij ten token do aplikacji Node.js.
- Jeśli aplikacja działa na urządzeniu z ograniczonymi możliwościami wprowadzania danych, takim jak telewizor, możesz użyć procesu logowania w Google na telewizorach i urządzeniach.

Po uzyskaniu tokena Google ID użytkownika użyj go do utworzenia obiektu danych uwierzytelniających, a następnie zaloguj użytkownika przy użyciu tych danych:

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 unikalną domenę podrzędną dla Twojego projektu:https://my-app-12345.firebaseapp.com.

Będzie on też używany jako mechanizm przekierowania w przypadku logowania OAuth. Domena musiałaby być dozwolona dla wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się w Google, zanim zostaną przekierowani z powrotem do aplikacji: Przejdź na https://moja-aplikacja-12345.firebaseapp.com.

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

Wykonaj czynności opisane w sekwencji Konfigurowanie domeny dla usługi Hosting. Gdy potwierdzisz własność domeny, Hosting zarezerwuje certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj swoją domenę niestandardową 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 podaj domenę niestandardową 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 dostawcy uwierzytelniania, za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane w ramach projektu Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od tego, jak użytkownik się loguje.

W swoich aplikacjach możesz sprawdzić stan uwierzytelniania użytkownika, ustawiając obserwatora na obiekcie Auth. Następnie możesz uzyskać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.
W regułach Firebase Realtime Database i Cloud Storage Regułach bezpieczeństwa możesz pobrać z zmiennej auth unikalny identyfikator zalogowanego użytkownika i użyć go do kontrolowania, do jakich danych ma on dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą danych logowania od wielu dostawców uwierzytelniania, połączając je z dotychczasowym 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.