如今,Azure函数是一件很酷的事情,主要是因为它们’真是太有用了。它们可以比其他托管代码(例如WebJobs)便宜一些,但是它们’重新也很灵活。您可以定义一个在计时器上运行或在将项目添加到队列时运行的函数(就像WebJob),也可以定义一个在命中HTTP端点时执行的函数。在这方面’与Web API相似,但更简单且基础设施更少。如果页面或Web部件中的按钮需要执行某些操作’在服务器端更简单(也许使用OfficeDev PnP库中的方法),我真的很喜欢将按钮连接到Azure函数的想法。然后,我的点击处理程序将发布到函数’在端点上,将执行服务器端代码,然后客户端代码将接收响应。
我认为最好在SPFx Web部件中显示此内容–并演示如何在客户端和服务器之间传递数据。我们’我们将以让我们的Azure功能利用OfficeDev PnP核心库为例。具体来说,我的Web部件在网站中提供了一个现代页面,并添加了SPFx Web部件。–纯粹在客户端很难做到的两件事。一世’我将其分为两篇文章,但总的来说,’我试图在这里展示一些东西:
第1部分–设置,PnP Core的使用,CORS和连续部署(本文):
- Initial creation of 功能
- 部署功能代码(使用来自GitHub的持续部署)
- 允许在Azure函数上使用CORS,以便可以从JavaScript调用它(包括SPFx工作台的特殊条目)
- Use of SharePoint PnP Core library - via Azure 功能s NuGet support
- Use of App Settings (environment variables) in an Azure 功能
第2部分–从SPFx调用并传递数据(下一篇文章):
- Azure函数方面的代码(即,根据一些传递的参数创建现代页面的工作)
- SPFx端的代码
- 将数据传递给函数和设置正确的标题
- 从函数返回数据,并在我们的SPFx Web部件中显示成功/失败
总的来说,我们’有一个解决方案,可通过单击按钮创建现代的SharePoint页面–但是该模式可以用于任何您想要的。
Azure 功能s –.NET代码的不同类型和使用
提醒一下,在定义函数时,请指定触发器– these include:
- HTTPTrigger(我们’ll use here)
- 定时器触发–像执行WebJob一样,按计划执行一些操作
- 队列触发–将某些内容添加到队列时执行
- 其他很多–包括BlobTrigger和“Generic webhooks”(N.B.目前还不是你’d用于SharePoint webhooks)
当然,使用HTTPTrigger不会’无需响应按钮单击–您可以随时将某些内容发布到服务器端。但是,单击按钮就是我们’我会在这里使用。了解Azure 功能s的定价是一个好主意,尤其是在消费计划和App Service计划之间的区别。在大多数情况下,您的消费计划’除了可能需要大规模运行的生产实现和/或在App Service计划上运行现有资源时,我会更喜欢(您的成本将是小菜一碟)。反正’主题略有不同,您可以在以下网址阅读更多内容 Choose the correct service plan for Azure 功能s.
没有Visual Studio解决方案-它只是目录中文件的集合主文件是csx文件,在这里您不会获得IntelliSense支持您 can deploy other assemblies and make use of NuGet packages, but this is done in a different way
让’开始创建函数。
Create the Azure 功能 app
- Open the Azure portal, and find the option to create a new 功能 App.
- 指定应用名称以及您可能拥有的任何现有资源组和存储帐户(如果没有,则您’需要创建以下必备容器):
- 应用创建完成后,请在门户中找到它(例如,通过访问“recent”部分),然后点击进入。
- 请点击the “New 功能” button:
- 然后,我更喜欢使用“custom function” path:
- 找出“HttpTrigger-CSharp”模板(您可能只想使用下拉列表过滤到C#模板):
- 给函数起个名字– we’ll also leave the “Authorization level” as the default of “Function”:
- 请点击Create –您现在应该看到集成的编辑器:
- 您 can now play around with running the function –例如,考虑如何将数据传递给函数并返回。
您’我会发现集成编辑器非常适合进行一些初始播放。但是,随着您变得更加认真,我个人发现从源代码管理中进行一些连续部署非常困难,无论是否’的GitHub或Visual Studio Online。是的,您每次要测试更新的代码时都必须提交/签入–但这比a)使用集成编辑器和b)使用Kudu界面手动复制文件更好。如果源代码控制集成对您的需求有点沉重,请考虑同步选项’从OneDrive或Dropbox导入–我想很酷的东西,至少如果你不这样做的话’确实需要真正的源代码控制。
Deploying files to an Azure 功能 via GitHub integration (optional)
所以这是一个可选步骤,但是由于我们’re here let’经历高层次。唯一的复杂性是按正确的顺序执行操作,并确保您的文件夹“at the right level”关于Azure函数如何期望它’的文件。这个过程是’顺便说一下,与其他系统(例如Visual Studio Online)有很大的不同。完整的文档位于 //docs.microsoft.com/en-us/azure/azure-functions/functions-continuous-deployment, 但在这里’我的截图摘要:
- 首先创建一个自己的存储库:
- 然后将其克隆到您要在计算机上使用的目录:
- 现在,在VS Code中打开目录,并为您的函数添加文件– you need to obtain these by copying 从 the 功能 you created earlier. It’仅包含几个文件,因此我只在Azure门户和我在VS Code中创建的文件之间复制内容。在这一点上’只是这些文件的默认内容– 所以我建议做一个简单的代码更改 以帮助我们稍后检查部署是否正确进行(例如,对其中一个日志记录语句进行简单更改):
- 准备好文件后,返回Azure门户并找到“Deployment options”配置连续部署的链接:
- 请点击that link, then click the “Setup”按钮,然后选择GitHub:
- 现在完成指向GitHub存储库并提供身份验证详细信息的过程:
- 现在我们需要将文件提交到GitHub–您可以根据需要从命令行执行此操作,也可以使用VS Code进行如下操作:
- 签入代码后,检查门户中的文件应显示您的代码更改:
所以,我们’现在可以很好地开发我们的代码了。我们’不再局限于基于Web的编辑器 –相反,我们可以使用任何喜欢的编辑器,并将我们的Azure 功能文件正确存储在源代码管理中。
Enable CORS on the Azure 功能
下一步是确保可以从网页中的JavaScript调用我们的Function–这意味着必须添加CORS支持。即使对于能够使用SPFx工作台进行测试,这也至关重要,并且我们需要指定将使用的任何URL(包括本地工作台URL)。为此,请找到“CORS” setting in the “Platform features”您的职能领域:
进入该目录后,指定将托管JS代码的任何URL域,这些JS代码将调用您的Function–如下图所示,这通常是您的Office 365租户域,也是本地SPFx工作台URL(http:// _ localhost:4321):
请点击“Save” to store the settings. 您r Azure 功能 can now be called 从 SPFx.
通过NuGet添加SharePoint PnP Core组件
若要调用SharePoint PnP方法,最好的选择是对NuGet使用Azure 功能s支持–作为替代 可以 获取PnP DLL并将其上传到您的函数’s bin目录,但是NuGet方法更简单。第一次运行代码时,您指定为依赖项的任何NuGet软件包都会下载并安装到Function中’s directory.
This is done by adding a project.json file in the directory of your Azure 功能:
像这样添加内容以指定“SharePointPnPCoreOnline” NuGet package:
如果您之前配置了源代码管理集成,请记住’我将需要立即签入以便构建代码:
为SharePoint凭据配置应用程序设置
作为最后的准备步骤,我们’将添加一些“应用程序设置”变量以存储用于调用SharePoint(以创建现代页面)的用户名/密码。我们’之所以这样做,是因为我们 ’将使用SharePointOnlineCredentials(即简单的用户名和密码)向SharePoint进行身份验证。对于现实生活中的用途,您应该考虑使用应用程序身份验证,无论是SharePoint加载项种类还是Office 365 / Azure AD应用程序种类–在后一种情况下,您’d当然需要使用adal.js或类似的获取访问令牌来传递给您的函数 (更新– no longer. 您 can now use the AadHttpClient or MSGraphClient objects built into SPFx v 1.4.1 or later –这些可用于调用受AAD保护的Web API。看到 在SharePoint Framework中使用Azure AD保护的消费API)。 在这种情况下,我们’我要做两件事 一些 事物的安全性和可管理性:
- 确保我们的Azure功能需要以以下形式进行简单身份验证“API key” –调用代码必须提供此
- 将凭据存储为Azure功能的App设置以调用SharePoint– that way they’不要在任何地方进行硬编码或以明文形式存储在任何特定文件中
Configuring App Settings for a 功能 is just like doing it for any Azure web app:
- 转到“Application Settings” area within “Platform Features” in your 功能 app:
- 在那里,输入您要使用以下方式连接到SharePoint的用户名和密码的键/值:
- 请点击“Save”。这些值现在将可用于您的代码。
The corresponding C# code to use in your 功能 to fetch these values is this:
字符串ADMIN_PASSWORD_CONFIG_KEY ="SharePointAdmin密码";
字符串adminUserName = System.Environment.GetEnvironmentVariable(ADMIN_USER_CONFIG_KEY,EnvironmentVariableTarget.Process);
字符串adminPassword = System.Environment.GetEnvironmentVariable(ADMIN_PASSWORD_CONFIG_KEY,EnvironmentVariableTarget.Process);
概要
We’现在,完成设置步骤。我们的Azure功能已配置有CORS,可以调用SharePoint PnP Core库,具有一些用于凭据的应用程序设置,并已从GitHub进行了持续部署配置。在下一篇文章中,我们讨论双方使用的代码–TypeScript / SPFx代码来调用该函数,以及起作用的函数内部的代码-请参见 第2部分- calling 从 SPFx and passing data.