OAuth 2.0: אימות משתמשים בעזרת Google

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

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

הכרטיסייה &#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 (מזהה לקוח OAuth).

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

בדף 'יצירת מזהה לקוח', בוחרים באפשרות תוסף ל-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. פותחים את המסוף ולוחצים על "FriendBlock אנשי קשר" לחצן. אסימון OAuth יופיע במסוף.

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

הפעלת Google People API

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

הפעלת People API

צריך להוסיף את ספריית הלקוח Google People 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_id במסגרת שדה 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 ו-Ta-da! כיף לראות את הפנים של איש הקשר ב- בלוק.

פנים של אנשי קשר בבלוק