asp.net Core BFF-Modus mit React-Redirect-Problem
<p>Ich versuche zu verstehen, wie das Routing vom Frontend zum Backend funktionieren soll.
Ich verwende das Paket duende.bff in asp.net Core 7 und richte es gemäß der Dokumentation und diesem Tutorial ein: https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by -using- duende-and-auth0 setup-a-net-bff-#creating-a-bff-api.
Jetzt versuche ich zu verstehen, wie man vom Frontend zum Backend umleitet, damit der Benutzer die Autorisierung mit Auth0 durchführen kann. </p>
<p>Ich habe asp.net Core mit einem React-Projekt verwendet und nur setupProxy.js geändert, um den Endpunkt hinzuzufügen, der an das Backend weitergeleitet werden soll: </p>
<pre class="brush:php;toolbar:false;">const { createProxyMiddleware } = require('http-proxy-middleware');const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORT ? https://localhost:${env.ASPNETCORE_HTTPS_PORT} :env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:48637';
const context = [
"/bff/login",
"/api",
"/signin-oidc",
"/signout-callback-oidc"
];
const onError = (err, req, resp, target) => {console.error(${err.message});}
module.exports = function (app) {const appProxy = createProxyMiddleware(context, {target: target,// Fehler behandeln, um einen Absturz der Proxy-Middleware zu verhindern, wenn// der ASP NET Core-Webserver nicht verfügbar istonError: onError,secure: false,/ / Kommentieren Sie diese Zeile aus, um Unterstützung für Proxy-Websockets hinzuzufügen//ws: true,headers: {Connection: 'Keep-Alive'}});
app.use(appProxy);};</pre>
<p>Dies führt immer noch zu einer Nichtübereinstimmung der Rückruf-URL.
Die Umleitungs-URI sollte https://localhost:8443/signin-oidc lauten, aber die Umleitungs-URI lautet: https://44466/signin-oidc. </p>
<p>Meine Login-Komponente ist jetzt sehr einfach: </p>
<pre class="brush:php;toolbar:false;">import React from 'react';
importiere LoginLogo aus './Login_logo';
import './Login_page.css';
const Login_page = () =>
zurückkehren (
<div className="login-page">
<div className='login-page-header'>
<LoginLogo />
<h1 className="title">sipster</h1>
</div>
<div className='login-page-input'>
<button className='login-button'> <a href="/bff/login">Login</a></button>
</div>
</div>
);
};
Standard-Anmeldeseite exportieren;</pre></p>
