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

   כניסה לדף Identity Providers

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

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

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

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

יצירת משתמש

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

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

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

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

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

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

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

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

הערה: מומלץ מאוד להשתמש בגרסה 9 של ה-SDK, במיוחד באפליקציות שמוכנות להפצה. אם אתם צריכים תמיכה באפשרויות אחרות לניהול 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: מזהה הפרויקט ב-Firebase.authDomain

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

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

   אם אתם משתמשים ב-ESM ורוצים להשתמש במודולים של דפדפן, צריך להחליף את כל השורות import בדפוס הבא:
   import { } from 'https://www.gstatic.com/firebasejs/12.15.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 ומייבאים את bundled 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 .

   כניסה לדף Identity Providers

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 .

   כניסה לדף Identity Providers

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.