JavascriptでMicrosoft Entra ID（旧Azure AD）認証を行いトークンを取得したい

実現したいこと

JavascriptでMicrosoft Entra ID（旧Azure AD）認証を行いトークンを取得したいと考えております。

発生している問題・分からないこと

リダイレクトURIが表示されるところまでいきますが、URLに付加されているパラメータが取得できないため、その先の処理に進めません。ソースコード内の「urlParams = new URLSearchParams(window.location.search);」の処理がうまくいっていないようです。

該当のソースコード

Javascript
1// Azure AD アプリケーションの情報を設定
2const CLIENT_ID = "XXXXXX";  // アプリケーション (クライアント) ID
3const TENANT_ID = "XXXXXX";  // テナントID 
4const REDIRECT_URI = "https://xxx.com/";  // リダイレクトURI
5const CLIENT_SECRET = "XXXXXX"; // クライアントシークレット(本番環境ではここで代入させない)
6
7const SCOPES = "User.Read"; // 必要なスコープ
8
9// エンドポイント
10const AUTHORIZATION_ENDPOINT = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/authorize`;
11const TOKEN_ENDPOINT = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`;
12
13// DOM 要素の取得
14const signInButton = document.getElementById("signInButton");
15const tokenDisplay = document.getElementById("tokenDisplay");
16
17// サインインボタンのクリックイベント
18signInButton.addEventListener("click", () => {
19    initiateLogin();
20});
21
22// ログインフローを開始
23function initiateLogin() {
24    const state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); // CSRF対策用のstate
25    sessionStorage.setItem('oauth_state', state); // stateをセッションストレージに保存
26
27    const authUrl = new URL(AUTHORIZATION_ENDPOINT);
28    authUrl.searchParams.append("client_id", CLIENT_ID);
29    authUrl.searchParams.append("response_type", "code"); // 認証コードフロー
30    authUrl.searchParams.append("redirect_uri", REDIRECT_URI);
31    authUrl.searchParams.append("scope", SCOPES);
32    authUrl.searchParams.append("state", state);
33    authUrl.searchParams.append("response_mode", "query"); // クエリパラメータでコードを返す
34
35    window.location.href = authUrl.toString(); // Azure AD の認証ページにリダイレクト
36}
37
38// ページロード時の処理
39window.onload = () => {
40    const urlParams = new URLSearchParams(window.location.search);
41    const code = urlParams.get("code");
42    const state = urlParams.get("state");
43    const error = urlParams.get("error");
44    const storedState = sessionStorage.getItem('oauth_state');
45
46    if (error) {
47        tokenDisplay.textContent = `認証エラー: ${error} - ${urlParams.get("error_description")}`;
48        console.error("認証エラー:", error, urlParams.get("error_description"));
49        return;
50    }
51
52    if (code && state && state === storedState) {
53        // 認証コードと state が存在し、state が一致する場合
54        sessionStorage.removeItem('oauth_state'); // stateを削除
55        getAccessToken(code);
56    } else if (code && state && state !== storedState) {
57        tokenDisplay.textContent = "CSRF攻撃の可能性: stateが一致しません。";
58        console.error("State mismatch. Potential CSRF attack.");
59    } else {
60        // 通常のページロード時、何も処理しない
61        console.log("初期ページロードまたは認証コードなし");
62    }
63};
64
65// アクセストークンの取得
66async function getAccessToken(code) {
67
68    const params = new URLSearchParams();
69    params.append("client_id", CLIENT_ID);
70    params.append("scope", SCOPES);
71    params.append("code", code);
72    params.append("redirect_uri", REDIRECT_URI);
73    params.append("grant_type", "authorization_code");
74    params.append("client_secret", CLIENT_SECRET); // クライアントシークレットを含める
75
76    try {
77        const response = await fetch(TOKEN_ENDPOINT, {
78            method: "POST",
79            headers: {
80                "Content-Type": "application/x-www-form-urlencoded",
81            },
82            body: params.toString(),
83        });
84
85        if (!response.ok) {
86            const errorData = await response.json();
87            throw new Error(`トークン取得エラー: ${response.status} - ${errorData.error_description || JSON.stringify(errorData)}`);
88        }
89
90        const data = await response.json();
91        console.log("アクセストークン取得成功:", data);
92        tokenDisplay.textContent = `アクセストークン:\n${data.access_token}\n\nIDトークン:\n${data.id_token || "なし"}\n\nリフレッシュトークン:\n${data.refresh_token || "なし"}`;
93
94        // リフレッシュトークンが必要な場合は、ここで保存するなどして利用
95        // (ただし、ブラウザのLocalStorage等に直接保存するのはセキュリティリスクがあるため注意)
96
97    } catch (error) {
98        console.error("トークン取得エラー:", error);
99        tokenDisplay.textContent = `トークン取得エラー: ${error.message}`;
100    }
101}

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Azure AD 認証 (MSALなし)</title>
5</head>
6<body>
7    <h1>Azure AD 認証サンプル (MSALなし)</h1>
8    <button id="signInButton">サインイン</button>
9    <pre id="tokenDisplay"></pre>
10
11    <script src="app.js"></script>
12</body>
13</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ネットで検索していろいろ試してみましたが、うまくいきませんでした。

