2017年1月15日 星期日

Microsoft Graph API (2) - 使用OAuth進行身分驗證,並取得用戶資訊

我們前面曾經和大家聊過,如果要幾句話說清楚Microsoft Graph API是啥,其實並不很容易,但透過先前的介紹你大概可以知道,Microsoft Graph API身為MS Office 365所有資源存取的API連線入口,負擔著讓開發人員得以輕鬆存取雲端資料(資源)的重要角色,只要你想存取Office 365、OneDrive、OneNote…等各種資源,基本上你就必須與Graph API打交道:

不管用戶採用的是個人帳號(Microsoft Account)或企業帳號(Orgnization Account),MS Graph API讓開發人員可以用單一Endpoint允許各種不同帳號的身分驗證,當然也會依照權限吐出不同的資源。

這一篇我們接著來看,如何透過OAuth連結MS Graph API,並且取得token抓取用戶資料。
(如果讀者對OAuth還不甚了解,請先參考這裡)

建立Microsoft應用程式

首先,若您是開發人員,要使用MS Graph API(或者是要與O365/Onedrive等系統做SSO),你必須先在微軟的站台上建立一個Application,建立的位置在: https://apps.dev.microsoft.com/ ,進入之後會看到底下畫面:

請用您的Microsoft Account登入,您就可以建立一個自己的應用程式:

點選後會出現底下畫面,依照步驟,輸入名稱,按下建立鈕:

建立完應用程式之後,請接著點選『產生新密碼』:

記得保留上面彈出視窗中顯示的密碼,待會我們會使用到(它只會顯示一次,請務必自行保留)。

接著,請在平台這邊選擇新增平台,然後選Web,這是因為我們範例中是透過Web App整合方式來進行Demo,如果你的情境是要在行動裝置上存取Office365(or Onedrive/onenote…etc.)中的資源,當然就選擇行動應用程式:

接著該頁面會要求你輸入重新導向URI,這部分如果不理解其意義以及為何需要,請參考我們以前分享過的OAuth介紹文,底下的URL就是你取得Auth Code的導回網址,由於我們只是要在Local用IIS Express測試,因此我們網址輸入Localhost:

至於port 13555怎麼來的,它是我們在VS2015中建立了一個Web Application Project之後自動產生的,如果你想測試但懶得寫程式,可以拿我在GitHub上面的範例來修改:
https://github.com/isdaviddong/MsGraphApiExample20170115

接著,請至少為您建立的應用程式新增user.read這個權限,如果你想玩其他的權限,可點選下圖的『加入』鈕:

設定完成之後,請按下儲存鈕(請務必保持Live SDK勾選):

撰寫OAuth/SSO登入頁面

完成了上面所有的設定之後,您的應用程式就建立好了,請取得應用程式中的『應用程式識別碼(Client_id)』與『密碼(Client_Secret)』,應該長得像是底下這樣:
Client_id : 98d720db-xxxx-xxxx-xxxx-7430359c1c10  (這是假的)
Client_Secret : teoXXXeJp8bxxxxSO2HjhNG (這當然也是假的)
有了上面的資訊就夠囉。

接著請撰寫底下的頁面(如果你想測試但懶得寫程式,可以拿我在GitHub上面的範例來修改:https://github.com/isdaviddong/MsGraphApiExample20170115):

然後在VS2015的IIS Express中運行此頁面,你會發現點選上圖中的Button之後,會被導引到AAD2.0的登入畫面:

您可以用Microsoft Account或Orgnization Account登入都行,因為Graph API都支援。(但用哪一種帳號登入後面的畫面將會有所不同,我們在本文中的展示是以Microsoft Account登入)

用戶登入之後,系統會跟他要求資訊存取權限:

你會發現上圖(1)的地方就是您建立您的應用程式時,所上傳的圖示,而(2)的地方是您的應用程式名稱,(3)是您跟用戶要的權限 (4)是…就只是一個用戶非點不可的按鈕。

當用戶成功登入之後,網頁會被導回你原先的頁面,但這時,請注意網址列QueryString已經出現了Auth Code:

請取得該Code,我們要用此Code換Token。

後面的動作我用postman示範,取得auth code之後,請對https://login.microsoftonline.com/common/oauth2/v2.0/token這個位置做POST呼叫,並傳入下列參數:

上圖中的(1)是你原本在應用程式以及要求Auth Code的登入URL中所設定的redirect_url(必須都相同),(2)與(3)是一開始我們請你保留的client_id和client_secret,而(4)則是剛才從QueryString取得的Auth Code,成功呼叫之後,你會發現上圖下方API回給我們了Access_token,將其保留起來,該Token就是我們依照權限取得用戶資訊的令牌了。

透過token抓取用戶資訊

拿到token之後你就無敵了,基本上你可以用該token來取得所有用戶授權你抓取的資訊(如果用戶授權你更新,你當然也能修改用戶資訊)。

底下我們依舊用postman來示範,例如,倘若你要取得用戶身分,可以對https://graph.microsoft.com/beta/me這個網址做GET,並傳入底下資訊:
上圖中的Authorization參數當然傳遞我們剛才取得的token,而結果就是上圖下方取得的JSON資訊,你會看到其中有用戶的個人身分資訊。

就這樣,如我你還想取得其他資訊,可以透過哪些API呢? 很多,例如底下是常見的:

更多詳細的資訊可參考 http://graph.microsoft.io/en-us/docs

有沒有發現,當你熟悉了OAuth之後,透過API要取得用戶的資訊其實非常容易。
--------------------------------------------
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

沒有留言: