הפניית 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.

  • צריך להגדיר אחד משני המאפיינים האלה למצב חוויית המשתמש (UX) של Google One Tap ושל לחצן הכניסה באמצעות חשבון Google. popup אם מגדירים את שניהם, למאפיין 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 של רכיב המאגר. אם היא לא מוגדרת, ההודעה One Tap מוצגת בפינה השמאלית העליונה של החלון. מידע נוסף זמין בטבלה הבאה:

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

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

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

אף אחד מהנתונים

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

סוג חובה דוגמה
מחרוזת אופציונלי 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"

ב-HTML API אין תמיכה בפונקציות JavaScript במרחב שמות. במקום זאת, צריך להשתמש בפונקציית 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; לחצן סמל ללא טקסט גלוי
הטקסט של הלחצן הוא 'Continue with 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 האופן שבו פרטי הכניסה נבחרים.