OAuth 2.0: אימות משתמשים בעזרת 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": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

service-worker.js

מוסיפים את קובץ השירות (service worker) של התוסף על ידי יצירת קובץ בשם service-worker.js והכללת הקוד הבא.

chrome.action.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. נכנסים לכרטיסייה חבילה ולוחצים על הצגת מפתח ציבורי.

הכרטיסייה &#39;חבילה&#39; של מרכז השליטה למפתחים

כשהחלון הקופץ פתוח, מבצעים את השלבים הבאים:

  1. מעתיקים את הקוד בין -----BEGIN PUBLIC KEY----- ל------END PUBLIC KEY-----.
  2. צריך להסיר את השורות החדשות כדי שהן יהפכו לשורת טקסט אחת.

חלון קופץ של מפתח ציבורי

מוסיפים את הקוד ל-manifest.json בשדה "key". כך התוסף ישתמש באותו מזהה.

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

השוואת מזהים

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

המזהה של התאמת התוסף

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

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

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

בדף Create client ID (יצירת מזהה לקוח), בוחרים באפשרות Chrome Extension (תוסף ל-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 FriendBlock",
  ...
  "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 FriendBlock",
  ...
  "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 וט-דה! נהנים מהפנים של אנשי הקשר בבלוק.

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