Step by Step SharePoint開發 - 通過Microsoft Graph獲取用戶信息的客戶端Webpart

關於Graph的應用教程已經全部介紹完了，Graph是貫穿Microsoft 365開發的核心，換句話說，如果大家從事面向Microsoft 365的開發，是基本一定會使用到的，重要性不言而喻。

本篇我們將編寫一個客戶端Webpart，它獲取當前用戶的信息並顯示出來，比較簡單，方便大家清晰理解一個SharePoint客戶端Webpart從無到有的過程和調用Graph的方式。

這也是一個手把手教程，大家按照步驟一步步地做下去也能實現一樣的效果。

準備工作

準備工作其實很久之前已經介紹過了，畢竟SPFx已經出了有相當長的一段時間，所以這裏只是稍微再說一下。

首先就是要有一個Office 365訂閱，沒有環境開發無從談起。幸好現在有了可續簽的Office 365開發者訂閱，一切變得簡單多了。

然後就是設置開發環境，這個很早以前介紹過，比較簡單，直接看Doc的介紹吧。
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

準備工作只有這些。

創建並配置項目

首先我們需要創建一個SharePoint客戶端Webpart的項目。創建好一個我們想要保存項目的目錄，通過命令行跳轉到該目錄，然後執行創建項目的命令：

yo @microsoft/sharepoint

根據提示填寫或選擇必要的信息，提示是否的都選否，本篇將以React爲例。在創建完成後輸入code .以VS Code打開該項目。創建項目的時間視網速而定，網絡差可能就需要花上些許分鐘。創建成功之後命令行會顯示如下圖所示的信息，這個項目實在是夠大的。。。

爲了更便捷地寫代碼，我們再安裝一下Graph的Typescript類型。繼續執行下面的命令。

npm install @microsoft/microsoft-graph-types --save-dev

關於UI，必須是使用微軟親生的Fabric了，執行以下命令進行配置。

首先卸載SPFx Fabric Core庫，因爲在Fabric React中已經包含它了。

npm uninstall @microsoft/sp-office-ui-fabric-core

接下來就要開始真正寫代碼了，我們要做的是通過調用Graph獲取用戶的信息並顯示在Webpart上。

獲取用戶信息代碼實現

首先添加Graph的引用，打開PersonalInfoWebPart.ts文件，在頂部添加引用代碼。

import { MSGraphClient } from '@microsoft/sp-http';

定位到render方法，默認生成的render方法只是通過傳入組建類及其description屬性去創建一個React元素的實例，我們需要進行修改去使用Graph，替換爲如下代碼。

this.context.msGraphClientFactory.getClient()
    .then((client:MSGraphClient):void =>{
      const element: React.ReactElement<IPersonalInfoProps > = React.createElement(
        PersonalInfo,
        {
          graphClient:client
        }
      );
      ReactDom.render(element, this.domElement);
    });

這裏，graphClient是我們需要的屬性，我們還要到IPersonalInfoProps.ts文件中去定義它，打開該文件，同樣在頂部添加Graph的引用，然後刪除description屬性，添加graphClient: MSGraphClient;

回到PersonalInfoWebPart.ts文件我們就會發現之前提示的錯誤沒有了。

接下來繼續我們的工作，因爲我們要顯示用戶的信息，因此需要一個具有這些信息的東西去更新組件的狀態。

在components文件夾中新建一個ts文件，我們命名爲IPersonalInfoState.ts，並在文件中添加如下接口定義代碼。

export interface IPersonalInfoState{
    name: string;
    email: string;
    phone: string;
    image: string;
}

打開PersonalInfo.tsx文件，將我們需要的引用都添加上。

import { IPersonalInfoState } from './IPersonalInfoState';

import { MSGraphClient } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

import {
  Persona,
  PersonaSize
} from 'office-ui-fabric-react/lib/components/Persona';
import {Link} from 'office-ui-fabric-react/lib/components/Link';

