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
يجب أن يتضمّن أي تطبيق يستخدم OAuth 2.0 للوصول إلى Google APIs بيانات اعتماد تفويض تحدّد التطبيق لخادم OAuth 2.0 من Google. توضّح الخطوات التالية كيفية إنشاء بيانات اعتماد لمشروعك. يمكن لتطبيقاتك بعد ذلك استخدام بيانات الاعتماد للوصول إلى واجهات برمجة التطبيقات التي فعّلتها لهذا المشروع.
ابدأ بالانتقال إلى وحدة تحكّم Google API لإنشاء مشروع جديد إذا لم يكن لديك مشروع. اتّبِع هذه التعليمات لإنشاء عميل OAuth والحصول على معرّف العميل.
- Go to the Clients page.
- انقر على إنشاء عميل.
- اختَر نوع التطبيق إضافة Chrome.
- أدخِل اسمًا لعميل 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"، وانقر على النتيجة الصحيحة وفعِّلها.
أضِف مكتبة عميل 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" وانتقِل مجددًا إلى بيانات الاعتماد. انقر على "إنشاء بيانات اعتماد" واختَر "مفتاح واجهة برمجة التطبيقات" من القائمة المنسدلة.
احتفِظ بمفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه لاستخدامه لاحقًا.
إنشاء طلب البيانات الأول من واجهة برمجة التطبيقات
بعد أن حصلت الإضافة على الأذونات وبيانات الاعتماد المناسبة وأصبح بإمكانها منح الإذن لمستخدم 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);
});
};
});
});
});
};
أعِد التحميل وارجع إلى الإضافة. انقر على الزر FriendBlock، وها قد تمّت العملية. الاستمتاع بوجوه جهات الاتصال في مربّع
