OAuth2: مصادقة المستخدمين من خلال 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": 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 Developer لوحة البيانات بدون نشرها:

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

ابحث عن الإضافة ضمن بياناتك وانقر على مزيد من المعلومات. من النافذة المنبثقة، انسخ مفتاح عام وإضافته إلى ملف البيان داخل الدليل المضغوط ضمن الحقل "key".

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

مقارنة أرقام التعريف

فتح صفحة "إدارة الإضافات" على الرابط chrome://extensions، والتأكد من تفعيل وضع مطوّر البرامج قم بتحميل دليل الإضافة غير المجمعة. مقارنة رقم تعريف الإضافة في إدارة الإضافات معرّف السلعة في لوحة بيانات المطوّر. يجب أن يتطابقا.

يتطابق رقم تعريف الإضافة في جميع الأماكن

وستحتفظ الإضافة برقم التعريف نفسه من خلال تضمين الحقل "key" في البيان. الحفاظ على رقم تعريف واحد ضروري لتسجيل واجهة برمجة التطبيقات.

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

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

تفعيل Google People API

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

تفعيل People API

أضِف مكتبة برامج Google People API إلى "scopes" في بيان الإضافة.

{
  "name": "OAuth Tutorial FaceBlcok",
  ...
  "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! الاستمتاع بوجوه جهات الاتصال في قطعة.

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