SharePoint Online Add-in 開發簡介

做者：陳希章 發表於 2017年12月22日

在 再談SharePoint大局觀 中我提到了SharePoint開發的一些新的變化，這一篇文章我將講解SharePoint Add-in開發。其實早在2013年我也寫過這方面的文章，有興趣的朋友能夠參考

1. SharePoint Server 2013開發之旅（一）：新的開發平臺和典型開發場景介紹
2. SharePoint Server 2013開發之旅（二）：使用在線的開發人員網站進行SharePoint App開發
3. SharePoint Server 2013開發之旅（三）：爲SharePoint Server配置App開發、部署、管理環境

今天再回過去看這些文章，絕大部分的知識仍是能夠利用的。只不過，第二篇中提到的Napa這個在線的工具如今再也不提供了。如今的開發工具主要有Visual Studio 和 Visual Studio Code。

值得一提的是，如今肯定下來的SharePoint Add-in對應的是2013年那會兒說的SharePoint App，而如今SharePoint App是另有所指。我知道你已經暈掉了，但我但願你們不用糾結這個名字的問題，或者你能夠簡單地將他們理解爲同樣也沒有關係。

SharePoint Add-in開發概述

做爲SharePoint Add-in的定位來講，它是用來給SharePoint提供擴展性的功能的。例如增長一個WebPart，列表，或者自定義一個工做流等等，你的Add-in也能夠是一個徹底獨立的應用，其中會調用到SharePoint的API去完成某種程度的集成。

我知道不少人會以爲SharePoint其實很強大了，難道還有什麼須要咱們去擴展它的嗎？這個嘛，取決於你是否真的有深度使用SharePoint吧。咱們能夠看一下目前已經發布到Office Store中的SharePoint Add-in有哪一些吧。目前有1207個Add-in

關於SharePoint Add-in的詳細介紹，有興趣能夠參考 https://docs.microsoft.com/zh-cn/sharepoint/dev/sp-add-ins/sharepoint-add-ins，我這裏給你們指出的是：SharePoint Add-in分爲兩類：

1. SharePoint本身託管的，應用的內容（網頁，腳本）直接託管在SharePoint裏面，無需本身建立網站。
2. 提供商託管的，應用是一個獨立的網站，能夠經過本身喜歡的方式進行部署。

他們的區別以下

本文的最後會經過實例快速地分別建立這兩種Add-in。

安裝開發環境

開發SharePoint Online的Add-in，只須要在客戶端機器上安裝開發工具便可，無需再安裝服務器組件。開發工具我最推薦仍是Visual Studio 2017。

Visual Studio 2017中內置了Office 365相關的開發工具

完成安裝後，你能夠建立項目時直接使用相關的模板

建立SharePoint Developer Site（開發者站點）

上面提到了本地開發工具的安裝，爲了便於你的開發和部署測試工做。你還須要在SharePoint Online上面建立一個開發站點。爲了進行這個操做，你須要具備Office 365 全局管理員或者SharePoint Online管理員的權限。

若是你尚未Office 365的環境，請參考 這篇文章 的說明申請一個爲期一年的開發者環境。

你須要登錄到SharePoint 管理中心，建立一個「私人網站集」

這個網站建立後大體是下面這樣的

請注意，開發者網站能夠建立多個。

建立SharePoint App Catalog Site（應用程序目錄站點)

若是你有了開發者網站，你能夠本身進行開發、測試和調試。但若是你真的須要在公司內部讓其餘同事也能使用你開發的Add-in，則須要將你的成果發佈到SharePoint Online。咱們能夠經過建立應用程序目錄站點來實現這個需求。可是，應用程序目錄站點的建立不一樣於通常的站點，並且它在一個Office 365的租戶中只能建立一個。

若是是第一次操做，則能夠進入下面的界面

點擊「肯定」後進入詳細配置頁面

這個網站看起來是下面這樣的

建立、測試和部署SharePoint-hosted Add-in

萬事俱備，如今就能夠開始SharePoint Online的Add-in的開發了。

第一步，經過Visual Studio建立項目

第二步，輸入開發站點的路徑，而且選擇Add-in的類型

點擊「下一步」時須要進行身份認證，請提供有權限登陸到開發站點的用戶名和密碼，而後選擇「SharePoint Online」

