asp.net-core - 如何在 Fable Elmish SPA 中处理从后端重定向到身份验证提供程序

Question

我有一个 AspNetCore 后端 api(在 F# 和 Giraffe 中)，它使用 AzureAD 身份验证和 Microsoft.AspNetCore.Authentication.AzureAD.UI、有状态 session 存储和 https only cookie。

前端是使用 Fable 编译为 js 的 Elmish SPA。

如果我只是在 url 栏中输入后端的 protected 端点，一切正常，如果尚未登录，我将重定向到 login.microsoft 端点，使用 clientID 等，成功登录后，原始请求完成，我得到了 protected 端点的响应。

但是，如果我尝试从 SPA 代码访问相同的端点，例如:使用 fetch 或使用 Fable.Remoting，如果未登录，后端仍会重定向，但重定向到 login.microsoft 的请求不再有效。
使用 Fable.Remoting 有一个 CORS header ，登录端点拒绝。如果我使用 nocors 发送 fetch，登录端点会收到 200 OK 响应，但没有响应正文(例如，登录页面没有 html 代码)，而且似乎什么也没发生。

我只是不知道在 SPA 方面应该如何处理，并且无法真正找到任何相关信息。如果从 Fable.Remoting 启动与从浏览器 URL 栏启动，为什么后端会在重定向中包含 CORS header ？没有响应正文的 fetch-ed 响应有什么问题？
我可以只将 js 代码写入我的客户端，但甚至无法弄清楚在纯 js SPA 中如何处理。

还在生产中尝试了整个事情，从等式中删除 webpack devServer 代理，但一切都保持不变。

Answer 1

首先，在 Giraffe 中创建“登录”和“退出”路由:

        /// Signs a user in via Azure
        GET >=> routeCi "/signin" 
            >=> (fun (next: HttpFunc) (ctx: HttpContext) ->
                if ctx.User.Identity.IsAuthenticated
                then redirectTo false "/" next ctx 
                else challenge AzureADDefaults.AuthenticationScheme next ctx
            )

        /// Signs a user out of Azure
        GET >=> routeCi "/signout" 
            >=> signOut AzureADDefaults.AuthenticationScheme 
            >=> text "You are signed out."

接下来，您需要配置 webpack “devServerProxy”。这是我当前的寓言应用程序的配置方式:

    // When using webpack-dev-server, you may need to redirect some calls
    // to a external API server. See https://webpack.js.org/configuration/dev-server/#devserver-proxy
    devServerProxy: {
        // delegate the requests prefixed with /api/
        '/api/*': {
          target: "http://localhost:59641",
          changeOrigin: true
        },
        // delegate the requests prefixed with /signin/
        '/signin/*': {
          target: "http://localhost:59641",
          changeOrigin: true
        },
        // delegate the requests prefixed with /signout/
        '/signout/*': {
          target: "http://localhost:59641",
          changeOrigin: true
        }
    },

这将允许您提供来自 SPA 的登录链接:

a [Href "/signin"] [str "Sign in"]

现在，当用户加载您的应用程序时，您可以立即尝试拉回一些用户信息(此路线应该需要身份验证)。如果请求(或任何其他请求)失败并显示 401，您可以提示用户使用您的登录链接“登录”。
最后，你的开发环境的 Azure 应用程序注册应该指向你的 Web Api 的端口(听起来你已经这样做了)。