שילוב של כניסה באמצעות חשבון 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.
  3. בוחרים בסוג האפליקציה Web application.
  4. נותנים שם ללקוח OAuth 2.0 ולוחצים על יצירה.

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

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

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