在今年的Build大會(huì)上面, Microsoft Graph 產(chǎn)品組公開(kāi)宣布了一套新的Web組件，Microsoft Graph Toolkit（簡(jiǎn)稱mgt），這套組件可以與任何前端開(kāi)發(fā)平臺(tái)無(wú)縫整合，通過(guò)幾行代碼就能實(shí)現(xiàn)基于Microsoft Graph的應(yīng)用，而且產(chǎn)品組已經(jīng)將其通過(guò)Github開(kāi)源了。請(qǐng)通過(guò)下面的地址了解詳情和源代碼。

https://github.com/microsoftgraph/microsoft-graph-toolkit

講重點(diǎn)，這套組件有如下的幾個(gè)亮點(diǎn)

它是基于HTML 5的Web Assembly來(lái)實(shí)現(xiàn)的，在所有的現(xiàn)代瀏覽器中都能完美支持，而且性能非常高。

它通過(guò)幾行代碼就能完成之前很復(fù)雜的身份驗(yàn)證，數(shù)據(jù)綁定等操作。

它是支持?jǐn)U展的，mgt提供了默認(rèn)的一些實(shí)現(xiàn)，但開(kāi)發(fā)者可以自己定義顯示的模板，以及通過(guò)IProvider接口來(lái)實(shí)現(xiàn)自己的提供程序。

具體來(lái)說(shuō)，它提供了五個(gè)組件，和五個(gè)Provider（下圖的Providers這里少寫了一個(gè)：mgt-mock-provider）

我們可以通過(guò)一些簡(jiǎn)單的示例來(lái)感受一下它的威力。下面幾行代碼，即可用來(lái)顯示當(dāng)前用戶信息，以及該用戶的日歷信息。

<script?src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script> <mgt-mock-provider></mgt-mock-provider> <mgt-login></mgt-login> <mgt-agenda group-by-day></mgt-agenda>

我給大家分解一下這些代碼的作用

第一行代碼是導(dǎo)入mgt的組件庫(kù)。

第二行代碼是定義一個(gè)Microsoft Graph Provider，即從哪里去讀取數(shù)據(jù)。mgt-mock-provider 是一個(gè)非常特殊的provider，它提供了范例數(shù)據(jù)，開(kāi)發(fā)者甚至都無(wú)需真的擁有Office 365賬號(hào)，也能快速進(jìn)行開(kāi)發(fā)和體驗(yàn)。

第三行代碼是用來(lái)顯示用戶信息的一個(gè)組件，它默認(rèn)會(huì)顯示用戶頭像和用戶名稱。

第四行代碼是用來(lái)顯示當(dāng)前用戶的日程安排，而且按照日期分組。

這就是一個(gè)最簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)，在瀏覽器中查看的效果如下

那么，如果要連接到真正的Microsoft 365數(shù)據(jù)，應(yīng)該怎么做呢？很簡(jiǎn)單，你只需要替換一下provider即可。

<script?src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script> <mgt-msal-provider?client-id="eae87282-4457-40f3-ada2-e4ca0fa61783"></mgt-msal-provider> <mgt-login></mgt-login> <mgt-agenda group-by-day></mgt-agenda>

這里的第二行，引入了一個(gè)新的provider：mgt-msal-provider，而且指定了client-id屬性。此時(shí)，再次運(yùn)行該網(wǎng)頁(yè)，會(huì)默認(rèn)顯示一個(gè)“Sign In”的按鈕。

點(diǎn)擊“Sign In” 按鈕后會(huì)被引導(dǎo)到登陸頁(yè)面

登陸成功之后，你看到的界面大致如下

如果你需要，你甚至還可以用下面的方式對(duì)mgt-agenda 進(jìn)行自定義

<mgt-agenda> <template data-type="event"> <button class="eventButton"> <div class="event-subject">{{ event.subject }}</div> <div data-for="attendee in event.attendees"> <mgt-person person-query="{{ attendee.emailAddress.name }}" show-name show-email> </mgt-person> </div> </button> </template> <template data-type="no-data"> There are no events found! </template> </mgt-agenda>

從上面的例子可以看出，mgt 提供了強(qiáng)大但是又簡(jiǎn)單的功能，可以讓前端開(kāi)發(fā)人員，非常容易地將Microsoft Graph的能力集成到你的應(yīng)用中去，不管你用什么開(kāi)發(fā)框架，語(yǔ)言。歡迎大家使用，如果有問(wèn)題，請(qǐng)?jiān)趃ithub上面直接反饋，也可以在此公眾號(hào)給我留言。

總結(jié)

以上是生活随笔為你收集整理的Microsoft Graph Toolkit 初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。