Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
冬休みに作ったフロントエンドOIDC実装の解決策:vite-plugin-oidc
Search
kouki.miura
January 30, 2026
Programming
0
6
冬休みに作ったフロントエンドOIDC実装の解決策:vite-plugin-oidc
ViteプラグインでOpenID Connectプロトコルに準拠したOIDCスタブを実装しました。
そのプラグインの説明と簡単な使い方です。
kouki.miura
January 30, 2026
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
PHPでネイティブアプリ開発 - NativePHP
koukimiura
0
35
ビルトインウェブサーバーでPHP開発
koukimiura
0
44
生成AI × 仕様駆動開発 ~Kiroで見えた業務アプリ開発の未来~
koukimiura
0
120
Flutterで分数(Fraction)を表示する方法
koukimiura
0
170
HTMLで分数をどう表示する?MathMLの紹介と使い方
koukimiura
0
85
ゲームとかの最初に使い方を教えてくれるアレ
koukimiura
1
65
Claude Codeでゲーム開発デビュー
koukimiura
0
340
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
1
230
リソース制限環境下でのローカルLLM構築術
koukimiura
0
140
Other Decks in Programming
See All in Programming
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
560
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.6k
Architectural Extensions
denyspoltorak
0
250
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
Data-Centric Kaggle
isax1015
2
720
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
190
[AI Engineering Summit Tokyo 2025] LLMは計画業務のゲームチェンジャーか? 最適化業務における活⽤の可能性と限界
terryu16
2
570
高速開発のためのコード整理術
sutetotanuki
1
350
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
410
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
270
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
190
AgentCoreとHuman in the Loop
har1101
5
200
Featured
See All Featured
Docker and Python
trallard
47
3.7k
Building the Perfect Custom Keyboard
takai
2
680
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
53
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
130
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
4 Signs Your Business is Dying
shpigford
187
22k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
120
Transcript
冬休みに作ったフロントエンドOIDC実装の解決策 :vite-plugin-oidc 2026.01.30 SAPPORO ENGINEER BASE #13 冬休みアウトプットLT大会 三浦 恒樹
(MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
長男が飼っている ハリネズミのモンちゃん がアイコン INTRODUCE ・ドゥウェル株式会社 (医療系IT開発・導入会社)に所属 ・マネージャー(プレイング・マネージャー) ・TypeScript, Vue.js, Node.js,
Java,C#, PHP ・3児の父、休日は子どものサッカー観戦 ・参加している勉強会 札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 札幌すごいAI会、札幌IT石狩鍋、函館本線沿線勉強会 等 ・ヘビーローテーション(開発生産性に寄与する楽曲たち) ラックライフ(Hand,Naru,Believe)、BLUE ENCOUNT(ポラリス,Survivor) SHANK、Dizzy Sunfist
・OIDCとは? ・フロントエンドOIDC実装の課題 ・フロントエンドOIDC実装の解決アイデア ・vite-plugin-oidcの紹介 ・viteとは? ・viteプラグインとは? ・vite-plugin-oidcの使い方 ・vite-plugin-oidcのデモ ・2026年の2つの目標設定 ・vue-sapporoの紹介
・まとめ INDEX
OIDCとは? https://learn.microsoft.com/ja-jp/entra/architecture/auth-oidc
フロントエンドOIDC実装の課題 開発するアプリ OIDCサーバー
フロントエンドOIDC実装の解決アイデア 開発するアプリ OIDCサーバー= viteプラグインで解決! 環境作り・準備を意識しなくて よくなる=開発スピードアップ
vite-plugin-oidcの紹介 https://www.npmjs.com/package/vite-plugin-oidc 特徴 ・Authorization Code Flow + PKCE完全サポート ・Vite開発サーバーによるゼロ・コンフィギュレーション ・マルチ・ユーザー・アカウント対応
・カスタマイズ可能なエンドポイント、JWT、トークン期限 ・OIDCディスカバリー、JWKS、UserInfoエンドポイント対応 ・ロギング、エラーメッセージによる開発者サポート ・PKCE必須、リダイレクト先URI検証等のセキュリティ重視 ・イン・メモリによる軽量設計 メンテナー、コミッター募集! いっしょにOIDC開発環境にコントリビュートしていきませんか?
viteとは? https://ja.vite.dev/ ・vite=フランス語で「素早い」 ・発音は「ヴィート」 ・[vite]=高速なHMR、豊富な機能拡張を提供する開発サーバー ・[vite build]=Rollupでコードバンドル ・プラグインを通じてフレームワークやツールとの統合が可能 ※HMR: Hot
Module Replacement
viteプラグインとは? ・vite.config.tsで読み込まれる拡張機能 ・開発サーバーやビルド実行時に、読み込まれたプラグインの フック(コールバック)が呼び出される https://ja.vite.dev/guide/api-plugin
Viteプラグインとは? - フック一覧
vite-plugin-oidcの使い方 # pnpm add oidc-client-ts # pnpm add -D vite
vite-plugin-oidc 1.依存関係(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 を開発用に 依存関係はこれだけ!
vite-plugin-oidcの使い方 2.vite設定(vite.config.ts) 4ファイル クライアント(RP)設定 ユーザー設定 /idpでOIDCスタブ
vite-plugin-oidcの使い方 3.index.html
vite-plugin-oidcの使い方 4.index.ts /idpが認証サーバー
vite-plugin-oidcのデモ
2026年の2つの目標設定 テックブログはじめました。 週1ペース(52本/年)でアウトプットしていきます。 1 2 札幌のVue.jsエンジニアLT会 VueSapporoを6回/年開催。 Vue.jsエンジニアの皆さん、一緒にVue関連技術を学びましょう。
vue-sapporoの紹介
ご清聴ありがとうございました。 まとめ ・OIDC認証を含むフロントエンド開発時、OIDCサーバー(OP)のセットアップが課題 →Vite開発サーバーとOIDC連携すれば楽! : 解決策 →Vite開発サーバーでOIDCする為にプラグインを開発 : 冬休み(にも)作った ・vite-plugin-oidcはKiroで実装後、リファクタリングを進めている →メンテナー、コミッター募集中です。 ・コードをきれいにしたい、UT実装したい ・ログイン画面→ユーザー(プロファイル)選択画面に変えたい 等...