Esegui l'autenticazione utilizzando Google con JavaScript

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

  1. Aggiungi Firebase al tuo progetto JavaScript.
  2. Abilita Google come metodo di accesso nella console Firebase:
    1. Nella console Firebase, apri 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 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:

  1. Crea un'istanza dell'oggetto provider Google:

    Web

    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();

    Web

    var provider = new firebase.auth.GoogleAuthProvider();
  2. Facoltativo: specifica gli ambiti OAuth 2.0 aggiuntivi che vuoi da richiedere al provider di autenticazione. Per aggiungere un ambito, richiama addScope. Ad esempio:

    Web

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    Web

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    Consulta il provider di autenticazione documentazione.
  3. (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:

    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();

    Web

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  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': 'user@example.com'
    });

    Web

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    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 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:

      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);
          // ...
        });

      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;
          // ...
        });
      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 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".

      Web

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web

      firebase.auth().signInWithRedirect(provider);
      Successivamente, puoi anche recuperare il token OAuth del provider Google chiamando getRedirectResult quando viene caricata la 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);
          // ...
        });

      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;
          // ...
        });
      Qui puoi anche individuare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per le autorizzazioni.

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.

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'oggetto User. 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:

Web

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

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

Web

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