אפשר להוסיף לאתר לחצן 'כניסה באמצעות חשבון Google' כדי לאפשר למשתמשים להירשם או להיכנס לאפליקציית האינטרנט. אפשר להשתמש ב-HTML או ב-JavaScript כדי לעבד את הלחצן והמאפיינים ולהתאים אישית את הצורה, הגודל, הטקסט והעיצוב של הלחצן.
אחרי שמשתמש בוחר חשבון Google ומביע את הסכמתו, Google משתפת את פרופיל המשתמש באמצעות JSON Web Token (JWT). איך זה עובד? סקירה כללית של השלבים בתהליך הכניסה לחשבון וחוויית המשתמש הסבר על הלחצן 'בהתאמה אישית' בודק את התנאים והמצבים השונים שמשפיעים על האופן שבו הלחצן מוצג למשתמשים.
דרישות מוקדמות
בצע את הפעולות הבאות לפני הוספת הלחצן לדף ההתחברות שלך:
- פועלים לפי השלבים המתוארים בקטע Setup כדי להגדיר את מסך ההסכמה ל-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 ל-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.