本篇我們介紹一下神祕的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