הפניית API של כניסה באמצעות Google HTML

בדף העזר הזה מתואר ה-API של מאפייני הנתונים 'כניסה באמצעות חשבון Google' בפורמט HTML. תוכלו להשתמש ב-API כדי להציג בדפי האינטרנט את הבקשה ל-One Tap או את הלחצן 'כניסה באמצעות חשבון Google'.

רכיב עם המזהה 'g_id_onload'

תוכלו להוסיף את מאפייני הנתונים של 'כניסה באמצעות חשבון Google' לכל רכיב גלוי או בלתי נראה, כמו <div> ו-<span>. הדרישה היחידה היא שמזהה הרכיב יהיה מוגדר ל-g_id_onload. אל תכללו את המזהה הזה בכמה רכיבים.

מאפייני נתונים

בטבלה הבאה מפורטים מאפייני הנתונים יחד עם התיאורים שלהם:

מאפיין
data-client_id מזהה הלקוח של האפליקציה
data-auto_prompt הצגת הקשה על Google One.
data-auto_select מפעילה בחירה אוטומטית ב-Google One Tap.
data-login_uri כתובת ה-URL של נקודת הקצה להתחברות
data-callback שם הפונקציה של הגורם המטפל באסימון מזהה JavaScript
data-native_login_uri כתובת ה-URL של נקודת הקצה של הגורם המטפל בפרטי הכניסה לסיסמה
data-native_callback שם הפונקציה של ה-handler של פרטי הכניסה לסיסמה של JavaScript
data-native_id_param שם הפרמטר לערך credential.id
data-native_password_param שם הפרמטר לערך credential.password
data-cancel_on_tap_outside המדיניות קובעת אם לבטל את הבקשה אם המשתמש לוחץ מחוץ להנחיה.
data-prompt_parent_id מזהה ה-DOM של רכיב מאגר ההנחיות של One Tap
data-skip_prompt_cookie המערכת מדלגת על הקשה אחת אם לקובץ ה-cookie שצוין יש ערך שאינו ריק.
data-nonce מחרוזת אקראית לאסימונים מזהים
data-context הכותרת והמילים בהודעה 'הקשה אחת'
data-moment_callback שם הפונקציה של ממשק המשתמש להתראות לגבי סטטוס הבקשה
data-state_cookie_domain כדי להפעיל את One Tap בדומיין הראשי ובתת-הדומיינים שלו, צריך להעביר את הדומיין ההורה למאפיין הזה כדי שהמערכת תשתמש בקובץ cookie משותף אחד.
data-ux_mode תהליך חוויית המשתמש בלחצן 'כניסה באמצעות חשבון Google'
data-allowed_parent_origin המקורות שמורשים להטמיע את iframe הביניים. הקשה אחת פועלת במצב ביניים של iframe, אם המאפיין הזה קיים.
data-intermediate_iframe_close_callback ביטול התנהגות ברירת המחדל של iframe ברמת ביניים כשמשתמשים סוגרים ידנית את הקשה אחת.
data-itp_support מפעיל חוויית משתמש משודרגת בהקשה אחת בדפדפני ITP.
data-login_hint ניתן לספק רמז למשתמש כדי לדלג על בחירת החשבון.
data-hd הגבילו את בחירת החשבונות לפי דומיין.
data-use_fedcm_for_prompt ההגדרה הזו מאפשרת לדפדפן לשלוט בבקשות הכניסה של משתמשים ולתווך את תהליך הכניסה בין האתר שלך לבין Google.

סוגי מאפיינים

הקטעים הבאים כוללים פרטים על הסוג של כל מאפיין ודוגמה.

data-client_id

המאפיין הזה הוא מזהה הלקוח של האפליקציה, שנמצא ונוצר במסוף Google Cloud. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת כן data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

המאפיין הזה קובע אם להציג 'הקשה אחת' או לא. ערך ברירת המחדל הוא true. הקשה על Google One לא מוצגת כשהערך הזה הוא false. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
boolean אופציונלי data-auto_prompt="true"

בחירת נתונים אוטומטית

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

סוג חובה דוגמה
boolean אופציונלי data-auto_select="true"

data-login_uri

