asp.net core bff mode avec problème de redirection React

Question

J'essaie de comprendre comment le routage du frontend au backend est censé fonctionner. J'utilise le package duende.bff dans asp.net core 7 et je l'ai configuré conformément à la documentation et à ce tutoriel : https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by -en utilisant-duende-and-auth0 setup-a-net-bff-#creating-a-bff-api. Maintenant, j'essaie de comprendre comment rediriger du frontend vers le backend afin que l'utilisateur puisse autoriser l'utilisation d'Auth0.

J'ai utilisé asp.net core avec un projet React et j'ai uniquement modifié setupProxy.js pour ajouter le point de terminaison qui doit être transféré au backend :

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';
    
    contexte const = [
    "/bff/connexion",
    "/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,// Gérer les erreurs pour empêcher le middleware proxy de planter lorsque// le serveur Web ASP NET Core n'est pas disponible surError : onError,secure : false,/ / Décommentez cette ligne pour ajouter la prise en charge du proxy websockets//ws: true,headers: {Connection: 'Keep-Alive'}});
    
    app.use(appProxy);};

Cela entraîne toujours une incompatibilité d'URL de rappel. L'URI de redirection doit être https://localhost:8443/signin-oidc, mais l'URI de redirection est : https://44466/signin-oidc.

Mon composant de connexion est désormais très simple :

importer React depuis 'react';
    importer LoginLogo depuis './Login_logo' ;
    importer './Login_page.css';
    
    const Login_page = () =>
    
        retour (
            <div className="page de connexion">
                <div className='login-page-header'>
                    <ConnexionLogo />
                    <h1 className="titre">sipster</h1>
                </div>
                <div className='login-page-input'>
                    <button className='login-button'> <a href="/bff/login">Connexion</a></button>
                </div>
            </div>
        );
    } ;
    
    exporter la page de connexion par défaut ;

Answer 1

Lorsque vous envoyez la demande en utilisant l'URL (port 44466), cela fonctionne comme prévu :

"/bff/login",
"/api",
"/signin-oidc",
"/signout-callback-oidc"

Le serveur de développement reconnaîtra qu'il ne s'agit pas d'un actif statique et transmettra votre demande à http://localhost:8443/.... comme solution de secours. DocumentConnexe

Semblable à la photo

Si vous redirigez sur le backend, il enverra un code statue 302 avec l'emplacement cible et une autre demande sera envoyée comme indiqué

Vous pouvez appuyer sur F12 pour sélectionner NetWork et regarder les requêtes que vous envoyez