כניסת משתמש באמצעות כתובת אימייל ב-Identity Platform

איך משתמשים ב-Identity Platform כדי לאפשר למשתמשים להיכנס באמצעות כתובת אימייל וסיסמה.

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

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

    Go to project selector

  2. Verify that billing is enabled for your Google Cloud project.

  3. 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 identifier for a user in a workforce identity pool. For details, see Represent workforce pool users in IAM policies, or contact your administrator.

    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.

הפעלת Identity Platform

  1. נכנסים לדף Identity Platform ב-Cloud Marketplace במסוף Google Cloud .

    כניסה ל-Identity Platform

  2. לוחצים על Enable Identity Platform.

הגדרת כניסה באמצעות אימייל

  1. נכנסים לדף Identity Providers.

    כניסה לדף Identity Providers

  2. בדף ספקי זהויות, לוחצים על הוספת ספק.

  3. ברשימה Select a provider, בוחרים באפשרות Email/Password.

  4. מעבירים את המתג מופעל למצב פעיל.

  5. כדי לשמור את הגדרות הספק, לוחצים על שמירה.

יצירת משתמש

  1. נכנסים לדף Users במסוף Google Cloud .

    לדף "משתמשים"

  2. לוחצים על הוספת משתמש.

  3. בשדה אימייל, מזינים כתובת אימייל וסיסמה. שימו לב לשני הערכים האלה, כי תצטרכו אותם בשלב מאוחר יותר.

  4. כדי להוסיף את המשתמש, לוחצים על הוספה. המשתמש החדש מופיע בדף Users.

המשתמש נכנס לחשבון

השלבים לכניסת המשתמש משתנים בהתאם לגרסת ה-SDK שבה האפליקציה משתמשת.

חשוב לוודא שאתם פועלים לפי השלבים המתאימים לאפליקציה שלכם.

SDK v9 (מודולרי)

מתקינים את ה-SDK ומפעילים את Firebase

גרסה 9 של Firebase JS SDK משתמשת בפורמט של מודול JavaScript.

תהליך העבודה הזה משתמש ב-npm ודורש כלי אריזה של מודולים או כלי JavaScript framework, כי ערכת ה-SDK בגרסה 9 מותאמת לעבודה עם כלי אריזה של מודולים כדי להסיר קוד שלא בשימוש (tree-shaking) ולהקטין את הגודל של ערכת ה-SDK.

כדי להשתמש ב-SDK בגרסה 9, מבצעים את השלבים הבאים:

  1. מתקינים את Firebase באמצעות npm מספריית הפרויקט:

    npm install firebase

  2. מפעילים את Firebase באפליקציה ויוצרים אובייקט של אפליקציית Firebase:

    import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "AUTH_DOMAIN"
};

const app = initializeApp(firebaseConfig);

    מחליפים את מה שכתוב בשדות הבאים:

    • ‫API_KEY: apiKey של הפרויקט ב-Firebase.

    • ‫AUTH_DOMAIN: authDomain של הפרויקט ב-Firebase.

    אפשר למצוא את הערכים האלה בהגדרות הפרויקט ב-Firebase של האפליקציה.

    אפליקציית Firebase היא אובייקט דמוי קונטיינר שמאחסן הגדרות נפוצות ומשתף אימות בין שירותי Firebase. אחרי שמאתחלים אובייקט של אפליקציית Firebase בקוד, אפשר להוסיף את שירותי Firebase ולהתחיל להשתמש בהם.

גישה ל-Identity Platform ב-JavaScript

אחרי שהפעלתם את Firebase SDK, אתם יכולים להשתמש בו בכל מקום באפליקציה. לדוגמה, זו אפליקציה שמנסה להיכנס לחשבון של משתמש שמוגדר בתוך הקוד ולהציג את התוצאה בדף אינטרנט.

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;
      });
}

מחליפים את מה שכתוב בשדות הבאים:

  • ‫API_KEY: apiKey של הפרויקט ב-Firebase.
  • ‫AUTH_DOMAIN: ה-authDomain של הפרויקט ב-Firebase.
  • ‫EMAIL_ID: כתובת האימייל של המשתמש שיצרתם קודם במדריך הזה.
  • ‫PASSWORD: סיסמת המשתמש שיצרתם קודם במדריך הזה.

שימוש בכלי לאריזת מודולים כדי להקטין את הגודל

