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

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

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

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

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

2. לוחצים על Create credentials (יצירת פרטי כניסה) > OAuth client ID (מזהה לקוח OAuth).
3. בוחרים את סוג האפליקציה Web application.
4. נותנים שם ללקוח OAuth 2.0 ולוחצים על Create (יצירה).

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

טעינת ספריית Google Platform

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

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

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

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