冬休みに作ったフロントエンドOIDC実装の解決策：vite-plugin-oidc

ViteプラグインでOpenID Connectプロトコルに準拠したOIDCスタブを実装しました。
そのプラグインの説明と簡単な使い方です。

Transcript

1. 冬休みに作ったフロントエンドOIDC実装の解決策 ：vite-plugin-oidc 2026.01.30 SAPPORO ENGINEER BASE #13 冬休みアウトプットLT大会 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
2. 長男が飼っている ハリネズミのモンちゃん がアイコン INTRODUCE ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイング・マネージャー） ・TypeScript, Vue.js, Node.js, Java，C#, PHP ・３児の父、休日は子どものサッカー観戦 ・参加している勉強会 　札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 　クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 　札幌すごいAI会、札幌IT石狩鍋、函館本線沿線勉強会　　等 ・ヘビーローテーション（開発生産性に寄与する楽曲たち) 　ラックライフ(Hand,Naru,Believe)、BLUE ENCOUNT(ポラリス,Survivor) 　SHANK、Dizzy Sunfist
3. ・OIDCとは？ ・フロントエンドOIDC実装の課題 ・フロントエンドOIDC実装の解決アイデア ・vite-plugin-oidcの紹介 ・viteとは？ ・viteプラグインとは？ ・vite-plugin-oidcの使い方 ・vite-plugin-oidcのデモ ・2026年の2つの目標設定 ・vue-sapporoの紹介 ・まとめ INDEX
4. OIDCとは？ https://learn.microsoft.com/ja-jp/entra/architecture/auth-oidc
5. フロントエンドOIDC実装の課題 開発するアプリ OIDCサーバー
6. フロントエンドOIDC実装の解決アイデア 開発するアプリ OIDCサーバー＝ viteプラグインで解決！ 環境作り・準備を意識しなくて よくなる＝開発スピードアップ
7. vite-plugin-oidcの紹介 https://www.npmjs.com/package/vite-plugin-oidc 特徴 ・Authorization Code Flow + PKCE完全サポート ・Vite開発サーバーによるゼロ・コンフィギュレーション ・マルチ・ユーザー・アカウント対応 ・カスタマイズ可能なエンドポイント、JWT、トークン期限 ・OIDCディスカバリー、JWKS、UserInfoエンドポイント対応 ・ロギング、エラーメッセージによる開発者サポート ・PKCE必須、リダイレクト先URI検証等のセキュリティ重視 ・イン・メモリによる軽量設計 メンテナー、コミッター募集！ いっしょにOIDC開発環境にコントリビュートしていきませんか？
8. viteとは？ https://ja.vite.dev/ ・vite=フランス語で「素早い」 ・発音は「ヴィート」 ・[vite]＝高速なHMR、豊富な機能拡張を提供する開発サーバー ・[vite build]=Rollupでコードバンドル ・プラグインを通じてフレームワークやツールとの統合が可能 ※HMR: Hot Module Replacement
9. viteプラグインとは？ ・vite.config.tsで読み込まれる拡張機能 ・開発サーバーやビルド実行時に、読み込まれたプラグインの 　フック(コールバック)が呼び出される https://ja.vite.dev/guide/api-plugin
10. Viteプラグインとは？ - フック一覧
11. vite-plugin-oidcの使い方 # pnpm add oidc-client-ts # pnpm add -D vite vite-plugin-oidc １．依存関係(npmパッケージ)追加 { "scripts": { "dev": "vite" }, "devDependencies": { "vite": "^7.3.1", "vite-plugin-oidc": "^0.0.4" }, "dependencies": { "oidc-client-ts": "^3.4.1" } } package.json 通常のOIDCクライアントと して必要なライブラリ viteとvite-plugin-oidc を開発用に 依存関係はこれだけ！
12. vite-plugin-oidcの使い方 ２．vite設定（vite.config.ts） 4ファイル クライアント(RP)設定 ユーザー設定 /idpでOIDCスタブ
13. vite-plugin-oidcの使い方 ３．index.html
14. vite-plugin-oidcの使い方 ４．index.ts /idpが認証サーバー
15. vite-plugin-oidcのデモ
16. 2026年の2つの目標設定 テックブログはじめました。 週１ペース（52本/年）でアウトプットしていきます。 1 2 札幌のVue.jsエンジニアLT会　VueSapporoを6回/年開催。 Vue.jsエンジニアの皆さん、一緒にVue関連技術を学びましょう。
17. vue-sapporoの紹介
18. ご清聴ありがとうございました。 まとめ ・OIDC認証を含むフロントエンド開発時、OIDCサーバー(OP)のセットアップが課題 　→Vite開発サーバーとOIDC連携すれば楽！　：　解決策 　　→Vite開発サーバーでOIDCする為にプラグインを開発　：　冬休み（にも）作った ・vite-plugin-oidcはKiroで実装後、リファクタリングを進めている 　→メンテナー、コミッター募集中です。 　　・コードをきれいにしたい、UT実装したい 　　・ログイン画面→ユーザー（プロファイル）選択画面に変えたい 　　等...