OAuth2 הוא הפרוטוקול הסטנדרטי בתחום להרשאה. הוא מספק מנגנון שמאפשר למשתמשים להעניק לאפליקציות אינטרנט ולמחשב גישה למידע פרטי בלי לשתף את שם המשתמש, הסיסמה ופרטי הכניסה הפרטיים האחרים שלהם.
במדריך הזה תלמדו איך ליצור תוסף שמקבל גישה לאנשי הקשר של המשתמש ב-Google באמצעות Google People 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 בלי לפרסם אותו:
- במרכז הבקרה למפתחים, לוחצים על הוספת פריט חדש.
- לוחצים על עיון בקבצים, בוחרים את קובץ ה-zip של התוסף ומעלים אותו.
- עוברים לכרטיסייה Package ולוחצים על View public key.
כשתיבת הדו-שיח פתוחה, מבצעים את הפעולות הבאות:
- מעתיקים את הקוד שמופיע בין
-----BEGIN PUBLIC KEY-----ל------END PUBLIC KEY-----. - מסירים את שורות הקצה כדי ליצור שורה אחת של טקסט.
מוסיפים את הקוד ל-manifest.json שמתחת לשדה "key". כך התוסף ישתמש באותו מזהה.
{ // manifest.json "manifest_version": 3, ... "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB", } השוואת מזהים
פותחים את הדף Extensions Management (ניהול תוספים) בכתובת chrome://extensions, מוודאים שמצב הפיתוח מופעל ומעלים את ספריית התוספים ללא האריזה. משווים את מזהה התוסף שבדף ניהול התוספים למזהה הפריט במרכז השליטה למפתחים. הם צריכים להיות זהים.
יצירת מזהה לקוח ב-OAuth
עוברים אל מסוף Google API ויוצרים פרויקט חדש. כשמסיימים, בוחרים באפשרות Credentials בסרגל הצד, לוחצים על Create credentials ובוחרים באפשרות OAuth client ID.
בדף Create client ID (יצירת מזהה לקוח), בוחרים באפשרות Chrome Extension (תוסף Chrome). ממלאים את השם של התוסף ומזינים את מזהה התוסף בסוף כתובת ה-URL בשדה 'מזהה האפליקציה'.
לסיום, לוחצים על 'יצירה'. במסוף יופיע מזהה לקוח ב-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.js לניהול תהליך OAuth, ומוסיפים את הקוד הבא.
window.onload = function() { document.querySelector('button').addEventListener('click', function() { chrome.identity.getAuthToken({interactive: true}, function(token) { console.log(token); }); }); }; מציבים תג script עבור oauth.js ב-head של index.html.
... <head> <title>FriendBlock</title> ... <script type="text/javascript" src="oauth.js"></script> </head> ... טוענים מחדש את התוסף ולוחצים על סמל הדפדפן כדי לפתוח את index.html. פותחים את המסוף ולוחצים על הלחצן 'אנשי קשר ב-FriendBlock'. אסימון OAuth יופיע במסוף.
הפעלת Google People API
חוזרים למסוף Google API ובוחרים באפשרות Library בסרגל הצד. מחפשים את Google 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'.
שומרים את מפתח ה-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); }); }; }); }); }); }; טוענים מחדש את הדף וחוזרים לתוסף. לוחצים על הלחצן 'חסימת חברים' וזהו! ליהנות מפנים של אנשי קשר בקבוצה.
