Closed2
Next.js×Azure AD B2C｜認証機能の実装
waiリソースのデプロイ、構成
いつも通りMS様が公式ドキュメントを用意してくれている
wai実装
公式ドキュメントのサンプルアプリだとプレーンにJavaScriptを使ってる感じなんで、Next.jsみのある実装にしていく。
下記のリポジトリでNext.jsを使って遊んでいるのでここに組み込んでいく。
参考にさせていただいた偉大なリポジトリたち
/src/services/msal.ts
@azure/msal-browserのPublicClientApplicationインスタンスをここから漂わせる
/src/providers/auth/index.tsx
ログインユーザーのコンテキストを提供するプロバイダー
/src/pages/_app.tsx
アプリ全体で認証状態を管理できるよう_app.tsxにその仕組みを作る。主にやっていることは下記の３つ。
- MsalProviderを利用して、上述のPublicClientApplicationインスタンスをどこからでも参照できるようにする
- AuthProviderで囲って、どこからでもログインユーザーに対してアクセスできるようにする
- MsalAuthenticationTemplateでどのようにログインをさせるか（ポップアップ内、リダイレクト等）を設定
こんな感じでできてる。
書き漏らしがあるかも、落ち着いたらリポジトリの内容おさらいして追記しよう。
このスクラップは2023/06/16にクローズされました