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": 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
מרכז הבקרה בלי לפרסם אותו:
- במרכז השליטה למפתחים, לוחצים על הוספת פריט חדש.
- לוחצים על בחירת קובץ, בוחרים את ספריית התוספים
.zipומעלים אותה. - בלי למלא שדות נוספים, בוחרים באפשרות שמירת טיוטה וחזרה למרכז הבקרה.
מאתרים את התוסף בקטע הכרטיסי המוצר שלך ולוחצים על מידע נוסף. מהחלון הקופץ, מעתיקים את
מפתח ציבורי ומוסיפים אותו למניפסט שבספרייה המחולקת בשדה "key".
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
השוואה בין מזהים
פותחים את הדף 'ניהול תוספים' בכתובת chrome://extensions, מוודאים שמצב הפיתוח מופעל
להעלות את ספריית התוספים הלא ארוזים. להשוות את מזהה התוסף בניהול התוספים
לדף 'מזהה פריט' במרכז השליטה למפתחים. הם אמורים להיות זהים.
כדי לשמור על אותו מזהה, התוסף "key" יכלול את השדה במניפסט. שימור
מזהה יחיד חיוני לרישום API.
יצירת מזהה לקוח ב-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 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. פותחים את המסוף ולוחצים
ב-'FriendBlock Contacts (אנשי קשר) לחצן. אסימון OAuth יופיע במסוף.
הפעלת Google People API
חוזרים למסוף Google API ובוחרים באפשרות ספרייה בסרגל הצד. חיפוש של 'Google People' API', לוחצים על התוצאה המתאימה ומפעילים אותה.
צריך להוסיף את ספריית הלקוח Google People 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 מהתפריט הנפתח.
שומרים את מפתח ה-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! כיף לראות את הפנים של איש הקשר ב- בלוק.