點擊「完成」，這個嚮導會生成項目的結構和內容

這個項目使用了ASP.NET的技術來實現網頁(default.aspx)，而且有一個app.js文件動態讀取當前SharePoint的用戶名，而且顯示在頁面上。

爲了進行部署，項目中定義了一個功能（Feature），而且將其打包在一個包（Package）裏面。

做爲演示目的，我這裏不作任何代碼修改，選擇項目文件夾，在右鍵菜單中選擇「部署」，你可能會被要求再次輸入帳號和密碼。接下來請留意在輸出窗口的動態

------ 已啓動生成: 項目: SharePointAddInSample-SelfHosted, 配置: Debug Any CPU ------
------ 已啓動部署: 項目: SharePointAddInSample-SelfHosted, 配置: Debug Any CPU ------
活動部署配置: Deploy SharePoint Add-in
  因爲未指定預先部署命令，將跳過部署步驟。
  正在跳過卸載步驟，由於服務器上未安裝 SharePoint 外接程序。
  安裝 SharePoint 外接程序:
  正在上載 SharePoint 外接程序...
  正在進行安裝(00:00:05)
  外接程序已安裝在 https://office365devlabs-1be72383c7171f.sharepoint.com/SharePointAddInSample-SelfHosted/ 中。
  已成功安裝 SharePoint 外接程序。
  因爲未指定後期部署命令，將跳過部署步驟。
========== 生成: 成功或最新 1 個，失敗 0 個，跳過 0 個 ==========
========== 部署: 成功 1 個，失敗 0 個，跳過 0 個 ==========

咱們能夠直接點擊上面提到的一個地址，查看一下這個Add-in運行的效果

那麼，怎麼樣在咱們的站點中使用這個Add-in呢？首先，你須要先對當前這個項目進行打包。

請在項目文件夾上面點擊郵件，選擇「發佈」，而後點擊 「打包外接程序」

Visual Studio會在磁盤上面生成一個APP文件

接下來你能夠將這個文件上傳到開發者網站進行測試

上傳文件後點擊「肯定」

點擊「信任它」，而後須要等待一兩分鐘後，在網站的左側導航區域中會出現剛纔這個應用

點擊「SharePointAddinSample-SelfHosted」便可運行這個應用

若是咱們但願在其餘網站也能使用這個應用，則須要先把這個應用發佈到「應用程序目錄網站」中去。在左側選擇「適用於SharePoint的應用程序」，而後點擊 「上載」

而後你的網站「添加應用程序」的時候，就能看到這個自定義應用

而後選擇「信任它」

稍等片刻後，你也會在左側導航欄中看到一個新的應用連接（這個連接的文字你還能夠點擊「編輯連接」進行修改）

點擊連接後運行的效果以下

到這裏爲止，咱們就所有完成了一個最簡單的「SharePoint託管Add-in」的開發和部署過程。你可能會說，好像看起來界面不太美觀嘛，功能也太單一了（只是先試一下當前用戶名）等等，確實是這樣，但做爲一個入門教程我相信這已經夠了。

要知道，你在這個項目中還能夠添加不少東西

惟一須要注意的是，這裏的編程都是基於HTML和JavaScript的，不能使用服務器代碼（例如C#)和服務器對象模型。

建立、測試和部署部署Provider-hosted Add-in

下面再給你們快速介紹一下「提供商託管的Add-in」的開發過程吧。首先，你在建立項目的時候選擇「提供商託管」

目標仍是選擇「SharePoint Online」

而後，選擇你要建立的Web應用項目的類型，推薦選擇「ASP.NET MVC」

配置身份驗證選項，推薦用第一種

建立好項目後，請注意這個解決方案中有兩個項目了。第一個是SharePoint Add-in項目，第二個是外部那個網站的項目。

我一樣不作任何代碼修改直接進行部署的嘗試。由於這個網站應用是所謂的提供商託管，因此我須要本身去部署。我這裏選擇的是Azure提供的PaaS服務來實現。

點擊「建立」按鈕，Visual Studio會直接幫我部署

