הגדרה

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

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

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

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

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

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

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

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

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

  1. פותחים את הדף Branding בקטע Google Auth Platform במסוף Cloud.
  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 שמוצגות על ידי לחיצה אחת ב-Chrome.

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

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

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

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

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

Content Security Policy

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

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

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

  • ‫connect-src directive, מוסיפים https://accounts.google.com/gsi/ כדי לאפשר לטעון דף עם כתובת ה-URL של ההורה לנקודות קצה בצד השרת של Google Identity Services.
  • ‫frame-src directive, add https://accounts.google.com/gsi/ to allow the parent URL of the לחיצה אחת and התחברות באמצעות חשבון Google button iframes.
  • ‫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 Identity Services לטעון ולבצע פעולות בהצלחה:

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.

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