【转】Microsoft Graph Web应用程序极致开发体验
前言
這篇文章最早寫于2017年5月2日,當(dāng)時(shí)的想法是從最簡單的方式來寫如何在一個(gè)ASP.NET MVC應(yīng)用程序中集成Microsoft Graph,但實(shí)際上還真不是那么簡單,至少我是不滿意的,加上這一兩周都比較忙,所以這一篇就一直擱置。直到上周的一個(gè)契機(jī),讓我看到了一個(gè)全新的方式,而且可以極大地改變我們在Web應(yīng)用程序中集成Microsoft Graph,所以抓緊做了實(shí)踐,寫出來給大家參考。
在今年3月份Visual Studio 2017進(jìn)行發(fā)布的時(shí)候,我已經(jīng)發(fā)現(xiàn)它新增了一個(gè)很重要的功能,名稱叫Connected Services,它提供了連接Azure AD,Office 365等云端服務(wù)的能力,這讓我大喜過外,因?yàn)檫@確實(shí)是我們一直需要的東西。但仔細(xì)看下來,卻發(fā)現(xiàn)這個(gè)第一版的功能,并不是最新的Microsoft Graph集成,而是Office 365傳統(tǒng)的每個(gè)服務(wù)單獨(dú)的RestAPI的接口。
由于我正好在寫這個(gè)系列文章,對Microsoft Graph有些研究,對其重要性深有感觸,所以我當(dāng)即給公司內(nèi)部負(fù)責(zé)Visual Studio的最高領(lǐng)導(dǎo)(Julia Liuson —— 潘正磊女士)發(fā)了郵件提出意見,希望她能盡快考慮直接集成Microsoft Graph。沒想到Julia很快就回了郵件,在表示親切慰問的同時(shí)明確表態(tài)會盡快考慮這個(gè)需求,而就在前不久舉辦的Build 2017大會上,我們就看到了這個(gè)組件的更新,包含在最新的Visual Studio 2017 Preview中。
我將這個(gè)有意思的小插曲寫出來,當(dāng)然不是天真地認(rèn)為這個(gè)更新的快速推出有我什么功勞。但從這里可以看出微軟的產(chǎn)品組是很重視一線(包括客戶,用戶以及內(nèi)部員工等)反饋的聲音,而且他們的響應(yīng)速度是非常快的。我必須為他們點(diǎn)個(gè)贊!
Visual Studio 2017 Preview是一個(gè)特殊的版本,可以單獨(dú)安裝,并且可以與現(xiàn)存的Visual Studio其他版本共存。它的下載地址在?https://www.visualstudio.com/vs/preview/?.
與此同時(shí),Microsoft Graph的官方網(wǎng)站也提供了一篇專門的文章介紹如何使用這個(gè)Connected Service來實(shí)現(xiàn)與Graph的集成,請參考?https://developer.microsoft.com/en-us/graph/docs/concepts/office_365_connected_services
根據(jù)范例快速體驗(yàn)
我非常推薦你根據(jù)官方文檔的說明,下載它的那個(gè)范例代碼來快速實(shí)踐。
在Visual Studio 2017 Preview中打開上面這個(gè)解決方案,并且打開Connected Services的界面?
選擇“Access Office 365 Services with Microsoft Graph”,輸入或者選擇你的Office 365 租戶信息。請注意,這里目前還只支持國際版?
點(diǎn)擊“Next”進(jìn)行Application的配置,如果是第一次操作,則選擇“Create a new Azure AD Application”?
接下來,按照文檔要求, 選擇以下幾個(gè)權(quán)限
For the File APIs, set permissions to Have full access to your files For the Mail APIs, set permissions to Send mail as you For the User APIs, set permissions to Sign you in and read your profile最后,按照文檔要求,將Models目錄下面的GraphService.cs文件中的幾行代碼取消注釋。一切就緒,我們就可以調(diào)試了。?
點(diǎn)擊右上角的“Sign in with Microsoft”,會被導(dǎo)航到Office 365的登錄頁面?
輸入用戶名和密碼后,點(diǎn)擊“Sign In”,系統(tǒng)會引導(dǎo)你對權(quán)限進(jìn)行確認(rèn)?
點(diǎn)擊“Accept”后回到主界面,然后點(diǎn)擊“Get email address” 按鈕可以看到讀取到當(dāng)前用戶的郵箱地址,然后點(diǎn)擊“send mail”則可以實(shí)現(xiàn)郵件發(fā)送。?
看起來還是不錯的,對吧?那么,這是怎么做到的呢?首先是Visual Studio幫我們做了不少工作,主要是自動完成應(yīng)用程序注冊,并且在配置文件中保存信息?
其次,這個(gè)范例程序,里面有幾個(gè)文件預(yù)先編寫好了代碼
我不想解釋這些代碼。我當(dāng)然是知道為什么應(yīng)該這么寫,但并不想讓每個(gè)人都去這么寫。作為一個(gè)有一點(diǎn)追求的老同志,我根據(jù)這些代碼的邏輯封裝了一個(gè)組件,便于在大家后續(xù)開發(fā)的時(shí)候,直接使用。
在你的應(yīng)用中快速集成Microsoft Graph
范例運(yùn)行成功并沒有什么了不起,下面就要看一下怎么在一個(gè)自己寫的應(yīng)用程序中實(shí)現(xiàn)同樣的功能。我上面提到了,雖然Visual Studio幫我們做了不少工作,但有些代碼還是省不了的,為了讓大家的代碼減到最少,我寫了一個(gè)組件,叫做Office365GraphMVCHelper。
接下來我就帶大家來極致體驗(yàn)一下,怎么用不到三行代碼就完整地實(shí)現(xiàn)Microsoft Graph的調(diào)用。對,就是這么任性。
請注意使用Visual Studio 2017 Preview,同時(shí)確保上面對話框中,目標(biāo)的Framework選擇 4.6。然后再下面的對話框中選擇“Empty”模板,并選擇“MVC”這個(gè)功能
按照之前的介紹,添加"Connected Service","Access Office 365 Services with Microsoft Graph"。作為演示目的,請選擇一個(gè)權(quán)限即可
接下來就是添加我寫好的那個(gè)組件,請運(yùn)行下面的命令 Install-Package Office365GraphMVCHelper
接下來為當(dāng)前這個(gè)項(xiàng)目添加一個(gè)啟動類(Owin Startup Class):Open Web Interface for .Net
用一行代碼為啟動類添加Microsoft Graph身份功能?
接下來就可以實(shí)現(xiàn)業(yè)務(wù)模塊了,我們可以添加一個(gè)默認(rèn)的Controller,在Index這個(gè)Action里面,我用兩行代碼做了實(shí)現(xiàn):讀取當(dāng)前用戶的信息,并且輸出到瀏覽器。
請不要告訴你不知道什么叫Controller,咱這篇文章講的是MVC哦
運(yùn)行起來看看效果吧。在要求你輸入用戶名和密碼,以及授權(quán)確認(rèn)后,你將看到如下的界面。?
當(dāng)然,這只是一個(gè)演示,但只要打開了這扇大門,接下來你要做的就是盡情地調(diào)用Microsoft Graph所提供的功能了,詳情請參考?https://github.com/microsoftgraph/msgraph-sdk-dotnet?。
總結(jié)
這一篇文章講解了Visual Studio 2017 Preview最新推出的直接將Microsoft Graph集成到應(yīng)用程序的開發(fā)體驗(yàn),并且演示了如何借助我封裝好的一個(gè)組件,進(jìn)一步將后續(xù)編碼簡化到最少。我后續(xù)還會看看怎么把中國版的功能整合進(jìn)來。
已經(jīng)實(shí)現(xiàn)對中國版Office 365的支持
2017年5月31日,重構(gòu)代碼實(shí)現(xiàn)了對中國版Office 365的支持,并且將Office365GraphMVCHelper這個(gè)工具包升級到了2.0版本。?
由于Visual Studio 2017 Preview提供的工具,不能直接添加中國版的Office 365作為Connected Service,所以,你需要手工地在中國版Office 365中注冊應(yīng)用程序,并且在web.config文件中添加如下的信息
<add key="ida:ClientId" value="1142d051-c271-4044-b1ac-522c8029e3b7" /> <add key="ida:ClientSecret" value="Ei4JeIsuKzPVfnkgAmWSFfE9p5YKs0yhm41dcZo/ink=" /> <add key="ida:TenantId" value="12c0cdab-3c40-4e86-80b9-3e6f98d2d344" /> <add key="ida:Domain" value="modtsp.partner.onmschina.cn" /> <add key="ida:AADInstance" value="https://login.chinacloudapi.cn/" /> <add key="ida:ResourceId" value="https://microsoftgraph.chinacloudapi.cn" />請注意,最后一行跟國際版不一樣。國際版可以省略。
這樣完成設(shè)置后,其他的代碼都是和國際版一樣的,盡情享受吧
總結(jié)
以上是生活随笔為你收集整理的【转】Microsoft Graph Web应用程序极致开发体验的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 南方强降雨车轮战 广东进入大泼水模式:1
- 下一篇: 【转】4.2使用jQuery.form插