从 spfx webpart 调用 azure 函数结果 401 未经授权

Question

我正在尝试从共享点 Web 部件调用受 AD 保护的 Azure 函数。但仍然得到 401 Unauthorized。感谢您的任何建议。我尝试了很多教程，但看起来即使是微软网站上的官方文档也不是最新的，因为Azure门户中的Azure功能没有身份验证和授权...

这是我所做的步骤：

在本地创建默认的azure函数。 Azure 函数是匿名的，仅返回字符串“Hello world”。

在Azure门户中创建azure函数并将azure函数从本地上传到云端。

使用浏览器/Powershell（Invoke-WebRequest）测试azure函数 - 工作正常，返回字符串“Hello World”

向 Azure Function 添加身份和授权：

身份提供商：Microsoft https://imgur.com/k2WCjyJ

使用名称创建新的应用程序注册：AuthenticationFunctionAppAZF

客户端机密设置名称 = MICROSOFT_PROVIDER_AUTHENTICATION_SECRET

Issuer_URL='https://login.microsoftonline.com/common/v2.0'

允许的令牌受众：8bdb826f-bbbc-4f6b-923a-63777a5c3550（注册的客户端ID）

客户端应用程序要求：仅允许来自应用程序的请求。本身

身份要求：允许任何身份的请求

租户要求：允许特定租户的请求，允许的租户是我租户的ID

在我的Azure功能（AuthenticationFunctionAppAZF）的应用程序注册（AuthenticationFunctionAppAZF）中，在身份验证中我输入：

在网络应用程序中：

'https://oauth.pstmn.io/v1/browser-callback - 用于使用邮递员进行测试' 'https://authenticationfunctionappazf.azurewebsites.net/.auth/login/aad/callback'

允许的代币

允许的 ID 令牌

设置支持的帐户类型：任何组织目录中的帐户（任何 Microsoft Entra ID 租户 - 多租户）

权限API： https://imgur.com/a/wnb47h8

在暴露API中： https://imgur.com/gAdpIc9

将应用程序 ID URI：更改为“https://tenantname.onmicrosoft.com/ClientID_of_AzureAppRegistration_of_My_Function”

添加范围： 用户模拟 作为用户访问

当我使用浏览器进行测试并转到此页面：'https://authenticationfunctionappazf.azurewebsites.net/.auth/login/aad/callback'然后我登录到azure门户，然后我尝试使用url调用我的函数url： 'https://authenticationfunctionappazf.azurewebsites.net/api/AuthenticationFunctionAppAZF？'

我得到正确的回应：“Hello world！”

然后我使用 yo 生成器创建我的 spfx webpart，这是我的代码，它使用 aadhttpclient 调用 azure 函数：

import * as React from 'react';
import { useState } from 'react';
import { AadHttpClient, IHttpClientOptions, HttpClientResponse } from '@microsoft/sp-http';
import { WebPartContext } from '@microsoft/sp-webpart-base';

export interface IHelloUserProps {
        context: WebPartContext;
}

export interface IHelloWorld {
        hello: string;
}

const HelloUser: React.FC<IHelloUserProps> = ({ context }) => {
        const [hello, setHello] = useState<IHelloWorld | null>(null);

        const fetchUserData = () => {
                console.log('Fetching user data...');
                if (!context) {
                        console.error('Context is undefined');
                        return;
                }

                console.log('Context:', context);
                if (!context.aadHttpClientFactory) {
                        console.error('aadHttpClientFactory is undefined');
                        return;
                }

                console.log('aadHttpClientFactory:', context.aadHttpClientFactory);

                const options: IHttpClientOptions = {
                        headers: {
                                'Accept': 'application/json;odata.metadata=none'
                        }
                };
                context.aadHttpClientFactory
                        .getClient('https://artetechnology.onmicrosoft.com/8bdb826f-bbbc-4f6b-923a-63777a5c3550')
                        .then((client: AadHttpClient): void => {
                                console.log('AadHttpClient obtained:', client);
                                client
                                        .get('https://authenticationfunctionappazf.azurewebsites.net/api/AuthenticationFunctionAppAZF?', AadHttpClient.configurations.v1, options)
                                        .then((response: HttpClientResponse): Promise<any> => {
                                                console.log('Response received:', response);
                                                return response.json();
                                        })
                                        .then((user: any): void => {
                                                console.log('User data:', user);
                                                setHello(user);
                                        })
                                        .catch((error: any): void => {
                                                console.error('Error parsing response:', error);
                                        });
                        })
                        .catch((error: any): void => {
                                console.error('Error getting AadHttpClient:', error);
                        });
        };

        return (
                <div>
                        <button onClick={fetchUserData}>Fetch User Data</button>
                        {hello ? <div>Hello, {hello.hello}</div> : <div>Loading...</div>}
                </div>
        );
};

export default HelloUser;

在我从 sharepoint webpart 本地工作台调用我的 Azure 函数后，出现以下错误： https://imgur.com/4dR3UIf 从 sharepoint webpart 调用后，我收到此错误： https://imgur.com/blcSALB

以下是 CORS 的设置： https://imgur.com/T6mdUtJ

Answer 1

我找到了解决方案，在 .getClient 中的 aadhttpclientFactory 代码中必须是 Azure Function 注册的 ID，并且在附加检查中的 Azure Function 身份验证中必须是： 允许来自特定客户端应用程序的请求（如果从 Sharepoint WebPart 调用 azure 函数，则必须插入 SharePoint Online 客户端可扩展性 Web 应用程序主体的 ClientID）或允许来自任何应用程序的请求（不推荐）

然后它甚至可以在本地工作台中工作