Puoi consentire agli utenti di eseguire l'autenticazione con Firebase utilizzando i loro Account Google. Puoi utilizzare l'SDK Firebase per eseguire il flusso di Accedi con Google oppure eseguire manualmente il flusso di accesso utilizzando la libreria Accedi con Google e passando il token ID risultante a Firebase.
Prima di iniziare
- Aggiungi Firebase al tuo progetto JavaScript.
- Abilita Google come metodo di accesso nella console Firebase:
- Nella console Firebase, apri sezione Auth.
- Nella scheda Metodo di accesso, abilita il metodo di accesso Google e fai clic su Salva.
Gestire il flusso di accesso con l'SDK Firebase
Se stai creando un'app web, il modo più semplice per autenticare i tuoi utenti con Firebase utilizzando gli Account Google è gestire il flusso di accesso l'SDK Firebase JavaScript. Se vuoi autenticare un utente in Node.js o in un altro ambiente non browser, devi gestire manualmente il flusso di accesso.
Per gestire il flusso di accesso con l'SDK Firebase JavaScript, segui questi passaggi:
- Crea un'istanza dell'oggetto provider Google:
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
var provider = new firebase.auth.GoogleAuthProvider();
- Facoltativo: specifica gli ambiti OAuth 2.0 aggiuntivi che vuoi
da richiedere al provider di autenticazione. Per aggiungere un ambito, richiama
addScope
. Ad esempio:provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- (Facoltativo) Per localizzare il flusso OAuth del provider nelle preferenze dell'utente
senza trasmettere esplicitamente i parametri OAuth personalizzati pertinenti, aggiornala
sull'istanza Auth prima di avviare il flusso OAuth. Ad esempio:
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Facoltativo: specifica parametri aggiuntivi del provider OAuth personalizzato
che vuoi inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama
setCustomParameters
sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Ad esempio:provider.setCustomParameters({ 'login_hint': 'user@example.com' });
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- Esegui l'autenticazione con Firebase utilizzando l'oggetto del provider Google. Puoi
chiedere agli utenti di accedere con i propri Account Google aprendo un
o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è
preferito sui dispositivi mobili.
- Per accedere con una finestra popup, chiama
signInWithPopup
: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); // ... });
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; // ... });
Qui puoi anche individuare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per le autorizzazioni.
- Per accedere reindirizzando alla pagina di accesso, chiama
signInWithRedirect
: Segui le best practice quando utilizzi "signInWithRedirect".import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
quando viene caricata la pagina: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); // ... });
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; // ... });
- Per accedere con una finestra popup, chiama
Gestione degli errori account-esistenti-con-credenziali-diverse
Se hai attivato l'impostazione Un account per indirizzo email nella console Firebase,
Quando un utente tenta di accedere a un provider (come Google) con un indirizzo email che ha già
esiste per un altro provider di utenti Firebase (come Facebook), l'errore
auth/account-exists-with-different-credential
viene generato insieme a
Oggetto AuthCredential
(token ID Google). Per completare l'accesso al
fornitore previsto, l'utente deve prima accedere al provider esistente (Facebook) e poi collegarsi al provider
precedente AuthCredential
(token ID Google).
Modalità popup
Se utilizzi signInWithPopup
, puoi gestire
auth/account-exists-with-different-credential
errori con codice simile al seguente
esempio:
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) { // ... }
Modalità di reindirizzamento
Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che il valore la credenziale deve essere memorizzata nella cache tra reindirizzamenti di pagina (ad esempio, usando la memoria di sessione).
Impostazioni avanzate: gestire manualmente il flusso di accesso
Puoi anche eseguire l'autenticazione con Firebase utilizzando un Account Google gestendo il flusso di accesso con la libreria Accedi con Google:
- Integra la funzionalità Accedi con Google nella tua app seguendo le guida all'integrazione. Assicurati di configurare Accedi con Google con l'ID client Google generato per il tuo progetto Firebase. Puoi trovare l'ID client Google del tuo progetto nella pagina Credenziali della Developers Console del progetto.
- Nel callback del risultato dell'accesso, scambia il token ID della risposta di autenticazione Google con una credenziale Firebase e utilizzala per l'autenticazione con 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); // ... }); }
Avanzato: autenticazione con Firebase in Node.js
Per eseguire l'autenticazione con Firebase in un'applicazione Node.js:
- Accedi all'utente con il suo Account Google e recupera l'ID Google dell'utente
di accesso. Puoi farlo in diversi modi. Ad esempio:
- Se la tua app ha un front-end del browser, utilizza Accedi con Google come descritto
nella sezione Gestire manualmente il
flusso di accesso. Recupera l'ID token di Google dalla risposta
di autenticazione:
Quindi, invia il token all'app Node.js.var id_token = googleUser.getAuthResponse().id_token
- Se l'app viene eseguita su un dispositivo con capacità di input limitate, ad esempio TV, puoi usare Google flusso Accesso per TV e dispositivi.
- Se la tua app ha un front-end del browser, utilizza Accedi con Google come descritto
nella sezione Gestire manualmente il
flusso di accesso. Recupera l'ID token di Google dalla risposta
di autenticazione:
- Dopo aver ottenuto il token dell'ID Google dell'utente, usalo per creare una credenziale
, quindi accedi all'utente con la credenziale:
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); // ... });
// 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; // ... });
Esegui l'autenticazione con Firebase in un'estensione di Chrome
Se stai sviluppando un'app di estensione di Chrome, consulta la Guida ai documenti fuori schermo.
Personalizzazione del dominio di reindirizzamento per Accedi con Google
Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il tuo progetto:
https://my-app-12345.firebaseapp.com
.
Verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Quel dominio dovrebbe essere consentito per tutti i provider OAuth supportati. Tuttavia, gli utenti potrebbero notare che dominio durante l'accesso a Google prima del reindirizzamento all'applicazione: Continua su: https://my-app-12345.firebaseapp.com.
Per evitare di visualizzare il sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:
- Segui i passaggi da 1 a 3 in Configura il dominio per Hosting. Quando esegui la verifica la proprietà del dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
- Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella
Console Firebase:
auth.custom.domain.com
. - Nella console per gli sviluppatori di Google o nella pagina di configurazione di OAuth, autorizza l'URL della pagina di reindirizzamento.
che saranno accessibili sul tuo dominio personalizzato:
https://auth.custom.domain.com/__/auth/handler
. - Quando inizializzazione la libreria JavaScript, specifica il tuo dominio personalizzato con il
campo
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: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
Passaggi successivi
Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegati alle credenziali, ovvero nome utente, password, numero o informazioni del provider di autenticazione, ovvero l'utente con cui ha eseguito l'accesso. Questo nuovo viene archiviato come parte del progetto Firebase e può essere utilizzato per identificare a un utente in ogni app del progetto, a prescindere da come esegue l'accesso.
-
Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un osservatore sull'oggetto
Auth
. Puoi quindi recuperare le informazioni di base del profilo dell'utente dall'oggettoUser
. Consulta Gestisci utenti. In Firebase Realtime Database e Cloud Storage Regole di sicurezza, puoi ottieni l'ID utente unico dell'utente che ha eseguito l'accesso dalla variabile
auth
, e usarli per controllare i dati a cui un utente può accedere.
Puoi consentire agli utenti di accedere alla tua app utilizzando più autenticazioni collegando le credenziali del provider di autenticazione a un a un account utente esistente.
Per disconnettere un utente, chiama
signOut
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });