הגדרה

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

  1. לקבל מזהה לקוח OAuth 2.0,
  2. הגדרת המיתוג וההגדרות של OAuth,
  3. טוענים את ספריית הלקוח של Google Identity Services,
  4. אפשר להגדיר Content Security Policy וגם
  5. עדכון של מדיניות פותחן מרובת מקורות

איך מקבלים את מזהה הלקוח ב-Google API

כדי להפעיל את שירותי הזהויות של Google באתר שלכם, קודם צריך להגדיר מזהה לקוח של Google API. כדי לעשות זאת, מבצעים את השלבים הבאים:

  1. פותחים את של .
  2. יוצרים או בוחרים פרויקט. אם כבר יש לכם פרויקט עבור הלחצן 'כניסה באמצעות חשבון Google' או Google One Tap, אתם יכולים להשתמש בפרויקט הקיים ובמזהה הלקוח באינטרנט. כשיוצרים אפליקציות בסביבת ייצור, יכול להיות שיהיה צורך במספר פרויקטים. במקרה כזה, צריך לחזור על שאר השלבים שבקטע הזה לכל פרויקט שמנהלים.
  3. לוחצים על Create client (יצירת לקוח) ובקטע Application type (סוג האפליקציה) בוחרים באפשרות Web application (אפליקציית אינטרנט) כדי ליצור מזהה לקוח חדש. כדי להשתמש ב-Client-ID קיים, בוחרים אחד מהסוג Web application.

  4. מוסיפים את ה-URI של האתר למקורות מורשים של JavaScript. ה-URI כולל רק את הסכמה ואת שם המארח שמוגדר במלואו. לדוגמה, https://www.example.com.

  5. אופציונלית, אפשר להחזיר את פרטי הכניסה באמצעות הפניה אוטומטית לנקודת קצה (endpoint) שמתארחת אצלכם, במקום באמצעות קריאה חוזרת (callback) של JavaScript. במקרה כזה, מוסיפים את כתובות ה-URI של ההפניה האוטומטית אל כתובות ה-URI המורשות של ההפניה האוטומטית. מזהי URI של הפניה כוללים את הסכימה, שם המארח המלא והנתיב, והם חייבים לעמוד בכללי האימות של מזהי URI של הפניה. לדוגמה: https://www.example.com/auth-receiver.

צריך לכלול את מזהה הלקוח באפליקציית האינטרנט באמצעות השדות data-client_id או client_id.

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

  1. פותחים את הקטע של פלטפורמת האימות של Google ב.
  2. אם מתבקשים, בוחרים את הפרויקט שיצרתם.

  3. ב, ממלאים את הטופס ולוחצים על הלחצן 'שמירה'.

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

    2. לוגו האפליקציה: התמונה הזו מוצגת במסך ההסכמה כדי לעזור למשתמשים לזהות את האפליקציה. הלוגו מוצג במסך ההסכמה של 'כניסה באמצעות חשבון Google' ובהגדרות החשבון, אבל לא מוצג בתיבת הדו-שיח של 'הקשה אחת'.

    3. כתובת אימייל לתמיכה: מוצגת במסך ההסכמה לתמיכה במשתמשים ולאדמינים של Google Workspace שמעריכים את הגישה לאפליקציה שלכם עבור המשתמשים שלהם. כתובת האימייל הזו מוצגת למשתמשים במסך ההסכמה של 'כניסה באמצעות חשבון Google' כשהמשתמש לוחץ על שם האפליקציה.

    4. דומיינים מורשים: כדי להגן עליכם ועל המשתמשים שלכם, Google מאפשרת רק לאפליקציות שעוברות אימות באמצעות OAuth להשתמש בדומיינים מורשים. הקישורים לאפליקציות שלכם צריכים להתארח בדומיינים מורשים. מידע נוסף

    5. קישור לדף הבית של האפליקציה: מוצג במסך ההסכמה של 'כניסה באמצעות חשבון Google' ובמידע על כתב ויתור בהתאם לתקנות GDPR בלחיצה אחת, מתחת ללחצן 'המשך בתור'. הן חייבות להתארח בדומיין מורשה.

    6. קישור למדיניות הפרטיות של האפליקציה: מוצג במסך ההסכמה של 'כניסה באמצעות חשבון Google' ובמידע על כתב ויתור בהתאם לתקנות GDPR בלחיצה אחת, מתחת ללחצן 'המשך בתור'. הן חייבות להתארח בדומיין מורשה.

    7. קישור לתנאים ולהגבלות של האפליקציה (אופציונלי): הקישור מוצג במסך ההסכמה של 'כניסה באמצעות חשבון Google' ובמידע על כתב הויתור בהתאם לתקנות GDPR בלחיצה אחת, מתחת ללחצן 'המשך בתור'. הן חייבות להתארח בדומיין מורשה.

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

    1. היקפי הרשאות ל-Google APIs: היקפי הרשאות מאפשרים לאפליקציה שלכם לגשת לנתונים הפרטיים של המשתמש. לצורך האימות, היקף ברירת המחדל (אימייל, פרופיל, openid) מספיק, ואין צורך להוסיף היקפים רגישים. בדרך כלל מומלץ לבקש הרשאות בהדרגה, בזמן שנדרשת גישה, ולא מראש.

  5. בודקים את 'סטטוס האימות'. אם האפליקציה שלכם צריכה אימות, לוחצים על הלחצן 'שליחה לאימות' כדי לשלוח את האפליקציה לאימות. פרטים נוספים זמינים במאמר בנושא דרישות האימות של OAuth.

הצגת הגדרות OAuth במהלך הכניסה

כניסה בהקשה אחת באמצעות FedCM

הגדרות ההסכמה של OAuth כפי שמוצגות על ידי Chrome One Tap באמצעות FedCM

הדומיין ברמה העליונה Authorized domain מוצג במהלך בקשת ההסכמה מהמשתמש ב-Chrome. שימוש בשיטת האימות בלחיצה אחת רק ב-iframe ממקורות שונים אבל באותו אתר הוא שיטה נתמכת.

לחיצה אחת בלי FedCM

הגדרות ההסכמה של OAuth כפי שהן מוצגות ב-One Tap

שם האפליקציה מוצג במהלך בקשת הסכמה מהמשתמש.

איור 1. הגדרות ההסכמה של OAuth שמוצגות על ידי One Tap ב-Chrome.

טעינה של ספריית הלקוח

חשוב לטעון את ספריית הלקוח של שירותי הזהויות של Google בכל דף שמשתמש עשוי להיכנס אליו. משתמשים בקטע הקוד הבא:

<script src="https://accounts.google.com/gsi/client" async></script>

כדי לשפר את מהירות הטעינה של הדפים, אפשר לטעון את הסקריפט באמצעות המאפיין async.

רשימה של השיטות והמאפיינים שהספרייה תומכת בהם מופיעה במאמרי העזר בנושא HTML ו-JavaScript API.

Content Security Policy

אף על פי ששימוש ב-Content Security Policy הוא אופציונלי, מומלץ להשתמש בו כדי לאבטח את האפליקציה ולמנוע מתקפות שמקורן בפרצת אבטחה XSS ‏ (cross-site scripting). מידע נוסף זמין במאמרים מבוא ל-CSP וCSP ו-XSS.

יכול להיות שמדיניות אבטחת התוכן שלכם כוללת הוראה אחת או יותר, כמו connect-src,‏ frame-src,‏ script-src,‏ style-src או default-src.

אם ספק ה-CSP שלכם כולל את:

  • ‫connect-src directive, add https://accounts.google.com/gsi/ to allow a page to load the parent URL for Google Identity Services server-side endpoints.
  • ‫frame-src directive, מוסיפים https://accounts.google.com/gsi/ כדי לאפשר את כתובת ה-URL של ההורה של ה-iframes של הכפתור 'כניסה באמצעות Google' ושל One Tap.
  • ‫script-src directive, add https://accounts.google.com/gsi/client to allow the URL of the Google Identity Services JavaScript library.
  • ‫style-src directive, add https://accounts.google.com/gsi/style to allow the URL of the Google Identity Services Stylesheets.
  • ההנחיה default-src, אם משתמשים בה, היא חלופה אם לא מציינים אף אחת מההנחיות הקודמות (connect-src,‏ frame-src,‏ script-src או style-src). מוסיפים את https://accounts.google.com/gsi/ כדי לאפשר לדף לטעון את כתובת ה-URL של ההורה עבור נקודות קצה בצד השרת של שירותי הזהויות של Google.

כשמשתמשים ב-connect-src, לא מומלץ לציין כתובות URL ספציפיות של GIS. כך אפשר למזער את הסיכוי לכשלים כשמעדכנים את מערכת ה-GIS. לדוגמה, במקום להוסיף את https://accounts.google.com/gsi/status משתמשים בכתובת ה-URL הראשית של GIS https://accounts.google.com/gsi/.

כותרת התגובה לדוגמה הזו מאפשרת לשירותי הזהויות של Google להיטען ולפעול בהצלחה:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

מדיניות פותחן מרובת מקורות

כדי ליצור חלונות קופצים בהצלחה, יכול להיות שיהיה צורך לבצע שינויים ב-Cross-Origin-Opener-Policy (COOP) שלכם עבור הכפתור 'כניסה באמצעות חשבון Google' והתכונה 'הקשה אחת לגישה ל-Google'.

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

עם זאת, כש-FedCM מושבת, צריך להגדיר את כותרת ה-COOP:

  • אל same-origin וגם
  • כולל same-origin-allow-popups.

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