React リダイレクトの問題を伴う asp.net core bff モード
P粉710478990
2023-09-01 19:22:18
<p>フロントエンドからバックエンドへのルーティングがどのように機能するかを理解しようとしています。
私は asp.net core 7 で duende.bff パッケージを使用しており、ドキュメントとこのチュートリアルに従ってこれを設定しています: https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by -duende-and-auth0 setup-a-net-bff-#creating-a-bff-api を使用します。
現在、ユーザーが Auth0 を使用して認証できるように、フロントエンドからバックエンドにリダイレクトする方法を理解しようとしています。 </p>
<p>React プロジェクトで asp.net core を使用し、setupProxy.js を変更してバックエンドに転送するエンドポイントを追加しただけです。</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/ログイン」、
「/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,// ASP NET Core Web サーバーが利用できない場合にプロキシ ミドルウェアがクラッシュしないようにエラーを処理しますonError: onError,secure: false,/ / プロキシ Websockets のサポートを追加するには、この行のコメントを解除します//ws: true,headers: {Connection: 'Keep-Alive'}});
app.use(appProxy);};</pre>
<p>それでもコールバック URL の不一致が発生します。
リダイレクト URI は https://localhost:8443/signin-oidc である必要がありますが、リダイレクト URI は https://44466/signin-oidc です。 </p>
<p>ログイン コンポーネントは非常にシンプルになりました: </p>
<pre class="brush:php;toolbar:false;">React を 'react' からインポートします。
'./Login_logo' から LoginLogo をインポートします。
'./Login_page.css' をインポートします。
const ログインページ = () => {
戻る (
<div className="ログインページ">
<div className='ログインページヘッダー'>
<ログインロゴ />
<h1 className="title">シップスター</h1>
</div>
<div className='ログインページ入力'>
<button className='login-button'> <a href="/bff/login">ログイン</a></button>
</div>
</div>
);
};
デフォルトのログインページをエクスポート;</pre></p>
URL (ポート 44466) を使用してリクエストを送信すると、期待どおりに動作します:
リーリー開発サーバーは、それが静的アセットではないことを認識し、リクエストをフォールバックとして
http://localhost:8443/....
にプロキシします。 ドキュメント関連写真に似ています
バックエンドでリダイレクトすると、ターゲットの場所を含む 302 スタチュー コードが送信され、次のように別のリクエストが送信されます
F12 を押して [ネットワーク] を選択し、送信したリクエストを確認できます。