הצגת הלחצן 'כניסה באמצעות חשבון 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, או מאפייני class שמכילים את הערך g_id_signin. אם נמצא רכיב תואם, הלחצן יעבור עיבוד באמצעות HTML, גם אם עיבדתם את הלחצן גם ב-JavaScript. כדי למנוע את הצגת הלחצן פעמיים, יכול להיות עם פרמטרים סותרים, אל תכללו בדפי ה-HTML שלכם רכיבי HTML שתואמים לשמות האלה.

שפת הכפתור

השפה של הלחצן נקבעת אוטומטית לפי שפת ברירת המחדל של הדפדפן או לפי ההעדפה של המשתמש בסשן ב-Google. אפשר גם לבחור את השפה באופן ידני על ידי הוספת הפרמטר hl וקוד השפה להנחיית src כשמעלים את הספרייה, ועל ידי הוספת הפרמטר האופציונלי 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 שמוגדר לצרפתית:

<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) שבו משתמשים – חלון קופץ או הפניה מחדש.

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

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

HTML

אתם יכולים להגדיר:

  • ‫data-callback כדי להחזיר את ה-JWT ל-callback handler, או
  • ‫data-login_uri כדי ש-Google ישלח את ה-JWT ישירות לנקודת הקצה (endpoint) של הכניסה באמצעות בקשת POST.

אם שני הערכים מוגדרים, data-callback מקבל עדיפות על פני data-login_uri. הגדרת שני הערכים יכולה להיות שימושית כשמשתמשים ב-callback handler לניפוי באגים.

JavaScript

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

במאמר טיפול בתגובה של פרטי הכניסה שהוחזרו מוסבר איך לפענח את ה-JWT בתוך פונקציית ה-callback של ה-JS.

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

שימוש במצב UX‏ redirect מפעיל את תהליך UX הכניסה באמצעות הפניה אוטומטית של הדפדפן של המשתמש לדף מלא, ו-Google מחזירה את ה-JWT ישירות לנקודת הקצה (endpoint) של הכניסה באמצעות בקשת 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.