使用GraphHttpClient呼叫Microsoft Graph介面 - GET

部落格地址：http://blog.csdn.net/FoxDave

使用GraphHttpClient類呼叫Microsoft Graph REST API，你可以使用GET，POST和PATCH請求（分別對應get()，post()和fetch()方法）。本文會講述如何構建一個使用GraphHttpClient的web部件（你可以在任何SharePoint Framework客戶端程式碼使用GraphHttpClient）。本篇主要講解GET請求的應用。

使用GET請求獲取Office 365組資訊

你可以使用get()方法來向Microsoft Graph構建一個REST請求，下面的示例演示瞭如何獲取Office 365的組列表。

建立一個新的web部件工程

1. 在你喜歡的目錄建立一個新的工程目錄，這裡我使用D盤根目錄。開啟CMD，輸入D:進入D盤根目錄，接著輸入命令mkdir hellograph-webpart來建立一個工程目錄。

2. 進入剛才建立的目錄，使用命令cd hellograph-webpart。

3. 在工程目錄建立SharePoint工程，通過使用Yeoman的生成器來實現。輸入命令yo @microsoft/sharepoint。

4. 如上圖所示，輸入完命令後會提示是不是傳送匿名資訊，一般這類的資訊我都會選否。之後會彈出建立SharePoint解決方案的嚮導。這裡需要輸入以下資訊：

>解決方案的名稱

>解決方案的路徑

>在彈出的提示的時候如果輸入y確認，則允許租戶管理員立即部署解決方案到所有的網站，而不用在網站中再執行任何功能部署和新增Add-in的步驟

>選擇web部件作為客戶端元件來建立

>輸入web部件的名稱

>輸入web部件的描述

>選擇指令碼框架，這裡可以直接輸入回車選擇預設的不使用

這裡我的設定如下圖。

5. 稍等幾分鐘等待解決方案建立完成。Yeoman生成器會構建web部件，構建完成之後你就可以使用自己的程式碼編輯器開啟該工程了，這裡我使用Visual Studio Code。

6. 接著輸入gulp serve命令確認它已經在本地的工作臺執行了。

為結果新增一個按鈕和佔位符

接下來，我們需要修改HTML，提供一個按鈕來獲取Office 365的組資訊。HTML還需要一個佔位符（placeholder）來顯示組的資訊。

1. 在Visual Studio Code中，開啟檔案/src\webparts\demoWp\DemoWpWebPart.ts。

2. 修改render()方法，新增一個按鈕和一個div用來獲取和展示組資訊。程式碼如下（TypeScript程式碼，不瞭解的可以看看介紹，很好理解）：

public render(): void {
   this.domElement.innerHTML = `
     <div class="${styles.helloGraph}">
     <div class="${styles.container}">
     <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
       <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
         <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
         <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
         <p class="ms-font-l ms-fontColor-white">${escape(this.properties.description)}</p>
         <a href="https://aka.ms/spfx" class="${styles.button}">
           <span class="${styles.label}">Learn more</span>
         </a>
         <p>
         <input id="readGroups" type="button" value="Read Groups"/> 
         </p>
         <div id="spTableContainer" ></div>
       </div>
     </div>
   </div>
 </div>`;
 this.domElement.querySelector('#readGroups').addEventListener('click',() => {this._readGroups();});
 }

稍後會對這裡面的_readGroups()方法進行定義。
3. 定義一個用來顯示每個Office 365組資訊的介面，將下面的程式碼新增到DemoWP類的上面但是要確保在imports的下面。

export interface IOffice365Group {
 // Microsoft Graph has more group properties.
 displayName: string;
 mail: string;
 description: string;
}

使用GraphHttpClient.get方法來獲取Office 365的組

接下來，我們將使用GraphHttpClient.get()方法來執行一個REST請求到Microsoft Graph來獲取Office 365組列表。

1. 在DemoWpWebPart.ts檔案中新增如下import片段來引入GraphHttpClient類及其相關的型別。

import { GraphHttpClient, HttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http';

2. 在DemoWP類中新增下面的程式碼定義_readGroups()方法。

protected _readGroups(){
   // Query for all groups on the tenant using Microsoft Graph.
   this.context.graphHttpClient.get(`v1.0/groups?$orderby=displayName`, GraphHttpClient.configurations.v1).then((response: HttpClientResponse) => {
     if (response.ok) {
       return response.json();
     } else {
       console.warn(response.statusText);
     }
   }).then((result: any) => {
     // Transfer result values to the group variable
     this._renderTable(result.value);
   });
}

在上面的程式碼片段中，context屬性具有GraphHttpClient的例項物件。當我們呼叫get()方法時，會生成一個到Microsoft Graph的REST請求，傳遞指定的URL。在上面的示例中，URL為v1.0/groups?orderby=displayName。該請求會返回租戶中所有Office 365組的資訊並以顯示名排序。

你可以通過這種方式構建任何GET請求，傳入正確的URL值即可。關於URL值的說明，戳這裡。例如，你可以使用這裡提到的組相關的URL來獲取組資訊。

get()方法會返回一個HttpClientResponse物件，你可以通過它判斷請求是否成功，返回的JSON在result.value屬性中。這裡由於我們需要獲取組資訊，將返回結果傳給_renderTable()方法。

3. 建立_renderTable()方法來展示返回的組資訊，將以下程式碼新增到DemoWP類中。

protected _renderTable(items: IOffice365Group[]): void {
 let html: string = '';
 if (items.length<=0){
   html=`<p>There are no groups to list...</p>`;
 }
 else {
   html += `
   <table><tr>
     <th>Display Name</th>
     <th>Mail</th>
     <th>Description</th></tr>`;
   items.forEach((item: IOffice365Group) => {
     html += `
       <tr>
           <td>${item.displayName}</td>
           <td>${item.mail}</td>
           <td>${item.description}</td>
       </tr>`;
   });
   html += `</table>`;
 }
 const tableContainer: Element = this.domElement.querySelector('#spTableContainer');
 tableContainer.innerHTML = html;
 return;
}

執行web部件來呼叫Microsoft Graph
我們的程式碼需要呼叫執行在SharePoint上的GraphHttpClient應用程式，所以本地的工作臺是無法正確執行的。我們需要打包並把它部署到SharePoint。

1. 使用gulp來打包解決方案，輸入以下命令。

gulp package-solution

2. 將解決方案部署到SharePoint租戶。

>訪問網站的應用程式目錄

>上傳.sppkg的包到應用程式目錄

>在彈出的提示框中進行確認，並選擇部署。

3. 使用gulp serve來承載web部件，輸入以下命令。

gulp serve --nobrowser

將web部件新增到網頁，或使用SharePoint的工作臺。結果類似下圖顯示的樣子。

本篇就介紹到這裡。