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 בלי לפרסם אותה:
- במרכז השליטה למפתחים, לוחצים על הוספת פריט חדש.
- לוחצים על בחירת קובץ, בוחרים את ספריית התוספים
.zip
ומעלים אותה. - בלי למלא שדות נוספים, בוחרים באפשרות שמירת טיוטה וחזרה למרכז השליטה.
מאתרים את התוסף בקטע 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", לחצו על התוצאה המתאימה והפעילו אותה.
הוספה של ספריית הלקוח 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 בתפריט הנפתח.
שומרים את מפתח ה-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
s מתחת לשדה 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 וט-דה! נהנים מהפנים של אנשי הקשר בבלוק.