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": "background.js"
}
}
background.js
background.js
というファイルを作成して以下のコードを含めることで、バックグラウンド Service Worker を追加します。
js
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] をクリックします。
ポップアップが開いたら、次の手順を行います。
-----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 と比較します。両者は一致するはずです。
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」を検索し、正しい結果をクリックして有効にします。
拡張機能のマニフェストの "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 キー] を選択します。
生成された 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] ボタンをクリックして、顔をブロック状態で表現します。