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

Question

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

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

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

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

我只是不知道在 SPA 方面应该如何处理，并且无法真正找到任何相关信息。如果从 Fable.Remoting 启动与从浏览器 URL 栏启动，为什么后端会在重定向中包含 CORS 标头？没有响应正文的 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 的端口（听起来您已经这样做了）。