המאפיין הזה הוא ה-URI של נקודת הקצה להתחברות.

הערך צריך להתאים במדויק לאחד ממזהי ה-URI המורשים להפניה אוטומטית בלקוח OAuth 2.0, שהגדרתם במסוף API, והוא צריך לעמוד בכללי האימות של URI של הפניה אוטומטית.

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

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

מידע נוסף זמין בטבלה הבאה:

סוג אופציונלי דוגמה
כתובת URL ברירת המחדל היא ה-URI של הדף הנוכחי, או הערך שציינתם.
המערכת מתעלמת מהמדיניות כאשר data-ux_mode="popup" ו-data-callback מוגדרים.		 data-login_uri="https://www.example.com/login"

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

דוגמה לבקשה לנקודת הקצה להתחברות:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

קריאה חוזרת (callback) על נתונים

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

סוג חובה דוגמה
מחרוזת חובה אם data-login_uri לא מוגדר. data-callback="handleToken"

ניתן להשתמש באחד מהמאפיינים data-login_uri ו-data-callback. משך השימוש תלוי בהגדרות הבאות של הרכיב ושל מצב ה-UX:

  • המאפיין data-login_uri נדרש ללחצן הכניסה באמצעות חשבון Google redirect למצב חוויית המשתמש, שמתעלם מהמאפיין data-callback.

  • צריך להגדיר אחד משני המאפיינים האלה ל-Google One Tap ולמצב 'חוויית משתמש' popup בלחצן הכניסה באמצעות חשבון Google. אם שניהם מוגדרים, למאפיין data-callback יש עדיפות גבוהה יותר.

פונקציות JavaScript בתוך מרחב שמות לא נתמכות על ידי ממשק ה-API של HTML. במקום זאת, צריך להשתמש בפונקציה JavaScript גלובלית ללא מרחב שמות. לדוגמה, צריך להשתמש ב-mylibCallback במקום ב-mylib.callback.

data-native_login_uri

המאפיין הזה הוא כתובת ה-URL של נקודת הקצה של הגורם המטפל בפרטי הכניסה לסיסמה. אם תגדירו את המאפיין data-native_login_uri או את המאפיין data-native_callback, ספריית ה-JavaScript תחזור למנהל פרטי הכניסה המקורי כאשר אין סשן של Google. אי אפשר להגדיר גם את המאפיין data-native_callback וגם את המאפיין data-native_login_uri. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-login_uri="https://www.example.com/password_login"

data-native_callback

המאפיין הזה הוא השם של פונקציית ה-JavaScript שמטפלת בפרטי הכניסה לסיסמה שמוחזרים ממנהל פרטי הכניסה המקורי של הדפדפן. אם תגדירו את המאפיין data-native_login_uri או את המאפיין data-native_callback, ספריית JavaScript תחזור למנהל פרטי הכניסה המקורי כאשר אין סשן של Google. לא ניתן להגדיר גם את data-native_callback וגם את data-native_login_uri. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-native_callback="handlePasswordCredential"

פונקציות JavaScript בתוך מרחב שמות לא נתמכות על ידי ממשק ה-API של HTML. במקום זאת, צריך להשתמש בפונקציה JavaScript גלובלית ללא מרחב שמות. לדוגמה, צריך להשתמש ב-mylibCallback במקום ב-mylib.callback.

data-native_id_param

כששולחים את פרטי הכניסה לסיסמה לנקודת הקצה של ה-handler של פרטי הכניסה לסיסמה, אפשר לציין את שם הפרמטר בשדה credential.id. שם ברירת המחדל הוא email. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
כתובת URL אופציונלי data-native_id_param="user_id"

data-native_password_param

כששולחים את פרטי הכניסה לסיסמה לנקודת הקצה של ה-handler של פרטי הכניסה, אפשר לציין את שם הפרמטר עבור הערך credential.password. שם ברירת המחדל הוא password. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
כתובת URL אופציונלי data-native_password_param="pwd"

data-cancel_on_tap_outside

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

סוג חובה דוגמה
boolean אופציונלי data-cancel_on_tap_outside="false"

data-prompt_parent_id

