OAuth2 هو البروتوكول القياسي المُتّبع في المجال للتفويض. وتوفّر هذه الميزة آلية للمستخدمين لمنح تطبيقات الويب وتطبيقات الكمبيوتر المكتبي إمكانية الوصول إلى المعلومات الخاصة بدون مشاركة اسم المستخدم وكلمات المرور وغيرها من بيانات الاعتماد الخاصة.
ينشئ هذا الدليل التعليمي إضافة تحصل على جهات اتصال المستخدم على Google باستخدام Google People API وChrome Identity API. وبما أنّ الإضافات لا يتم تحميلها عبر بروتوكول HTTPS، لا يمكنها تنفيذ عمليات إعادة توجيه أو ضبط ملفات تعريف الارتباط، لذا تعتمد على واجهة برمجة التطبيقات 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.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 الخاص بالموقع الإلكتروني الموسّع، ثم حمِّله.
- انتقِل إلى علامة التبويب الحزمة وانقر على عرض المفتاح العام.
عندما يكون مربّع الحوار مفتوحًا، اتّبِع الخطوات التالية:
- انسخ الرمز بين
-----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",
}
مقارنة أرقام التعريف
افتح صفحة "إدارة الإضافات" على الرابط chrome://extensions، وتأكَّد من تفعيل وضع المطوِّر،
وحمِّل دليل الإضافة غير المُحزمة. قارِن معرّف الإضافة في صفحة إدارة الإضافات
مع معرّف السلعة في "لوحة بيانات المطوّر". من المفترض أن تتطابق.
إنشاء معرِّف عميل OAuth
انتقِل إلى وحدة تحكّم واجهة برمجة تطبيقات Google وأنشئ مشروعًا جديدًا. بعد الانتهاء، اختَر بيانات الاعتماد في الشريط الجانبي، ثم انقر على إنشاء بيانات اعتماد واختَر معرِّف عميل OAuth.
في صفحة "إنشاء معرّف عميل"، اختَر إضافة 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 يُسمى 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 في وحدة التحكّم.
تفعيل Google People API
ارجع إلى وحدة تحكّم Google API واختَر المكتبة من الشريط الجانبي. ابحث عن "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 وانتقِل إلى بيانات الاعتماد مرة أخرى. انقر على "إنشاء بيانات اعتماد" و اختَر "مفتاح واجهة برمجة التطبيقات" من القائمة المنسدلة.
احتفظ بمفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه لاستخدامه لاحقًا.
إنشاء أول طلب بيانات من واجهة برمجة التطبيقات
والآن بعد أن حصلت الإضافة على الأذونات وبيانات الاعتماد المناسبة ويمكنها تفويض مستخدم 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 بمفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه من وحدة تحكّم 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);
});
};
});
});
});
};
أعِد تحميل الصفحة ثم ارجع إلى الإضافة. انقر على الزر "حظر الأصدقاء". استمتع بوجوه جهات الاتصال في مجموعة.