＜追記：20250806＞
consoleを見たところ403エラーが出ているため、window.onload内の処理が行われていないことが判明しました。

補足

特になし

行動規範の内容に同意します

回答2件

自己解決

OAuth 2.0の認可コードフローを利用してコードを作成していましたが、
認可コードフロー + PKCEを利用するコードに変更することで解決しました。
（code_verifierとcode_challengeを利用する方法）

コードは下記になります。
元のコードにcode_verifierとcode_challengの処理を追加した感じになっています。
結果的にクライアントシークレットは使用していません。（使用したらエラーが出ました）

あと、Entra側の設定もいろいろ変更して試しましたので、うまくいった設定を記載しておきます。
■Authentication
・webとSPAの設定：Single-Page Application
・黙示的な許可およびハイブリッドフロー：「アクセストークン」「IDトークン」ともに「オフ」
・パブリッククライアントフロー：有効

Javascript
1// Azure AD アプリケーションの情報を設定
2const CLIENT_ID = "XXXXX"; // アプリケーション (クライアント) ID
3const TENANT_ID = "XXXXX";           // テナントID 
4const REDIRECT_URI = "http://localhost";   // リダイレクトURI
5// const CLIENT_SECRET = "XXXXX";     // クライアントシークレット(本番環境ではここで代入させない)
6const CODE_CHALLENGE = "XXXXX";
7const CODE_CHALLENGE_METHOD = "S256";
8const CODE_VERIFIER = "XXXXX";
9const SCOPES = "User.Read"; // 必要なスコープ
10
11// エンドポイント
12const AUTHORIZATION_ENDPOINT = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/authorize`;
13const TOKEN_ENDPOINT = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`;
14
15// DOM 要素の取得
16const signInButton = document.getElementById("signInButton");
17const tokenDisplay = document.getElementById("tokenDisplay");
18
19// サインインボタンのクリックイベント
20signInButton.addEventListener("click", () => {
21    initiateLogin();
22});
23
24// ログインフローを開始
25function initiateLogin() {
26    const state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); // CSRF対策用のstate
27    sessionStorage.setItem('oauth_state', state); // stateをセッションストレージに保存
28
29    const authUrl = new URL(AUTHORIZATION_ENDPOINT);
30    authUrl.searchParams.append("client_id", CLIENT_ID);
31    authUrl.searchParams.append("response_type", "code"); // 認証コードフロー
32    authUrl.searchParams.append("redirect_uri", REDIRECT_URI);
33    authUrl.searchParams.append("scope", SCOPES);
34    authUrl.searchParams.append("state", state);
35    authUrl.searchParams.append("code_challenge", CODE_CHALLENGE);
36    authUrl.searchParams.append("code_challenge_method", CODE_CHALLENGE_METHOD);
37    authUrl.searchParams.append("response_mode", "query"); // クエリパラメータでコードを返す
38
39    window.location.href = authUrl.toString(); // Azure AD の認証ページにリダイレクト
40}
41
42// ページロード時の処理
43window.onload = () => {
44    const urlParams = new URLSearchParams(window.location.search);
45    const code = urlParams.get("code");
46    const state = urlParams.get("state");
47    const error = urlParams.get("error");
48    const storedState = sessionStorage.getItem('oauth_state');
49
50    if (error) {
51        tokenDisplay.textContent = `認証エラー: ${error} - ${urlParams.get("error_description")}`;
52        console.error("認証エラー:", error, urlParams.get("error_description"));
53        return;
54    }
55
56    if (code && state && state === storedState) {
57        // 認証コードと state が存在し、state が一致する場合
58        sessionStorage.removeItem('oauth_state'); // stateを削除
59        getAccessToken(code);
60    } else if (code && state && state !== storedState) {
61        tokenDisplay.textContent = "CSRF攻撃の可能性: stateが一致しません。";
62        console.error("State mismatch. Potential CSRF attack.");
63    } else {
64        // 通常のページロード時、何も処理しない
65        console.log("初期ページロードまたは認証コードなし");
66    }
67};
68
69// アクセストークンの取得
70async function getAccessToken(code) {
71
72    const params = new URLSearchParams();
73    params.append("client_id", CLIENT_ID);
74    params.append("scope", SCOPES);
75    params.append("code", code);
76    params.append("redirect_uri", REDIRECT_URI);
77    params.append("grant_type", "authorization_code");
78    params.append("code_verifier", CODE_VERIFIER);
79//    params.append("client_secret", CLIENT_SECRET); // クライアントシークレットを含める
80
81    try {
82        const response = await fetch(TOKEN_ENDPOINT, {
83            method: "POST",
84            mode: "cors",
85            headers: {
86                "Content-Type": "application/x-www-form-urlencoded",
87            },
88            body: params.toString(),
89        });
90
91        if (!response.ok) {
92            const errorData = await response.json();
93            throw new Error(`トークン取得エラー: ${response.status} - ${errorData.error_description || JSON.stringify(errorData)}`);
94        }
95
96        const data = await response.json();
97        console.log("アクセストークン取得成功:", data);
98        tokenDisplay.textContent = `アクセストークン:\n${data.access_token}\n\nIDトークン:\n${data.id_token || "なし"}\n\nリフレッシュトークン:\n${data.refresh_token || "なし"}`;
99
100        // リフレッシュトークンが必要な場合は、ここで保存するなどして利用
101        // (ただし、ブラウザのLocalStorage等に直接保存するのはセキュリティリスクがあるため注意)
102
103    } catch (error) {
104        console.error("トークン取得エラー:", error);
105        tokenDisplay.textContent = `トークン取得エラー: ${error.message}`;
106    }
107}

