מוסיפים לאתר לחצן 'כניסה באמצעות חשבון 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 באותו דף,
הסרה של 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() מופעל להצגה
הקשה אחת כחלופה לשימוש בלחצן להרשמה או לכניסה.
ספריית ה-GIS מנתחת את מסמך ה-HTML לאלמנטים עם מאפיין מזהה שמוגדר כ-g_id_onload, או למאפייני סיווג שמכילים את הערך g_id_signin. אם שיעור ההתאמה
נמצא, הלחצן מעובד באמצעות HTML, ללא קשר
עיבוד הלחצן גם ב-JavaScript. כדי למנוע הצגה של הלחצן פעמיים, אולי עם פרמטרים מתנגשים, אל תכללו בדפי ה-HTML רכיבי HTML שתואמים לשמות האלה.
שפת הלחצן
שפת הלחצן נקבעת באופן אוטומטי לפי ברירת המחדל של הדפדפן
או להעדפת המשתמש עבור הפעילות ב-Google. אפשר גם לבחור
שפה באופן ידני על ידי הוספת הפרמטר hl וקוד השפה
בזמן טעינת הספרייה ועל ידי הוספת מקום הנתונים האופציונלי או
פרמטר הלוקאל data-locale ב-HTML או בלוקאל ב-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 של חלון קופץ או של הפניה אוטומטית.
מצב חלון קופץ
כשמשתמשים במצב חוויית המשתמש popup, תהליך חוויית המשתמש של הכניסה מתבצע בחלון קופץ. בדרך כלל, זוהי חוויה פחות פולשנית למשתמשים, והיא מצב ברירת המחדל של חוויית המשתמש.
כשמריצים את הלחצן באמצעות:
HTML
אפשר להגדיר אחת מהאפשרויות הבאות:
data-callbackכדי להחזיר את ה-JWT ל-handler של הקריאה החוזרת, אוdata-login_uriכדי ש-Google תשלח את ה-JWT ישירות להתחברות נקודת קצה באמצעות בקשת POST.
אם שני הערכים מוגדרים, הערך של data-callback מקבל קדימות על פני הערך של data-login_uri. הגדרה של שני הערכים יכולה לעזור כשמשתמשים בקריאה חוזרת (callback)
לניפוי באגים.
JavaScript
צריך לציין callback, מצב חלון קופץ לא תומך בהפניות אוטומטיות כשמפעילים את הלחצן ב-JavaScript. אם הערך מוגדר, המערכת מתעלמת מ-login_uri.
למידע נוסף על פענוח הקוד, ראו טיפול בתגובה של פרטי הכניסה שהוחזרו JWT בתוך ה-handler של הקריאה החוזרת ל-JS.
מצב הפניה לכתובת URL אחרת
כשמשתמשים במצב UX עם 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.