Questa pagina è stata tradotta dall'API Cloud Translation.

Autenticati utilizzando Google con JavaScript

Puoi consentire ai tuoi utenti di eseguire l'autenticazione con Firebase utilizzando i loro account Google. Puoi utilizzare l'SDK Firebase per eseguire il flusso di accesso a 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 di Firebase:
1. Nella console Firebase , apri la sezione Auth .
2. Nella scheda Metodo di accesso , abilita il metodo di accesso di Google e fai clic su Salva .

Gestisci 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 i loro account Google è gestire il flusso di accesso con l'SDK JavaScript di Firebase. (Se desideri autenticare un utente in Node.js o in un altro ambiente diverso dal browser, devi gestire manualmente il flusso di accesso.)

Per gestire il flusso di accesso con l'SDK JavaScript di Firebase, procedi nel seguente modo:

Crea un'istanza dell'oggetto provider di Google:

Web modular API

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

Web namespaced API

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

Facoltativo : specificare ulteriori ambiti OAuth 2.0 che si desidera richiedere al provider di autenticazione. Per aggiungere un ambito, chiama addScope . Per esempio:
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Web namespaced API
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
Consulta la documentazione del provider di autenticazione .
Facoltativo : per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiornare il codice della lingua sull'istanza Auth prima di avviare il flusso OAuth. Per esempio:
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();auth_set_language_code.js
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Facoltativo : specificare ulteriori parametri del provider OAuth personalizzati che si desidera 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. Per esempio:
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Vedere il riferimento del provider di autenticazione per ulteriori dettagli.

Esegui l'autenticazione con Firebase utilizzando l'oggetto provider di Google. Puoi chiedere agli utenti di accedere con i loro account Google aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.

Per accedere con una finestra pop-up, chiama signInWithPopup :

Web modular API

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 namespaced API

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

Si noti inoltre che è possibile recuperare il token OAuth del provider Google che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Google.

Questo è anche il luogo in cui puoi rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .

Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect : Segui le best practice quando usi "signInWithRedirect".

Web modular API

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

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

Web namespaced API

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

Quindi, puoi anche recuperare il token OAuth del provider Google chiamando getRedirectResult quando la tua pagina viene caricata:

Web modular API

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 namespaced API

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

Questo è anche il luogo in cui puoi rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .

Gestione degli errori di account esistenti con credenziali diverse

Se hai abilitato 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 già esistente per il provider di un altro utente Firebase (come Facebook), l'errore auth/account-exists-with-different-credential viene generato insieme a un oggetto AuthCredential (token ID Google). Per completare l'accesso al provider previsto, l'utente deve prima accedere al provider esistente (Facebook) e quindi collegarsi all'ex AuthCredential (token ID Google).

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


// Step 1.
// User tries to sign in to Google.
auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Google credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Google credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modalità reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che la credenziale in sospeso deve essere memorizzata nella cache tra i reindirizzamenti di pagina (ad esempio, utilizzando l'archiviazione della sessione).

Puoi anche eseguire l'autenticazione con Firebase utilizzando un account Google gestendo il flusso di accesso con la libreria Accedi con Google:

Integra 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 delle credenziali della Developers Console del tuo progetto .

Nella richiamata del risultato di accesso, scambia il token ID dalla risposta di autenticazione di 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 ottieni il token dell'ID Google dell'utente. Puoi farlo in diversi modi. Per esempio:
- Se la tua app dispone di un browser front-end, usa Accedi con Google come descritto nella sezione Gestisci manualmente il flusso di accesso . Ottieni il token ID Google dalla risposta auth:
```
var id_token = googleUser.getAuthResponse().id_token
```
  Quindi, 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 Accedi con Google per TV e dispositivi .

Dopo aver ottenuto il token dell'ID Google dell'utente, utilizzalo per creare un oggetto Credential e quindi accedi all'utente con la credenziale:

Web modular API

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 namespaced API

// 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

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

Se stai creando un'app di estensione di Chrome, devi aggiungere il tuo ID estensione di Chrome:

Apri il tuo progetto nella console Firebase .
Nella sezione Autenticazione , apri la pagina Metodo di accesso .
Aggiungere un URI come il seguente all'elenco dei domini autorizzati:
```
chrome-extension://CHROME_EXTENSION_ID
```

Solo le operazioni popup ( signInWithPopup , linkWithPopup e reauthenticateWithPopup ) sono disponibili per le estensioni di Chrome, poiché le estensioni di Chrome non possono utilizzare i reindirizzamenti HTTP. Dovresti chiamare questi metodi da uno script di una pagina in background piuttosto che da un popup di azione del browser, poiché il popup di autenticazione annullerà il popup di azione del browser. I metodi popup possono essere utilizzati solo nelle estensioni che utilizzano Manifest V2 . Il più recente Manifest V3 consente solo script in background sotto forma di service worker, che non possono eseguire affatto le operazioni popup.

Nel file manifest dell'estensione di Chrome assicurati di aggiungere l'URL https://apis.google.com alla lista consentita content_security_policy .

Alla creazione del progetto, Firebase fornirà un sottodominio univoco per il tuo progetto: https://my-app-12345.firebaseapp.com .

Questo verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Tale dominio dovrebbe essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero vedere quel dominio durante l'accesso a Google prima di reindirizzare nuovamente all'applicazione: Continua su: https://my-app-12345.firebaseapp.com .

Per evitare di visualizzare il tuo sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

Segui i passaggi da 1 a 3 in Configurare il tuo dominio per l'hosting . Quando verifichi la proprietà del tuo dominio, Hosting fornisce 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 sviluppatori di Google o nella pagina di configurazione di OAuth, autorizza l'URL della pagina di reindirizzamento, che sarà accessibile sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler .

Quando inizializzi la libreria JavaScript, specifica il tuo dominio personalizzato con il campo authDomain :

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Prossimi passi

Dopo che un utente ha effettuato 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 sul provider di autenticazione, con cui l'utente ha effettuato l'accesso. Questo nuovo account viene archiviato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso dell'utente.

Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto Auth . È quindi possibile ottenere le informazioni di base sul profilo dell'utente dall'oggetto User . Vedere Gestire gli utenti .
In Firebase Realtime Database and Cloud Storage Security Rules , puoi ottenere 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 disconnettere un utente, chiama signOut :

Web modular API

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 namespaced API

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

Autenticati utilizzando Google con JavaScript

Prima di iniziare

Gestisci il flusso di accesso con l'SDK Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Gestione degli errori di account esistenti con credenziali diverse

Modalità pop-up

Modalità reindirizzamento

Avanzate: gestisci il flusso di accesso manualmente

Avanzato: autenticazione con Firebase in Node.js

Web modular API

Web namespaced API

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

Personalizzazione del dominio di reindirizzamento per l'accesso a Google

Prossimi passi

Web modular API

Web namespaced API