7

我有一个 AspNetCore 后端 api（在 F# 中带有 Giraffe），它使用 AzureAD 身份验证和 Microsoft.AspNetCore.Authentication.AzureAD.UI、有状态会话存储和仅 https 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 代理，但一切都保持不变。

4

1 回答 1

1

首先，在 Giraffe 中创建“signin”和“signout”路由：

        /// 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”。这是我当前 Fable 应用程序的配置方式：

    // 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 的端口（听起来你已经这样做了）。

于 2020-07-27T03:27:14.950 回答