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 email e password.
Per seguire le indicazioni dettagliate per questa attività direttamente nella console Google Cloud, fai clic su 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 gratuiti per l'esecuzione, il test e il deployment dei carichi di lavoro.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.
-
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
-
In the Google Cloud console, go to the IAM page.
Go to IAM - Select the project.
-
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.
- For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.
Grant the roles
-
In the Google Cloud console, go to the IAM page.
Vai a IAM - Seleziona il progetto.
- Fai clic su Concedi l'accesso.
-
Nel campo Nuove entità, inserisci l'identificatore utente. In genere si tratta dell'indirizzo email di un Account Google.
- Nell'elenco Seleziona un ruolo, seleziona un ruolo.
- Per concedere altri ruoli, fai clic su Aggiungi un altro ruolo e aggiungi ogni altro ruolo.
- Fai clic su Salva.
-
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.
-
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
-
In the Google Cloud console, go to the IAM page.
Go to IAM - Select the project.
-
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.
- For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.
Grant the roles
-
In the Google Cloud console, go to the IAM page.
Vai a IAM - Seleziona il progetto.
- Fai clic su Concedi l'accesso.
-
Nel campo Nuove entità, inserisci l'identificatore utente. In genere si tratta dell'indirizzo email di un Account Google.
- Nell'elenco Seleziona un ruolo, seleziona un ruolo.
- Per concedere altri ruoli, fai clic su Aggiungi un altro ruolo e aggiungi ogni altro ruolo.
- Fai clic su Salva.
-
Abilita Identity Platform
Nella console Google Cloud, vai alla pagina Identity Platform nella Google Cloud Marketplace.
Fai clic su Abilita Identity Platform.
Configura l'accesso via email
Vai alla pagina Provider di Identity Platform.
Vai a Provider di Identity Platform Nella pagina Identity Providers (Provider di identità), fai clic su Add a provider (Aggiungi un provider).
Nell'elenco Seleziona un provider, seleziona
Email/password.Fai clic sul pulsante di attivazione/disattivazione Abilitato per attivare l'opzione.
Per salvare le impostazioni del provider, fai clic su Salva.
Crea un utente
Nella console Google Cloud, vai alla pagina Utenti.
Fai clic su Aggiungi utente.
Nel campo Email, inserisci un indirizzo email e una password. Entrambe le opzioni perché ti serviranno in un passaggio successivo.
Per aggiungere l'utente, fai clic su Aggiungi. Il nuovo utente viene elencato nella scheda Utenti .
Consenti l'accesso all'utente
I passaggi per far accedere l'utente variano a seconda della versione dell'SDK in uso nell'app. Assicurati di seguire i passaggi corretti per la tua richiesta.
SDK v9 (modulare)
Installa l'SDK e inizializza Firebase
La versione 9 dell'SDK Firebase JS utilizza un Modulo JavaScript formato.
Questo flusso di lavoro utilizza npm e richiede i bundler di moduli o il framework JavaScript poiché l'SDK v9 è ottimizzato per funzionare module bundlers per eliminare il codice inutilizzato (tree-shaking) e ridurre le dimensioni dell'SDK.
Per utilizzare l'SDK v9, segui questi passaggi:
Dalla directory del progetto, installa Firebase utilizzando npm:
npm install firebase
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
: ilapiKey
del tuo progetto Firebase.AUTH_DOMAIN
: ilauthDomain
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 configurazioni comuni e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto puoi aggiungere un oggetto App Firebase al tuo codice e iniziare a utilizzarlo i servizi di machine learning.
Accedi a Identity Platform nel tuo JavaScript
Ora che hai inizializzato l'SDK Firebase, puoi utilizzarlo ovunque dell'app. Ad esempio, ecco un'app che tenta di accedere a un account hardcoded utente 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
: ilapiKey
del tuo progetto Firebase.AUTH_DOMAIN
: ilauthDomain
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.
Usa un bundler di moduli per ridurre le dimensioni
L'SDK Firebase Web è progettato per funzionare con i bundler di moduli al fine di rimuovere qualsiasi codice inutilizzato (scuotimento ad albero). Consigliamo vivamente di utilizzare questo approccio le app di produzione. Strumenti come Angular CLI, Next.js, interfaccia a riga di comando Vue, o Crea app React gestire automaticamente il raggruppamento di moduli per le librerie installate tramite npm importati nel codebase.
Ad esempio, puoi utilizzare Webpack
per generare una cartella dist
contenente l'applicazione in bundle e il codice delle dipendenze. Consulta Utilizzare i bundler di moduli con Firebase
per ulteriori informazioni.
Importa il codice JavaScript nella pagina
Crea un nuovo file denominato
index.html
.Aggiungere due contenitori HTML di base e importare il codice js in bundle.
<script defer src="js/bundled.js"></script> <div>Identity Platform Quickstart</div> <div id="message">Loading...</div>
Avvia
index.html
nel browser web. Viene visualizzato un messaggio di benvenuto che mostra l'email dell'utente.
SDK v8 (precedente)
Crea una pagina web
Sul computer locale, crea un nuovo file denominato
index.html
.Aggiungi due contenitori HTML nel file HTML:
<div>Identity Platform Quickstart</div> <div id="message">Loading...</div>
Inizializza l'SDK client di Identity Platform con la tua chiave API
Nella console Google Cloud, vai alla pagina Provider di identità.
Fai clic su
Dettagli di configurazione dell'applicazione .Copia il codice di inizializzazione in
index.html
.
Consenti l'accesso all'utente
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()
e poi elabora il risultato con il callbackonAuthStateChanged()
.Sostituisci quanto segue:
- EMAIL_ID: l'email dell'utente che hai creato in precedenza
- PASSWORD: la password dell'utente che hai creato in precedenza
Apri
index.html
nel browser web. Un messaggio di benvenuto che mostra l'email dell'utente.
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 per le 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 creato per evitare addebiti sul tuo account:
Nella console Google Cloud, vai alla pagina Provider di identità.
Per eliminare il provider, fai clic su
Elimina accanto al nome del o il provider di servizi di terze parti. Per confermare, fai clic su Elimina.Nella console Google Cloud, vai alla pagina Utenti.
Per eliminare l'utente che hai creato, fai clic su
Elimina accanto al nome del utente. Per confermare, fai clic su Elimina.
Elimina il progetto
Il modo più semplice per eliminare la fatturazione creato per il tutorial.
Per eliminare il progetto:
- Nella console Google Cloud, vai alla pagina Gestisci risorse.
- Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
- 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 quindi accedi inserendo i loro indirizzi email e le password. Identity Platform offre un UI di autenticazione predefinita che che puoi utilizzare per queste pagine, oppure puoi crearne di personalizzate. Potresti anche voler supportare metodi di accesso aggiuntivi, come i social network (come Facebook o Google), numeri di telefono, OIDC o SAML.
Scopri ulteriori informazioni su:
Accesso degli utenti con JavaScript, Android, iOS, C++ o Unity.
Eseguire la migrazione degli utenti da un'app esistente a Identity Platform.