Chrome ExtensionでSelf-Issued OpenID Provider

1. Chrome Extensionで Self-Issued OpenID Providerを作るやで(Day1) uji52

2. uji52 自己紹介 • uji52 • 好きなOIDCのフロー • Code Flow • 好きなExtension • wasavi • Advanced REST Client • JSON Formatter 2

3. uji52 Self-Issued OpenID Provider ってなんやねん 3

4. uji52 OpenID Connect 4 ユーザ 2.認証要求 4.認証情報・ID情報すっごいザックリした説明 ID Token eyJxxx.eyJxxx.xxxxxx RP OP

5. uji52 Self-Issued OP 5 ユーザすっごいザックリした説明 RP 俺がID Token作って署名してやるぜ！

6. uji52 Chrome Extension ってなんやねん 6

7. uji52 Chrome Extension 7

8. uji52 Chrome Extension 8 新しくウィンドウ立ち上がってアプリ的に動く Advanced REST Client

9. uji52 Chrome Extension 9 右上のボタンを押したら動く Authenticator

10. uji52 My Favorite Chrome Extension 10 ブラウザで出てるコンテンツを書き換える wasavi

11. uji52 やりたいことは Chrome ExtensionでSIOP 11

12. uji52 やる必要のあること • 指定のページで使える • openid://でキックされる • RS256の署名ができる • 署名鍵を安全に保管できる • リクエストが送れる 12

13. uji52 とりあえずできることを確認 13

14. uji52 Google Extensionの構成要素 • manifest.json • Extensionの名前 • バージョン • どんな動きするか • どんなファイルを使うか • htmlとかjsのファイル • アイコン画像 14

15. 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

16. uji52 サンプル実装1 16 チェックして持ってく

17. uji52 サンプル実装1 17

18. uji52 サンプル実装1 18

19. uji52 Extensionの種類 • browser action • 右上に出てくるやつ • どこのページでも出てくる • page action • アドレスバーの右端に出る(俺やったとき出んかったけど情報古いんかな) • 特定のURLで使う等の利用 19

20. uji52 Extensionの種類 • Background • ブラウザ起動時からずっと裏で開いてるページ • Content Scripts • 該当ページが開いたら走ってくれる • DOMでページをいじれる • Context Menu • 右クリックで出てくるようなやつ • TOEIC320点マンがGoogle翻訳で重宝してるやつ 20

21. 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

22. uji52 やる必要のあること • 指定のページで使える • openid://でキックされる • RS256の署名ができる • 署名鍵を安全に保管できる • リクエストが送れる 22

23. uji52 今回のまとめ • 案外簡単にできる • マニフェストファイルって名前の割に分かりやすい • 用語理解が苦しいが動かすのは簡単 • 残りのやりたいことできるかな？ • opened://でキックするのはbackgroundで行けそう • 鍵の保管先とか無理じゃないか • 公開に5$かかるらしい • G社「5$かけて悪いもん公開する奴おらんやろ(楽観)」 23

24. uji52 続かない気がする 24

Chrome ExtensionでSelf-Issued OpenID Provider

You are reading a preview.

Check these out next

Chrome ExtensionでSelf-Issued OpenID Provider

More Related Content

Similar to Chrome ExtensionでSelf-Issued OpenID Provider (6)

More from Takeru Ujinawa (8)

Recently uploaded (20)

Chrome ExtensionでSelf-Issued OpenID Provider