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