שילוב רכיבי ממשק משתמש של Identity Platform באפליקציית האינטרנט

במדריך הזה מוסבר איך לשלב ממשק משתמש (UI) שסופק על ידי Identity Platform באפליקציית אינטרנט קיימת.

לפני שמתחילים

כדי להשלים את המדריך הזה, תצטרכו:

רכיבי ממשק משתמש בקוד פתוח ללקוחות אחרים

במאמר הזה נסביר איך לשלב רכיבי ממשק משתמש באפליקציית אינטרנט. במאמרים הבאים מוסבר איך לשלב רכיבי ממשק משתמש בסוגים אחרים של אפליקציות:

שילוב רכיבי ממשק המשתמש באפליקציה

  1. מוסיפים את סקריפט ממשק המשתמש ואת ה-CSS מ-CDN בתג <head> של הדף.


    <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. מפעילים לפחות שיטת כניסה אחת באמצעות מסוף Google Cloud . במדריך למתחילים מוסבר איך עושים את זה.

  3. בתג <head> של הדף, מגדירים איך המשתמשים יכולים להיכנס: 

    <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. באלמנט <body> של הדף, מוסיפים את הווידג'ט של ממשק המשתמש: 

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

    כשמציגים את הדף, ממשק המשתמש שסופק על ידי Identity Platform יופיע ויאפשר למשתמשים להיכנס לאפליקציה.

מידע נוסף על התאמות אישיות זמין במאמרי העזרה בנושא רכיבי ממשק משתמש ב-GitHub.

המאמרים הבאים