SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Similaire à 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
 

Similaire à 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
 

Plus de Takeru Ujinawa

Plus de 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
 

Dernier

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 

Dernier (8)

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 

Chrome ExtensionでSelf-Issued OpenID Provider