‫Firebase Web SDK מיועד לעבוד עם כלי אריזה של מודולים כדי להסיר קוד שלא בשימוש (tree-shaking). אנחנו ממליצים מאוד להשתמש בגישה הזו באפליקציות בסביבת הייצור. כלים כמו Angular CLI,‏ Next.js,‏ Vue CLI או Create React App מטפלים באופן אוטומטי באריזת מודולים של ספריות שמותקנות דרך npm ומיובאות לבסיס הקוד שלכם.

לדוגמה, אפשר להשתמש ב-Webpack כדי ליצור תיקיית dist שמכילה את האפליקציה המקובצת ואת קוד התלות. מידע נוסף זמין במאמר שימוש במאגדי מודולים עם Firebase.

ייבוא של קוד ה-JavaScript לדף

  1. יוצרים קובץ חדש בשם index.html.

  2. מוסיפים שני קונטיינרים בסיסיים של HTML ומייבאים את קובץ ה-JS המקובץ.

    <script defer src="js/bundled.js"></script>
<div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

  3. מפעילים את index.html בדפדפן האינטרנט. מופיעה הודעת פתיחה עם כתובת האימייל של המשתמש.

‫SDK v8 (מהדור הקודם)

יצירת דף אינטרנט

  1. במחשב המקומי, יוצרים קובץ חדש בשם index.html.

  2. בקובץ ה-HTML, מוסיפים שני מאגרי HTML:

    <div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

מאתחלים את ה-SDK של לקוח Identity Platform באמצעות מפתח ה-API

  1. נכנסים לדף Identity Providers במסוף Google Cloud .

    כניסה לדף Identity Providers

  2. לוחצים על Application setup details.

  3. מעתיקים את קוד האיניציאליזציה אל index.html.

המשתמש נכנס לחשבון

  1. כדי להכניס את המשתמש, מעתיקים את הקוד הבא אל 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>

    הקוד הזה קורא ל-signInWithEmailAndPassword() ואז מעבד את התוצאה באמצעות פונקציית הקריאה החוזרת (callback) onAuthStateChanged().

    מחליפים את מה שכתוב בשדות הבאים:

    • ‫EMAIL_ID: כתובת האימייל של המשתמש שיצרתם קודם
    • ‫PASSWORD: הסיסמה של המשתמש שיצרתם קודם

  2. פותחים את index.html בדפדפן האינטרנט. מופיעה הודעת פתיחה עם כתובת האימייל של המשתמש.

יש מגבלה על מספר הניסיונות הכושלים של משתמשים להיכנס לחשבון. אם המשתמש מנסה להיכנס לחשבון כמה פעמים ברצף ולא מצליח, החשבון ננעל באופן זמני.

למידע נוסף על מגבלות אחרות של Identity Platform, ראו מכסות ומגבלות.

הסרת המשאבים

כדי לא לצבור חיובים בחשבון Google Cloud על המשאבים שבהם השתמשתם בדף הזה, מבצעים את הפעולות הבאות.

מחיקת הספק והמשתמש

אם השתמשתם בפרויקט קיים ב- Google Cloud , כדי להימנע מחיובים בחשבון, מחקו את הספק והמשתמש שיצרתם:

  1. נכנסים לדף Identity Providers במסוף Google Cloud .

    כניסה לדף Identity Providers

  2. כדי למחוק את הספק, לוחצים על Delete לצד שם הספק. כדי לאשר, לוחצים על מחיקה.

  3. נכנסים לדף Users במסוף Google Cloud .

    לדף "משתמשים"

  4. כדי למחוק את המשתמש שיצרתם, לוחצים על Delete ליד שם המשתמש. כדי לאשר, לוחצים על מחיקה.

מחיקת הפרויקט

הדרך הקלה ביותר לבטל את החיוב היא למחוק את הפרויקט שיצרתם בשביל המדריך הזה.

כדי למחוק את הפרויקט:

  1. במסוף Google Cloud , נכנסים לדף Manage resources.

    כניסה לדף Manage resources

  2. ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על Delete.
  3. כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.

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

באפליקציה אמיתית, המשתמשים נרשמים באמצעות דף הרשמה ייעודי, ואז נכנסים באמצעות כתובת האימייל והסיסמה שלהם. ב-Identity Platform יש ממשק משתמש מובנה לאימות שאפשר להשתמש בו בדפים האלה, או ליצור ממשק משתמש משלכם. יכול להיות שתרצו לתמוך גם בשיטות כניסה נוספות, כמו ספקי רשתות חברתיות (למשל פייסבוק או Google), מספרי טלפון, OIDC או SAML.

מידע נוסף על: