2016年2月25日星期四

Office 365 / SharePoint Online开发人员入门–第2部分:开发SharePoint加载项(应用程序)

这是有关Office 365 / SharePoint Online开发入门的第二篇文章。在这两对文章中,我讨论了一个过程,在该过程中,不熟悉该领域的开发人员可以使用试用环境和Azure虚拟机来入门。这个想法是你不’不需要MSDN订阅,现有的Office 365环境甚至开发机器即可运行–在上一篇文章中,我们创建了所有这些东西。现在它’是时候使用它们了。具体来说,我们’将获得一些在Azure VM中运行的加载项代码,这些代码可与SharePoint Online进行交流-我们’为此,请获取示例应用程序并配置我们的开发环境以运行该应用程序。我认为,这是学习使用现代SharePoint开发的好方法“provider-hosted” remote code –当然,它们可以在本地或云中使用。在开始之前,提醒一下这两篇文章的内容:

  1. 开始吧–第1部分:创建试用环境和VM
  2. 开始吧–第2部分:开发SharePoint加载项/应用程序(本文)

Deploying a 提供者托管 SharePoint Add-in in your VM

这里’概述了我们’ll cover here:

    • 在Office 365中创建开发人员网站
    • 在SharePoint Online的用户配置文件中完成一些信息(因为我们的实验演示将使用它)
    • 准备开发环境以在本地托管应用程序:
      • 创建一个本地IIS网站以运行应用程序
      • 创建自签名SSL证书并将其绑定到站点
    • 使用AppRegNew.aspx注册SharePoint加载项
    • 下载“app script part”来自Github的SharePoint加载项示例(来自Microsoft OfficeDev模式和实践库),并在VM中本地运行
    • 查看解决方案的工作方式

    这里 are the step to go through..

    在Office 365中创建开发人员网站集

    导航到Office 365的SharePoint管理区域,然后转到“Site Collections” page. 请点击“New”创建一个新的网站集:

    使用如下设置:

    创建网站后,检查是否可以在浏览器中访问它:

    在Office 365 / SharePoint Online中的用户配置文件中输入一些详细信息

    在Office 365租户的任何SharePoint页面中,单击右上角的用户照片,然后单击“About me”链接转到个人资料页面:

    请点击the “Edit profile” link:

    在字段中输入一些详细信息,例如“About me” and “Ask Me About”. Also use the “Change your photo”链接以更改您的照片:

    完成后,点击“Save all and close”.

    在IIS中创建一个用于应用托管的新站点

    打开IIS管理器,然后创建一个新的网站。使用以下设置:

    配置项
    名称 site
    路径 C:\ inetpub \ wwwroot \ site(N.B.“spsites”文件夹将需要创建)
    主机名 site

    The Add 网页site dialog should look like this:

    请点击“OK”完成创建IIS站点。

    将站点添加到您的主机文件:

    创建一个自签名SSL证书并将其应用于站点

    以管理员身份打开PowerShell窗口。使用以下命令创建自签名证书:

    新-SelfSignedCertificate -DnsName site -CertStoreLocation cert:\LocalMachine\My

    现在,我们需要将证书作为受信任的根证书安装在商店中,并将其应用于“spsites”IIS网站。使用以下步骤:

    1. 证书已导出到文件。
    2. 证书从文件系统上的文件安装到“受信任的根证书颁发机构” cert store.
    3. 证书已应用于IIS网站。

    去“Server Certificates”在IIS中,找到您刚刚创建的证书。请按照以下步骤中的顺序将证书导出到文件中:

    证书现在应导出为 spsite.cer.

    现在在文件系统上找到文件,然后右键单击> “Install Certificate”:

    请按照以下图像中的过程将证书安装到“受信任的根”证书存储中:

    IIS和SSL证书的最后一步是将其应用于站点。在IIS中找到网站,右键单击并选择“Edit bindings..”:

    在端口443上添加新的站点绑定– select the “spsites” certificate:

    请点击“OK”,并且该证书现在应该应用于该站点。您应该能够在 http:// _ site (尽管请注意,您将获得一个默认的IIS页面,因为此时没有站点在运行)。

    获得“app script part”Microsoft OfficeDev模式和实践库中的示例

    导航 //github.com/OfficeDev/PnP - 点击“Download zip” link:

    将压缩文件保存到虚拟机上的C:\ Code(创建文件夹,因为它赢得了’t已经存在),然后解压缩:

    现在以管理员身份运行Visual Studio 2015。请注意,在Azure虚拟机中打开可能需要一些时间。

    在Visual Studio中,使用“File > Open > Project/Solution…” to open the “App Script”Visual Studio中的zip示例–可以在以下位置找到:

    C:\ Code \ PnP-master \ PnP-master \ Samples \ Core.AppScriptPart \ Core.AppScriptPart.sln

    打开项目后,在Visual Studio的主项目的“站点URL”属性中输入Office 365开发人员站点的URL:

    应出现一个对话框–输入您的Office 365身份凭证:

    现在,Visual Studio应该已登录到Office 365中的开发人员站点。

    配置Web项目以匹配您的托管环境

    转到属性页面“Core.AppScriptPartWeb”项目,然后进入“Web”区。更改设置以匹配我们创建的IIS站点,然后单击“创建虚拟目录”按钮可将文件托管在其开发位置:

    保存Visual Studio项目。

    还编辑项目中的userprofileinformation.webpart文件–在示例中找到用于设置要通过Web部件链接的JavaScript文件的URL的行,并将其设置为http://_spsites/Core.AppScriptPartWeb/scripts/userprofileinformation.js:

    在SharePoint Online中为外接程序创建注册

    在开发人员站点的浏览器窗口中,导航到以下URL:

    [site] / _ layouts / 15 / AppRegNew.aspx

    ..so就我而言,这是:

    //chrisob1.sharepoint.com/sites/Dev/_layouts/15/AppRegNew.aspx

    请点击the “Generate”按钮为“客户端ID”和“客户端密钥”字段生成新值,然后完成以下其他信息:

    在下一个屏幕上,请确保 在安全的地方复制客户端ID和密钥 – you’ll need these later:

    现在返回Visual Studio并执行以下步骤:

    在Web项目中打开web.config文件,然后更新ClientId和ClientSecret应用程序设置值:

    在应用程序项目中打开AppManifest.xml文件,并更新ClientId属性:

    现在应将您的加载项配置为在开发中运行–在下一步中,我们将运行该应用程序进行测试。

    运行加载项

    在Visual Studio中按F5键运行该项目。如果出现提示,请输入您的Office 365身份凭证:

    应该提示您信任该应用程序:

    请点击“Trust It”,然后您将被带到该加载项的默认页面。请注意,此页面不是外接程序的关键部分–它只是以自动方式上传Web部件以使其可用。

    为此,请点击“Run scenario” button:

    现在点击“Back to Site” link:

    Edit the page, and add the web part deployed by the add-in to the page. 去add a web part, and you’ll find it in the “Add-in Script Part” category:

    将Web部件添加到页面后,它应该显示您的用户个人资料中的详细信息(如果有,则包括一张照片)– I don’t in this case!):

    如果您能做到这一点,那就做得好!现在让’考虑一下我们刚刚开始的工作。

    重要要点

    • 我们实现了真正对云友好的Web部件–它没有服务器端代码,因为它不是旧版Web部件。
      • 实际上,’只是现成的Script Editor Web部件–指向特定的JavaScript文件,该文件已实现了实际功能
    • JavaScript文件包含一些CSOM代码以获取用户个人资料详细信息
    • 实际上,JavaScript文件是从SharePoint远程托管的。就我们的开发方案而言,它正在IIS中运行–但我们可以将其发布到Azure或类似产品以用于生产(请记住,’d需要使用适当的URL等进行新的应用注册)。

    该代码的关键部分实质上是一些简单的JSOM代码,用于提取用户个人资料详细信息并输出到HTML:

    SNAGHTML3dc70b5

    以便’介绍了SharePoint中的远程代码和云友好开发领域。希望有人发现它有用!

    3条评论:

    oop说过...

    这是纯金!非常感谢克里斯。

    卵(对不起,我的读书)说过...

    克里斯,您好,现在引入了新的SharePoint框架,这些仍然有效吗?

    克里斯·奥'Brien说过...

    @Ova,

    是的,即使引入了SharePoint框架,外接程序模型仍然仍然有效。在框架中,所有内容都在当前用户和页面的上下文中运行客户端(JavaScript)。但是有时候为了安全起见,您希望将某些内容与页面隔离开(例如,以便您的小部件的内容可以显示用户'的收件箱无法从DOM中删除),因此SharePoint加载项身份验证模型(和加载项部件/应用程序部件)仍然可以很好地工作。此外,有时您希望将某些东西安装到站点并以这种方式访问​​,并且/或者最好使用服务器端。这些问题中的任何一项都可能导致您使用加载项模型。

    希望有帮助!

    COB。