投稿2025/08/18 05:37

poponta

総合スコア13

403エラーが返却されるのであればEntra側の設定に誤りはないでしょうか。
ググってみたりしてパッと出てきたものですが、以下は大丈夫でしょうか。
・ログインしたユーザーがEntraアプリケーションへのアクセスが許可されているか
Entraアプリケーションの「Authentication - サポートされているアカウントの種類」あたり？
・スコープがEntraアプリケーションの「API のアクセス許可」に登録されているか
・リダイレクトURLがEntraアプリケーションの「Authentication」のリダイレクトURLと一致しているか

また、consoleに表示された403エラーとはconsole.error("認証エラー:", error, urlParams.get("error_description"));によって表示されたものでしょうか。
エラーメッセージの全てを知りたいです。

投稿2025/08/06 03:29

saborion

総合スコア4

poponta

2025/08/06 03:52

ご回答ありがとうございます。エラーメッセージは“https://xxx.com//favicon.ico 403 (Forbidden)”です。

saborion

2025/08/06 04:21 編集

そのエラーメッセージ自体は今回の認証処理とは関係なさそうですね。以下のような状況であっていますか？あっている場合、https://xxx.com/ へリダイレクトする際のURLはどうなっていますか？ドメイン部を省略したURLすべてを知りたいです。・ブラウザのURLにhttps://xxx.com/ を入力し、アクセス・コンソールに"初期ページロードまたは認証コードなし"と表示される・サインインボタンをクリックする・Entraの認証ページにリダイレクトする・ログイン情報を入力する→成功・https://xxx.com/ にリダイレクトする・ここで.onloadの処理が実行されるが、stateやcode、errorなどのパラメータが取得できない