המאפיין הזה מגדיר את מזהה ה-DOM של רכיב מאגר התגים. אם היא לא מוגדרת, ההנחיה One Tap מוצגת בפינה השמאלית העליונה של החלון. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-prompt_parent_id="parent_id"

המאפיין הזה מדלג על הקשה אחת אם לקובץ ה-cookie שצוין יש ערך שאינו ריק. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-skip_prompt_cookie="SID"

זריקת data-nonce

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

סוג חובה דוגמה
מחרוזת אופציונלי data-nonce="biaqbm70g23"

אורך ה-Nonce מוגבל לגודל ה-JWT המקסימלי שנתמך בסביבה שלכם ולמגבלות הגודל של ה-HTTP של הדפדפן והשרת.

הקשר לנתונים

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

סוג חובה דוגמה
מחרוזת אופציונלי data-context="use"

בטבלה הבאה מפורטים כל ההקשרים הזמינים והתיאורים שלהם:

הקשר
signin 'כניסה באמצעות חשבון Google'
signup "הרשמה באמצעות Google"
use "שימוש עם Google"

data-moment_callback

המאפיין הזה הוא שם הפונקציה של ה-listener של סטטוס ההתראות בממשק המשתמש. למידע נוסף, ראו סוג הנתונים PromptMomentNotification.

מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-moment_callback="logMomentNotification"

פונקציות JavaScript בתוך מרחב שמות לא נתמכות על ידי ממשק ה-API של HTML. במקום זאת, צריך להשתמש בפונקציה JavaScript גלובלית ללא מרחב שמות. לדוגמה, צריך להשתמש ב-mylibCallback במקום ב-mylib.callback.

אם אתם צריכים להציג את One Tap בדומיין הורה ובתת-דומיינים שלו, עליכם להעביר את הדומיין ההורה למאפיין הזה כדי להשתמש בקובץ cookie אחד של מצב משותף. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-state_cookie_domain="example.com"

data-ux_mode

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

סוג חובה דוגמה
מחרוזת אופציונלי data-ux_mode="redirect"

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

מצב UX
popup מבצע תהליך חוויית משתמש של כניסה בחלון קופץ.
redirect מבצע זרימת חוויית משתמש של כניסה על ידי הפניה מחדש של דף מלא.

data-allowed_parent_origin

המקורות שמורשים להטמיע את iframe הביניים. One Tap פועל במצב ביניים של iframe, אם המאפיין הזה קיים. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזות או מערך מחרוזות אופציונלי data-allowed_parent_origin="https://example.com"

בטבלה הבאה מפורטים סוגי הערכים הנתמכים והתיאורים שלהם.

סוגי ערכים
string ה-URI של דומיין אחד. https://example.com
string array רשימה של מזהי URI של דומיינים מופרדים בפסיקים. "https://news.example.com,https://local.example.com"

אם הערך של המאפיין data-allowed_parent_origin לא תקין, האתחול בהקשה אחת של מצב ה-iframe ברמת הביניים ייכשל ותיפסק.

יש תמיכה גם בקידומות של תווים כלליים לחיפוש. לדוגמה, "https://*.example.com" תואם ל-example.com ולתתי-הדומיינים שלו בכל הרמות (למשל news.example.com, login.news.example.com). דברים שחשוב לזכור כשמשתמשים בתווים כלליים:

  • מחרוזות תבנית לא יכולות להיות מורכבות רק מתו כללי לחיפוש ומדומיין ברמה עליונה. לדוגמה, https://*.com ו-https://*.co.uk לא חוקיים; כפי שצוין למעלה, "https://*.example.com" תואם ל-example.com ולתתי-הדומיינים שלו. אפשר גם להשתמש ברשימה שמופרדת בפסיקים כדי לייצג 2 דומיינים שונים. לדוגמה, "https://example1.com,https://*.example2.com" תואם לדומיינים example1.com, example2.com ותת-הדומיינים של example2.com
  • דומיינים עם תווים כלליים לחיפוש חייבים להתחיל בסכמת https:// מאובטחת, כך "*.example.com" נחשב לא חוקי.

data-intermediate_iframe_close_callback

