Eseguire l'accesso di un utente con un'email utilizzando Identity Platform.

Scopri come utilizzare Identity Platform per eseguire l'accesso di un utente con un indirizzo email e una password.

Per seguire le indicazioni dettagliate per questa attività direttamente nella console Google Cloud, fai clic su Procedura guidata:

Guidami

Prima di iniziare

  1. Accedi al tuo account Google Cloud. Se non conosci Google Cloud, crea un account per valutare le prestazioni dei nostri prodotti in scenari reali. I nuovi clienti ricevono anche 300 $di crediti gratuiti per l'esecuzione, il test e il deployment dei carichi di lavoro.

  2. Nella pagina del selettore di progetti della console Google Cloud, seleziona o crea un progetto Google Cloud.

    Vai al selettore progetti

  3. Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.

  4. Assicurati di disporre dei seguenti ruoli nel progetto: Identity Platform Admin, Service Usage Admin

    Verifica i ruoli

    1. Nella console Google Cloud, vai alla pagina IAM.

      Vai a IAM
    2. Seleziona il progetto.

    3. Nella colonna Entità, individua la riga contenente il tuo indirizzo email.

      Se il tuo indirizzo email non è in questa colonna, significa che non disponi di alcun ruolo.

    4. Nella colonna Ruolo per la riga contenente il tuo indirizzo email, controlla se l'elenco dei ruoli include quelli richiesti.

    Concedi i ruoli

    1. Nella console Google Cloud, vai alla pagina IAM.

      Vai a IAM
    2. Seleziona il progetto.
    3. Fai clic su Concedi l'accesso.
    4. Nel campo Nuove entità, inserisci il tuo indirizzo email.
    5. Nell'elenco Seleziona un ruolo, scegli un ruolo.
    6. Per concedere altri ruoli, fai clic su Aggiungi un altro ruolo e aggiungi ciascun ruolo aggiuntivo.
    7. Fai clic su Salva.

  5. Nella pagina del selettore di progetti della console Google Cloud, seleziona o crea un progetto Google Cloud.

    Vai al selettore progetti

  6. Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.

  7. Assicurati di disporre dei seguenti ruoli nel progetto: Identity Platform Admin, Service Usage Admin

    Verifica i ruoli

    1. Nella console Google Cloud, vai alla pagina IAM.

      Vai a IAM
    2. Seleziona il progetto.

    3. Nella colonna Entità, individua la riga contenente il tuo indirizzo email.

      Se il tuo indirizzo email non è in questa colonna, significa che non disponi di alcun ruolo.

    4. Nella colonna Ruolo per la riga contenente il tuo indirizzo email, controlla se l'elenco dei ruoli include quelli richiesti.

    Concedi i ruoli

    1. Nella console Google Cloud, vai alla pagina IAM.

      Vai a IAM
    2. Seleziona il progetto.
    3. Fai clic su Concedi l'accesso.
    4. Nel campo Nuove entità, inserisci il tuo indirizzo email.
    5. Nell'elenco Seleziona un ruolo, scegli un ruolo.
    6. Per concedere altri ruoli, fai clic su Aggiungi un altro ruolo e aggiungi ciascun ruolo aggiuntivo.
    7. Fai clic su Salva.

Abilita Identity Platform

  1. Nella console Google Cloud, vai alla pagina Identity Platform in Cloud Marketplace.

    Vai a Identity Platform

  2. Fai clic su Abilita Identity Platform.

Configura l'accesso via email

  1. Vai alla pagina Provider di Identity Platform.

  2. Nella pagina Identity Providers (Provider di identità), fai clic su Add a provider (Aggiungi un provider).

  3. Nell'elenco Seleziona un provider, scegli Email/Password.

  4. Fai clic sull'opzione Attivato per attivare l'opzione.

  5. Per salvare le impostazioni del provider, fai clic su Salva.

Crea un utente

  1. Nella console Google Cloud, vai alla pagina Utenti.

    Vai a Utenti

  2. Fai clic su Aggiungi utente.

  3. Nel campo Email, inserisci un indirizzo email e una password. Prendi nota di entrambi questi valori perché ti serviranno in un passaggio successivo.

  4. Per aggiungere l'utente, fai clic su Aggiungi. Il nuovo utente viene elencato nella pagina Utenti.

Consenti l'accesso all'utente

I passaggi per accedere all'utente variano a seconda della versione dell'SDK utilizzata dalla tua app. Assicurati di seguire i passaggi corretti per la tua applicazione.

SDK v9 (modulare)

Installa l'SDK e inizializza Firebase

La versione 9 dell'SDK Firebase JS utilizza un formato Modulo JavaScript.

Questo flusso di lavoro utilizza npm e richiede bundle di moduli o strumenti di framework JavaScript, perché l'SDK v9 è ottimizzato per funzionare con i bundler di moduli, in modo da eliminare il codice inutilizzato (tree-tree) e ridurre le dimensioni dell'SDK.

Per utilizzare l'SDK v9, procedi nel seguente modo:

  1. Dalla directory del progetto, installa Firebase utilizzando npm:

    npm install firebase

  2. Inizializza Firebase nella tua app e crea un oggetto App Firebase:

    import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "AUTH_DOMAIN"
};