往下看關於類PersonalInfo的聲明，將後面的空數組參數{}替換爲我們定義的State。

export default class PersonalInfo extends React.Component<IPersonalInfoProps, IPersonalInfoState> {

接下來我們添加一個構造函數對它進行初始化，在render方法的上面添加如下構造函數代碼。

constructor(props: IPersonalInfoProps) {
    super(props);
  
    this.state = {
      name: '',
      email: '',
      phone: '',
      image: null
    };
  }

而render中返回的內容，我們刪除掉原來的，改用react組件庫中的Persona。

public render(): React.ReactElement<IPersonalInfoProps> {
    return (
      <Persona primaryText={this.state.name}
               secondaryText={this.state.email}
               onRenderSecondaryText={this._renderMail}
               tertiaryText={this.state.phone}
               onRenderTertiaryText={this._renderPhone}
               imageUrl={this.state.image}
               size={PersonaSize.size100} />
    );
  }

同樣，上面有兩個renderXXX方法我們還沒有定義，需要定義一下。

private _renderMail = () => {
  if (this.state.email) {
    return <Link href={`mailto:${this.state.email}`}>{this.state.email}</Link>;
  } else {
    return <div />;
  }
}

private _renderPhone = () => {
  if (this.state.phone) {
    return <Link href={`tel:${this.state.phone}`}>{this.state.phone}</Link>;
  } else {
    return <div />;
  }
}

還剩下最核心的邏輯，調用Graph獲取用戶的信息，在構造函數之後添加下面的方法。

public componentDidMount(): void {
  this.props.graphClient
    .api('me')
    .get((error: any, user: MicrosoftGraph.User, rawResponse?: any) => {
      this.setState({
        name: user.displayName,
        email: user.mail,
        phone: user.businessPhones[0]
      });
    });

  this.props.graphClient
    .api('/me/photo/$value')
    .responseType('blob')
    .get((err: any, photoResponse: any, rawResponse: any) => {
      const blobUrl = window.URL.createObjectURL(photoResponse);
      this.setState({ image: blobUrl });
    });
}

到此我們基本完成了需要的功能。

部署解決方案

在進行部署之前，還有重要的一步，就是通知SharePoint我們這個應用需要Graph權限去訪問用戶信息。打開config文件夾中的package-solution.json文件，在solution節點中的includeClientSideAssets屬性下面添加權限請求屬性。

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.ReadBasic.All"
  }
],

大功告成，我們先編譯一下。

gulp build

如果提示Finished ‘build' after xx s，那麼說明編譯成功。編譯成功就可以打包了，依次執行下面的命令。

gulp bundle --ship
gulp package-solution --ship

打包成功會在sharepoint/solution目錄生成一個<solutionname>.sppkg文件，也就是我們生成的解決方案包。

訪問SharePoint Online應用程序目錄網站，選擇Apps for SharePoint。

上傳剛纔生成的解決方案。如果你看到的是現代視圖，切換回經典視圖，選中上傳的解決方案並點擊部署，現代視圖中我沒找到部署操作。

還記得我們之前添加的請求Graph權限的webApiPermissionRequests節點嗎？最後一步就是對請求的權限進行批准。

訪問Office 365的SharePoint管理中心，選擇API management菜單，可以看到有一個待審批的內容，對它進行Approve操作。

測試解決方案

我們實現的是一個客戶端Webpart，它可以被添加到SharePoint頁面上，操作步驟如下。

1. 添加應用到網站集。
   打開網站集，點擊右上角的齒輪圖標，選擇Add an app，後選擇From Your Organization，點擊我們之前上傳到應用程序目錄的應用就完成了添加操作。
   
2. 點擊左側的Pages庫鏈接，新建一個網站頁面。
   
3. 在新建的頁面的編輯頁面就可以添加我們的Webpart了，添加完之後Publish就可以了。
   
   效果就是下圖這個東西。