מאמר עזרה בנושא Sign in with Google HTML API

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

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

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

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

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

מאפיין
`data-client_id`	מזהה הלקוח של האפליקציה
`data-color_scheme`	ערכת הצבעים שמוחלת על ההנחיה לאישור בלחיצה אחת.
`data-auto_prompt`	הצגת ההקשה על Google One.
`data-auto_select`	ההגדרה הזו מאפשרת בחירה אוטומטית ב-Google One Tap.
`data-login_uri`	כתובת ה-URL של נקודת הקצה להתחברות
`data-callback`	שם הפונקציה של ה-handler של טוקן ה-ID ב-JavaScript
`data-native_login_uri`	כתובת ה-URL של נקודת הקצה של ה-handler של פרטי הכניסה לסיסמה
`data-native_callback`	השם של פונקציית ה-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`	המערכת מדלגת על One Tap אם לקובץ ה-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 ביניים כשמשתמשים סוגרים ידנית את One Tap.
`data-itp_support`	ההגדרה הזו מאפשרת לשדרג את חוויית המשתמש של התכונה 'כניסה בלחיצה אחת' בדפדפנים עם ITP.
`data-login_hint`	דילוג על בחירת החשבון על ידי מתן רמז למשתמש.
`data-hd`	הגבלת בחירת החשבון לפי דומיין.
`data-use_fedcm_for_prompt`	מאפשרת לדפדפן לשלוט בהנחיות לכניסה לחשבון ולנהל את תהליך הכניסה בין האתר שלכם לבין Google.
`data-use_fedcm_for_button`	השדה הזה קובע אם צריך להשתמש בממשק משתמש של לחצן FedCM ב-Chrome (במחשב M125 ומעלה וב-Android M128 ומעלה). ברירת המחדל היא `false`.
`data-button_auto_select`	האם להפעיל את האפשרות בחירה אוטומטית בתהליך של לחצן FedCM. אם האפשרות הזו מופעלת, משתמשים חוזרים עם סשן פעיל ב-Google יתחברו אוטומטית, בלי שתופיע להם ההנחיה לבחירת חשבון. ערך ברירת המחדל הוא `false`.

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

בקטעים הבאים מפורטים סוגי המאפיינים ומוצגות דוגמאות.

data-client_id

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

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

data-color_scheme

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

סוג	חובה	דוגמה
מחרוזת	אופציונלי. ברירת המחדל היא העיצוב בצבע שמוגדר במערכת של המשתמשים.	`data-color_scheme="dark"`

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

ערכת צבעים
`default`	החלת ערכת הצבעים שמוגדרת כברירת מחדל במערכת של המשתמש, בהתאם להעדפות המשתמש (בהירה או כהה).
`light`	החלת ערכת צבעים בהירה.
`dark`	החלת ערכת צבעים כהה.

data-auto_prompt

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

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

data-auto_select

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

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

data-login_uri

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

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

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

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

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

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

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

data-callback

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

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

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

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

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

data-native_login_uri

כתובת ה-URL של נקודת הקצה של ה-handler של פרטי הכניסה לסיסמה. אם מגדירים את המאפיין 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"`

data-native_id_param

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

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

data-native_password_param

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

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

data-cancel_on_tap_outside

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

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

data-prompt_parent_id

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

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

data-skip_prompt_cookie

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

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

data-nonce

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

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

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

data-context

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

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

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

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

הקשר
`signin`	‫"Sign in to"‏ (כניסה לחשבון)
`signup`	‫"Sign up to"‏ (הרשמה ל-)
`use`	"שימוש"

data-moment_callback

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

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

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

data-state_cookie_domain

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

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

data-ux_mode

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

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

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

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

data-allowed_parent_origin

המקורות שמותר להם להטמיע את ה-iframe של הביניים. אם המאפיין הזה קיים, התכונה 'הצטרפות בלחיצה אחת' פועלת במצב 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 ולכל הדומיינים המשניים שלו. כדי לייצג שני דומיינים שונים, צריך להשתמש ברשימה מופרדת בפסיקים. לדוגמה, הביטוי "https://example1.com,https://.example2.com" תואם לדומיינים example1.com, example2.com ולתת-הדומיינים של example2.com
דומיינים עם תווים כלליים חייבים להתחיל בסכימה מאובטחת של https:// ‎, ולכן "*.example.com" נחשב לא תקין.

data-intermediate_iframe_close_callback

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

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

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

data-itp_support

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

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

data-login_hint

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

