שילוב הקשה אחת באמצעות Iframe

ניתן לעבד את Google One Tap בתוך iframe (המכונה להלן 'Iframe בינוני') שמתארח באתר שלכם. לא ניתן להבחין בשינוי בחוויית המשתמש בהקשה אחת, כשמשתמשים ב-iframe ביניים.

שילוב ביניים שמבוסס על iframe כרוך בגמישות ובסיכונים:

  • חוויית משתמש מוטמעת בהקשה אחת ובתהליך הבא של חוויית המשתמש.

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

    דוגמה לחווית משתמש מוטמעת עם iframe ביניים.

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

  • לבצע שילוב פעם אחת ולהציג בכל מקום.

    כל קוד השילוב של One Tap (הפעלה של One Tap API וטיפול בחוויית המשתמש לאחר מכן) כלולים ב-iframe הביניים. בדפי תוכן, שבהם עשוי להופיע One Tap, צריך רק להטמיע את iframe ברמת הביניים.

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

  • הגבלת היקף החשיפה לאסימונים מזהים.

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

    דרך iframe ברמת הביניים עובדת היטב גם עם אתרים שכבר יש להם תת-דומיין ייעודי הקשור להתחברות (למשל, login.example.com) ותת-דומיינים מרובים הקשורים לתוכן (למשל, Sports.example.com ו-games.example.com).

  • הצגת דומיינים בהקשה אחת.

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

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

  • תמיכה ב-AMP.

    כברירת מחדל, אי אפשר להציג את Google One Tap בדפי AMP מהסיבות הבאות.

    1. אסור להשתמש בספרייה או בקוד של JS בהתאמה אישית.

    2. מטמון ה-AMP עשוי לעבד את הדף מדומיין אחר (של צופה ב-AMP).

    ניתן לפתור את הבעיה הזו באמצעות שימוש בארכיטקטורת הביניים של iframe. אחרי שמשלימים את השילוב בהקשה אחת ב-iframe ביניים, המפתחים יכולים להטמיע אותו בדפי AMP על ידי הוספת רכיב <amp-onetap-google>.

    אותו iframe ביניים יכול לשמש שוב בדפי AMP וגם בדפי HTML שאינם AMP.

  • סיכונים לפרטיות.

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

  • סיכוני אבטחה.

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

עיבוד הקשה אחת בתוך מסגרת הביניים

כדי להציג 'הקשה אחת' בתוך iframe הביניים, מציבים את קטע הקוד הבא בקוד ה-HTML של iframe הביניים:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

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

(אופציונלי) עיבוד חוויית משתמש נוספת ב-Iframe הביניים

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

ניתן לשנות את הגודל של iframe הביניים:

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

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

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

  1. iframe הביניים מוגדר כמוסתר כשמסיימים את חוויית המשתמש בהקשה אחת.

  2. ערך המאפיין offsetHeight של רכיב הוא 0 כשהוא מוסתר.

בשיחה הראשונה, תוכלו לשנות את גודל הגובה של iframe ל-1px רק כדי שהוא יהיה גלוי. לאחר מכן, אחרי שערך המאפיין offsetHeight יהיה זמין, תוכלו לשנות את הגודל שלו לגובה מתאים.

הקוד לדוגמה הבא מראה איך לאמת את המקור של ההורה ולשנות את הגודל של iframe האמצעי בממשק המשתמש אחרי חוויית המשתמש של One Tap.

<script>
window.onload = () => {
  google.accounts.id.intermediate.verifyParentOrigin(
    ["https://example.com","https://example-com.cdn.ampproject.org"],
    () => {
      google.accounts.id.intermediate.notifyParentResize(1);
      window.setTimeout(() => {
        let h = document.getElementById('container').offsetHeight;
        google.accounts.id.intermediate.notifyParentResize(h);
      }, 200);
    },
    () => {
      document.getElementById('container').style.display = 'none';
      document.getElementById('warning').innerText = 'Warning: the page is displayed in an unexpected domain!';
    }
  );
};
</script>

הסרת ה-Iframe הביניים בחוויית המשתמש

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

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

אם מדלגים על תהליך ה-UX, צריך לקרוא לשיטה notifyParentClose במקום זאת.

הטמעת מסגרת ביניים בדפי HTML

צריך להוסיף את קטע הקוד הבא בכל דפי ה-HTML שרוצים להציג ב-Google One Tap:

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

המאפיין data-src הוא ה-URI של iframe הביניים.