ביטול התנהגות ברירת המחדל של iframe מתווכת כשמשתמשים סוגרים ידנית את One Tap על ידי הקשה על הלחצן 'X' בממשק המשתמש של הקשה אחת. ברירת המחדל היא להסיר מיד את ה-iframe הביניים מה-DOM.

השדה data-intermediate_iframe_close_callback פועל רק במצב iframe ביניים. והיא משפיעה רק על ה-iframe ברמת הביניים, במקום על ה-iframe One Tap. ממשק המשתמש בהקשה אחת מוסר לפני שמפעילים את הקריאה החוזרת.

סוג חובה דוגמה
פונקציה אופציונלי data-intermediate_iframe_close_callback="logBeforeClose"

פונקציות JavaScript בתוך מרחב שמות לא נתמכות על ידי ממשק ה-API של HTML. במקום זאת, צריך להשתמש בפונקציה JavaScript גלובלית ללא מרחב שמות. לדוגמה, צריך להשתמש ב-mylibCallback במקום ב-mylib.callback.

data-itp_support

השדה הזה קובע אם צריך להפעיל את חוויית המשתמש המשודרגת ב-One Tap בדפדפנים שתומכים במניעת מעקב חכמה (ITP). ערך ברירת המחדל הוא false. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
boolean אופציונלי data-itp_support="true"

data-login_hint

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

למידע נוסף, עיין במסמכי התיעוד של OpenID Connect עבור login_hint.

סוג חובה דוגמה
מחרוזת. זה יכול להיות כתובת אימייל או ערך השדה sub מאסימון מזהה. אופציונלי data-login_hint="elisa.beckett@gmail.com"

hd נתונים

אם למשתמש יש כמה חשבונות והוא צריך להיכנס רק באמצעות חשבון Workspace שלו, הוא יכול לשמש כדי לספק ל-Google רמז לשם דומיין. כשהפעולה תושלם, חשבונות המשתמשים שיוצגו במהלך בחירת החשבון יוגבלו לדומיין שצוין. ערך של תו כללי לחיפוש: * כולל רק חשבונות Workspace למשתמש, ולא כולל חשבונות של צרכנים (user@gmail.com) במהלך בחירת החשבון.

למידע נוסף, עיין במסמכי התיעוד של OpenID Connect עבור hd.

סוג חובה דוגמה
מחרוזת. שם דומיין שמוגדר במלואו או *. אופציונלי data-hd="*"

data-use_fedcm_for_prompt

מאפשרת לדפדפן לשלוט בבקשות הכניסה של משתמשים ולתווך את תהליך הכניסה בין האתר שלכם ל-Google. ברירת המחדל היא FALSE. למידע נוסף, ראו העברה ל-FedCM.

סוג חובה דוגמה
boolean אופציונלי data-use_fedcm_for_prompt="true"

רכיב עם המחלקה "g_id_signin"

אם מוסיפים את g_id_signin למאפיין class של הרכיב, האלמנט מעובד כלחצן כניסה באמצעות חשבון Google.

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

מאפיינים של נתונים חזותיים

בטבלה הבאה מפורטים המאפיינים של הנתונים החזותיים והתיאורים שלהם:

מאפיין
data-type סוג הלחצן: סמל או לחצן רגיל.
data-theme עיצוב הלחצן. לדוגמה, filled_blue או filled_black.
data-size גודל הלחצן. לדוגמה, קטן או גדול.
data-text הטקסט של הלחצן. לדוגמה, "כניסה באמצעות חשבון Google" או "הרשמה באמצעות Google".
data-shape צורת הלחצן. לדוגמה: מלבן או מעגלי.
data-logo_alignment יישור הלוגו של Google: לשמאל או למרכז.
data-width רוחב הלחצן, בפיקסלים.
data-locale טקסט הלחצן מעובד בשפה שהוגדרה במאפיין הזה.
data-click_listener אם היא מוגדרת, הפונקציה הזו מפעילה את הפונקציה אחרי לחיצה על הלחצן 'כניסה באמצעות חשבון Google'.
data-state אם היא מוגדרת, המחרוזת הזו תוחזר עם האסימון המזהה.

סוגי מאפיינים

