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

כדי לאחזר פרטי פרופיל של משתמש, צריך להשתמש ב 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>