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

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

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

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

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

1. Go to the Credentials page.
2. לוחצים על יצירת פרטי כניסה > מזהה לקוח OAuth.
3. בוחרים את סוג האפליקציה Web application.
4. נותנים שם ללקוח OAuth 2.0 ולוחצים על יצירה.

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

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

עליכם לכלול את ספריית 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>