Microsoft Graph Toolkit Providers

本篇我们介绍一下神秘的Provider。

我们在使用Microsoft Graph Toolkit的时候，会在页面中使用一个provider组件，如：

<mgt-msal-provider client-id="[YOUR CLIENT ID]">mgt-msal-provider>

正因为有了这个provider，才使得其他组件可以去Microsoft Graph获取和展示数据，provider负责根据请求的权限范围去获取必要的访问令牌。

Out of box Providers

Microsoft Graph Toolkit提供了现成的可直接使用的providers，基本可以适用大部分的场景，如下表。

Providers	描述
Msal	使用MSAL.js完成用户登录并获取跟Microsoft Graph交互的访问令牌。
SharePoint	完成身份认证并提供SharePoint Web部件内的组件对Microsoft Graph的访问。
Teams	完成认证并提供Microsoft Teams标签页中的组件对Microsoft Graph的访问。
Proxy	允许使用后端认证，在后端对Microsoft Graph进行调用。

自定义Provider

上面我们说了拆箱即用的Providers基本适用于大部分的场景了，那么什么时候使用自定义的Provider呢？

如果有一个应用程序使用现有的身份认证码并且我们想要监控该过程时，就可以选择自定义provider。但从总体上来说，自定义provider还是较少会碰到的需求。

自定义provider有两种方式：

SimpleProvider
对于临时需要，可以使用简单provider。简单provider主要是用来返回来自于我们自己的认证码的访问令牌，通过传入一个带有权限范围的方法实例化SimpleProvider类来返回访问令牌。
关于此类的示例可以访问下面的链接。
Simple Provider Sample

IProvider
对于需要反复使用的可重用场景，我们可以创建自己的provider。实际上，所有Microsoft Graph Toolkit的Provider，也包括SimpleProvider都是扩展自IProvider这个抽象类。因此我们也可以自己扩展它创建自己的provider。
更多信息可以阅读下面的链接。
IProvider Documentation

架构

这张图是Microsoft Graph Toolkit provider的高层次架构图，实际上发生的事请要比这张图上看起来的要多，图中列出的是比较重要的部分。从垂直方向上看它分成了两个部分：Provider初始化和Provider消费。

红色虚线圈中的Providers命名空间位于C位，正凸显了它的重要性。它掌握着全局provider的引用，组件需要通过全局provider引用去调用Microsoft Graph。

Provider初始化
我们需要做的第一件事是初始化一个新的provider，然后将初始化的provider在Providers命名空间设置为全局provider。我们有两种不同的方式做这个事情。

1. 通过代码
直接对全局provider进行赋值。

Providers.globalProvider = new MsalProvider({
    ClientId: ‘[CLIENT_ID]’
}); 

如果是在SharePoint Framework的Web部件中，我们还可以初始化一个SharePointProvider。

protected async onInit() {
    Providers.globalProvider = new SharePointProvider(this.context);
}

2. 通过Provider组件

<mgt-msal-provider client-id=”[CLIENT_ID]”>mgt-msal-provider>

Provider消费
Microsoft Graph Toolkit实际上是使用Microsoft Graph的JavaScript SDK去调用Microsoft Graph的。IProvider就是被设计成与SDK及其AuthenticationProvider类一起工作的。

每个provider实现一个SDK实例，使得它可以在组件内部或外部对Microsoft Graph API进行调用。
另外provider会跟踪用户认证的状态，如loading、SignedIn或SignedOut。当状态改变时，会通过事件处理器通知组件，组件就知道要调用Microsoft Graph了。
在使用SDK调用Microsoft Graph之前，每个组件都会检查是否有provider存在，以及状态是否为SignedIn。

if (provider && provider.state === ProviderState.SignedIn) {
    const graph = provider.graph.forComponent(this);
}

通过本篇介绍provider，Microsoft Graph技术社区也对上一讲的mgt-get示例进行了更新。
默认情况下，Microsoft Graph Toolkit中的组件只用作数据获取展示，如果我们想要更新数据，就需要借由provider中对应的graphClient对象去编写代码进行更新了。

更新后的示例地址如下：
https://github.com/microsoftgraph/mgtLap-TryItOut/blob/master/07%20-%20Providers/index.html