poponta

2025/08/06 05:53

ご回答ありがとうございます。状況は記載していただいたとおりの動作です。ネットでいろいろ調べたところ、リダイレクトURLの設定が間違っていることが分かりました。 PCにXamppを入れて動作確認をしていますが、スキル不足でリダイレクトURLを実際のシステムのURLをhtmlとEntraに設定していました。そこで、htmlのリダイレクトURLを“http://localhost”に変更し、EntraのリダイレクトURLも“http://localhost”に変更してもらい動作させたところ、403エラーは出なくなりましたが“chrome-error://chromewebdata/”なるエラーが出るようになりました。ブラウザはEdgeです。

poponta

2025/08/07 03:59

＜追記：20250807＞ “chrome-error://chromewebdata/”なるエラーはキャッシュクリアで解決しました。 66行目の“getAccessToken”処理まで進むようになりましたが、実行すると “POST https://login.microsoftonline.com/XXXXXX/oauth2/v2.0/token 400 (Bad Request)” がconsoleに表示され、 “トークン取得エラー: Error: トークン取得エラー: 400 - AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost'. Trace ID: ～at getAccessToken”というエラーが出てしまいました。

saborion

2025/08/08 01:52

CORSが許可されていないといったようなエラーのようですね。 Entraの設定画面から以下の設定を行い、サインインするとどうなりますか？ Authentication (Preview) > 設定タブ > 「パブリッククライアントフローを許可する」を「有効」に変更する > 保存以下のドキュメントを参考にしました。フロントから直接認証するケースについてはあまり詳しくないのですが、要点は以下のように思いました。・Entraは機密クライアントとパブリッククライアントそれぞれに向けた認証方法を提供している・今回の仕組みはJSによって構築されており、シークレット情報を安全に保持できない　→そのためパブリッククライアントとして扱われる・パブリッククライアントの場合は先の認証設定が必要となる https://learn.microsoft.com/en-us/entra/identity-platform/msal-client-applications#when-should-you-enable-allow-a-public-client-flow-in-your-app-registration https://learn.microsoft.com/ja-jp/azure/healthcare-apis/register-application

poponta

2025/08/12 00:28

ご回答ありがとうございます。 Entraの設定はシステム部に対応してもらっているのですが、今週はお盆休みで対応不可とのことで来週早々に試してみます。

poponta

2025/08/12 00:49

＜追記：20250812＞ご回答をいただく前にシングルページアプリケーションの設定が必要と思い、Entraで'Authentication'->'Single-Page Application'）に'http://localhost'を追加してもらい試したところ、下記のエラーが出ました。 invalid_request AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

poponta

2025/08/13 02:43

システム部の方に“Authentication (Preview) > 設定タブ > 「パブリッククライアントフローを許可する」を「有効」に変更する > 保存”の設定を対応してもらえました。実行したところ、8/7の状況と同じになりました。 “POST https://login.microsoftonline.com/XXXXXX/oauth2/v2.0/token 400 (Bad Request)”が表示される。 “トークン取得エラー: Error: トークン取得エラー: 400 - AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost'. Trace ID: ～at getAccessToken”というエラーが出る。といった状況です。

saborion

2025/08/13 03:46

こちらの記事の解決方法はどうでしょうか。どちらの方法もリクエストヘッダーにはoriginパラメータを付与しましょうということのようです。 https://teratail.com/questions/330746 https://stackoverflow.com/questions/76438571/azure-api-aadsts9002326-cross-origin-token-redemption-is-permitted-only-for-t

poponta

2025/08/13 06:17

ご回答ありがとうございます。 mode: 'cors',を追加してみましたが、状況は同じでした。 “POST https://login.microsoftonline.com/XXXXXX/oauth2/v2.0/token 400 (Bad Request)”

poponta

2025/08/18 05:41

saborionさまいろいろご助言をいただき、ありがとうございました。参考にさせていただいたお陰で、別記のとおり無事解決することができました。お忙しいところお付き合いいただき申し訳ございませんでした。

行動規範の内容に同意します

あなたの回答