שילוב של כניסה באמצעות חשבון Google באפליקציית האינטרנט שלכם

הכניסה באמצעות חשבון Google מנהלת את תהליך OAuth 2.0 ואת מחזור החיים של האסימון, וכך מפשטת את השילוב עם Google APIs. למשתמשים תמיד יש אפשרות לבטל את הגישה לאפליקציה בכל שלב.

במאמר הזה מוסבר איך להשלים שילוב בסיסי של כניסה באמצעות חשבון Google.

יצירת פרטי כניסה להרשאה

לכל אפליקציה שמשתמשת ב-OAuth 2.0 כדי לגשת ל-Google APIs צריכים להיות פרטי הרשאה שמזהים את האפליקציה בשרת OAuth 2.0 של Google. בשלבים הבאים מוסבר איך ליצור פרטי כניסה לפרויקט. לאחר מכן, האפליקציות יכולות להשתמש בפרטי הכניסה כדי לגשת לממשקי API שהפעלתם בפרויקט הזה.

1. Go to the Clients page.
2. לוחצים על Create Client.
3. בוחרים את סוג האפליקציה Web application.
4. נותנים שם ללקוח OAuth 2.0 ולוחצים על יצירה.

אחרי שההגדרה תושלם, חשוב לשים לב למזהה הלקוח שנוצר. כדי להשלים את השלבים הבאים, תצטרכו את מזהה הלקוח. (נוצר גם סוד לקוח, אבל הוא נדרש רק לפעולות בצד השרת).

טעינה של ספריית Google Platform

צריך לכלול את ספריית Google Platform בדפי האינטרנט שמשולבת בהם התכונה 'כניסה באמצעות חשבון Google'.

<script src="https://apis.google.com/js/platform.js" async defer></script>

ציון מזהה הלקוח של האפליקציה

מציינים את מספר הלקוח שיצרתם לאפליקציה ב-Google Developers Console באמצעות רכיב ה-meta‏ 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 של הפרופיל ולכתובת האימייל.

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