AadHttpClient无法从受AAD保护的Azure函数检索数据

Question

我正在尝试从用C＃编写的自定义Azure函数中检索一些数据

[EnableCors]
[FunctionName("Authenticate")]
public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous, "get")]HttpRequestMessage req, TraceWriter log)
{
    var privateKey = new SHA512CryptoServiceProvider();
    var res = req.CreateResponse(req.Headers);
    res.Headers.Add("Access-Control-Allow-Credentials", "true");
    res.Headers.Add("Access-Control-Allow-Origin", req.Headers.GetValues("Origin").FirstOrDefault());
    return (IActionResult)res;
}

在Azure功能的配置中，我使用一条规则（https://localhost:4321）启用了CORS。这是本地托管的SharePoint工作台的正确URL。

我关注了Microsoft's tutorial on this，但收到以下错误消息：

sp-http.js:1570 Uncaught (in promise) Error: This operation cannot be performed until the AadTokenProvider is initialized.
    at AadTokenProvider.getToken (sp-http.js:1570)
    at sp-http.js:2414
    at ServiceScope.whenFinished (sp-loader-assembly_en-us.js:9861)
    at sp-http.js:2410
    at new Promise (<anonymous>)
    at AadHttpClient.fetch (sp-http.js:2409)
    at AadHttpClient.get (sp-http.js:2433)
    at AdalWebPart.render (AdalWebPart.ts:23)
    at AdalWebPart.BaseClientSideWebPart._renderWithAccessibleTitle (sp-webpart-base.js:1535)
    at sp-webpart-base.js:1369

这是我用来尝试获取数据的代码：

export default class AdalWebPart extends BaseClientSideWebPart<IAdalWebPartProps> {
    private authenticationClient: AadHttpClient;

    public render(): void {
        this.context.statusRenderer.displayLoadingIndicator(this.domElement, "Authenticating");

        this.authenticationClient.get(
            "https://morganstestauthfunction.azurewebsites.net/api/Authenticate",
            AadHttpClient.configurations.v1
        ).then(res => console.log(res.json()));
    }

    protected onInit(): Promise<void> {
        this.authenticationClient = new AadHttpClient(this.context.serviceScope, "ae63d423-1028-40bd-9032-bdefce20b82d");
        return Promise.resolve();
    }
}

我也尝试了this tutorial from Microsoft

中建议的方法

export default class IFrameHandler extends React.Component<any>{
    private remotePartyLoaded: () => void;

    public constructor(public props: any) {
        super(props);
        this.remotePartyLoaded = props.remotePartyLoaded;
    }

    public render() {
        return (
            <iframe
                src={"https://morganstestauthfunction.azurewebsites.net/api/Authenticate"}
                style={{ display: "none" }}
                onLoad={this.remotePartyLoaded.bind(this)}
            />
        )
    }
}


export default class AzureWebPart extends BaseClientSideWebPart<> {

    private azureCallback() {
        this.context.httpClient.get("https://morganstestauthfunction.azurewebsites.net/api/Authenticate",
            HttpClient.configurations.v1, {
                credentials: "include",
            }).then(console.log);
    }


    public render(): void {
        const element: React.ReactElement<any> = React.createElement(
            IFrameHandler,
            {
                remotePartyLoaded: this.azureCallback.bind(this)
            },
        );

        ReactDom.render(element, this.domElement);
    }
}

那个方法抛出这个：

  

无法加载https://morganstestauthfunction.azurewebsites.net/api/Authenticate：响应中“ Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“ include”时，该值必须为“ true”。因此，不允许访问来源“ https://localhost:4321”。

最终的最终目标是使用此Azure函数作为身份验证代理来验证SharePoint用户的身份，因此我需要将该函数与Azure AD集成。