כדי לאפשר למשתמשים להירשם לאפליקציית האינטרנט או להיכנס אליה, מוסיפים לאתר בקשה לכניסה בלחיצה אחת. כדי לעבד את הבקשה ולהתאים אותה אישית, משתמשים ב-HTML וב-JavaScript.
דרישות מוקדמות
כדי להגדיר את מסך ההסכמה ל-OAuth, לקבל מזהה לקוח ולטעון את ספריית הלקוח, פועלים לפי השלבים שמתוארים במאמר בנושא הגדרה.
מוסיפים לחצן לכניסה באמצעות חשבון Google לדף הכניסה.
רינדור הנחיות
מציבים קטע קוד בכל דף שבו רוצים להציג את מנגנון "לחיצה אחת".
HTML
הצגת ההנחיה 'התחברות בלחיצה אחת', והחזרת אישור ה-JWT לנקודת קצה של התחברות.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
המאפיין data-login_uri הוא ה-URI של נקודת הקצה להתחברות לאפליקציית האינטרנט שלכם. אתם יכולים להוסיף מאפייני נתונים בהתאמה אישית, שנשלחים לנקודת הקצה להתחברות יחד עם טוקן הזהות שהונפק על ידי Google.
אפשר להשתמש במאפיין data-skip_prompt_cookie ובעוגייה כדי לקבוע אם ההודעה על ההצטרפות בלחיצה אחת תוצג בדפי HTML סטטיים שבהם אי אפשר לשנות את התוכן. אם קובץ ה-cookie שצוין מוגדר, ההודעה לא מוצגת.
אפשר להשתמש במאפיין האופציונלי data-context כדי לשנות את הטקסט שמופיע בכותרת ההנחיה. לדוגמה, data-context: "signup" משנה את הכיתוב 'כניסה אל' ל'הרשמה אל'.
כברירת מחדל, ההודעה של לחיצה אחת נסגרת אוטומטית אם המשתמש לוחץ מחוץ להודעה. כדי להשבית את ההתנהגות הזו, צריך להגדיר את המאפיין data-cancel_on_tap_outside כ-false.
רשימה מלאה של המאפיינים הנתמכים זמינה במאמר g_id_onload.
JavaScript
הצגת ההנחיה 'הצטרפות בלחיצה אחת', והחזרת אישור ה-JWT ל-handler של הקריאה החוזרת (callback) של JavaScript בדפדפן.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
כדי להגדיר את ההנחיה 'הצטרפות בלחיצה אחת' ב-JavaScript, קודם צריך לקרוא ל-method initialize(). לאחר מכן, מבצעים קריאה ל-method prompt() כדי להציג את ממשק המשתמש של ההנחיה.
אפשר להשתמש בשדה האופציונלי context כדי לשנות את הטקסט שמופיע בכותרת ההנחיה.
לדוגמה, context: 'signup' משנה את הכיתוב 'כניסה אל' ל'הרשמה אל'.
כברירת מחדל, ההודעה של לחיצה אחת נסגרת אוטומטית אם המשתמש לוחץ מחוץ להודעה. כדי להשבית את ההתנהגות הזו, צריך להגדיר את המאפיין cancel_on_tap_outside כ-False.
רשימת האפשרויות המלאה של הנתונים זמינה במאמר idConfiguration.
סטטוס ההנחיה
משתמשים בפונקציית קריאה חוזרת ב-JavaScript כדי להאזין להתראות על סטטוס ממשק המשתמש של ההנחיה.
ההתראות נשלחות ברגעים הבאים:
רגע התצוגה: הרגע הזה מתרחש אחרי שקוראים למתודה
prompt(). ההתראה מכילה ערך בוליאני שמציין אם ממשק המשתמש מוצג או לא.רגע שבוצע דילוג: המצב הזה מתרחש כשחלון ההנחיה של 'הצטרפות בלחיצה אחת' נסגר בגלל ביטול אוטומטי, ביטול ידני או כש-Google לא מצליחה להנפיק אישור גישה, למשל כשמתבצעת יציאה מהחשבון בסשן שנבחר.
במקרה כזה, מומלץ להמשיך לספקי הזהויות הבאים, אם יש כאלה.
רגע שבו נדחתה בקשה: מתרחש כש-Google מאחזרת פרטי כניסה או כשמשתמש רוצה להפסיק את תהליך אחזור פרטי הכניסה. לדוגמה, כשמשתמש מתחיל להזין את שם המשתמש והסיסמה שלו בתיבת הדו-שיח של הכניסה, אפשר לקרוא לשיטה
google.accounts.id.cancel()כדי לסגור את ההנחיה של One Tap ולהפעיל רגע של ביטול.
HTML
משתמשים במאפיין data-moment_callback כדי לציין פונקציית קריאה חוזרת של JavaScript. כדי לקבל התראות, צריך להגדיר פונקציית callback.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
כדי לעזור למשתמשים להיכנס או להירשם, אתם יכולים לתקשר עם כמה ספקי זהויות כדי למצוא פרטי כניסה זמינים. כדאי לדעת מה הסטטוס של ממשק המשתמש של ההנחיות כדי שתוכלו להתקשר לספק הזהויות הבא.
JavaScript
מעבירים את פונקציית הקריאה החוזרת כפרמטר ל-google.accounts.id.prompt. בדוגמה הזו נעשה שימוש בפונקציית חץ כדי לטפל בעדכוני ההתראות.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
לחצן והנחיה
יכול להיות שהכפתור 'כניסה באמצעות חשבון Google' והבקשה 'One Tap' יוצגו יחד בדף אחד.
HTML
כדי להציג גם את הלחצן 'כניסה באמצעות חשבון Google' וגם את ההנחיה 'לחיצה אחת', צריך לכלול גם את הרכיב g_id_onload וגם את הרכיב g_id_signin.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
כדי להציג את הלחצן 'כניסה באמצעות חשבון Google' ואת הבקשה 'One Tap', צריך להפעיל את הפונקציות renderButton() ו-prompt() בו-זמנית.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
לא לכלול את One Tap
הקטע הזה רלוונטי רק כש-FedCM מושבת. כש-FedCM מופעל, בדפדפן מוצגות למשתמש הנחיות מעל תוכן הדף.
כדי לוודא שמשתמשי הקצה רואים את כל המידע שמוצג, אסור שתוכן אחר יסתיר את Google One Tap. אחרת, במקרים מסוימים יכול להיות שיוצגו חלונות קופצים.
כדאי לבדוק היטב את פריסת הדף ואת מאפייני z-index של הרכיבים, כדי לוודא שאף תוכן אחר לא יסתיר את Google One Tap בשום שלב. יכול להיות שהשינוי בזרימת חוויית המשתמש יופעל גם אם רק פיקסל אחד בגבולות מכוסה.
תגובה לגבי פרטי הכניסה
ה-JWT החתום על ידי Google נכלל בתגובת האישורים. התגובה מוחזרת לדפדפן באמצעות פונקציית קריאה חוזרת (callback) של JavaScript, או לפלטפורמה שלכם באמצעות הפניה אוטומטית לנקודת קצה של התחברות.
קריאה חוזרת (callback) של JS
כדי להגדיר קריאה חוזרת (callback), משתמשים ב-HTML או ב-JavaScript.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
לדוגמה, הפקודה handleCredentialResponse מפענחת את ה-JWT ומדפיסה כמה מהשדות של האסימון המזהה במסוף.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Redirect (הפניה אוטומטית)
כדי להחזיר פרטי כניסה לנקודת הקצה של הכניסה לפלטפורמה, צריך להוסיף את כתובת ה-URL להגדרות כתובת ה-URI המורשית להפניה אוטומטית של לקוח האינטרנט OAuth 2.0.
כדי להגדיר URI להפניה אוטומטית, משתמשים ב-HTML או ב-JavaScript.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});