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

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

לחצן כניסה מותאם אישית.

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

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

בצע את הפעולות הבאות לפני הוספת הלחצן לדף ההתחברות שלך:

עיבוד לחצן

כדי להציג את הלחצן 'כניסה באמצעות חשבון 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, צריך להסיר את data-auto_prompt="false". מומלץ להשתמש באפשרות הזו כדי להקל על המשתמשים ולשפר את שיעורי הכניסה.

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

JavaScript

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

<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() נקרא להציג בהקשה אחת כחלופה נוספת לשימוש בלחצן להרשמה או לכניסה לחשבון.

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

שפת הלחצן

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

<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 Web Token (JWT) שנקראים אסימון מזהה לדפדפן של המשתמש, או ישירות לנקודת קצה להתחברות שמתארחת בפלטפורמה שלכם.

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

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

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

HTML

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

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

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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