OAuth2: אימות משתמשים באמצעות Google

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

במדריך הזה תיווצר תוסף שניגש אל אנשי הקשר מחשבון Google של משתמש באמצעות GooglePeople API ו-Chrome Identity API. תוספים לא נטענים ב-HTTPS, ולכן לא יכולים לבצע הפניות אוטומטיות או להגדיר קובצי cookie, ולכן הם מסתמכים על Chrome Identity API לשימוש ב-OAuth2.

שנתחיל?

מתחילים ביצירת ספרייה ואת הקבצים הבאים לתחילת העבודה.

ניתן להוריד את התוסף המלא והמלא כאן.

manifest.json

צריך להוסיף את המניפסט על ידי יצירת קובץ בשם manifest.json ולכלול את הקוד הבא. אפשר גם להוריד את הקובץ מכאן.

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 2,
  "browser_action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  }
}

background.js

צריך להוסיף את סקריפט הרקע על ידי יצירת קובץ בשם background.js ולכלול את הקוד הבא. אפשר גם להוריד את הקובץ מכאן.

chrome.browserAction.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

צריך להוסיף קובץ HTML בשם index.html ולכלול את הקוד הבא. אפשר גם להוריד את הקובץ מכאן.

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

העלאה למרכז השליטה למפתחים

אורזים את ספריית התוספים בקובץ .zip ומעלים אותה למרכז השליטה למפתחים של Chrome בלי לפרסם אותה:

  1. במרכז השליטה למפתחים, לוחצים על הוספת פריט חדש.
  2. לוחצים על בחירת קובץ, בוחרים את ספריית התוספים .zip ומעלים אותה.
  3. בלי למלא שדות נוספים, בוחרים באפשרות שמירת טיוטה וחזרה למרכז השליטה.

מאתרים את התוסף בקטע Your Listings ולוחצים על More info. בחלון הקופץ, מעתיקים את המפתח הציבורי ומוסיפים אותו למניפסט שבתוך הספרייה שפורסת, בשדה "key".

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

השוואת מזהים

פתחו את הדף 'ניהול תוספים' בכתובת chrome://extensions, ודאו שמצב הפיתוח מופעל והעלו את ספריית התוספים שהאריזה שלה לא ארוזה. השוו את מזהה התוסף בדף ניהול התוספים למזהה הפריט במרכז השליטה למפתחים. הן אמורות להתאים.

המזהה של התוסף תואם בכל המקומות

התוסף שומר על אותו מזהה על ידי הכללת השדה "key" במניפסט. כדי להירשם ל-API, חובה לשמור מזהה יחיד.

יצירת מזהה לקוח ב-OAuth

מנווטים אל מסוף Google API ויוצרים פרויקט חדש. כשהכל מוכן, בוחרים באפשרות Credentials בסרגל הצד, לוחצים על Create credentials ובוחרים באפשרות OAuth client ID.

יצירת פרטי כניסה לתוסף

בדף Create client ID (יצירת מזהה לקוח), בוחרים באפשרות Chrome App (אפליקציית Chrome), מזינים את שם התוסף ומציבים את מזהה התוסף בסוף כתובת ה-URL בשדה Application ID.

ממלאים את פרטי התוסף

לסיום, לוחצים על 'יצירה'. המסוף יספק מזהה לקוח OAuth.

רישום OAuth במניפסט

יש לכלול את השדה "oauth2" במניפסט של התוסף. צריך למקם את מזהה הלקוח של OAuth שנוצר בקטע "client_id". בינתיים, יש לכלול מחרוזת ריקה ב-"scopes".

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":[""]
  },
  ...
}

הפעלת תהליך ה-OAuth הראשון

יש לרשום את ההרשאה identity במניפסט.

{
  "name": "OAuth Tutorial FaceBlcok",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

עליך ליצור קובץ כדי לנהל את תהליך ה-OAuth שנקרא oauth.js ולכלול את הקוד הבא. אפשר גם להוריד אותה מכאן.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

הצבת תג סקריפט עבור oauth.js בראש index.html.

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

כדי לפתוח את index.html, צריך לטעון מחדש את התוסף וללחוץ על סמל הדפדפן. פתחו את המסוף ולחצו על הלחצן 'חבר חסימת אנשי קשר'. אסימון OAuth יופיע במסוף.

הצגת האסימון במסוף

הפעלה של GooglePeople API

חוזרים למסוף Google API ובוחרים ספרייה בסרגל הצד. חפשו את "GooglePeople API", לחצו על התוצאה המתאימה והפעילו אותה.

הפעלת ה-People API

הוספה של ספריית הלקוח GooglePeople API ל-"scopes" במניפסט של התוסף.

{
  "name": "OAuth Tutorial FaceBlcok",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

חוזרים למסוף Google API וחוזרים לפרטי הכניסה. לחצו על "Create credentials" ובחרו באפשרות API key בתפריט הנפתח.

יצירת פרטי כניסה ל-People API

שומרים את מפתח ה-API שנוצר לשימוש עתידי.

יצירה של בקשת ה-API הראשונה

עכשיו, אחרי שלתוסף יש הרשאות מתאימות ופרטי כניסה מתאימים, והוא יכול לאשר משתמש Google, הוא יוכל לבקש נתונים דרךPeople API. יש לעדכן את הקוד בoauth.js כך שיהיה זהה לקוד המופיע למטה.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

מחליפים את API_KEY במפתח ה-API שנוצר ממסוף Google API. התוסף צריך לתעד אובייקט JSON שכולל מערך של people/account_ids מתחת לשדה memberResourceNames.

חסימת פנים

התוסף מחזיר רשימה של אנשי הקשר של המשתמש, ולכן הוא יכול לשלוח בקשות נוספות לאחזור הפרופילים והמידע של אותם אנשי קשר . כדי לאחזר את פרטי התמונות של אנשי הקשר של המשתמשים, התוסף ישתמש ב-memberResourceNames. מעדכנים את oauth.js כך שיכללו את הקוד הבא.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

טוענים מחדש וחוזרים לתוסף. לחץ על הלחצן FriendsBlock וט-דה! נהנים מהפנים של אנשי הקשר בבלוק.

יצירת קשר עם פנים בבלוק