1>------ 已啓動生成: 項目: SharePointAddIn2Web, 配置: Release Any CPU ------
1>  SharePointAddIn2Web -> C:\Users\xxxx\source\repos\SharePointAddIn2\SharePointAddIn2Web\bin\SharePointAddIn2Web.dll
2>------ 發佈已啓動: 項目: SharePointAddIn2Web, 配置: Release Any CPU ------
2>已使用 C:\Users\xxxx\source\repos\SharePointAddIn2\SharePointAddIn2Web\Web.Release.config 將 Web.config 轉換爲 obj\Release\TransformWebConfig\transformed\Web.config。
2>已將自動 ConnectionString Views\Web.config 轉換爲 obj\Release\CSAutoParameterize\transformed\Views\Web.config。
2>已將自動 ConnectionString obj\Release\TransformWebConfig\transformed\Web.config 轉換爲 obj\Release\CSAutoParameterize\transformed\Web.config。
2>正在將全部文件都複製到如下臨時位置以進行打包/發佈:
2>obj\Release\Package\PackageTmp。
2>啓動 Web Deploy 以將應用程序/包發佈到 https://sharepointaddinsample.scm.azurewebsites.net/msdeploy.axd?site=SharePointAddInSample...

2>發佈成功。
2>Web 應用已成功發佈 http://sharepointaddinsample.azurewebsites.net/
========== 生成: 成功 1 個，失敗 0 個，最新 0 個，跳過 0 個 ==========
========== 發佈: 成功 1 個，失敗 0 個，跳過 0 個 ==========

接下來，有一個特殊的部署，由於你的這個網站是一個外部的，爲了獲得受權，你須要按照下面的說明註冊一個客戶端ID和密鑰。

註冊 SharePoint 加載項 2013

若是是在Visual Studio中調試，直接按下F5後，會動態生成一個客戶端ID和密鑰，而且自動修改好全部的信息。若是須要爲某個租戶建立客戶端ID和密碼，則須要用SharePoint管理員身份在某個SharePoint網站上面運行 _layouts/15/AppRegNew.aspx 這個頁面。而若是你的應用是要發佈到Office Store，則還須要專門在「賣家面板」上面去註冊。

我已經生成一個信息以下

回到Visual Studio中，修改Web.config文件和AppManifest.xml文件，而後選擇SharePoint Add-in這個項目文件夾，在右鍵菜單中選擇「發佈」

點擊「編輯」，而後輸入剛纔註冊獲得的信息

點擊「完成」後回到主界面，點擊「打包外接程序」，請注意這裏將Url改成https開頭

若是一切順利的話，咱們將獲得一個APP文件

安裝成功後你會在左側導航欄看到一個新的連接，點擊以後會跳轉到這個頁面

若是咱們研究一下此時瀏覽器的地址，它實際上是這樣的 https://sharepointaddinsample.azurewebsites.net/?SPHostUrl=https://office365devlabs.sharepoint.com/sites/dev&SPLanguage=zh-CN&SPClientTag=0&SPProductNumber=16.0.7206.1208，因此其實此時打開的是真正的你本身的網站，可是會把一些相關的上下文信息傳遞過來。

可是，即使確實是一個獨立的網站，在這個網站裏面也仍是能夠訪問到SharePoint的資源的，全部的操做都是經過SharePoint的Client API來實現的。下面是代碼範例

[SharePointContextFilter]
public ActionResult Index()
{
    User spUser = null;

    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

    using (var clientContext = spContext.CreateUserClientContextForSPHost())
    {
        if (clientContext != null)
        {
            spUser = clientContext.Web.CurrentUser;

            clientContext.Load(spUser, user => user.Title);

            clientContext.ExecuteQuery();

            ViewBag.UserName = spUser.Title;
        }
    }

    return View();
}

結語

本文完整地介紹了SharePoint Add-in開發的兩種模式，一種是SharePoint託管的，一種是提供商託管的。第一種不須要獨立的部署一個網站，它只能包含客戶端腳原本實現定製，並且會以一個iframe的形式嵌入在SharePoint的網頁中。第二種則能夠由開發者本身部署一個網站，經過在SharePoint上面註冊一個應用程序，來實現關聯。這一種方式能夠用更增強大的服務器編程，但也能夠經過客戶端API訪問到SharePoint在資源。