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

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

שיטה: google.accounts.id.initialize

השיטה google.accounts.id.initialize מפעילה את לקוח הכניסה באמצעות Google על סמך אובייקט ההגדרה. דוגמה לקוד:

google.accounts.id.initialize(IdConfiguration)

הדוגמה הבאה של הקוד מטמיעה את השיטה google.accounts.id.initialize באמצעות הפונקציה onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

השיטה google.accounts.id.initialize יוצרת מופע Client-In של Google שאפשר להשתמש בו באופן לא מפורש בכל המודולים באותו דף אינטרנט.

• צריך לקרוא לשיטה google.accounts.id.initialize רק פעם אחת, גם אם אתם משתמשים בכמה מודולים (כמו הקשה אחת, לחצן מותאם אישית, ביטול וכו') באותו דף אינטרנט.
• אם קוראים לשיטה google.accounts.id.initialize כמה פעמים, רק התצורות שבשיחה האחרונה יישמרו ויהיה בשימוש.

אתם למעשה מאפסים את ההגדרות האישיות כשאתם מפעילים את השיטה google.accounts.id.initialize, וכל השיטות הבאות באותו דף אינטרנט ישתמשו מייד בהגדרות החדשות.

אזהרה: יש להפעיל את השיטה google.accounts.id.initialize פעם אחת בלבד, גם אם משתמשים גם בהקשה אחת וגם בלחצן אחד באותו דף אינטרנט.

סוג נתונים: IdConfiguration

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

שדה
client_id	מזהה הלקוח של האפליקציה שלך
auto_select	המדיניות הזו מאפשרת בחירה אוטומטית.
callback	פונקציית JavaScript שמטפלת באסימוני מזהה. מאפיין חוויית המשתמש של popup ב-Google One ובמצב 'כניסה באמצעות חשבון Google' מופעל.
login_uri	כתובת ה-URL של נקודת הקצה להתחברות. הלחצן 'כניסה באמצעות חשבון Google' במצב חוויית משתמש של redirect מבוסס על המאפיין הזה.
native_callback	פונקציית JavaScript המטפלת בפרטי הכניסה של סיסמה.
cancel_on_tap_outside	היא מבטלת את הבקשה אם המשתמש לוחץ אל מחוץ להודעה.
prompt_parent_id	מזהה ה-DOM של רכיב הגורם המכיל של ההודעה בקליק אחד
nonce	מחרוזת אקראית לאסימוני מזהה
context	הכותרת והמילים בהודעה בהקשה אחת
state_cookie_domain	אם ברצונך לקרוא בתכונה 'הקשה אחת' בדומיין הראשי ובתת-דומיינים של הדומיין, יש להעביר את הדומיין ההורה לשדה הזה כדי להשתמש בקובץ cookie משותף אחד.
ux_mode	תהליך חוויית המשתמש של לחצן 'כניסה באמצעות חשבון Google'
allowed_parent_origin	המקורות המורשים להטמיע את ה-iframe ברמת הביניים. אם השדה הזה מופיע, One Tap פועל במצב iframe ברמת ביניים.
intermediate_iframe_close_callback	מדיניות זו עוקפת את התנהגות ברירת המחדל של iframe בינוני כאשר משתמשים סוגרים ידנית את הקשה אחת.
itp_support	הפעלת חוויית משתמש משודרגת ב-One Tap בדפדפני ITP.

client_id

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

סוג	נדרש	דוגמה
מחרוזת	כן	client_id: "CLIENT_ID.apps.googleusercontent.com"

בחירה אוטומטית

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

סוג	נדרש	דוגמה
boolean	אופציונלי	auto_select: true

קריאה חוזרת (callback)

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

סוג	נדרש	דוגמה
פונקציה	חובה בהקשה אחת ובמצב UX של popup	callback: handleResponse

Login_uri

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

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

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

סוג	אופציונלי	דוגמה
כתובת URL	הגדרת ברירת המחדל היא URI של הדף הנוכחי, או הערך שציינתם. נעשה שימוש רק כאשר ux_mode: "redirect" מוגדר.	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

הערה: באמצעות JavaScript API, אפשר להחזיר לתגובת callback את הפונקציה JavaScript ב-Google One, ואת לחצן 'כניסה באמצעות חשבון Google', popup, באמצעות פונקציית JavaScript. אם התשובה צריכה להישלח אוטומטית ל-login_uri, מומלץ להשתמש ב-HTML API.

מודעה מותאמת_להתקשרות חזרה

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

סוג	נדרש	דוגמה
פונקציה	אופציונלי	native_callback: handleResponse

ביטול_on_tap_outside

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

סוג	נדרש	דוגמה
boolean	אופציונלי	cancel_on_tap_outside: false

מזהה_מזהה_הודעה

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	prompt_parent_id: 'parent_id'

צופן חד-פעמי (nonce)

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	nonce: "biaqbm70g23"

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

context

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	context: "use"

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

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

דומיין_cookie_domain

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	state_cookie_domain: "example.com"

מצב ux_

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	ux_mode: "redirect"

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

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

origin_parent_origin

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

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

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

סוגי ערכים
string	URI של דומיין יחיד.	"https://example.com"
string array	מערך של URIs של דומיינים.	["https://news.example.com", "https://local.example.com"]

יש תמיכה גם בקידומות עם תווים כלליים לחיפוש. לדוגמה, "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" ייחשב כלא חוקי.

הערה: בניגוד ל-HTML API, מחרוזת עם מזהי URI שמופרדים בפסיקים אינה חוקית לשדה allowed_parent_origin. אפשר להשתמש באובייקט מערך של JavaScript במקום זאת.

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

ביניים_iframe_close_callback

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

השדה intermediate_iframe_close_callback נכנס לתוקף רק במצב iframe בינוני. היא משפיעה רק על ה-iframe הבינוני, במקום על iframe בהקשה אחת. ממשק המשתמש בהקשה אחת יוסר לפני ההפעלה של הקריאה החוזרת (callback).

סוג	נדרש	דוגמה
פונקציה	אופציונלי	intermediate_iframe_close_callback: logBeforeClose

תמיכת IT

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

סוג	נדרש	דוגמה
boolean	אופציונלי	itp_support: true

שיטה: google.accounts.id.prompt

השיטה google.accounts.id.prompt מציגה את הבקשה One Tap או את מנהל פרטי הכניסה של הדפדפן לאחר ההפעלה של השיטה initialize(). דוגמה לקוד:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

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

ההתראות מופעלות ברגעים הבאים:

• רגע בהצגה: מצב זה מתרחש לאחר קריאה לשיטה prompt(). ההתראה מכילה ערך בוליאני שמציין אם ממשק המשתמש מוצג או לא.

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

  במקרים כאלה, מומלץ להמשיך לספקי הזהויות הבאים, אם יש כאלה.

• רגע שנסגר: זה קורה כש-Google מאחזרת בהצלחה פרטי כניסה או כשמשתמש רוצה להפסיק את תהליך האחזור של פרטי הכניסה. לדוגמה, כשהמשתמש מתחיל להזין את שם המשתמש והסיסמה שלו בתיבת הדו-שיח להתחברות, אפשר לקרוא לשיטה google.accounts.id.cancel() כדי לסגור את ההודעה בהקשה אחת ולהפעיל את הרגע נסגר.

  אזהרה: אם מדובר ברגע שנסגר, אל תנסו את ספקי הזהויות הבאים.

דוגמה לקוד הבאה מטמיעה את הרגע שהמערכת דילגה עליו:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

הערה: לא נודיע לך על הצגה בממשק המשתמש של מנהל האישורים המקורי, על דילוגים או על רגעים שסגרת. אין לנו שליטה.

סוג הנתונים: PromptMomentNotification

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

‏Method
isDisplayMoment()	האם זו התראה רגעית?
isDisplayed()	האם ההתראה הזו מוצגת לזמן תצוגה, וממשק המשתמש מוצג?
isNotDisplayed()	האם ההתראה הזו מוצגת לזמן תצוגה, וממשק המשתמש לא מוצג?
getNotDisplayedReason()	הסיבה המפורטת לכך שממשק המשתמש לא מוצג. אלה הערכים האפשריים: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason
isSkippedMoment()	האם זו התראה שמפספסת רגע?
getSkippedReason()	הסיבה המפורטת לרגע שדילגת עליו. אלה הערכים האפשריים: auto_cancel user_cancel tap_outside issuing_failed
isDismissedMoment()	האם זו התראה לגבי רגע שנסגר?
getDismissedReason()	סיבת הסגירה. אלה הערכים האפשריים: credential_returned cancel_called flow_restarted
getMomentType()	מחזירה מחרוזת עבור סוג הרגע. אלה הערכים האפשריים: display skipped dismissed

סוג הנתונים: CredentialResponse

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

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

מסמך לאימות

שדה זה הוא אסימון המזהה כמחרוזת JSON של קוד אינטרנט (JWT) בקידוד Base64.

כאשר הקוד מפוענח, JWT נראה כמו הדוגמה הבאה:

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": "[e-mail]", // 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": "Elisa",
  "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.

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

מקרים שבהם Google מהימנה:

• לסיומת email יש סיומת @gmail.com, זהו חשבון Gmail.
• הערך של email_verified הוא True והשדה hd מוגדר, זה חשבון G Suite.

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

Select_by

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

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

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

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

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

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

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

שיטה: google.accounts.id.renderButton

השיטה google.accounts.id.renderButton מציגה לחצן 'כניסה באמצעות חשבון Google' בדפי האינטרנט שלכם.

דוגמה לקוד:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

סוג נתונים: GsiButtonConfiguration

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

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

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

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

סוג

סוג הלחצן. ערך ברירת המחדל הוא standard.

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

סוג	נדרש	דוגמה
מחרוזת	כן	type: "icon"

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

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

עיצוב

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	theme: "filled_blue"

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

נושא
outline	עיצוב לחצן סטנדרטי:
filled_blue	עיצוב לחצן כחול:
filled_black	עיצוב לחצן שחור:

size [מידה]

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	size: "small"

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

גודל
large	לחצן גדול:
medium	לחצן בגודל בינוני:
small	לחצן קטן:

טקסט

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

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	text: "signup_with"

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

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

צורה

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	shape: "rectangular"

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

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

יישור_לוגו

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	logo_alignment: "center"

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

יישור_לוגו
left	יישור לשמאל של הלוגו של Google.
center	יישור למרכז של הלוגו של Google.

רוחב

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

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	width: 400

לוקאל

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

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

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

סוג	נדרש	דוגמה
מחרוזת	אופציונלי	locale: "zh_CN"

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

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

סוג הנתונים: פרטי כניסה

כשהפונקציה native_callback מופעלת, אובייקט Credential מועבר כפרמטר. בטבלה הבאה מפורטים השדות שבתוך האובייקט:

שדה
id	מזהה את המשתמש.
password	הסיסמה

שיטה: google.accounts.id.disableAutoSelect

כשהמשתמש יוצא מהחשבון באתר שלכם, עליכם להפעיל את השיטה google.accounts.id.disableAutoSelect כדי לתעד את הסטטוס בקובצי ה-cookie. כך ניתן למנוע לולאה מתוחכמת של חוויית המשתמש. עיין בקטע הקוד הבא של השיטה:

google.accounts.id.disableAutoSelect()

הדוגמה הבאה של הקוד מטמיעה את השיטה google.accounts.id.disableAutoSelect באמצעות פונקציית onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

שיטה: google.accounts.id.storeCredential

השיטה הזו היא "wrapper פשוט" לשיטה store() של ממשק ה-API לניהול הדפדפן המקורי של הדפדפן. לכן אפשר להשתמש בה רק כדי לאחסן פרטי כניסה לסיסמה. דוגמה לקוד:

google.accounts.id.storeCredential(Credential, callback)

הדוגמה הבאה של הקוד מטמיעה את השיטה google.accounts.id.storeCredential באמצעות פונקציית onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

שיטה: google.accounts.id.cancel

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

google.accounts.id.cancel()

הדוגמה הבאה של הקוד מטמיעה את השיטה google.accounts.id.cancel() באמצעות הפונקציה onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

קריאה חוזרת (callback) של טעינת ספרייה: onGoogleLibraryLoad

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

window.onGoogleLibraryLoad = () => {
    ...
};

ההתקשרות החוזרת הזו היא רק קיצור דרך לקריאה החוזרת (callback) של window.onload. אין הבדלים בהתנהגות.

בדוגמה הבאה של הקוד מיושמת קריאה חוזרת (callback) של onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

שיטה: google.accounts.id.revoke

השיטה google.accounts.id.revoke מבטלת את הענקת OAuth שבה נעשה שימוש כדי לשתף את אסימון המזהה של המשתמש שצוין. קטע הקוד הבא של השיטה: google.accounts.id.revoke(hint, callback)

פרמטר	סוג	תיאור
hint	מחרוזת	כתובת האימייל או המזהה הייחודי של חשבון Google של המשתמש. המזהה הוא המאפיין של sub במטען הייעודי () של פרטי הכניסה.
callback	פונקציה	handler אופציונלי של RevocationResponse.

דוגמת הקוד הבאה מראה איך משתמשים בשיטת revoke עם מזהה.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

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

סוג נתונים: RevocationResponse

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

שדה
successful	שדה זה הוא ערך החזרה של הקריאה לשיטה.
error	השדה הזה עשוי להכיל הודעת שגיאה מפורטת לגבי השגיאה.

בוצע בהצלחה

השדה הזה הוא ערך בוליאני שמוגדר כ-True אם הקריאה לשיטת הביטול בוטלה או נכשלה כ-False.

error

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