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

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

כפתור כניסה מותאם אישית.

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

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

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

רינדור של לחצנים

כדי להציג את הלחצן 'כניסה באמצעות חשבון Google', אפשר להשתמש ב-HTML או ב-JavaScript כדי להציג את הלחצן בדף הכניסה:

HTML

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

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

רכיב עם הכיתוב g_id_signin מוצג ככפתור לכניסה באמצעות חשבון Google. הלחצן מותאם אישית לפי הפרמטרים שצוינו במאפייני הנתונים.

כדי להציג באותו דף את הלחצן 'כניסה באמצעות חשבון Google' ואת Google One Tap, מסירים את data-auto_prompt="false". מומלץ לעשות זאת כדי להפחית את החיכוך ולשפר את שיעורי הכניסה.

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

JavaScript

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

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

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

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

ספריית ה-GIS מנתחת את מסמך ה-HTML לאלמנטים עם מאפיין מזהה שמוגדר כ-g_id_onload, או למאפייני סיווג שמכילים את הערך g_id_signin. אם נמצא רכיב תואם, המערכת תיצור את הלחצן באמצעות HTML, גם אם יצרתם את הלחצן ב-JavaScript. כדי למנוע הצגה של הלחצן פעמיים, אולי עם פרמטרים מתנגשים, אל תכללו בדפי ה-HTML רכיבי HTML שתואמים לשמות האלה.

שפת הלחצן

שפת הלחצן נקבעת באופן אוטומטי לפי שפת ברירת המחדל של הדפדפן או לפי העדפת המשתמש בסשן ב-Google. אפשר גם לבחור את השפה באופן ידני על ידי הוספת הפרמטר hl וקוד השפה להנחיה src בזמן טעינת הספרייה, והוספת הפרמטר האופציונלי data-locale או הפרמטר locale‏ data-locale ב-HTML או locale ב-JavaScript.

HTML

קטע הקוד הבא מראה איך להציג את שפת הלחצן בצרפתית על ידי הוספת הפרמטר hl לכתובת ה-URL של ספריית הלקוח והגדרת המאפיין data-locale כצרפתית:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

קטע הקוד הבא מראה איך להציג את שפת הלחצן בצרפתית על ידי הוספת הפרמטר hl לכתובת ה-URL של ספריית הלקוח וקריאה לשיטה google.accounts.id.renderButton עם הפרמטר locale מוגדר ל-French:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

טיפול בפרטי כניסה

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

המיקום שבו בוחרים לקבל את ה-JWT תלוי בכך אם מעבדים את הלחצן באמצעות HTML או JavaScript, ואם נעשה שימוש במצב UX של חלון קופץ או של הפניה אוטומטית.

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

כשמריצים את הקוד של הלחצן באמצעות:

HTML

אפשר להגדיר את אחת מהאפשרויות הבאות:

  • data-callback כדי להחזיר את ה-JWT למטפל בקריאה החוזרת, או
  • data-login_uri כדי ש-Google תשלח את ה-JWT ישירות לנקודת הקצה של ההתחברות באמצעות בקשת POST.

אם שני הערכים מוגדרים, הערך של data-callback מקבל קדימות על פני הערך של data-login_uri. הגדרת שני הערכים עשויה להיות שימושית כשמשתמשים בטיפול בקריאה חוזרת (callback) לניפוי באגים.

JavaScript

צריך לציין callback, מצב חלון קופץ לא תומך בהפניות אוטומטיות כשמפעילים את הלחצן ב-JavaScript. אם הערך מוגדר, המערכת מתעלמת מ-login_uri.

מידע נוסף על פענוח ה-JWT בתוך הטיפול בקריאה החוזרת (callback) ב-JS זמין במאמר טיפול בתשובה שחוזרת עם פרטי הכניסה.

מצב הפניה אוטומטית

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

כשמריצים את הקוד של הלחצן באמצעות:

  • HTML: אפשר להגדיר את data-login_uri כ-URI של נקודת הקצה להתחברות.
  • אפשר להגדיר ב-JavaScript את login_uri כ-URI של נקודת הקצה להתחברות.

אם לא תספקו ערך, Google תחזיר את ה-JWT למזהה ה-URI של הדף הנוכחי.

מזהה URI של נקודת הקצה להתחברות

כשמגדירים את data-login_uri או את login_uri, צריך להשתמש ב-HTTPS וב-URI מוחלט. לדוגמה, https://example.com/path.

מותר להשתמש ב-HTTP רק כשמשתמשים ב-localhost במהלך הפיתוח: http://localhost/path.

שימוש במקורות JavaScript מאובטחים ובהפניות אוטומטיות של מזהי URI – כאן מפורט תיאור מלא של הדרישות וכללי האימות של Google.