Esegui l'autenticazione utilizzando Google con JavaScript

Puoi consentire agli utenti di autenticarsi con Firebase utilizzando i propri Account Google. Puoi utilizzare l'SDK Firebase per eseguire il flusso di accesso 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

1. Aggiungi Firebase al tuo progetto JavaScript.
2. Abilita Google come metodo di accesso nella console Firebase:
   1. Nella console Firebase, apri la sezione Auth.
   2. 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 gli utenti con Firebase utilizzando i loro Account Google è gestire il flusso di accesso con l'SDK JavaScript di Firebase. 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:

1. Crea un'istanza dell'oggetto provider 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

2. Facoltativo: specifica gli ambiti OAuth 2.0 aggiuntivi che vuoi richiedere al provider di autenticazione. Per aggiungere un ambito, chiama addScope. Ad esempio:

   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

   Consulta la documentazione del fornitore di servizi di autenticazione.
3. Facoltativo: per localizzare il flusso OAuth del provider nella lingua preferita dall'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiorna il codice lingua nell'istanza Auth prima di avviare il flusso OAuth. Ad esempio:

   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

4. 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:

   Web

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   auth_google_provider_params.js

   Web

   provider.setCustomParameters({
     'login_hint': '[e-mail]'
   });
   google-signin.js

   I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, consulta le informazioni di riferimento sul fornitore di servizi di autenticazione.
5. Esegui l'autenticazione con Firebase utilizzando l'oggetto provider Google. Puoi invitare gli utenti ad accedere con i propri Account Google aprendo una finestra popup o reindirizzandoli alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
   • Per accedere con una finestra popup, chiama 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

     Tieni inoltre presente che puoi recuperare il token OAuth del provider Google, che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Google.

     Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

   • Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect: Segui le best practice quando utilizzi "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

     Puoi anche recuperare il token OAuth del fornitore Google chiamando getRedirectResult al caricamento della pagina:

     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

     Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

Gestione degli errori account-exists-with-different-credential

Google funge da provider di identità sia per email che per i social. Gli IdP email sono autorevoli per tutti gli indirizzi email correlati al loro dominio email ospitato, mentre gli IdP social affermano le identità email in base a una conferma una tantum dell'indirizzo email. Un utente che accede con Google non causerà mai questo errore se il suo account è ospitato su Google, anche se ha creato l'account con una password o un provider di identità sociale.

Se hai attivato l'impostazione Un account per indirizzo email nella console Firebase, quando un utente tenta di accedere a un provider (ad esempio Google) con un indirizzo email che esiste già per il provider di un altro utente Firebase (ad esempio Facebook), viene generato l'errore auth/account-exists-with-different-credential insieme a un oggetto AuthCredential (token ID di Google). Per completare l'accesso al fornitore previsto, l'utente deve prima accedere al fornitore esistente (Facebook) e poi eseguire il collegamento all'AuthCredential precedente (token ID di Google).

Modalità popup

Se utilizzi signInWithPopup, puoi gestire gli errori auth/account-exists-with-different-credential con un codice come nell'esempio seguente:

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 la credenziale in attesa deve essere memorizzata nella cache tra i reindirizzamenti di pagina (ad esempio utilizzando lo spazio di archiviazione della sessione).

Avanzate: gestisci manualmente il flusso di accesso

Puoi anche autenticarti con Firebase utilizzando un Account Google gestendo il flusso di accesso con la libreria Accedi con Google:

1. Esegui l'integrazione di Accedi con Google nella tua app seguendo la guida all'integrazione. Assicurati di configurare Accedi con Google con l'ID cliente Google generato per il tuo progetto Firebase. Puoi trovare l'ID client Google del tuo progetto nella pagina Credenziali di Developers Console del progetto.
2. Nel callback del risultato di accesso, scambia il token ID della risposta di autenticazione di Google con una credenziale Firebase e utilizzala per autenticarti 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:

1. Chiedi all'utente di accedere con il proprio Account Google e ottieni il token ID Google dell'utente. Esistono diversi modi per farlo. 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:

     var id_token = googleUser.getAuthResponse().id_token

     Invia questo token alla tua app Node.js.
   • Se la tua app viene eseguita su un dispositivo con funzionalità di input limitate, ad esempio una TV, puoi utilizzare il flusso di accesso con Google per TV e dispositivi.
2. Dopo aver ottenuto il token ID Google dell'utente, utilizzalo per creare un oggetto Credential e poi fai accedere l'utente con la credenziale:

   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

Eseguire l'autenticazione con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione di Chrome, consulta la guida Documenti fuori schermo.

Personalizzazione del dominio di reindirizzamento per l'accesso con Google

Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il progetto: https://my-app-12345.firebaseapp.com.

Verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Questo dominio deve essere consentito per tutti i fornitori OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero visualizzare questo dominio durante l'accesso a Google prima del reindirizzamento all'applicazione: Continua su: https://my-app-12345.firebaseapp.com.

Per evitare la visualizzazione del sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

1. Segui i passaggi da 1 a 3 in Configurare il dominio per Hosting. Quando verifichi la proprietà del tuo dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
2. Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella console Firebase: auth.custom.domain.com.
3. Nella pagina di configurazione di OAuth o nella console per gli sviluppatori Google, aggiungi alla lista consentita l'URL della pagina di reindirizzamento, che sarà accessibile nel tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler.
4. Quando inizili 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: 'PROJECT_ID.firebasestorage.app',
     messagingSenderId: 'SENDER_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 collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene archiviato nel tuo progetto Firebase e può essere utilizzato per identificare un utente in tutte le app del progetto, indipendentemente da come accede.

• 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'oggetto User. Vedi Gestire gli utenti.

• Nelle Regole di sicurezza Firebase Realtime Database e Cloud Storage, puoi recuperare l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth e utilizzarlo per controllare a quali dati può accedere un utente.

Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.

Per scollegare un utente, chiama 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