מידע נוסף זמין במאמרי העזרה בנושא OpenID Connect ל- login_hint.

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

data-hd

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

מידע נוסף זמין במאמרי העזרה בנושא OpenID Connect ל- hd.

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

data-use_fedcm_for_prompt

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

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

data-use_fedcm_for_button

השדה הזה קובע אם צריך להשתמש בממשק משתמש של לחצן FedCM ב-Chrome (במחשב M125+ וב-Android M128+). ברירת המחדל היא false. מידע נוסף מופיע בטבלה הבאה:

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

data-button_auto_select

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

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

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

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

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

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

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

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

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

בקטעים הבאים מפורטים סוגי המאפיינים ומוצגות דוגמאות.

data-type

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

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

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

סוג
`standard`	כפתור עם טקסט או מידע מותאם אישית.
`icon`	כפתור עם סמל בלי טקסט.

data-theme

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

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

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

עיצוב
`outline`	עיצוב הכפתור הרגיל.
`filled_blue`	העיצוב של הלחצנים עם מילוי כחול.
`filled_black`	עיצוב הכפתורים עם המילוי השחור.

data-size

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

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

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

גודל
`large`	כפתור גדול.
`medium`	כפתור בגודל בינוני.
`small`	כפתור קטן.

data-text

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

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

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

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

טקסט
`signin_with`	הטקסט בלחצן הוא 'כניסה באמצעות Google'.
`signup_with`	הטקסט בלחצן הוא 'הרשמה באמצעות Google'.
`continue_with`	הטקסט בלחצן הוא 'המשך באמצעות Google'.
`signin`	הטקסט בלחצן הוא 'כניסה'.

data-shape

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

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

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

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

data-logo_alignment

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

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

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

logo_alignment
`left`	מיישר לימין את הלוגו של Google.
`center`	מיישר למרכז את הלוגו של Google.

data-width

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

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

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

data-locale

אופציונלי. הצגת טקסט הלחצן באמצעות הלוקאל שצוין, אחרת ברירת המחדל היא הגדרות חשבון 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 clicked...‎ נרשמת ביומן במסוף כשלוחצים על הכפתור 'כניסה באמצעות חשבון Google'.

data-state

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

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

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

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

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

נקודת הקצה של ה-handler של אסימון המזהה

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

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

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

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

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

מסמך לאימות

כשמפענחים את אסימון ה-ID, הוא נראה כמו בדוגמה הבאה:

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"
}

הלקוחות חייבים להתעלם ממידע לא מזוהה מ-JWT.

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

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

מקרים שבהם Google היא הרשות המוסמכת:

‫email יש סיומת @gmail.com, זהו חשבון Gmail.
‫email_verified נכון ו-hd מוגדר, זהו חשבון Google Workspace.

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

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

g_csrf_token

טוקן מצב למניעת זיוף. זהו טוקן Cross-site request forgery‏ (CSRF) שנוצר על ידי ספריית gsi/client. ערך אקראי נכלל גם כקובץ Cookie וגם כפרמטר בקשה בגוף של מטען הנתונים של בקשת ה-POST. אם שני הערכים האלה לא תואמים כשמעבדים את הבקשה בשרת, הבקשה נחשבת לא חוקית.

select_by

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

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

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

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

הסמוי הסופי

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

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

נקודת קצה (endpoint) של אמצעי טיפול בפרטי כניסה של סיסמה

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

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

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

מאמר עזרה בנושא Sign in with Google HTML API קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

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

data-client_id

data-color_scheme

data-auto_prompt

data-auto_select

data-login_uri

data-callback

data-native_login_uri

data-native_callback

data-native_id_param

data-native_password_param

data-cancel_on_tap_outside

data-prompt_parent_id

data-skip_prompt_cookie

data-nonce

data-context

data-moment_callback

data-state_cookie_domain

data-ux_mode

data-allowed_parent_origin

data-intermediate_iframe_close_callback

data-itp_support

data-login_hint

data-hd

data-use_fedcm_for_prompt

data-use_fedcm_for_button

data-button_auto_select

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

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

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

data-type

data-theme

data-size

data-text

data-shape

data-logo_alignment

data-width

data-locale

data-click_listener

data-state

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

נקודת הקצה של ה-handler של אסימון המזהה

מסמך לאימות

g_csrf_token

select_by

הסמוי הסופי

נקודת קצה (endpoint) של אמצעי טיפול בפרטי כניסה של סיסמה

מאמר עזרה בנושא Sign in with Google HTML API