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

בדף העזרה הזה מוסבר על ממשק ה-API של מאפייני הנתונים ב-HTML לכניסה באמצעות חשבון Google. אפשר להשתמש ב-API כדי להציג את ההנחיה 'הקשה אחת' או את הלחצן 'כניסה באמצעות חשבון 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 שם הפונקציה לטיפול בפרטי הכניסה של הסיסמה ב-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 הדילוג על הקשה אחת יתבצע אם לעוגיה שצוינה יש ערך שאינו ריק.
data-nonce מחרוזת אקראית לאסימונים מזהים
data-context הכותרת והמילים בהודעה 'כניסה בהקשה אחת'
data-moment_callback שם הפונקציה של מאזין ההתראות לגבי סטטוס ממשק המשתמש של ההנחיה
data-state_cookie_domain אם אתם צריכים להפעיל את One Tap בדומיין ההורה ובתת-הדומיינים שלו, עליכם להעביר את הדומיין ההורה למאפיין הזה כדי שנעשה שימוש בקובץ cookie משותף אחד.
data-ux_mode תהליך ממשק המשתמש של הלחצן 'כניסה באמצעות חשבון Google'
data-allowed_parent_origin המקורות שמותר להם להטמיע את ה-iframe הביניים. התכונה One Tap פועלת במצב iframe ביניים אם המאפיין הזה קיים.
data-intermediate_iframe_close_callback משנה את ברירת המחדל של התנהגות iframe ביניים כשמשתמשים סוגרים את One Tap באופן ידני.
data-itp_support הפעלת ממשק משתמש משודרג של One Tap בדפדפני ITP.
data-login_hint כדי לדלג על בחירת החשבון, מספקים רמז למשתמש.
data-hd להגביל את בחירת החשבונות לפי דומיין.
data-use_fedcm_for_prompt מאפשרים לדפדפן לשלוט בהנחיות לכניסה של המשתמשים ולתווך את תהליך הכניסה בין האתר ל-Google.
data-enable_redirect_uri_validation מפעילים תהליך הפניה אוטומטית של לחצן שעומד בדרישות של כללי האימות של URI להפניה אוטומטית.

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

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

data-client_id

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

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

data-auto_prompt

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

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

data-auto_select

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

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

data-login_uri

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

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

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

התגובה של פרטי הכניסה של אסימון המזהה מתפרסמת בנקודת הקצה להתחברות כשלא מוגדרת פונקציית קריאה חוזרת (callback), והמשתמש לוחץ על הלחצנים 'כניסה באמצעות חשבון 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

data-callback

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

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

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

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

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

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

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"

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

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

data-nonce

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

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

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

data-context

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

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

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

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

data-moment_callback

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

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

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

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

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

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

data-ux_mode

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

סוג חובה דוגמה
מחרוזת אופציונלי 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 לא תקין, האיפוס של One Tap למצב 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' בממשק המשתמש של One Tap. ברירת המחדל היא להסיר את ה-iframe הביניים מה-DOM באופן מיידי.

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

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

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

data-itp_support

השדה הזה קובע אם צריך להפעיל את חוויית המשתמש המשודרגת של One Tap בדפדפנים שתומכים במניעת מעקב חכמה (ITP). ערך ברירת המחדל הוא 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 רמז לגבי שם הדומיין. אם הפעולה תתבצע בהצלחה, חשבונות המשתמשים שיוצגו במהלך בחירת החשבון יהיו מוגבלים לדומיין שצוין. ערך תו כללי: * מציע למשתמש רק חשבונות Workspace, ומחריג חשבונות של צרכנים (user@gmail.com) במהלך בחירת החשבון.

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

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

data-use_fedcm_for_prompt

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

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

data-enable_redirect_uri_validation

מפעילים תהליך הפניה אוטומטית של לחצן שעומד בכללים לאימות URI של הפניה אוטומטית.

סוג חובה דוגמה
בוליאני אופציונלי data-enable_redirect_uri_validation="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 אם המחרוזת מוגדרת, היא תוחזר עם אסימון המזהה.

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

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

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
לחצן רגיל עם הכיתוב &#39;כניסה באמצעות חשבון Google&#39; לחצן סמל ללא טקסט גלוי
טקסט הלחצן הוא 'כניסה באמצעות חשבון Google'.
signup_with
לחצן רגיל עם הכיתוב &#39;הרשמה באמצעות חשבון Google&#39; לחצן סמל ללא טקסט גלוי
טקסט הלחצן הוא 'הרשמה באמצעות חשבון Google'.
continue_with
לחצן רגיל עם הכיתוב &#39;המשך באמצעות חשבון Google&#39; לחצן סמל ללא טקסט גלוי
טקסט הלחצן הוא 'המשך באמצעות חשבון Google'.
signin
לחצן רגיל עם הכיתוב &#39;כניסה&#39; לחצן סמל ללא טקסט גלוי
טקסט הלחצן הוא 'כניסה'.

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
לחצן רגיל עם הלוגו של G בצד ימין
הלוגו של Google מיושר לצד ימין.
center
לחצן רגיל עם הלוגו של G באמצע
הלוגו של 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 הבאות.

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

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

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

פורמט שם תיאור
קובץ Cookie g_csrf_token מחרוזת אקראית שמשתנה בכל בקשה לנקודת הקצה של הטיפול.
פרמטר של בקשה 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 משתמש עם סשן קיים שכבר נתן הסכמה לחץ על הלחצן 'המשך בתור' של One Tap כדי לשתף את פרטי הכניסה. רלוונטי רק לדפדפנים שלא נתמכים ב-FedCM.
fedcm משתמש לחץ על הלחצן 'המשך בתור' של One Tap כדי לשתף את פרטי הכניסה באמצעות 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, ואז לחץ על הלחצן 'אישור' כדי להביע הסכמה ולשתף את פרטי הכניסה.

הסמוי הסופי

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

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

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

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

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

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