🐱
App Service上のNext.jsアプリにNext Authを追加しAzure ADで認証する
Next Auth の追加
下記コマンドでインストール
yarn add next-auth
Next Auth のコンポーネントや API を追加
ドキュメント通りの作業で問題なく追加可能
AzureADProvider の設定
ここもドキュメント通りに作業すれば OK
TypeScript を使用していると環境変数に設定された Azure AD 関連の値を process.env から引っ張る際、TypeScript Language Server に怒られるので型定義ファイルに下記を追加しておくといい感じ
namespace NodeJS {
interface ProcessEnv extends NodeJS.ProcessEnv {
AZURE_AD_CLIENT_ID: string;
AZURE_AD_CLIENT_SECRET: string;
AZURE_AD_TENANT_ID: string;
}
}
Azure AD の構成
アプリの登録
アプリの登録から Web プラットフォームに以下 2 種類の URI を追加
| URI | 用途 |
|---|---|
| http://localhost:3000/api/auth/callback/azure-ad | ローカルデバッグ用 |
| https://<appservice-name>.azurewebsites.net/api/auth/callback/azure-ad | 本番用 |
※<appservice-name>は適宜置き換え
シークレットの作成
証明書・シークレットからシークレットを新規作成する。
App Service の構成
対象の AppService の構成 → アプリケーション設定から先ほど作成した Next Auth 用の環境変数を設定する。
| 変数 | 値 |
|---|---|
| AZURE_AD_CLIENT_ID | Azure AD に登録したアプリの ID |
| AZURE_AD_CLIENT_SECRET | 作成したシークレット値 |
| AZURE_AD_TENANT_ID | Azure AD に登録したアプリのテナント ID |
| NEXTAUTH_URL | https://<appservice-name>.azurewebsites.net |
Discussion