Accesso degli utenti con Google

Questo documento mostra come utilizzare Identity Platform per accedere agli utenti con Google.

Prima di iniziare

Questo tutorial presuppone che tu abbia già attivato Identity Platform e abbia un'app web di base scritta utilizzando HTML e JavaScript. Per scoprire come fare, consulta la Guida rapida.

Configurazione di Google come provider

Per configurare Google come provider di identità:

  1. Vai alla pagina Provider di identità nella console Google Cloud.

    Vai alla pagina Provider di identità

  2. Fai clic su Add A Provider (Aggiungi un provider).

  3. Seleziona Google dall'elenco.

  4. Inserisci il tuo ID client web e il segreto web di Google. Se non disponi già di un ID e di un secret, puoi ottenerne uno nella pagina API e servizi.

  5. Configura l'URI elencato in Configura Google come URI di reindirizzamento OAuth valido per la tua app Google. Se hai configurato un dominio personalizzato in Identity Platform, aggiorna l'URI di reindirizzamento nella configurazione dell'app Google in modo da utilizzare il dominio personalizzato anziché il dominio predefinito. Ad esempio, cambia https://myproject.firebaseapp.com/__/auth/handler in https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Registra i domini della tua app facendo clic su Aggiungi dominio in Domini autorizzati. A scopo di sviluppo, localhost è già abilitato per impostazione predefinita.

  7. In Configura la tua applicazione, fai clic su Dettagli di configurazione. Copia lo snippet nel codice della tua app per inizializzare l'SDK client di Identity Platform.

  8. Fai clic su Salva.

Accesso degli utenti con l'SDK client

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

    Versione web 9

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Versione web 8

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js

  1. Facoltativo:aggiungi ambiti OAuth. Gli ambiti specificano quali dati stai chiedendo a Google. Dati più sensibili potrebbero richiedere ambiti specifici. Consulta la documentazione del provider per determinare gli ambiti necessari all'applicazione.

    Versione web 9

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

    Versione web 8

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

  1. (Facoltativo) Localizza il flusso di autenticazione. Puoi specificare una lingua o utilizzare la lingua predefinita del dispositivo:

    Versione web 9

    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

    Versione web 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js

  2. (Facoltativo) Specifica altri parametri OAuth personalizzati. Questi strumenti sono specifici di Google e in genere vengono utilizzati per personalizzare l'esperienza di autenticazione. Non puoi trasmettere parametri riservati a OAuth o Identity Platform.

Versione web 9

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
auth_google_provider_params.js

Versione web 8

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
google-signin.js

  1. Utilizza l'oggetto del provider Google per accedere all'utente. Puoi aprire una finestra popup o reindirizzare la pagina corrente. Il reindirizzamento è più semplice per gli utenti che usano dispositivi mobili.

    Per visualizzare un popup, chiama signInWithPopup():

    Versione web 9

    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

    Versione web 8

    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

    Per reindirizzare la pagina, chiama prima signInWithRedirect().

    Segui le best practice quando utilizzi signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    Versione web 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_signin_redirect.js

    Versione web 8

    firebase.auth().signInWithRedirect(provider);
    index.js

    Quindi, recupera il token Google chiamando getRedirectResult() durante il caricamento della pagina:

    Versione web 9

    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

    Versione web 8

    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

Una volta ottenuto un token di accesso, puoi utilizzarlo per chiamare l'API di Google. Ad esempio:

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

Accesso manuale agli utenti

Se non desideri utilizzare l'SDK client, puoi anche gestire il flusso di accesso manualmente:

  1. Integra l'autenticazione Google nella tua app seguendo i passaggi nella documentazione per gli sviluppatori.

  2. Accedi all'utente con Google utilizzando il flusso implementato nel passaggio precedente.

  3. Scambia il token che ricevi da Google con una credenziale di Identity Platform:

    Versione web 9

    import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(idToken);
    auth_google_provider_credential.js

    Versione web 8

    var credential = firebase.auth.GoogleAuthProvider.credential(idToken);
    google-signin.js

  4. Utilizza la credenziale per accedere all'utente con Identity Platform:

    Versione web 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .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;
    // ...
  });
    auth_signin_credential.js

    Versione web 8

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .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;
    // ...
  });
    index.js

Passaggi successivi