OAuth2: احراز هویت کاربران با Google

OAuth2 پروتکل استاندارد صنعتی برای مجوز است. این مکانیسمی را برای کاربران فراهم می کند تا به برنامه های کاربردی وب و دسکتاپ اجازه دسترسی به اطلاعات خصوصی را بدون به اشتراک گذاشتن نام کاربری، رمز عبور و سایر اطلاعات کاربری خصوصی خود بدهند.

این آموزش افزونه ای ایجاد می کند که با استفاده از Google People API و Chrome Identity API به مخاطبین Google کاربر دسترسی پیدا می کند. از آنجایی که برنامه‌های افزودنی از طریق HTTPS بارگیری نمی‌شوند، نمی‌توانند تغییر مسیرها یا کوکی‌ها را تنظیم کنند، برای استفاده از OAuth2 به Chrome Identity API متکی هستند.

شروع کنید

با ایجاد یک دایرکتوری و فایل های شروع زیر شروع کنید.

پسوند کامل و کامل را می توانید از اینجا دانلود کنید.

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": 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 آپلود کنید:

  1. در داشبورد برنامه‌نویس، روی افزودن مورد جدید کلیک کنید.
  2. روی Choose file کلیک کنید و دایرکتوری پسوند .zip را انتخاب کنید و آن را آپلود کنید.
  3. بدون پر کردن فیلدهای اضافی، ذخیره پیش نویس را انتخاب کنید و به داشبورد بازگردید .

افزونه را در لیست های خود پیدا کنید و روی اطلاعات بیشتر کلیک کنید. از پنجره بازشو، کلید عمومی را کپی کنید و آن را به مانیفست داخل دایرکتوری زیپ نشده در قسمت "key" اضافه کنید.

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

مقایسه شناسه ها

صفحه مدیریت برنامه‌های افزودنی را در chrome://extensions باز کنید، مطمئن شوید که حالت برنامه‌نویس فعال است و فهرست برنامه‌های افزودنی بسته‌بندی نشده را آپلود کنید. شناسه برنامه افزودنی موجود در صفحه مدیریت برنامه‌های افزودنی را با شناسه مورد در داشبورد برنامه‌نویس مقایسه کنید. آنها باید مطابقت داشته باشند.

شناسه برنامه افزودنی در همه مکان ها مطابقت دارد

برنامه افزودنی با گنجاندن فیلد "key" در مانیفست همان شناسه را حفظ می کند. حفظ یک شناسه واحد برای ثبت API ضروری است.

شناسه مشتری OAuth ایجاد کنید

به کنسول API Google بروید و یک پروژه جدید ایجاد کنید. پس از آماده شدن، اعتبارنامه ها را در نوار کناری انتخاب کنید، روی ایجاد اعتبارنامه کلیک کنید و شناسه مشتری OAuth را انتخاب کنید.

ایجاد اعتبار برای توسعه

در صفحه ایجاد شناسه مشتری، برنامه Chrome را انتخاب کنید. نام برنامه افزودنی را پر کنید و شناسه برنامه افزودنی را در انتهای URL در قسمت Application ID قرار دهید.

اطلاعات افزونه را پر کنید

با کلیک روی ایجاد به پایان برسانید. کنسول یک شناسه مشتری 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 باز شود. کنسول را باز کنید و روی دکمه "FriendBlock Contacts" کلیک کنید. یک نشانه OAuth در کنسول ظاهر می شود.

توکن را در کنسول مشاهده کنید

Google People API را فعال کنید

به کنسول API Google برگردید و کتابخانه را از نوار کناری انتخاب کنید. «Google People 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"
    ]
  },
  ...
}

به کنسول API Google برگردید و به اعتبارنامه ها برگردید. روی "ایجاد اعتبار" کلیک کنید و "کلید API" را از منوی بازشو انتخاب کنید.

اعتبارنامه People API را ایجاد کنید

کلید API تولید شده را برای استفاده بعدی نگه دارید.

اولین درخواست 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 با کلید API تولید شده از کنسول 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! از چهره مخاطب در یک بلوک لذت ببرید.

تماس با چهره ها در یک بلوک