הצגת הקשה על Google One

מוסיפים לאתר הנחיה להקשה אחת כדי לאפשר למשתמשים להירשם או להיכנס לאפליקציית האינטרנט. משתמשים ב-HTML וב-JavaScript כדי להציג את ההנחיה ולהתאים אותה אישית.

דרישות מוקדמות

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

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

רינדור של ההנחיה

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

HTML

הצגת ההנחיה של One Tap, והחזרת פרטי הכניסה מסוג JWT לנקודת קצה של כניסה.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

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

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

משתמשים במאפיין האופציונלי data-context כדי לשנות את הטקסט שמופיע בשם ההנחיה. לדוגמה, data-context: "signup" משנה את 'כניסה אל' ל'הרשמה אל'.

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

רשימה מלאה של המאפיינים הנתמכים זמינה בחומר העזר בנושא g_id_onload.

JavaScript

הצגת ההנחיה להקשה אחת, והחזרת פרטי הכניסה מסוג JWT למטפל הקריאה החוזרת (callback) של JavaScript בדפדפן.

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

כדי להגדיר את ההנחיה להקשה אחת ב-JavaScript, קודם צריך להפעיל את השיטה initialize(). לאחר מכן, קוראים ל-method‏ prompt() כדי להציג את ממשק המשתמש של ההנחיה.

משתמשים בשדה האופציונלי context כדי לשנות את הטקסט שמוצג בכותרת ההנחיה. לדוגמה, context: 'signup' משנה את 'כניסה אל' ל'הרשמה אל'.

כברירת מחדל, ההנחיה ל'הקשה אחת' נסגרת באופן אוטומטי אם המשתמש לוחץ מחוץ להנחיה. אפשר להשבית את ההתנהגות הזו אם מגדירים את המאפיין cancel_on_tap_outside כ-false.

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

סטטוס ההנחיה

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

ההתראות נשלחות על הרגעים הבאים:

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

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

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

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

HTML

אפשר להשתמש במאפיין data-moment_callback כדי לציין פונקציית קריאה חוזרת (callback) של JavaScript. כדי לקבל התראות, נדרש טיפול בקריאה החוזרת (callback).

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

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

JavaScript

מעבירים את הטיפול בקריאה החוזרת כפרמטר ל-google.accounts.id.prompt. כאן נעשה שימוש בפונקציית חץ כדי לטפל בעדכוני ההתראות.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

לחצן והנחיה

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

HTML

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

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

כדי להציג את הבקשה 'כניסה באמצעות חשבון Google' ואת הבקשה 'One Tap', צריך להפעיל בו-זמנית את שתי הפונקציות renderButton() ו-prompt().

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

לא לכסות את האפשרות 'לחיצה אחת'

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

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

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

תגובה של פרטי כניסה

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

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

אפשר להשתמש ב-HTML או ב-JavaScript כדי להגדיר קריאה חוזרת.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

לדוגמה, הפונקציה handleCredentialResponse מפענחת את ה-JWT ומדפיסה חלק מהשדות של האסימון המזהה במסוף.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

Redirect (הפניה אוטומטית)

כדי להחזיר פרטי כניסה לנקודת הקצה של ההתחברות בפלטפורמה, מוסיפים את כתובת ה-URL להגדרות של Authorized redirect URI (מזהה URI להפניה אוטומטית מורשית) בלקוח האינטרנט של OAuth 2.0.

משתמשים ב-HTML או ב-JavaScript כדי להגדיר URI להפניה אוטומטית.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});