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ツール
   

   View Slide

2. ©2023 Kyash Inc. ©2023 Kyash Inc.
   情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP
   2023.03.28
   Jun Watanabe @rela1470
   10分でつくる社内Webツール
   

   View Slide

3. ©2023 Kyash Inc. ©2023 Kyash Inc.
   情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP
   2023.03.28
   Jun Watanabe @rela1470
   25分でつくる社内Webツール
   

   View Slide

4. ©2023 Kyash Inc.
   ©2023 Kyash Inc.
   4
   4
   ここから先、ほとんど投影しなかった
   幻の資料です🙇
   

   View Slide

5. ©2023 Kyash Inc.
   5
   Kyash, Inc.
   

   View Slide

6. ©2023 Kyash Inc.
   ©2023 Kyash Inc.
   Jun Watanabe
   @rela1470
   6
   6
   Kyash, Inc.
   Information System & Security Team
   Corporate Engineering
   #Sauna #PHP #Okhotsk
   

   View Slide

7. ©2023 Kyash Inc.
   ©2023 Kyash Inc.
   7
   7
   コード書いてますか?
   

   View Slide

8. ©2023 Kyash Inc.
   ©2023 Kyash Inc.
   8
   8
   GAS? Zapier等の自動化?
   

   View Slide

9. ©2023 Kyash Inc.
   ©2023 Kyash Inc.
   9
   9
   もう少し背伸びして社内Webツールを!
   

   View Slide

10. ©2023 Kyash Inc.
    ©2023 Kyash Inc.
    10
    10
    Kyashでの活用例
    

    View Slide

11. ©2023 Kyash Inc.
    Kyashでの活用例
    プロダクト管理画面
    11
    ［ 図やグラフ等を入れる範囲 ］
    上下左右に適度な余白を
    とることを推奨します
    カラムの分け方に合わせて
    ガイドを活用しましょう
    

    View Slide

12. ©2023 Kyash Inc.
    Kyashでの活用例
    オフィスの
    入退室システム管理
    12
    ［ 図やグラフ等を入れる範囲 ］
    上下左右に適度な余白を
    とることを推奨します
    カラムの分け方に合わせて
    ガイドを活用しましょう
    

    View Slide

13. ©2023 Kyash Inc.
    Kyashでの活用例
    PPAP対策ツール
    13
    ［ 図やグラフ等を入れる範囲 ］
    上下左右に適度な余白を
    とることを推奨します
    カラムの分け方に合わせて
    ガイドを活用しましょう
    

    View Slide

14. ©2023 Kyash Inc.
    Kyashでの活用例
    Zoomのバーチャル背景
    作成ツール
    14
    ［ 図やグラフ等を入れる範囲 ］
    上下左右に適度な余白を
    とることを推奨します
    カラムの分け方に合わせて
    ガイドを活用しましょう
    

    View Slide

15. ©2023 Kyash Inc.
    15
    今回の
    ゴール
    1. 社内Webページが公開できている
    a. 社内メンバーであることが担保できる
    b. 社外の人から見えないようになっている
    2. できるだけ運用コストがかからないようにする
    a. マネージド
    b. サーバーレス
    Today’s Goal
    

    View Slide

16. ©2023 Kyash Inc.
    16
    今回の技術スタック
    Bref
    Serverless
    AWS
    OpenID
    Provider
    1 2 3
    

    View Slide

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/
    

    View Slide

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']
    

    View Slide

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/
    

    View Slide

20. ©2023 Kyash Inc.
    20
    OpenID
    前提条件
    1. OpenID Providerが準備できている
    a. OneLoginとかが...いいんじゃないかな...
    OpenID Conditions
    

    View Slide

21. ©2023 Kyash Inc.
    ライブコーディング
    composer require bref/bref
    composer require firebase/php-jwt
    ./vendor/bref/bref/bref init
    Brefとphp-jwtの初期設定
    21
    

    View Slide

22. ©2023 Kyash Inc.
    ライブコーディング
    serverless.yml
    service: アプリ名
    今回は corp-engr
    provider:region: AWSのリージョン
    今回は ap-northeast-1
    functions: エンドポイント名
    今回は web
    serverlessの設定
    22
    

    View Slide

23. ©2023 Kyash Inc.
    ライブコーディング
    初回) serverless deploy 2分くらいかかります
    2回目以降) serverless deploy function --function web
    デプロイ
    23
    

    View Slide

24. ©2023 Kyash Inc.
    ライブコーディング
    スキーム: インターネット向け
    IP address: IPv4
    VPC,アベイラビリティーゾーン: インターネットに出れるものを設定
    セキュリティグループ: インバウンドの443を許可
    リスナー: https (443)
    ターゲットグループ: Lambda関数に向けたものを用意
    証明書の設定: 自分のドメインに適した証明書
    ALBの作成
    24
    ※初心者チュートリアル
    https://dev.classmethod.jp/articles/alb-route53-acm-build/
    

    View Slide

25. ©2023 Kyash Inc.
    ライブコーディング
    レコードタイプ: A
    エイリアス: ON
    トラフィックのルーティング先: ALBのエイリアス
    Route53で証明書対応
    25
    

    View Slide

26. ©2023 Kyash Inc.
    ライブコーディング
    トリガーを追加
    トリガーの設定>ALB
    パス: *
    LambdaにALBトリガーを追加
    26
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. ©2023 Kyash Inc.
    ライブコーディング
    $_SERVER['HTTP_X_AMZN_OIDC_DATA']
    ドット区切りでヘッダのJSON、ペイロード、署名がそれぞれbase64エンコードされている
    この時点でペイロードjsonにそれらしき情報が入っているが、
    まだ検証できていないので信頼しては駄目!
    OpenID Connectのユーザークレームヘッダを使う
    29
    

    View Slide

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
    

    View Slide

31. ©2023 Kyash Inc.
    ©2023 Kyash Inc.
    Thank you
    2023.03.28
    jun.watanabe @rela1470
    31
    

    View Slide