Az átirányítási híd oldalának beállítása az MSAL Böngészőben

Ez az útmutató az MSAL Browser v5-ben bevezetett átirányítási hídoldal beállításához nyújt keretrendszerspecifikus utasításokat. Ha szeretné tudni, hogy miért van szükség az átirányítási hídra, tekintse meg a v4-5-ös migrálási útmutatót.

Warning

Az átirányítási bridge oldalt NEM szabad Cross-Origin-Opener-Policy fejlécekkel kiszolgálni. Az áthidaló oldal egy köztes oldal, amely megkapja a hitelesítési választ, miután az IdP befejezi az OAuth-folyamatot. Ha a hídoldalon COOP-fejlécek vannak beállítva, a böngésző böngészésikörnyezet-csoportváltást hajt végre, amely megszakítja a fő alkalmazáshoz vezető kommunikációs csatornát — így pontosan azt a problémát idézi elő újra, amelynek megoldására a híd készült.

Important

redirectUri Az átirányítási híd új oldalára mutató frissítés után frissítenie kell a Entra ID alkalmazásregisztráció átirányítási URI-ját is. Az URI-nak pontosan meg kell egyeznie – beleértve az elérési utat, a protokollt és a portot is. Az alkalmazásregisztráció frissítésének sikertelensége hibákhoz redirect_uri_mismatch vezet.

Angular

  1. Hozza létre az átirányítási híd összetevőt (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);
        });
    }
}
  1. Adja hozzá az útvonalat az /redirect útválasztási konfigurációhoz. Az átirányítási útvonalnak kívül kell lennie a MsalGuard, és az átirányítási oldalnak nem szabad olyan API-hívásokat indítania, amelyek aktiválnák MsalInterceptor (vagy más módon hívnák meg az MSAL API-kat):
import { RedirectComponent } from "./redirect/redirect.component";

const routes: Routes = [
    { path: "redirect", component: RedirectComponent },
    // ... your other routes
];
  1. Győződjön meg arról, hogy a build tartalmazza az összetevőt. Az Angular route összetevő használatakor nincs angular.json szükség eszközváltozásra – az Angular CLI automatikusan kötegeli az összetevőt. Ha az irányított összetevő helyett inkább statikust redirect.html szeretne használni, adja hozzá az eszköztömbhöz:
// angular.json
{
    "projects": {
        "your-app": {
            "architect": {
                "build": {
                    "options": {
                        "assets": [
                            { "glob": "**/*", "input": "public" },
                            "src/redirect.html" // ← Add redirect bridge page
                        ]
                    }
                }
            }
        }
    }
}

Minta: Lásd: angular-standalone-sample és angular-modules-sample.

Vite

A Vite többoldalas konfigurációt igényel, amely redirect.html külön belépési pontként szerepel a build kimenetében.

  1. Hozza létre a redirect.html fájlt a projekt gyökérkönyvtárában (a index.html mellett):
<!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>
  1. Frissítés vite.config.ts az átirányítási oldal második bejegyzésként való hozzáadásához:
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
            },
        },
    },
});

A fejlesztés során (vite dev) a rendszer automatikusan kiszolgálja az átirányítási oldalt a következő helyen /redirect.html: . Az éles buildekben a Rollup a kimeneti könyvtárban mind a index.html-t, mind a redirect.html-et előállítja.

Minta: Tekintse meg a react-router-mintát, a typescript-mintát és a b2c-mintát.

Webpack

A Webpack dedikált belépési pontot és egy HtmlWebpackPlugin példányt igényel az átirányítási oldalhoz.

  1. Létrehozás 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>
  1. Létrehozása src/redirect.js (a Webpack belépési pontja):
import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

broadcastResponseToMainFrame().catch((error) => {
    console.error("Error broadcasting response:", error);
});
  1. Frissítés 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 lapok automatikusan útvonalakká válnak, így az átirányítási híd egy lapösszetevő. A beállítás eltér a Pages-útválasztó és az alkalmazás-útválasztó között.

Pages Router (pages/)

  1. Létrehozáspages/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>;
}
  1. Az átirányítási oldal kizárása a következőből: MsalProvider in _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>
    );
}

Alkalmazás útválasztója (app/)

  1. Létrehozás app/redirect/page.js — ennek Client Componentnek ("use client") kell lennie:
"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>;
}
  1. Zárd ki az átirányítási útvonalat a MsalProvider gyökérelrendezésből. Ha a(z) app/layout.js a gyermekelemeket a(z) MsalProvider elembe csomagolja, hozzon létre egy külön elrendezést az átirányítási útvonalhoz, amely ezt kihagyja:
// app/redirect/layout.js — no MsalProvider wrapper
export default function RedirectLayout({ children }) {
    return <>{children}</>;
}

Ez megakadályozza, hogy az MSAL feldolgozsa a hitelesítési válasz kivonatát a futtatás előtt broadcastResponseToMainFrame() .

Egyik router esetében sem next.config.js nincs szükség módosításra – a Next.js automatikusan kiszolgálja az oldalakat.

Minta: Lásd a következőjs-mintát egy Pages Router-példához.

Express.js/Node.js háttérrendszer

Ha Express.js (vagy bármely statikus fájlokat kiszolgáló Node.js háttérrendszert) használ, konfigurálja a kiszolgálót úgy, hogy COOP-fejlécek nélkül szolgálja ki az átirányítási oldalt:

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")));

Minta: Lásd a HybridSample-et.

További források

  • Last updated on