MSAL Browser'da yeniden yönlendirme köprüsü sayfasını ayarlama

Bu kılavuz, MSAL Browser v5'te tanıtılan yeniden yönlendirme köprüsü sayfasını ayarlamak için çerçeveye özgü yönergeler sağlar. Yeniden yönlendirme köprüsünün neden gerekli olduğuna ilişkin arka plan için bkz. v4'den v5'e geçiş kılavuzu.

Warning

Yeniden yönlendirme köprüsü sayfası üst bilgilerle sunulmamalıdırCross-Origin-Opener-Policy. Köprü sayfası, IdP OAuth akışını tamamladıktan sonra kimlik doğrulama yanıtını alan bir aracıdır. Köprü sayfasında COOP başlıkları ayarlanırsa, tarayıcı ana uygulamaya geri uzanan iletişim kanalını koparan bir tarama bağlamı grubu değişimi yapar ve böylece köprünün çözmek için tasarlandığı sorunun aynısını yeniden ortaya çıkarır.

Important

Yeni yeniden yönlendirme köprüsü sayfasına işaret etmek üzere güncelleştirdikten redirectUri sonra, Entra ID uygulama kaydınızdaki yeniden yönlendirme URI'sini de güncelleştirmeniz GEREKIR. Yol, protokol ve bağlantı noktası dahil olmak üzere URI tam olarak eşleşmelidir. Uygulama kaydının güncelleştirilememesi hatalara redirect_uri_mismatch neden olur.

Angular

  1. Yeniden yönlendirme köprüsü bileşenini oluşturun (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. /redirect Yönlendirme yapılandırmanıza yolu ekleyin. Yeniden yönlendirme yolu dışındaMsalGuardolmalıdır ve yeniden yönlendirme sayfası, MSAL API'lerini tetikleyen MsalInterceptor (veya başka bir şekilde çağıran) API çağrıları yapmamalıdır:
import { RedirectComponent } from "./redirect/redirect.component";

const routes: Routes = [
    { path: "redirect", component: RedirectComponent },
    // ... your other routes
];
  1. Derlemenin bileşeni içerdiğinden emin olun. angular.json Angular yol bileşeni kullanılırken varlık değişikliği gerekmez; Angular CLI bileşeni otomatik olarak paketler. Yönlendirilen bir bileşen yerine statik bir redirect.html tercih ediyorsanız, onu assets dizisine ekleyin:
// angular.json
{
    "projects": {
        "your-app": {
            "architect": {
                "build": {
                    "options": {
                        "assets": [
                            { "glob": "**/*", "input": "public" },
                            "src/redirect.html" // ← Add redirect bridge page
                        ]
                    }
                }
            }
        }
    }
}

Örnek: Bkz. angular-standalone-sample ve angular-modules-sample.

Vite

Vite, redirect.html öğesinin derleme çıktısına ayrı bir giriş noktası olarak dahil edilmesi için çok sayfalı bir yapılandırma gerektirir.

  1. Oluştur redirect.html proje kökünüzde (yanında 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>
  1. Güncelleştirme vite.config.ts yeniden yönlendirme sayfasını ikinci bir girdi olarak eklemek için:
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
            },
        },
    },
});

Geliştirme sırasında (vite dev), yeniden yönlendirme sayfası otomatik olarak /redirect.html adresinde sunulur. Üretim derlemelerinde Rollup, çıktı dizininde hem index.html hem de redirect.html oluşturur.

Örnek:React-router-sample, typescript-sample ve b2c-sample'a bakın.

Webpack

Webpack, yeniden yönlendirme sayfası için ayrılmış bir giriş noktası ve bir HtmlWebpackPlugin örnek gerektirir.

  1. Oluştur 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. Oluştur src/redirect.js (Webpack için giriş noktası):
import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

broadcastResponseToMainFrame().catch((error) => {
    console.error("Error broadcasting response:", error);
});
  1. Güncelleştirme 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 sayfalar otomatik olarak yol haline gelir, bu nedenle yeniden yönlendirme köprüsü bir sayfa bileşenidir. Kurulum , Sayfa Yönlendiricisi ile Uygulama Yönlendiricisi arasında farklılık gösterir.

Sayfa Yönlendiricisi (pages/)

  1. Oluştur 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>;
}
  1. _app.js içinde, yeniden yönlendirme sayfasını MsalProvider öğesinden hariç tutun:
// 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>
    );
}

Uygulama Yönlendiricisi (app/)

  1. Oluşturmak app/redirect/page.js — Bu bir İstemci Bileşeni olmalıdır ("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>;
}
  1. Kök düzeninizde yeniden yönlendirme rotasını MsalProvider öğesinden hariç tutun. app/layout.js, alt öğeleri MsalProvider içinde sarıyorsa, bunu atlayan yönlendirme rotası için ayrı bir düzen oluşturun:
// app/redirect/layout.js — no MsalProvider wrapper
export default function RedirectLayout({ children }) {
    return <>{children}</>;
}

Bu, broadcastResponseToMainFrame() çalıştırılmadan önce MSAL'nin kimlik doğrulama yanıtı hash'ini işlemesini engeller.

İki yönlendirici için de next.config.js hiçbir değişiklik gerekmez — Next.js sayfaları otomatik olarak sunar.

Örnek: Sayfa Yönlendiricisi örneği için nextjs-sample'a bakın.

Express.js / Node.js Arka Ucu

Express.js (veya statik dosyalar sunan herhangi bir Node.js arka ucu) kullanırken, sunucuyu COOP üst bilgileri olmadan yeniden yönlendirme sayfasına hizmet vermek üzere yapılandırın:

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

Örnek: Bkz. HybridSample.

Ek Kaynaklar

  • Last updated on