MSAL Browser でリダイレクトブリッジページを設定する

このガイドでは、MSAL Browser v5 で導入されたリダイレクトブリッジページを設定するためのフレームワーク固有の手順について説明します。リダイレクトブリッジが必要な理由の背景については、 v4 から v5 への移行ガイドを参照してください。

Warning

リダイレクトブリッジページは、ヘッダーと共に提供Cross-Origin-Opener-Policy。ブリッジページは、IdP が OAuth フローを完了した後に認証応答を受信する中継局です。ブリッジページに COOP ヘッダーが設定されている場合、ブラウザーは、通信チャネルをメインアプリケーションに切り替える参照コンテキストグループスワップを実行します。ブリッジが解決するように設計されている正確な問題を再導入します。

Important

新しいリダイレクトブリッジページを指すようにredirectUriを更新した後、Entra ID アプリ登録のリダイレクト URI も更新する必要があります。 URI は、パス、プロトコル、ポートなど、 正確に 一致する必要があります。アプリの登録を更新しないと、 redirect_uri_mismatch エラーが発生します。

Angular

リダイレクトブリッジコンポーネント (src/app/redirect/redirect.component.ts) を作成します。

import { Component, OnInit } from "@angular/core";
import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

@Component({
    selector: "app-redirect",
    standalone: true,
    template: "<p>Processing authentication...</p>",
})
export class RedirectComponent implements OnInit {
    ngOnInit(): void {
        broadcastResponseToMainFrame().catch((error: Error) => {
            console.error("Error broadcasting response to main frame:", error);
        });
    }
}

ルーティング構成に/redirectルートを追加します。リダイレクトルートはMsalGuardにある必要があり、リダイレクトページは、MsalInterceptorをトリガーする API 呼び出しを行わない (または MSAL API を呼び出す) ようにする必要があります。

import { RedirectComponent } from "./redirect/redirect.component";

const routes: Routes = [
    { path: "redirect", component: RedirectComponent },
    // ... your other routes
];

ビルドにコンポーネントが含まれていることを確認します。 Angular ルートコンポーネントを使用する場合、 angular.json アセットの変更は必要ありません。Angular CLI によってコンポーネントが自動的にバンドルされます。ルーティングコンポーネントではなく静的 redirect.html を使用する場合は、それを assets 配列に追加します。

// angular.json
{
    "projects": {
        "your-app": {
            "architect": {
                "build": {
                    "options": {
                        "assets": [
                            { "glob": "**/*", "input": "public" },
                            "src/redirect.html" // ← Add redirect bridge page
                        ]
                    }
                }
            }
        }
    }
}

サンプル：angular-standalone-sample と angular-modules-sample を参照してください。

Vite

Vite では、ビルド出力に別のエントリポイントとして redirect.html が含まれるように、マルチページ構成が必要です。

redirect.html を作成します（index.html の隣のプロジェクトルート内）:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Redirect</title>
</head>
<body>
    <p>Processing authentication...</p>
    <script type="module">
        import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

        broadcastResponseToMainFrame().catch((error) => {
            console.error("Error broadcasting response:", error);
        });
    </script>
</body>
</html>

vite.config.tsを更新して、2番目のエントリとしてリダイレクトページを追加します:

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, "index.html"),
                redirect: resolve(__dirname, "redirect.html"), // ← Redirect bridge entry
            },
        },
    },
});

開発中 (vite dev)、リダイレクトページは自動的に /redirect.htmlで提供されます。実稼働ビルドでは、Rollup によって出力ディレクトリに index.html と redirect.html の両方が出力されます。

サンプル：react-router-sample、typescript-sample、および b2c-sample を参照してください。

Webpack

Webpack には、専用のエントリポイントと、リダイレクトページの HtmlWebpackPlugin インスタンスが必要です。

作成src/redirect.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Redirect</title>
</head>
<body>
    <p>Processing authentication...</p>
    <!-- The redirect script bundle will be injected by HtmlWebpackPlugin (see redirect.js entry). -->
</body>
</html>

作成 src/redirect.js（Webpack のエントリポイント）:

import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

broadcastResponseToMainFrame().catch((error) => {
    console.error("Error broadcasting response:", error);
});

更新webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        main: "./src/index.js",
        redirect: "./src/redirect.js", // ← Redirect bridge entry
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/index.html",
            chunks: ["main"],
        }),
        new HtmlWebpackPlugin({
            filename: "redirect.html",
            template: "./src/redirect.html",
            chunks: ["redirect"], // ← Only include the redirect chunk
        }),
    ],
};

Next.js

Next.js ページは自動的にルートになるため、リダイレクトブリッジはページコンポーネントです。 セットアップは、ページルーターとアプリルーターの間で異なります。

Pages Router (`pages/`)

作成 pages/redirect.js:

import { useEffect } from "react";
import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

export default function Redirect() {
    useEffect(() => {
        broadcastResponseToMainFrame().catch((error) => {
            console.error("Error broadcasting response to main frame:", error);
        });
    }, []);

    return <p>Processing authentication...</p>;
}

MsalProviderでリダイレクトページを除外する_app.js:

// pages/_app.js
import { useRouter } from "next/router";
import { MsalProvider } from "@azure/msal-react";

function MyApp({ Component, pageProps }) {
    const router = useRouter();

    // The redirect page must NOT be wrapped in MsalProvider
    if (router.pathname === "/redirect") {
        return <Component {...pageProps} />;
    }

    return (
        <MsalProvider instance={msalInstance}>
            <Component {...pageProps} />
        </MsalProvider>
    );
}

アプリルーター (`app/`)

app/redirect/page.jsの作成— クライアントコンポーネント ("use client") である必要があります。

"use client";

import { useEffect } from "react";
import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

export default function Redirect() {
    useEffect(() => {
        broadcastResponseToMainFrame().catch((error) => {
            console.error("Error broadcasting response to main frame:", error);
        });
    }, []);

    return <p>Processing authentication...</p>;
}

ルートレイアウトで MsalProvider からリダイレクトルートを除外します。 app/layout.js が子要素を MsalProvider で囲む場合は、そのラップ処理をスキップするリダイレクトルート用に別のレイアウトを作成してください。

// app/redirect/layout.js — no MsalProvider wrapper
export default function RedirectLayout({ children }) {
    return <>{children}</>;
}

これにより、実行前に MSAL が認証応答ハッシュを処理できなくなります。

いずれのルーターにも next.config.js 変更は必要ありません。Next.js はページを自動的に処理します。

サンプル： ページルーターの例については、 nextjs-sample を参照してください。

Express.js/Node.js バックエンド

Express.js (または静的ファイルを提供する Node.js バックエンド) を使用する場合は、COOP ヘッダー なしで リダイレクトページを提供するようにサーバーを構成します。

const express = require("express");
const path = require("path");
const app = express();

// Serve the redirect bridge page WITHOUT COOP headers
app.get("/redirect", (req, res) => {
    res.sendFile(path.join(__dirname, "public", "redirect.html"));
});

// Set COOP headers for all other routes
app.use((req, res, next) => {
    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
    next();
});

app.use(express.static(path.join(__dirname, "public")));

サンプル：HybridSample を参照してください。

その他のリソース

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-07-02

MSAL Browser でリダイレクト ブリッジ ページを設定する

Angular

Vite

Webpack

Next.js

Pages Router (pages/)

アプリ ルーター (app/)

Express.js/Node.js バックエンド

その他のリソース

フィードバック

その他のリソース

MSAL Browser でリダイレクトブリッジページを設定する

Pages Router (`pages/`)

アプリルーター (`app/`)