10分(25分)でつくる社内Webツール / howto-oidc-webpage

Presented on 2023-03-28
情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP
https://corp-engr.connpass.com/event/274770/

Youtube:
https://youtu.be/OtgXGhpItPY

Transcript

1. ©2023 Kyash Inc. ©2023 Kyash Inc. 情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP 2023.03.28 Jun Watanabe @rela1470 10分でつくる社内Webツール
2. ©2023 Kyash Inc. ©2023 Kyash Inc. 情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP 2023.03.28 Jun Watanabe @rela1470 10分でつくる社内Webツール
3. ©2023 Kyash Inc. ©2023 Kyash Inc. 情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP 2023.03.28 Jun Watanabe @rela1470 25分でつくる社内Webツール
4. ©2023 Kyash Inc. ©2023 Kyash Inc. 4 4 ここから先、ほとんど投影しなかった 幻の資料です🙇
5. ©2023 Kyash Inc. 5 Kyash, Inc.
6. ©2023 Kyash Inc. ©2023 Kyash Inc. Jun Watanabe @rela1470 6 6 Kyash, Inc. Information System & Security Team Corporate Engineering #Sauna #PHP #Okhotsk
7. ©2023 Kyash Inc. ©2023 Kyash Inc. 7 7 コード書いてますか?
8. ©2023 Kyash Inc. ©2023 Kyash Inc. 8 8 GAS? Zapier等の自動化?
9. ©2023 Kyash Inc. ©2023 Kyash Inc. 9 9 もう少し背伸びして社内Webツールを!
10. ©2023 Kyash Inc. ©2023 Kyash Inc. 10 10 Kyashでの活用例
11. ©2023 Kyash Inc. Kyashでの活用例 プロダクト管理画面 11 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう
12. ©2023 Kyash Inc. Kyashでの活用例 オフィスの 入退室システム管理 12 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう
13. ©2023 Kyash Inc. Kyashでの活用例 PPAP対策ツール 13 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう
14. ©2023 Kyash Inc. Kyashでの活用例 Zoomのバーチャル背景 作成ツール 14 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう
15. ©2023 Kyash Inc. 15 今回の ゴール 1. 社内Webページが公開できている a. 社内メンバーであることが担保できる b. 社外の人から見えないようになっている 2. できるだけ運用コストがかからないようにする a. マネージド b. サーバーレス Today’s Goal
16. ©2023 Kyash Inc. 16 今回の技術スタック Bref Serverless AWS OpenID Provider 1 2 3
17. ©2023 Kyash Inc. 17 AWS 前提条件 1. ALBをhttpsで出せる a. Route53とかで適当なDomainが登録できる b. ACMとかでSSL証明書が出せる c. VPCのSubnetからInternetに出れる AWS Conditions ※初心者チュートリアル https://dev.classmethod.jp/articles/creation_vpc_ec2_for_beginner_1/ https://dev.classmethod.jp/articles/aws-web-server-https-for-beginner/
18. ©2023 Kyash Inc. Brefとは?　 https://bref.sh/ AWS LambdaでServerlessフレームワークを使ってPHPアプリケーションを実行させる LambdaはJava、Go、PowerShell、Node.js、C#、Python、Rubyに対応している PHPは公式では非対応なのでBrefでイチから環境構築を行う AWS LambdaでWebサイトを簡単に作れるツール 18 $_SERVER['HTTP_X_AMZN_OIDC_DATA']
19. ©2023 Kyash Inc. 19 Bref 前提条件 1. Brefが動く 2. PHPとComposerが動く 3. Serverless Frameworkが動く 4. Node.jsが動く 5. AWSリソースにアクセスできる Bref Conditions ※初心者チュートリアル https://dev.classmethod.jp/articles/serverless-first-serverlessframework/
20. ©2023 Kyash Inc. 20 OpenID 前提条件 1. OpenID Providerが準備できている a. OneLoginとかが...いいんじゃないかな... OpenID Conditions
21. ©2023 Kyash Inc. ライブコーディング composer require bref/bref composer require firebase/php-jwt ./vendor/bref/bref/bref init Brefとphp-jwtの初期設定 21
22. ©2023 Kyash Inc. ライブコーディング serverless.yml service: アプリ名 今回は corp-engr provider:region: AWSのリージョン 今回は ap-northeast-1 functions: エンドポイント名 今回は web serverlessの設定 22
23. ©2023 Kyash Inc. ライブコーディング 初回) serverless deploy 2分くらいかかります 2回目以降) serverless deploy function --function web デプロイ 23
24. ©2023 Kyash Inc. ライブコーディング スキーム: インターネット向け IP address: IPv4 VPC,アベイラビリティーゾーン: インターネットに出れるものを設定 セキュリティグループ: インバウンドの443を許可 リスナー: https (443) ターゲットグループ: Lambda関数に向けたものを用意 証明書の設定: 自分のドメインに適した証明書 ALBの作成 24 ※初心者チュートリアル https://dev.classmethod.jp/articles/alb-route53-acm-build/
25. ©2023 Kyash Inc. ライブコーディング レコードタイプ: A エイリアス: ON トラフィックのルーティング先: ALBのエイリアス Route53で証明書対応 25
26. ©2023 Kyash Inc. ライブコーディング トリガーを追加 トリガーの設定>ALB パス: * LambdaにALBトリガーを追加 26
27. ©2023 Kyash Inc. ライブコーディング OpenID Provider側で設定 OneLoginの場合 Configuration>Login URL: https://example.com/ Redirect URI’s: https://example.com/oauth2/idpresponse SSO>Token Endpoint: POST OpenID Connectの設定 27
28. ©2023 Kyash Inc. ライブコーディング アクションの追加>認証 認証: OIDC スコープ: 'openid' or ‘openid groups’ ←認可もする場合 OneLoginの場合 発行者: /oidc/2 認証エンドポイント: /oidc/2/auth トークンエンドポイント: /oidc/2/tokenユーザー情報エンドポイント: /oidc/2/me ALBにOpenID Connectの設定を入れる 28
29. ©2023 Kyash Inc. ライブコーディング $_SERVER['HTTP_X_AMZN_OIDC_DATA'] ドット区切りでヘッダのJSON、ペイロード、署名がそれぞれbase64エンコードされている この時点でペイロードjsonにそれらしき情報が入っているが、 まだ検証できていないので信頼しては駄目! OpenID Connectのユーザークレームヘッダを使う 29
30. ©2023 Kyash Inc. ライブコーディング php-jwt::decode public-keyのURLは https://public-keys.auth.elb.ap-northeast-1.amazonaws.com/{$oidc->kid} $jwt = JWT::decode($oidc, new Key($key, $header->alg)); JWTの正当性検証 30 ※公式マニュアル https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/listener-au thenticate-users.html
31. ©2023 Kyash Inc. ©2023 Kyash Inc. Thank you 2023.03.28 jun.watanabe @rela1470 31