Identity Platform-UI-Elemente in Ihre Webanwendung integrieren

In diesem Leitfaden wird gezeigt, wie Sie eine von Identity Platform bereitgestellte Benutzeroberfläche (UI) in eine vorhandene Webanwendung integrieren.

Hinweis

Für diese Anleitung ist Folgendes erforderlich:

Open-Source-UI-Komponenten für andere Clients

In diesem Artikel erfahren Sie, wie Sie UI-Komponenten in eine Webanwendung integrieren. Informationen zu anderen Anwendungstypen finden Sie auf den folgenden Seiten:

UI-Komponenten in Anwendung einbinden

  1. Fügen Sie das UI-Skript und CSS aus dem CDN im Tag <head> zu Ihrer Seite hinzu.


    <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. Aktivieren Sie mit der Google Cloud -Konsole mindestens eine Anmeldemethode. Weitere Informationen dazu finden Sie in der Kurzanleitung.

  3. Konfigurieren Sie im Tag <head> Ihrer Seite, wie sich Ihre Nutzer anmelden können: 

    <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. Fügen Sie das UI-Widget in das <body>-Element Ihrer Seite ein: 

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

    Wenn Sie Ihre Seite rendern, wird die von Identity Platform bereitgestellte UI angezeigt, mit der sich in Ihrer Anwendung anmelden können.

Weitere Informationen zur Anpassung finden Sie in der Dokumentation zur UI-Komponente auf GitHub.

Nächste Schritte