SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Chrome Extensionで
Self-Issued OpenID Providerを
作るやで(Day1)
uji52
uji52
自己紹介
• uji52
• 好きなOIDCのフロー
• Code Flow
• 好きなExtension
• wasavi
• Advanced REST Client
• JSON Formatter
2
uji52
Self-Issued OpenID Provider
ってなんやねん
3
uji52
OpenID Connect
4
ユーザ
2.認証要求 4.認証情報・ID情報
すっごいザックリした説明
ID Token
eyJxxx.eyJxxx.xxxxxx
RP
OP
uji52
Self-Issued OP
5
ユーザ
すっごいザックリした説明
RP
俺がID Token作って
署名してやるぜ!
uji52
Chrome Extension
ってなんやねん
6
uji52
Chrome Extension
7
uji52
Chrome Extension
8
新しくウィンドウ立ち上がってアプリ的に動く
Advanced REST Client
uji52
Chrome Extension
9
右上のボタンを押したら動く
Authenticator
uji52
My Favorite Chrome Extension
10
ブラウザで出てるコンテンツを書き換える
wasavi
uji52
やりたいことは
Chrome ExtensionでSIOP
11
uji52
やる必要のあること
• 指定のページで使える
• openid://でキックされる
• RS256の署名ができる
• 署名鍵を安全に保管できる
• リクエストが送れる
12
uji52
とりあえず
できることを確認
13
uji52
Google Extensionの構成要素
• manifest.json
• Extensionの名前
• バージョン
• どんな動きするか
• どんなファイルを使うか
• htmlとかjsのファイル
• アイコン画像
14
uji52
サンプル実装1
15
{
"manifest_version": 2,
"name": "SIOP52",
"description": "Self-Issued OpenID Provider",
"version": "0.1",
"icons": {
"128": "128.png"
},
"browser_action": {
"default_title": "SIOP52",
"default_icon": "16.png",
"default_popup": "first.html"
}
}
manifest.json
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SIOPを作るで</p>
</body>
</html>
first.html
128.png
16.png
uji52
サンプル実装1
16
チェックして
持ってく
uji52
サンプル実装1
17
uji52
サンプル実装1
18
uji52
Extensionの種類
• browser action
• 右上に出てくるやつ
• どこのページでも出てくる
• page action
• アドレスバーの右端に出る(俺やったとき出んかったけど情報古いんかな)
• 特定のURLで使う等の利用
19
uji52
Extensionの種類
• Background
• ブラウザ起動時からずっと裏で開いてるページ
• Content Scripts
• 該当ページが開いたら走ってくれる
• DOMでページをいじれる
• Context Menu
• 右クリックで出てくるようなやつ
• TOEIC320点マンがGoogle翻訳で重宝してるやつ
20
uji52
サンプル実装2
21
"128": "128.png"
},
"background": {
"scripts":
[
"background.js"
]
},
"permissions": [
"tabs"
],
"page_action": {
"default_title": "SIOP52",
manifest.json
function validUri(tabId, changeInfo, tab) {
if (tab.url.indexOf("https://www") >= 0) {
chrome.pageAction.show(tabId);
}
};
chrome.tabs.onUpdated.addListener(validUri);
background.js
uji52
やる必要のあること
• 指定のページで使える
• openid://でキックされる
• RS256の署名ができる
• 署名鍵を安全に保管できる
• リクエストが送れる
22
uji52
今回のまとめ
• 案外簡単にできる
• マニフェストファイルって名前の割に分かりやすい
• 用語理解が苦しいが動かすのは簡単
• 残りのやりたいことできるかな?
• opened://でキックするのはbackgroundで行けそう
• 鍵の保管先とか無理じゃないか
• 公開に5$かかるらしい
• G社「5$かけて悪いもん公開する奴おらんやろ(楽観)」
23
uji52
続かない気がする
24

Weitere ähnliche Inhalte

Ähnlich wie Chrome ExtensionでSelf-Issued OpenID Provider

Open ID Connect(OIDC)をスライド形式で理解する
Open ID Connect(OIDC)をスライド形式で理解するOpen ID Connect(OIDC)をスライド形式で理解する
Open ID Connect(OIDC)をスライド形式で理解するDaisuke Takakuwa
 
Idcon gomi-052715-pub
Idcon gomi-052715-pubIdcon gomi-052715-pub
Idcon gomi-052715-pubHidehito Gomi
 
Idcon11 implicit demo
Idcon11 implicit demoIdcon11 implicit demo
Idcon11 implicit demoRyo Ito
 
実装して理解するLINE LoginとOpenID Connect入門
実装して理解するLINE LoginとOpenID Connect入門実装して理解するLINE LoginとOpenID Connect入門
実装して理解するLINE LoginとOpenID Connect入門Naohiro Fujie
 
The Latest Specs of OpenID Connect at #idcon 9
The Latest Specs of OpenID Connect at #idcon 9The Latest Specs of OpenID Connect at #idcon 9
The Latest Specs of OpenID Connect at #idcon 9Ryo Ito
 
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified IDNaohiro Fujie
 
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014Takashi Yahata
 

Ähnlich wie Chrome ExtensionでSelf-Issued OpenID Provider (8)

How FIDO Works
How FIDO WorksHow FIDO Works
How FIDO Works
 
Open ID Connect(OIDC)をスライド形式で理解する
Open ID Connect(OIDC)をスライド形式で理解するOpen ID Connect(OIDC)をスライド形式で理解する
Open ID Connect(OIDC)をスライド形式で理解する
 
Idcon gomi-052715-pub
Idcon gomi-052715-pubIdcon gomi-052715-pub
Idcon gomi-052715-pub
 
Idcon11 implicit demo
Idcon11 implicit demoIdcon11 implicit demo
Idcon11 implicit demo
 
実装して理解するLINE LoginとOpenID Connect入門
実装して理解するLINE LoginとOpenID Connect入門実装して理解するLINE LoginとOpenID Connect入門
実装して理解するLINE LoginとOpenID Connect入門
 
The Latest Specs of OpenID Connect at #idcon 9
The Latest Specs of OpenID Connect at #idcon 9The Latest Specs of OpenID Connect at #idcon 9
The Latest Specs of OpenID Connect at #idcon 9
 
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID
 
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
 

Mehr von Takeru Ujinawa

Mehr von Takeru Ujinawa (8)

Etherpad-lite導入
Etherpad-lite導入Etherpad-lite導入
Etherpad-lite導入
 
SHA-256を学ぼうとする
SHA-256を学ぼうとするSHA-256を学ぼうとする
SHA-256を学ぼうとする
 
CTFを楽しむやで
CTFを楽しむやでCTFを楽しむやで
CTFを楽しむやで
 
SSL入門
SSL入門SSL入門
SSL入門
 
SES
SESSES
SES
 
AWS SQS
AWS SQSAWS SQS
AWS SQS
 
AWS KMSと鍵の話
AWS KMSと鍵の話AWS KMSと鍵の話
AWS KMSと鍵の話
 
Cognito User Pool
Cognito User PoolCognito User Pool
Cognito User Pool
 

Chrome ExtensionでSelf-Issued OpenID Provider