Integrare gli elementi dell'interfaccia utente di Identity Platform nella tua app web

Questa guida illustra come integrare un'interfaccia utente (UI) fornita da Identity Platform in un'app web esistente.

Prima di iniziare

Per completare questa guida, ti serviranno:

Componenti dell'interfaccia utente open source per altri client

Questo articolo mostra come integrare i componenti dell'interfaccia utente in un'app web. Per altri tipi di app, consulta le seguenti pagine:

Integrazione dei componenti dell'interfaccia utente nell'app

  1. Aggiungi lo script e il CSS dell'interfaccia utente dalla CDN nel tag <head> della pagina.


    <script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

  2. Attiva almeno un metodo di accesso utilizzando la console Google Cloud . Per scoprire come, consulta la guida rapida.

  3. Nel tag <head> della pagina, configura la modalità di accesso degli utenti: 

    <script>
// UI Configuration
var uiConfig = {
 signInSuccessUrl: '[URL_TO_REDIRECT_ON_SIGNIN_SUCCESS]',
 signInOptions: [
   // Leave the lines as is for the providers you want to offer your users.
   firebase.auth.GoogleAuthProvider.PROVIDER_ID,
   firebase.auth.FacebookAuthProvider.PROVIDER_ID,
   firebase.auth.TwitterAuthProvider.PROVIDER_ID,
   firebase.auth.GitHubAuthProvider.PROVIDER_ID,
   firebase.auth.EmailAuthProvider.PROVIDER_ID,
   firebase.auth.PhoneAuthProvider.PROVIDER_ID,
   firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
 ],
 // tosUrl and privacyPolicyUrl accept either url string or a callback
 // function.
 // Terms of service url/callback.
 tosUrl: '[YOUR_TOS_URL]',
 // Privacy policy url/callback.
 privacyPolicyUrl: function() {
   window.location.assign('[YOUR_PRIVACY_POLICY_URL]');
 }
};

// Initialize the UI Components.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>

  4. Nell'elemento <body> della pagina, inserisci il widget dell'interfaccia utente: 

    <body>
<!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.-->
<h1>Welcome to [APP_NAME]</h1>
<div id="firebaseui-auth-container"></div>
</body>

    Quando esegui il rendering della pagina, viene visualizzata l'interfaccia utente fornita da Identity Platform, che consente agli utenti di accedere alla tua app.

Per scoprire di più sulle personalizzazioni, consulta la documentazione dei componenti dell'interfaccia utente su GitHub.

Passaggi successivi