Zenn
🗝️

Azure Entra ID （Azure AD）で ログイン機能を実装する【OAuth】

2025/01/09に公開
Azure
OAuth
OIDC
Entra ID
tech

Azure Entra ID （Azure AD）で ログイン機能を実装する【OAuth】

MicrosoftアカウントでOAuthログインを実装していきます。

サービス名のおさらい

まず、Azureのサービス名についておさらいします。

サービス名の改称もあり、検索もしづらく初学者にとってはわかりにくかったので整理していきます（2025/01現在）

  • Azure Entra ID（旧Azure AD）
    • ユーザーやグループの権限管理を行う。
    • 以前は「Azure Active Directory（Azure AD）」と呼ばれていた。
    • 今回のメインとなるリソース
  • Microsoft Graph API
    • Microsoft 365やAzure Entra IDをはじめとするAzureのリソースへアクセスできるAPI
    • GraphQLと名前が似ていてややこしい

では、実際の設定手順に入っていきましょう。

Azure Entra IDの設定

まず、サービスの検索で「Entra ID」と検索します。

アプリの登録

  • 「追加」→「アプリの登録」をクリック。
  • 名前、アカウントの種類、リダイレクトURI（必要に応じて）を入力し、登録します。

サポートされているアカウントの種類の内訳

  • この組織ディレクトリのみに含まれるアカウント

    自分のAzure組織内のユーザーだけが対象。

  • 任意の組織ディレクトリ内のアカウント

    職場または学校アカウントを持つすべてのユーザーが対象

  • 任意の組織ディレクトリ内のアカウント + 個人用アカウント

    職場・学校アカウント、個人用Microsoftアカウント含めすべてのユーザーが対象。全てのMicrosoftアカウントに対して解放したい場合はこれを選択。

  • 個人用 Microsoft アカウントのみ

登録が完了したら、以下アプリケーションの設定に進みます。

「認証」でリダイレクトURIを指定

「認証」タブからOAuth認証後に遷移させたいリダイレクトURIを指定します。パスまで全て含めてください。

「証明書とシークレット」でクライアントシークレットの作成

アプリが認証できるように、クライアントシークレット（パスワードのようなもの）を作成します。
クライアントシークレットには有効期限（最長24ヶ月）があるので、期限切れ前に更新が必要です。
生成後に表示される「値」は一度しか表示されないので必ず保存しておきましょう。後で必要になります。

APIのアクセス許可

Microsoft Graph APIなどのリソースへのアクセス許可を設定します。

ログイン基本情報(emailやopenid, profile）の許可の方法

  1. 「アクセス許可の追加」をクリック
  2. 「Microsoft Graph」を選択
  3. 「委任されたアクセスを許可」を選択
  4. 「OpenId アクセス許可」から必要なリソースを選択

メールやカレンダーなどのOffice 365リソースにアクセスする場合

  1. 「アクセス許可の追加」をクリック
  2. 「Microsoft Graph」を選択
  3. 「委任されたアクセス」 または 「アプリケーションの許可」 を選択
    • 委任されたアクセス
      • 「ユーザーがログインしている状態」でしかアクセスできません。
      • 一般的なWebアプリやフロントエンド側でユーザー操作を伴うシーンに向いています。
    • アプリケーションの許可
      • 「ユーザーがいない状態」でも、サービスやプログラムとしてリソースにアクセスできます。
      • バッチ処理やデーモンアプリなど、サーバーサイドで動作し続けるアプリに向いています。
      • リフレッシュトークンやクライアント資格情報を使うことで、常時動作させることが可能です。
  4. 使用したいAPI権限（例：メール、カレンダー、ユーザープロファイルなど）を選択

アプリ側の実装

今回はAuth.jsを使ってMicrosoftアカウントによるOAuthログインを実装しました。
そこで、client idやsecretが必要になるのですが、何がどの値に対応するのか解説します
他のライブラリを使う場合も基本的に同じような変数設定が必要になると思います。

クライアントID
Azureポータルのアプリ登録ページにある「概要」タブを開くと表示される「アプリケーションID」がこれに相当します。

クライアントシークレット
「証明書とシークレット」の画面から発行したクライアントシークレットの「値」がこれに当たります。
シークレットIDではないので注意してください。

ISSUER（発行者）
Auth.jsのガイドラインには必要だと記載されていましたが、設定しなくても動作したので必要ありませんでした。

参考

https://learn.microsoft.com/ja-jp/entra/identity-platform/v2-oauth2-auth-code-flow

https://qiita.com/massie_g/items/fe7540161aa4a5f86bf5

https://qiita.com/ipppppei/items/7da1349bb50532b94f54#azure側の設定

採用情報

架電特化のAI電話SaaSを展開しているnocall.ai株式会社では、エンジニアを積極採用中です！
ジュニア層のエンジニアからリーダー職まで幅広く募集しています。

https://passionategeniushq.notion.site/cec8d81619524d218643e34d5e7431c6?pvs=4

https://passionategenius.com/

Discussion