בדף העזר הזה מתואר ה-JavaScript API לתמיכה ב-iframe ביניים, שמשמש את One Tap כדי לשנות את ה-iframe הביניים בממשק המשתמש הבא.
במדריך שילוב של One Tap באמצעות iframe מוסבר איך להשתמש ב-iframe ביניים.
בטבלה הבאה מפורטות כל השיטות הזמינות וההתנהגויות שלהן.
| Methods | |
|---|---|
verifyParentOrigin |
מבצע את אימות המקור של ההורה |
notifyParentClose |
מודיעה למסגרת ההורה שדילגו על תהליך חוויית המשתמש של One Tap |
notifyParentDone |
מודיע למסגרת ההורה שתהליך חוויית המשתמש של One Tap הסתיים |
notifyParentResize |
מודיע למסגרת ההורה לשנות את הגודל של ה-iframe המתווך |
notifyParentTapOutsideMode |
מודיע למסגרת ההורה אם לבטל את ה-iframe המתווך כשהמשתמש לוחץ מחוץ ל-iframe המתווך |
טעינת ספריית JavaScript לתמיכה ב-iframe ביניים
מוסיפים את קטע הקוד הבא לכל דף HTML שבו רוצים לטעון את ה-iframe המתווך:
<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
שיטה: google.accounts.id.intermediate.verifyParentOrigin
ה-method google.accounts.id.intermediate.verifyParentOrigin מבצעת את אימות המקור של ההורה. דוגמה לקוד של השיטה:
google.accounts.id.intermediate.verifyParentOrigin(
origins, verifiedCallback, verificationFailedCallback)
בדוגמת הקוד הבאה אפשר לראות איך להציג את ממשק המשתמש רק אחרי אימות מקור ההורה:
<script>
window.onload = () => {
google.accounts.id.intermediate.verifyParentOrigin(
"https://example.com", showUI, showError);
};
</script>
בטבלה הבאה מפורטים הפרמטרים:
| פרמטר | |
|---|---|
origins |
המקורות שמותר להם להטמיע את ה-iframe המתווך. |
verifiedCallback |
שיטת הקריאה החוזרת של JavaScript שמופעלת כשלמקור הראשי הנוכחי מותר להטמיע את ה-iframe המתווך. |
verificationFailedCallback |
שיטת הקריאה החוזרת (callback) של JavaScript שמופעלת כשמקור ההורה הנוכחי לא מורשה להטמיע את ה-iframe המתווך. |
מקורות
המקורות שמותר להם להטמיע את ה-iframe המתווך. מידע נוסף מפורט בטבלה הבאה:
| סוג | חובה | דוגמה |
|---|---|---|
| מחרוזת, מערך מחרוזות או פונקציה | אופציונלי | allowed_parent_origin: "https://example.com" |
בטבלה הבאה מפורטים סוגי הערכים הנתמכים והתיאורים שלהם.
| סוגי ערכים | ||
|---|---|---|
string |
URI של דומיין אחד. | "https://example.com" |
string array |
מערך של כתובות URI של דומיינים. | "https://news.example.com,https://local.example.com" |
verifiedCallback
השדה הזה הוא שיטת קריאה חוזרת של JavaScript שמופעלת כשהמקור הראשי הנוכחי מורשה להטמיע את ה-iframe המתווך.
verificationFailedCallback
השדה הזה הוא שיטת קריאה חוזרת של JavaScript שמופעלת כשמקור ההורה הנוכחי לא מורשה להטמיע את ה-iframe המתווך.
שיטה: google.accounts.id.intermediate.notifyParentClose
ה-method google.accounts.id.intermediate.notifyParentClose מודיע למסגרת ההורה לסגור את ה-iframe הזמני כשמדלגים על תהליך חוויית המשתמש של One Tap. דוגמה לקוד של השיטה:
google.accounts.id.intermediate.notifyParentClose()
שיטה: google.accounts.id.intermediate.notifyParentDone
ה-method google.accounts.id.intermediate.notifyParentDone מודיעה למסגרת ההורה לסגור את ה-iframe הזמני ולרענן את סטטוס ההתחברות. דוגמת הקוד הבאה ממחישה את השיטה:
google.accounts.id.intermediate.notifyParentDone()
Method: google.accounts.id.intermediate.notifyParentResize
ה-method google.accounts.id.intermediate.notifyParentResize מודיע למסגרת ההורה לשנות את הגודל של ה-iframe המתווך. דוגמת הקוד הבאה מראה את השיטה:
google.accounts.id.intermediate.notifyParentResize(height)
גובה
הגובה החדש בפיקסלים. זה שדה חובה. הערך חייב להיות מספר לא שלילי.
אם הפרמטר height גדול מ-0, ה-iframe המתווך מוגדר לגובה החדש. אם פרמטר הגובה הוא 0, ה-iframe המתווך הופך לבלתי נראה. מסגרת iframe מוסתרת לא נסגרה. אפשר להציג אותו מאוחר יותר באמצעות הפעלת method אחרת לשינוי הגודל.
Method: google.accounts.id.intermediate.notifyParentTapOutsideMode
ה-method google.accounts.id.intermediate.notifyParentTapOutsideMode מודיעה ל-frame ההורה אם לבטל את ה-iframe המתווך כשהמשתמש לוחץ מחוץ ל-iframe המתווך. דוגמה לקוד של השיטה:
google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)
ביטול
הערך הבוליאני הנדרש הזה מציין אם לבטל את ה-iframe המתווך כשהמשתמש לוחץ מחוץ ל-iframe המתווך.