הקטעים הבאים כוללים פרטים על הסוג של כל מאפיין ודוגמה.

סוג נתונים

סוג הלחצן. ערך ברירת המחדל הוא standard. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת כן data-type="icon"

בטבלה הבאה מפורטים כל סוגי הלחצנים הזמינים והתיאורים שלהם:

סוג
standard
לחצן עם טקסט או מידע מותאם אישית.
icon
לחצן סמל ללא טקסט.

נושא נתונים

עיצוב הלחצן. ערך ברירת המחדל הוא outline. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-theme="filled_blue"

בטבלה הבאה מפורטים הנושאים הזמינים והתיאורים שלהם:

עיצוב
outline
לחצן רגיל עם רקע לבן לחצן סמל עם רקע לבן לחצן מותאם אישית עם רקע לבן
עיצוב הלחצנים הרגיל.
filled_blue
לחצן רגיל עם רקע כחול לחצן סמל עם רקע כחול לחצן מותאם אישית עם רקע כחול
עיצוב הלחצנים בכחול.
filled_black
לחצן רגיל עם רקע שחור לחצן של סמל עם רקע שחור לחצן בהתאמה אישית עם רקע שחור
עיצוב הלחצנים בשחור.

data-size

גודל הלחצן. ערך ברירת המחדל הוא large. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-size="small"

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

גודל
large
לחצן רגיל גדול לחצן סמל גדול לחצן גדול ומותאם אישית
לחצן גדול.
medium
לחצן בינוני רגיל לחצן סמל בינוני
לחצן בינוני.
small
לחצן קטן לחצן סמל קטן
לחצן קטן.

טקסט של נתונים

הטקסט של הלחצן. ערך ברירת המחדל הוא signin_with. אין הבדלים חזותיים לטקסט של לחצני הסמלים שיש להם מאפייני data-text שונים. יוצא הדופן היחיד הוא כשהטקסט נקרא כדי לאפשר נגישות למסך.

מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-text="signup_with"

הטבלה הבאה מציגה את הטקסטים הזמינים של הלחצנים והתיאורים שלהם:

טקסט
signin_with
לחצן רגיל עם התווית &#39;כניסה באמצעות חשבון Google&#39; לחצן סמל ללא טקסט גלוי
הטקסט של הלחצן הוא 'כניסה באמצעות חשבון Google'.
signup_with
לחצן רגיל עם התווית &#39;הרשמה באמצעות Google&#39; לחצן סמל ללא טקסט גלוי
הטקסט של הלחצן הוא 'הרשמה באמצעות Google'.
continue_with
לחצן רגיל עם התווית &#39;המשך עם Google&#39; לחצן סמל ללא טקסט גלוי
הטקסט של הלחצן הוא 'המשך עם Google'.
signin
לחצן רגיל שכותרתו &#39;כניסה&#39; לחצן סמל ללא טקסט גלוי
הטקסט ללחצן הוא 'כניסה'.

צורת נתונים

צורת הלחצן. ערך ברירת המחדל הוא rectangular. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-shape="rectangular"

הטבלה הבאה מפרטת את צורות הלחצנים הזמינות והתיאורים שלהן:

צורה
rectangular
לחצן מלבני רגיל לחצן של סמל מלבני לחצן מלבני בהתאמה אישית
הלחצן המלבני. אם הלחצן משמש עבור סוג הלחצן icon, הוא זהה לערך הלחצן square.
pill
לחצן רגיל בצורת גלולה לחצן סמל בצורת גלולה לחצן בצורת גלולה בהתאמה אישית
הלחצן בצורת גלולה. אם הלחצן משמש עבור סוג הלחצן icon, הוא זהה לערך הלחצן circle.
circle
לחצן עגול רגיל לחצן סמל עגול לחצן עגול בהתאמה אישית
לחצן בצורת עיגול. אם הלחצן משמש עבור סוג הלחצן standard, הוא זהה לערך הלחצן pill.
square
לחצן מרובע רגיל לחצן של סמל מרובע לחצן מרובע בהתאמה אישית
לחצן בצורת ריבוע. אם הלחצן משמש עבור סוג הלחצן standard, הוא זהה לערך הלחצן rectangular.

