Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Jun Watanabe

March 28, 2023
Tweet

More Decks by Jun Watanabe

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide