Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Uwierzytelniaj przez Google za pomocą JavaScriptu

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

Zanim zaczniesz

Dodaj Firebase do projektu JavaScript.
Włącz Google jako dostawcę logowania w projekcie Firebase:
1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.
2. Na karcie Metoda logowania włącz dostawcę logowania Google.
3. Kliknij Zapisz.
Wskazówka: jeśli wolisz używać Firebase CLI, uruchom firebase init auth aby skonfigurować dostawców uwierzytelniania, a następnie uruchom 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 poza przeglądarką, musisz ręcznie obsługiwać proces logowania).

Aby obsługiwać 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ę uwierzytelniania. Aby dodać zakres, wywołaj 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ć proces OAuth dostawcy do preferowanego języka użytkownika bez wyraźnego przekazywania odpowiednich niestandardowych parametrów OAuth, zaktualizuj kod języka w instancji Auth przed rozpoczęciem procesu 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 niestandardowe parametry dostawcy OAuth które chcesz wysłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters w zainicjowanym dostawcy z obiektem zawierającym klucz określony w dokumentacji dostawcy 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 dokumentacji dostawcy uwierzytelniania.

Uwierzytelnij się w Firebase za pomocą obiektu dostawcy Google. Możesz poprosić użytkowników o zalogowanie się za pomocą ich 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 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órego można użyć do pobierania dodatkowych danych za pomocą interfejsów API Google.

W tym miejscu możesz też przechwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji Auth.

Aby zalogować się przez przekierowanie na stronę logowania, wywołaj signInWithRedirect: podczas korzystania z `signInWithRedirect` postępuj zgodnie z 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 wczytaniu 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ż przechwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji Auth.

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

Jeśli włączysz ustawienie Jedno konto na adres e-mail w konsoli Firebase, 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) innego użytkownika Firebase, zostanie zgłoszony błąd auth/account-exists-with-different-credential wraz z obiektem AuthCredential (token identyfikatora Google). Aby dokończyć logowanie u wybranego dostawcy, użytkownik musi najpierw zalogować się u istniejącego dostawcy (Facebook), a następnie połączyć się z poprzednim 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 w poniższym przykładzie:

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 logowania muszą być buforowane między przekierowaniami stron (np. za pomocą 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 funkcję Zaloguj się przez Google z aplikacją, postępując zgodnie z przewodnikiem integracji. Skonfiguruj Logowanie przez Google za pomocą identyfikatora klienta Google wygenerowanego dla projektu w Firebase. Identyfikator klienta Google projektu znajdziesz na stronie Dane logowania w konsoli dewelopera projektu.

W wywołaniu zwrotnym wyniku logowania zamień 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. Przykład:
- Jeśli Twoja aplikacja ma interfejs przeglądarki, użyj Logowania przez Google zgodnie z opisem w sekcji Ręczna obsługa procesu logowania. Pobierz token identyfikatora Google z odpowiedzi uwierzytelniania:
```
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.

Gdy uzyskasz token identyfikatora Google użytkownika, użyj go do utworzenia obiektu Credential , a następnie zaloguj użytkownika za pomocą 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 w 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ą subdomenę dla Twojego projektu: https://my-app-12345.firebaseapp.com.

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

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

Wykonaj kroki od 1 do 3 w sekcji Konfigurowanie domeny na potrzeby Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj domenę niestandardową do listy autoryzowanych domen w Firebase konsoli: auth.custom.domain.com.
W konsoli dewelopera 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 domenę niestandardową w polu authDomain field:

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 – 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ęść projektu w Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od sposobu logowania.

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

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania przez połączenie danych logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj 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.