const app = initializeApp(firebaseConfig);

    Sostituisci quanto segue:

    • API_KEY: apiKey del tuo progetto Firebase.
    • AUTH_DOMAIN: authDomain del tuo progetto Firebase.

    Puoi trovare questi valori nella configurazione del progetto Firebase della tua app.

    Un'app Firebase è un oggetto simile a un container che archivia le configurazioni comuni e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto App Firebase nel tuo codice, puoi aggiungere e iniziare a utilizzare i servizi Firebase.

Accedere a Identity Platform in JavaScript

Ora che hai inizializzato l'SDK Firebase, puoi utilizzarlo ovunque nella tua app. Ad esempio, questa è un'app che tenta di accedere a un utente hardcoded e visualizzare il risultato su una pagina web.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Sostituisci quanto segue:

  • API_KEY: apiKey del tuo progetto Firebase.
  • AUTH_DOMAIN: authDomain del tuo progetto Firebase.
  • EMAIL_ID: l'indirizzo email dell'utente che hai creato in precedenza in questa guida.
  • PASSWORD: la password utente che hai creato in precedenza in questa guida.

Utilizzare un bundler di moduli per ridurre le dimensioni

L'SDK Firebase Web è progettato per funzionare con i bundle di moduli al fine di rimuovere il codice non utilizzato (scuotimento ad albero). Consigliamo vivamente di utilizzare questo approccio per le app di produzione. Strumenti come l'interfaccia a riga di comando Angular, Next.js, l'interfaccia a riga di comando Vue o Create React App gestiscono automaticamente il raggruppamento dei moduli per le librerie installate tramite npm e importate nel codebase.

Ad esempio, puoi utilizzare Webpack per generare una cartella dist contenente il codice dell'applicazione in bundle e delle dipendenze. Per ulteriori informazioni, consulta Utilizzo dei bundle di moduli con Firebase.

Importa codice JavaScript nella pagina

  1. Crea un nuovo file denominato index.html.

  2. Aggiungi due contenitori HTML di base e importa il codice js in bundle.

    <script defer src="js/bundled.js"></script>
<div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

  3. Avvia index.html nel browser web. Viene visualizzato un messaggio di benvenuto che mostra l'email dell'utente.

SDK v8 (legacy)

Crea una pagina web

  1. Crea un nuovo file denominato index.html sul computer locale.

  2. Nel file HTML, aggiungi due contenitori HTML:

    <div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

Inizializza l'SDK client di Identity Platform con la tua chiave API

  1. Nella console Google Cloud, vai alla pagina Provider di identità.

    Vai a Provider di identità

  2. Fai clic su Dettagli di configurazione dell'applicazione.

  3. Copia il codice di inizializzazione in index.html.

Consenti l'accesso all'utente

  1. Per far accedere l'utente, copia il seguente codice in index.html:

    <script>
  var email = "EMAIL_ID";
  var password = "PASSWORD";

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      document.getElementById("message").innerHTML = "Welcome, " + user.email;
    } else {
      document.getElementById("message").innerHTML = "No user signed in.";
    }
  });

  firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
    document.getElementById("message").innerHTML = error.message;
  });
</script>

    Questo codice chiama signInWithEmailAndPassword(), quindi elabora il risultato con il callback onAuthStateChanged().

    Sostituisci quanto segue:

    • EMAIL_ID: l'email dell'utente che hai creato in precedenza
    • PASSWORD: la password dell'utente che hai creato in precedenza

  2. Apri index.html nel browser web. Viene visualizzato un messaggio di benvenuto con l'indirizzo email dell'utente.

Esiste un limite per i tentativi di accesso non riusciti degli utenti. Alcuni tentativi di accesso rapidi e non riusciti bloccano temporaneamente l'accesso dell'utente al proprio account.

Per saperne di più su altri limiti di Identity Platform, consulta Quote e limiti.

Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questa pagina, segui questi passaggi:

Elimina il provider e l'utente

Se hai utilizzato un progetto Google Cloud esistente, elimina il provider e l'utente che hai creato per evitare addebiti al tuo account:

  1. Nella console Google Cloud, vai alla pagina Provider di identità.

    Vai a Provider di identità

  2. Per eliminare il provider, fai clic su Elimina accanto al nome del provider. Per confermare, fai clic su Elimina.

  3. Nella console Google Cloud, vai alla pagina Utenti.

    Vai a Utenti

  4. Per eliminare l'utente creato, fai clic su Elimina accanto al nome dell'utente. Per confermare, fai clic su Elimina.

Elimina il progetto

Il modo più semplice per eliminare la fatturazione è eliminare il progetto che hai creato per il tutorial.

Per eliminare il progetto:

  1. Nella console Google Cloud, vai alla pagina Gestisci risorse.

    Vai a Gestisci risorse

  2. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
  3. Nella finestra di dialogo, digita l'ID del progetto e fai clic su Chiudi per eliminare il progetto.

Passaggi successivi

In un'app reale, gli utenti dovrebbero registrarsi utilizzando una pagina di registrazione dedicata e accedere inserendo i propri indirizzi email e password. Identity Platform offre un'interfaccia utente di autenticazione predefinita che puoi utilizzare per queste pagine oppure puoi creare le tue. Potresti anche voler supportare metodi di accesso aggiuntivi, come provider di social network (come Facebook o Google), numeri di telefono, OIDC o SAML.

Scopri ulteriori informazioni su: