使用GraphHttpClient调用Microsoft Graph接口

博客地址：http://blog.csdn.net/FoxDave

本篇接上一讲，我们继续看如何通过GraphHttpClient创建一个Office 365的组，需要使用POST请求。

为结果添加按钮和占位符（PlaceHolder）

我们需要再次修改HTML代码，添加一个用来创建组的按钮。

1. 在Visual Studio Code中打开文件srcwebpartshelloWorldHelloWorldWebPart.ts。

2. 修改render()方法，使其包含一个按钮和一个div用来显示创建成功与否的结果信息。修改后的render方法代码如下所示：

public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.helloWorld}">
      <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"/> 
          <input id="createGroup" type="button" value="Create New Group"/>                           
          </p>
          <div id="spCreateGroupResults" ></div>
          <div id="spTableContainer" ></div>
        </div>
      </div>
    </div>
  </div>`;
  this.domElement.querySelector('#createGroup').addEventListener('click',() => {this._createGroup();});
  this.domElement.querySelector('#readGroups').addEventListener('click',() => {this._readGroups();});    
  }

添加_createGroup()方法来调用Microsoft Graph API创建一个组，_createGroup()方法的代码如下所示：

protected _createGroup(){
  // Use Microsoft Graph to create a sample group.
  this.context.graphHttpClient.post(`v1.0/groups`,GraphHttpClient.configurations.v1,{
    body: JSON.stringify({"description": "Self help community for library",
    "displayName": "Library Assist",
    "groupTypes": [
      "Unified"
    ],
    "mailEnabled": true,
    "mailNickname": "library",
    "securityEnabled": false
  })
}).then((response: HttpClientResponse) => {
  const resultContainer: Element = this.domElement.querySelector('#spCreateGroupResults');
    if (response.ok) {
      resultContainer.innerHTML = `<p>Sample group created</p>`;
    } else {
      resultContainer.innerHTML = `<p>Could not create group see console for details</p>`;        
      console.warn(response.status);
    }
  });
}

上面使用Microsoft Graph的代码示例中的代码创建了一个简单的组，可以点击这里了解详情。
post()方法发起了一个POST REST接口请求去调用URLv1.0/groups。第三个参数是IGraphHttpClientOptions值，里面的JSON体用来描述要创建的新组。HttpClientResponse用来判定调用是否成功执行并显示恰当的信息。

运行web部件去创建一个新组

1. 使用gulp打包你的解决方案
打开命令行，转到你的工程所在目录，输入命令gulp package-solution来打包你的解决方案。

2. 部署解决方案到你的SharePoint租户：

>访问你的应用程序目录网站，访问Apps for SharePoint。

>上传刚才打出的.sppkg包（demowpsharepointsolution），如果提示已存在选择覆盖即可。

>在接下来弹出的提示是否信任解决方案的窗口中选择部署。

3. 使用gulp serve命令来承载我们写好的web部件，命令为gulp serve --nobrowser。

4. 添加web部件到任意一个网页或者使用工作台来测试，做法跟上一讲一样，此刻我的网络环境实在是非常的差，我就不上图了。

5. 当点击Create New Group按钮时，代码会创建一个新的Office 365组。注意如果创建的组在Office 365中已存在，就会返回组已存在的错误信息。

本篇就介绍到这里，下一篇会简单介绍一下如何更新组信息。