OAuth 2.0: مصادقة المستخدمين من خلال Google

OAuth2 هو البروتوكول المتّبع في المجال للتفويض. يوفر آلية للمستخدمين لمنح تطبيقات الويب وسطح المكتب الوصول إلى المعلومات الخاصة بدون مشاركة اسم المستخدم الخاص بها، وكلمة المرور وبيانات الاعتماد الخاصة الأخرى.

ينشئ هذا البرنامج التعليمي إضافة يمكنها الوصول إلى جهات اتصال Google لدى المستخدم باستخدام الخيار Google people واجهة برمجة التطبيقات وChrome Identity API. لأنه لا يتم تحميل الإضافات يتعذّر تنفيذ بروتوكول HTTPS تعيد التوجيه أو تُعيِّن ملفات تعريف الارتباط، فإنها تعتمد على واجهة برمجة تطبيقات Chrome Identity API لاستخدام OAuth2.

البدء

ابدأ بإنشاء دليل وملفات البدء التالية.

ملف البيان.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 Developer لوحة البيانات بدون نشرها:

  1. في "لوحة بيانات المطوّر"، انقر على إضافة عنصر جديد.
  2. انقر على تصفّح الملفات واختَر ملف ZIP للإضافة وحمِّله.
  3. انتقِل إلى علامة التبويب الحزمة وانقر على عرض المفتاح العام.

علامة تبويب حزمة لوحة بيانات المطوِّر

عند فتح النافذة المنبثقة، اتّبِع الخطوات التالية:

  1. انسخ الرمز بين -----BEGIN PUBLIC KEY----- و-----END PUBLIC KEY-----.
  2. أزِل السطور الجديدة لجعلها سطرًا واحدًا من النص.

نافذة منبثقة للمفتاح العام

أضِف الرمز إلى 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. افتح وحدة التحكم وانقر على "جهات اتصال FriendBlock" . سيظهر رمز OAuth مميز في وحدة التحكم.

عرض الرمز المميّز في وحدة التحكّم

تفعيل Google People API

ارجع إلى وحدة تحكّم Google API واختَر المكتبة من الشريط الجانبي. البحث عن "أشخاص في Google API"، انقر على النتيجة الصحيحة وفعِّلها.

تفعيل 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 وارجع إلى بيانات الاعتماد. انقر على "إنشاء بيانات اعتماد" أو حدد "مفتاح واجهة برمجة التطبيقات" من القائمة المنسدلة.

إنشاء بيانات اعتماد واجهة برمجة تطبيقات &quot;الأشخاص&quot;

ويمكنك الاحتفاظ بمفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه لاستخدامه لاحقًا.

إنشاء أول طلب من واجهة برمجة التطبيقات

والآن بعد أن حصلت الإضافة على الأذونات وبيانات الاعتماد المناسبة وأصبح بإمكانها تفويض أحد مستخدمي Google، طلب البيانات من خلال واجهة برمجة تطبيقات "الأشخاص". يُرجى تعديل الرمز في "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 وta-da! الاستمتاع بوجوه جهات الاتصال في قطعة.

جهات اتصال ضمن مجموعة