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

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 بدون نشره:

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

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

  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، وتأكَّد من تفعيل وضع المطوّر، ثم حمِّل دليل الإضافة غير الحزمة. قارِن معرّف الإضافة في صفحة إدارة الإضافات بمعرّف السلعة في &quot;لوحة بيانات المطوّرين&quot;. ويجب أن تكون متطابقة.

رقم تعريف مطابقة الإضافة

إنشاء معرّف عميل OAuth

يجب أن يتضمّن أي تطبيق يستخدم OAuth 2.0 للوصول إلى Google APIs بيانات اعتماد تفويض تحدّد التطبيق لخادم OAuth 2.0 من Google. توضّح الخطوات التالية كيفية إنشاء بيانات اعتماد لمشروعك. يمكن لتطبيقاتك بعد ذلك استخدام بيانات الاعتماد للوصول إلى واجهات برمجة التطبيقات التي فعّلتها لهذا المشروع.

ابدأ بالانتقال إلى وحدة تحكّم Google API لإنشاء مشروع جديد إذا لم يكن لديك مشروع. اتّبِع هذه التعليمات لإنشاء عميل OAuth والحصول على معرّف العميل.

  1. Go to the Clients page.
    1. انقر على إنشاء عميل.
    2. اختَر نوع التطبيق إضافة Chrome.
    3. أدخِل اسمًا لعميل OAuth. يظهر هذا الاسم في صفحة العملاء الخاصة بمشروعك لتحديد العميل.
    4. أدخِل معرّف الإضافة في حقل "معرّف العنصر".
    5. انقر على إنشاء.

تسجيل OAuth في ملف البيان

أدرِج الحقل "oauth2" في بيان الإضافة. ضَع معرّف عميل OAuth الذي تم إنشاؤه ضمن "client_id". للوصول إلى معلومات حساب المستخدم، علينا طلب "scope" و"https://www.googleapis.com/auth/userinfo.email" ذات الصلة.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":["https://www.googleapis.com/auth/userinfo.email"]
  },
  ...
}

بدء مسار 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"، وانقر على النتيجة الصحيحة وفعِّلها.

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

إنشاء بيانات اعتماد لواجهة People 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، وها قد انتهيت. الاستمتاع بوجوه جهات الاتصال في مربّع

وجوه جهات الاتصال في حظر