לוגו_יישור נתונים

יישור הלוגו של Google. ערך ברירת המחדל הוא left. המאפיין הזה רלוונטי רק ללחצן standard. מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-logo_alignment="center"

הטבלה הבאה מפרטת את היישורים הזמינים ואת התיאורים שלהם:

logo_alignment
left
לחצן סטנדרטי עם הלוגו של G משמאל
יישור הסמל של Google לשמאל.
center
לחצן סטנדרטי עם הלוגו של G במרכז
יישור הלוגו של Google למרכז.

רוחב הנתונים

רוחב הלחצן המינימלי, בפיקסלים. הרוחב המקסימלי הזמין הוא 400 פיקסלים.

מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-width=400

לוקאל נתונים

זה שינוי אופציונלי. להציג טקסט של הלחצן לפי הלוקאל שצוין, אחרת ברירת המחדל היא לפי הגדרות הדפדפן או חשבון Google של המשתמש. מוסיפים את הפרמטר hl ואת קוד השפה להוראה של src כשטוענים את הספרייה, לדוגמה: gsi/client?hl=<iso-639-code>.

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

מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-locale="zh_CN"

data-click_listener

אפשר להגדיר קריאה לפונקציה של JavaScript כשמשתמש לוחץ על הלחצן 'כניסה באמצעות חשבון Google' באמצעות המאפיין data-click_listener.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

בדוגמה הזו, ההודעה Sign in with Google button clicks... (כניסה באמצעות לחצן הכניסה באמצעות חשבון Google) תתועד במסוף כשלוחצים על הלחצן 'כניסה באמצעות חשבון Google'.

data-state

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

מידע נוסף זמין בטבלה הבאה:

סוג חובה דוגמה
מחרוזת אופציונלי data-state="button 1"

שילוב בצד השרת

נקודות הקצה בצד השרת חייבות לטפל בבקשות HTTP POST הבאות.

נקודת הקצה של הגורם המטפל באסימון מזהה

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

בקשת POST HTTP כוללת את הפרטים הבאים:

פורמט שם תיאור
קובץ Cookie g_csrf_token מחרוזת אקראית שמשתנה עם כל בקשה לנקודת הקצה של ה-handler.
פרמטר של בקשה g_csrf_token מחרוזת שזהה לערך הקודם של קובץ ה-cookie, g_csrf_token.
פרמטר של בקשה credential האסימון המזהה ש-Google מנפיקה.
פרמטר של בקשה select_by איך פרטי הכניסה נבחרים.
פרמטר של בקשה state הפרמטר הזה מוגדר רק כשמשתמש לוחץ על לחצן של 'כניסה באמצעות חשבון Google' כדי להיכנס, והמאפיין state של הלחצן מצוין.

פרטי כניסה לחשבון

אחרי הפענוח, האסימון המזהה נראה כמו בדוגמה הבאה:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

השדה sub הוא מזהה ייחודי גלובלי של חשבון Google. יש להשתמש בשדה sub כמזהה של המשתמש בלבד, מכיוון שהוא ייחודי בכל חשבונות Google ולא נעשה בו שימוש חוזר. לא להשתמש בכתובת אימייל כמזהה, כי לחשבון Google יכולות להיות כמה כתובות אימייל בנקודות זמן שונות.

בעזרת השדות email, email_verified ו-hd אפשר לקבוע אם Google מארחת כתובת אימייל ואם היא מהימנה. במקרים שבהם ל-Google יש סמכות, נקבע שהמשתמש הוא הבעלים הלגיטימי של החשבון.

מקרים שבהם Google היא גורם מוסמך:

  • לשירות email יש סיומת @gmail.com. זהו חשבון Gmail.
  • email_verified הוא TRUE ו-hd מוגדר, זהו חשבון Google Workspace.

משתמשים יכולים להירשם לחשבונות Google בלי להשתמש ב-Gmail או ב-Google Workspace. אם הסיומת email לא מכילה את הסיומת @gmail.com, והמאפיין hd חסר, Google לא מורשית. מומלץ להשתמש בסיסמה או בשיטות אחרות לאימות המשתמש כדי לאמת את המשתמש. email_verified יכול גם להיות נכון כי Google אימתה לראשונה את המשתמש כשחשבון Google נוצר, אבל ייתכן שהבעלות על חשבון האימייל של הצד השלישי השתנתה מאז.

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

