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

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

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

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

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

  1. Go to the Credentials page.
  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 של הפרופיל ולכתובת האימייל של המשתמש.

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

<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>