在不同主机上使用 SPA 和 AzureFunction 的 EasyAuth

Question

我正在尝试将 EasyAuth (aad) 与目前位于“localhost:8080”上的 SPA 以及托管在 Azure ({function-app}.azurewebsites.net。目的是让 SPA 调用 Azure 函数上的安全端点。因此，我将 Azure 函数注册为 AD 中的应用程序，并且 SPA 中的身份验证重定向到 Azure Function EasyAuth 端点似乎有效，但是通过 post_login_redirect_url 重定向回本地主机 SPA 不是。

我将 http://localhost:8080 添加到 AAD 注册应用程序作为允许的重定向 URI。但是，如果我完全符合 URL，我将被重定向回 {function-host}/.auth/login/done。是否期望 SPA 在与 azure 函数相同的主机名下运行，或者有没有办法配置设置以允许 SPA 主机的任何 URL？

行为

就行为期间的 HTTP 数据而言，登录成功后 .auth/login/aad/callback 在重定向到默认完成页面并停止之前加载以下内容。

响应头
- Location = {函数主机}/.auth/login/done
表单数据：
- state = http://localhost:8080
- code = 授权码
- id_token = 授权令牌

我是如何从 SPA 调用它的

function processAuthCheck(xmlhttp) {
    if (xmlhttp.status == 401) {
        url = "https://{function-app}.azurewebsites.net/.auth/login/aad?"
        + "post_login_redirect_url=" + encodeURI("http://localhost:8080");
        window.location = url;
    } else if (xmlhttp.status != 200) {
        alert("There is an error with this service!");
        return;
    }
    var result = JSON.parse(xmlhttp.responseText);
    console.log(JSON.stringify(result));
    return;
};

Answer 1

问题请参考以下步骤

注册 Azure AD 应用程序以通过简单的身份验证保护 azure 功能
注册client-side申请

一个。 Register single-page application

b。在隐式授权和混合流部分，selectID令牌和访问令牌。

c。配置 API 权限
Enable CORS in Azure function
代码

一个。使用 Implicit grant flow 在您的水疗应用程序中集成 Azure AD 身份验证。这样做之后，当用户访问您的应用程序时，他们需要输入他们的 AD 帐户以获取访问令牌

b。客户将此 accessToken 换成 'App Service Token'。它通过 POST 到 https://{app}.azurewebsites.net/.auth/login/aad 和内容 { "access_token" : "{token from Azure AD}" } 来实现。这将 return 返回 authenticationToken

c。在名为 x-zumo-auth 的 header 中使用 authenticationToken。使用 header.
向您的函数应用发出所有请求

详情请参考here and here. Regarding how to implement Azure AD in spa, please refer to here。

在不同主机上使用 SPA 和 AzureFunction 的 EasyAuth

EasyAuth with a SPA and AzureFunction on different hosts

azure-active-directory

azure-functions

easy-auth

行为

我是如何从 SPA 调用它的