select_by

בטבלה הבאה מפורטים הערכים האפשריים בשדה select_by. סוג הלחצן המשמש יחד עם הסשן ומצב ההסכמה משמשים להגדרת הערך,

  • המשתמש לחץ על הלחצן 'הקשה אחת' או על 'כניסה באמצעות חשבון Google', או השתמש בתהליך של כניסה אוטומטית ללא מגע.

  • נמצאה פעילות קיימת באתר, או שהמשתמש בחר ונכנס לחשבון Google כדי ליצור פעילות חדשה באתר.

  • לפני שתשתפו עם האפליקציה את פרטי הכניסה של אסימון מזהה, המשתמש

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

הערך בשדה הזה מוגדר לאחד מהסוגים הבאים:

תמורה לכסף תיאור
auto כניסה אוטומטית של משתמש עם סשן קיים שהסכים בעבר לשתף פרטי כניסה. רלוונטי רק לדפדפנים שאינם נתמכים על ידי FedCM.
user משתמש שיש לו סשן קיים שהסכים בעבר לחץ על הלחצן 'המשך בהקשה אחת' כדי לשתף את פרטי הכניסה. רלוונטי רק לדפדפנים שאינם נתמכים על ידי FedCM.
fedcm אחד מהמשתמשים לחץ על הלחצן 'המשך בתור' בהקשה אחת כדי לשתף את פרטי הכניסה באמצעות FedCM. רלוונטי רק לדפדפנים נתמכים של FedCM.
fedcm_auto כניסה אוטומטית של משתמש עם סשן קיים שהסכים בעבר לשתף פרטי כניסה באמצעות FedCM One Tap. רלוונטי רק לדפדפנים נתמכים של FedCM.
user_1tap משתמש שיש לו סשן קיים לחץ על הלחצן 'המשך בהקשה אחת' כדי להעניק הסכמה ולשתף את פרטי הכניסה. רלוונטי רק ל-Chrome מגרסה 75 ואילך.
user_2tap משתמש שאין לו סשן קיים לחץ על הלחצן 'המשך בהקשה אחת' כדי לבחור חשבון, ואז לחץ על הלחצן 'אישור' בחלון קופץ כדי להביע הסכמה ולשתף פרטי כניסה. רלוונטי לדפדפנים שאינם מבוססים על Chromium.
btn משתמש שיש לו סשן קיים שהסכים בעבר לחץ על הלחצן 'כניסה באמצעות חשבון Google' ובחר חשבון Google מתוך 'בחירת חשבון' כדי לשתף את פרטי הכניסה.
btn_confirm משתמש שיש לו סשן קיים לחץ על הלחצן 'כניסה באמצעות חשבון Google' ולחץ על הלחצן 'אישור' כדי להביע הסכמה ולשתף את פרטי הכניסה.
btn_add_session משתמש ללא סשן קיים שהסכים בעבר לחץ על הלחצן 'כניסה באמצעות חשבון Google' כדי לבחור חשבון Google ולשתף את פרטי הכניסה.
btn_confirm_add_session משתמש שאין לו סשן קיים לחץ קודם על הלחצן 'כניסה באמצעות חשבון Google' כדי לבחור חשבון Google, ואז לחץ על הלחצן 'אישור' כדי להביע הסכמה ולשתף פרטי כניסה.

state

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

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

נקודת הקצה של ה-handler לפרטי כניסה לסיסמה

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

בקשת POST HTTP כוללת את הפרטים הבאים:

פורמט שם תיאור
קובץ Cookie g_csrf_token מחרוזת אקראית שמשתנה עם כל בקשה לנקודת הקצה של ה-handler.
פרמטר של בקשה g_csrf_token מחרוזת שזהה לערך הקודם של קובץ ה-cookie, g_csrf_token.
פרמטר של בקשה email אסימון המזהה הזה ש-Google מנפיקה.
פרמטר של בקשה password איך פרטי הכניסה נבחרים.