הכניסה באמצעות חשבון Google מנהלת את זרימת OAuth 2.0 ואת מחזור החיים של האסימון, כדי להקל על השילוב עם Google APIs. למשתמשים תמיד יש אפשרות לבטל את הגישה לאפליקציה.
במסמך הזה מוסבר איך להשלים שילוב בסיסי של כניסה באמצעות חשבון Google.
יצירת פרטי כניסה להרשאה
לכל אפליקציה שמשתמשת ב-OAuth 2.0 כדי לגשת ל-Google APIs, חייבים להיות פרטי כניסה המזהים את האפליקציה לשרת OAuth 2.0 של Google. בשלבים הבאים מוסבר איך ליצור פרטי כניסה לפרויקט. לאחר מכן האפליקציות שלכם יוכלו להשתמש בפרטי הכניסה כדי לגשת לממשקי API שהפעלתם באותו פרויקט.
- Go to the Credentials page.
- לוחצים על יצירת פרטי כניסה > מזהה לקוח OAuth.
- בוחרים את סוג האפליקציה אפליקציית אינטרנט.
- נותנים שם ללקוח OAuth 2.0 ולוחצים על יצירה.
אחרי שמסיימים את ההגדרה, מציינים את מזהה הלקוח שנוצר. כדי להשלים את השלבים הבאים, תצטרכו את מזהה הלקוח. (נוצר גם סוד לקוח, אבל צריך אותו רק לפעולות בצד השרת).
טעינת הספרייה של Google Platform
עליכם לכלול את הספרייה של Google Platform בדפי האינטרנט שמשולבים בהם כניסה באמצעות חשבון Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
ציון מזהה הלקוח של האפליקציה
יש לציין את מזהה הלקוח שיצרתם לאפליקציה ב-Google Developers Console באמצעות
המטא-רכיב google-signin-client_id.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
הוספת לחצן לכניסה באמצעות חשבון Google
הדרך הקלה ביותר להוסיף לאתר לחצן כניסה באמצעות חשבון Google היא להשתמש בלחצן כניסה שמעובד באופן אוטומטי. באמצעות כמה שורות קוד, תוכלו להוסיף לחצן שמגדיר את עצמו באופן אוטומטי כך שיכלול את הטקסט, הלוגו והצבעים המתאימים למצב הכניסה של המשתמש ולהיקפי ההרשאות שביקשת.
כדי ליצור לחצן כניסה באמצעות חשבון Google שמשתמש בהגדרות ברירת המחדל, צריך להוסיף לדף הכניסה רכיב div עם המחלקה g-signin2:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
קבלת פרטי הפרופיל
אחרי שנכנסים למשתמש ב-Google באמצעות ההיקפים שמוגדרים כברירת מחדל, אפשר לגשת למזהה Google, לשם, לכתובת ה-URL של הפרופיל ולכתובת האימייל של המשתמש.
כדי לאחזר את פרטי הפרופיל של המשתמש, צריך להשתמש ב-method getBasicProfile().
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
ניתוק משתמש
אפשר לאפשר למשתמשים לצאת מהאפליקציה בלי לצאת מ-Google, על ידי הוספת לחצן יציאה או קישור לאתר. כדי ליצור קישור ליציאה, צריך לצרף פונקציה שקוראת ל-method GoogleAuth.signOut() לאירוע onclick של הקישור.
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>