このページは Cloud Translation API によって翻訳されました。

OAuth 2.0: Google Cloud でユーザーを認証

OAuth2 は、業界標準の承認プロトコルです。ウェブアプリケーションとデスクトップアプリケーションに、ユーザー名、パスワード、その他のプライベート認証情報を共有せずに、個人情報へのアクセスを許可するメカニズムを提供します。

このチュートリアルでは、Google People API と Chrome Identity API を使用して、ユーザーの Google の連絡先にアクセスする拡張機能を作成します。拡張機能は HTTPS 経由で読み込まず、リダイレクトを実行したり Cookie を設定したりできないため、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 というファイルを作成して以下のコードを含めることで、拡張機能 Service Worker を追加します。

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

index.html という 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>

一貫した拡張機能 ID を維持する

開発時には単一の ID を維持することが重要です。一貫性のある ID を維持するには、次の手順に沿って操作します。

デベロッパーダッシュボードに拡張機能をアップロードする

拡張機能ディレクトリを .zip ファイルにパッケージ化し、公開せずに Chrome デベロッパーダッシュボードにアップロードします。

デベロッパーダッシュボードで [新しいアイテムを追加] をクリックします。
[ファイルを表示] をクリックし、拡張機能の zip ファイルを選択してアップロードします。
[Package] タブに移動し、[View public key] をクリックします。

デベロッパーダッシュボードの [Package] タブ

ポップアップが開いたら、次の手順を行います。

-----BEGIN PUBLIC KEY----- と -----END PUBLIC KEY----- の間のコードをコピーします。
改行を削除して 1 行のテキストにします。

公開鍵のポップアップ

コードを "key" フィールドの manifest.json に追加します。これにより、拡張機能で同じ ID が使用されます。

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

ID を比較する

拡張機能の管理ページ（chrome://extensions）を開き、[デベロッパーモード] が有効になっていることを確認してから、パッケージ化されていない拡張機能のディレクトリをアップロードします。拡張機能の管理ページの拡張機能 ID をデベロッパーダッシュボードのアイテム ID と比較します。両者は一致するはずです。

拡張機能の ID が一致します。

OAuth クライアント ID を作成する

Google API Console に移動し、新しいプロジェクトを作成します。準備ができたら、サイドバーで [認証情報] を選択し、[認証情報を作成] をクリックして [OAuth クライアント ID] を選択します。

拡張機能の認証情報を作成する

[クライアント ID を作成] ページで、[Chrome 拡張機能] を選択します。拡張機能の名前を入力し、[アプリケーション ID] フィールドに URL の末尾に拡張機能 ID を入力します。

拡張機能に関する情報を入力する

最後に [作成] をクリックします。コンソールに OAuth クライアント ID が表示されます。

マニフェストに OAuth を登録する

拡張機能のマニフェストに "oauth2" フィールドを含めます。生成された OAuth クライアント ID を "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);
    });
  });
};

index.html の先頭に oauth.js のスクリプトタグを配置します。

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

拡張機能を再読み込みし、ブラウザアイコンをクリックして index.html を開きます。コンソールを開き、[FriendBlock Contacts] ボタンをクリックします。OAuth トークンがコンソールに表示されます。

コンソールでトークンを表示する

Google People API を有効にする

Google API コンソールに戻り、サイドバーから [ライブラリ] を選択します。「Google People API」を検索し、正しい結果をクリックして有効にします。

People API を有効にする

拡張機能のマニフェストの "scopes" に Google People API クライアントライブラリを追加します。

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

Google API コンソールに戻り、認証情報に戻ります。[認証情報を作成] をクリックし、プルダウンから [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 は、Google API Console で生成した API キーに置き換えます。この拡張機能は、memberResourceNames フィールドに people/account_id の配列を含む JSON オブジェクトをロギングする必要があります。

顔をブロック

これで、拡張機能はユーザーの連絡先のリストを返すようになり、その連絡先のプロフィールと情報を取得するための追加のリクエストを行うことができます。この拡張機能は、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] ボタンをクリックして、顔をブロック状態で表現します。

ブロック内の連絡先の顔