Consenti l'accesso a un utente con un'email utilizzando Identity Platform

Consenti l'accesso a 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:

Procedura guidata

---

Prima di iniziare

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 senza costi per l'esecuzione, il test e il deployment dei workload.
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.
Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.
Go to project selector
Verify that billing is enabled for your Google Cloud project.
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.
Grant the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

Check for the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.

Grant the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

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.

   Vai a Provider di identità

2. Nella pagina Provider di identità, fai clic su Aggiungi un provider.

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

4. Fai clic sul pulsante di attivazione/disattivazione Attivato.

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 i valori, perché ti serviranno in un passaggio successivo.

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

Consenti l'accesso all'utente

I passaggi per accedere all'utente variano a seconda della versione dell'SDK utilizzata dall'app.

Assicurati di seguire i passaggi corretti per la tua applicazione.

Nota :l'utilizzo dell'SDK v9 è vivamente consigliato, soprattutto per le app di produzione. Se hai bisogno di assistenza per altre opzioni di gestione dell'SDK, come window.firebase, consulta Eseguire l'upgrade dalla versione 8 all'SDK web modulare o Metodi alternativi per aggiungere Firebase.

SDK v9 (modulare)

Installa l'SDK e inizializza Firebase

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

Questo workflow utilizza npm e richiede bundler di moduli o strumenti di framework JavaScript perché l'SDK v9 è ottimizzato per funzionare con i bundler di moduli per eliminare il codice inutilizzato (tree shaking) e ridurre le dimensioni dell'SDK.

Per utilizzare l'SDK v9, segui questi passaggi:

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

   npm install firebase

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

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   Sostituisci quanto segue:

   • API_KEY: l'apiKey del tuo progetto Firebase.

     Importante: evita di utilizzare più chiavi API nel tuo progetto Firebase se le restrizioni delle applicazioni sono impostate su None o Websites. L'utilizzo di più chiavi con queste limitazioni specifiche può portare ad ambiguità nel modo in cui Firebase seleziona una chiave, causando potenzialmente un comportamento inatteso o interrompendo i flussi di lavoro rivolti agli utenti.

   • AUTH_DOMAIN: l'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 contenitore che memorizza la configurazione comune e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto Firebase App nel codice, puoi aggiungere e iniziare a utilizzare i servizi Firebase.

   Se utilizzi ESM e vuoi utilizzare i moduli del browser, sostituisci tutte le righe import con il seguente pattern:
   import { } from 'https://www.gstatic.com/firebasejs/12.11.0/firebase-SERVICE.js',
   dove SERVICE è un nome di SDK come firebase-firestore.

   L'utilizzo dei moduli del browser è un modo rapido per iniziare, ma consigliamo di utilizzare un bundler di moduli per la produzione.

Accedere a Identity Platform in JavaScript

Ora che hai inizializzato l'SDK Firebase, puoi utilizzarlo ovunque nella tua app. Ad esempio, ecco un'app che tenta di accedere a un utente hardcoded e visualizza il risultato in 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: l'apiKey del tuo progetto Firebase.
• AUTH_DOMAIN: l'authDomain del tuo progetto Firebase.
• EMAIL_ID: l'indirizzo email 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

Nota: puoi saltare questo passaggio se utilizzi uno strumento CLI del framework JavaScript come Angular CLI, Next.js, Vue CLI o Create React App. Per ulteriori informazioni, consulta la nostra guida al bundling dei moduli.

L'SDK web di Firebase è progettato per funzionare con i bundler di moduli per rimuovere qualsiasi codice inutilizzato (tree shaking). Ti consigliamo vivamente di utilizzare questo approccio per le app di produzione. Strumenti come Angular CLI, Next.js, Vue CLI, o Create React App gestiscono automaticamente il bundling dei moduli per le librerie installate tramite npm e importate nel tuo codebase.

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

Importare JavaScript nella pagina

1. Crea un nuovo file denominato index.html.

2. Aggiungi due container HTML di base e importa il file 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. Sulla tua macchina locale, crea un nuovo file denominato index.html.

2. Nel file HTML, aggiungi due container 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 consentire l'accesso all'utente, copia questo 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() e poi elabora il risultato con il callback onAuthStateChanged().

   Sostituisci quanto segue:

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

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

Esiste un limite per i tentativi di accesso utente non riusciti. Diversi tentativi di accesso rapidi e non riusciti bloccano temporaneamente l'utente fuori dal suo account.

Per ulteriori informazioni 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 sul tuo account:

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

   Vai a Provider di identità

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

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

   Vai a Utenti

4. Per eliminare l'utente che hai 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 creato per il tutorial.

Per eliminare il progetto:

Attenzione: l'eliminazione di un progetto ha i seguenti effetti:

• L'intero contenuto del progetto viene eliminato. Se hai utilizzato un progetto esistente per, le attività descritte in questo documento, eliminerai anche tutto il lavoro che hai svolto nel progetto.
• Gli ID progetto personalizzati non sono più disponibili. Quando hai creato questo progetto, potresti aver creato un ID progetto personalizzato che vuoi utilizzare in futuro. Per conservare gli URL che utilizzano l'ID progetto, ad esempio un URL appspot.com, elimina le risorse selezionate all'interno del progetto anziché eliminare l'intero progetto.

Se intendi esplorare più architetture, tutorial o guide rapide, puoi riutilizzare i progetti ed evitare così di superare i limiti di quota.

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

   Vai a Gestisci risorse

2. Nell'elenco dei progetti, seleziona quello 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 tramite una pagina dedicata e accedere inserendo indirizzo email e password. Identity Platform offre una UI di autenticazione predefinita che puoi utilizzare per queste pagine; in alternativa, puoi creare le tue. Puoi anche decidere di supportare metodi di accesso aggiuntivi, ad esempio provider social (come Facebook o Google), numeri di telefono, OIDC o SAML.

Scopri ulteriori informazioni su:

• Accesso degli utenti con JavaScript, Android, iOS, C++ o Unity.

• Accesso degli utenti con OIDC o SAML.

• Migrazione degli utenti da un'app esistente a Identity Platform.