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

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

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

---

לחצו על תראו לי איך כדי לקרוא הסבר מפורט על המשימה ישירות במסוף Google Cloud :

תראו לי איך

---

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

נכנסים לחשבון Google Cloud . אנחנו ממליצים למשתמשים חדשים ב- Google Cloud ליצור חשבון כדי שיוכלו להעריך את הביצועים של המוצרים שלנו בתרחישים מהעולם האמיתי. לקוחות חדשים מקבלים בחינם גם קרדיט בשווי 300$ להרצה, לבדיקה ולפריסה של עומסי העבודה.
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.
Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.
Go to project selector
Verify that billing is enabled for your Google Cloud project.
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 email address for a Google Account.

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.

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.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

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 email address for a Google Account.

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. לוחצים על הפעלת Identity Platform.

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

1. עוברים לדף ספקי זהויות.

   כניסה לדף 'ספקי זהויות'

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

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

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

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

יצירת משתמש

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

   עוברים אל 'משתמשים'

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

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

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

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

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

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

הערה: מומלץ מאוד להשתמש ב-SDK בגרסה 9, במיוחד באפליקציות שנמצאות בשלב הייצור. אם אתם צריכים תמיכה באפשרויות אחרות לניהול SDK, כמו window.firebase, תוכלו לעיין במאמרים שדרוג מגרסה 8 ל-Web SDK מודולרי או דרכים חלופיות להוספת Firebase.

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

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

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

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

     חשוב: אם ההגבלות על האפליקציה בפרויקט Firebase מוגדרות ל-None או ל-Websites, מומלץ להימנע משימוש בכמה מפתחות API. שימוש בכמה מפתחות עם ההגבלות הספציפיות האלה עלול לגרום לאי-בהירות באופן שבו Firebase בוחר מפתח, ועלול לגרום להתנהגות בלתי צפויה או לשבש את תהליכי העבודה שגלויים למשתמשים.

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

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

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

   אם אתם משתמשים ב-ESM ורוצים להשתמש במודולים של הדפדפן, צריך להחליף את כל השורות import בדפוס הבא:
   import { } from 'https://www.gstatic.com/firebasejs/13.0.0/firebase-SERVICE.js',
   כאשר SERVICE הוא שם של SDK כמו firebase-firestore.

   השימוש במודולים של הדפדפן הוא דרך מהירה להתחיל, אבל אנחנו ממליצים להשתמש בחבילת מודולים לייצור.

גישה ל-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: מזהה הפרויקט ב-Firebase.apiKey
• ‫AUTH_DOMAIN: מזהה הפרויקט ב-Firebase.authDomain
• ‫EMAIL_ID: כתובת האימייל של המשתמש שיצרתם קודם במדריך הזה.
• ‫PASSWORD: הסיסמה של המשתמש שיצרתם קודם במדריך הזה.

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

הערה: אפשר לדלג על השלב הזה אם משתמשים בכלי CLI של JavaScript framework כמו Angular CLI,‏ Next.js,‏ Vue CLI או Create React App. מידע נוסף זמין במדריך שלנו בנושא חבילות מודולים.

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

לדוגמה, אפשר להשתמש ב-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>
   

אתחול של Identity Platform client SDK עם מפתח ה-API

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

   כניסה לדף 'ספקי זהויות'

2. לוחצים על פרטי הגדרת האפליקציה.

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() ואז מעבד את התוצאה באמצעות הקריאה החוזרת onAuthStateChanged().

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

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

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

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

מידע נוסף על מגבלות אחרות ב-Identity Platform זמין במאמר מכסות ומגבלות.

הסרת המשאבים

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

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

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

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

   כניסה לדף 'ספקי זהויות'

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

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

   עוברים אל 'משתמשים'

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

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

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

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

זהירות: כשמוחקים פרויקט:

• התוכן של הפרויקט נמחק כולו. אם השתמשתם בפרויקט קיים כדי לתרגל את המשימות במדריך הזה, כשתמחקו אותו תימחק גם כל העבודה שביצעתם באותו פרויקט.
• מאבדים את מזהה הפרויקט בהתאמה אישית. כשיצרתם את הפרויקט, יכולתם לבחור לו מזהה פרויקט בהתאמה אישית כדי להשתמש בו בעתיד. כדי לשמור על כתובות ה-URL שמשתמשות במזהה הפרויקט, כמו appspot.com, צריך למחוק את המשאבים שנבחרו בפרויקט אבל לא את הפרויקט כולו.

אם אתם מתכננים להיעזר בכמה ארכיטקטורות, מדריכים או מדריכים למתחילים, מומלץ להשתמש שוב באותו פרויקט כדי לא לחרוג ממכסות הפרויקטים.

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

   כניסה לדף Manage resources

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

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

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

מידע נוסף על:

• כניסה של משתמשים באמצעות JavaScript, Android, iOS, C++‎ או Unity.

• כניסה של משתמשים באמצעות OIDC או SAML.

• העברת משתמשים מהאפליקציה הקיימת ל-Identity Platform.