Integrate Windows Live ID Authentication with Rails Application

Windows Live ID is the identity and authentication platform for all Microsoft online services, such as Windows Live, Xbox Live, Office Live, etc. Many third-party sites also use Live ID authentication. Formerly known as Microsoft Passport, the service was rebranded to reflect the Windows Live brand, as well as new scenarios and features developed to support Windows Live.

Why using Windows Live Authentication?

SSO (Single Sign-on) become more popular and important in network security. Just imagine you always login to your own computer, bank account, email and many online accounts just by your smart card and pin code with maximum security without any worry about reminding many passwords, lost or stolen password. Still we are on the road to this goal but the current standard and technology are indicated that we are very close to it. Today even large organizations try to use systems such as Active Directory Federation System (ADFS) to reach SSO.

Windows Live ID Web Authentication helps you build identity-aware Web applications. It is a service that allows you to:

*Verify the identity of visitors to your site.
*Offer personalized access to your site’s content to millions of Live ID users, who don’t need to create yet another identity.
*Provide single sign-on from your application to Windows Live services.
*Seamlessly integrate the advanced, and useful, functionality of Windows Live controls in a non-programmatic way.
*Access user’s Windows Live data with their explicit consent.

Sourced from http://dev.live.com/liveid

實作Windows Live ID登入功能整合至Rails應用程式

1.首先需要到Windows Live ID application page申請API Key:
https://msm.live.com/app/default.aspx


其中Return URL是處理Windows Live ID Auth Server傳回來的參數的Callback地址,我將它設為http://www.example.com/liveAuth,此外Secret Key是用來做加密、解密的Key。填寫完資訊後就可以得到應用程式的Appid及Secret了。




2.接下來在#{RAILS_ROOT}/lib目錄下新增一個windows_live_login.rb檔案,內容如下:



該檔案是參考Windows Live ID Web Authentication SDK for Ruby的Sample Code和Yahoo! BBAuth Wrapper修改而成。

參考 Yahoo! BBAuth Wrapper by Premshree Pillai:
http://premshree.livejournal.com/118739.html

3.接下來新增一個migration,在User資料表中新增wll_uid和wll_name欄位:



執行rake db:migrate之後,我們可以從phpMyAdmin替Users資料表新增一筆wll_uid的索引。

接著編輯config/route.rb 新增路徑映射,我們會將liveAuth method放到Users Controller中:



然後編輯app/controllers/users_controller.rb 新增下面內容,其中liveLogin方法是將使用者導向Windows Live ID登入頁面,而liveAuth則是用來處理傳回的Callback:



註:因為 Rails 2.x 為了避免 XSS Attack ,會禁止非同一網域的HTTP POST ,所以我們必須在Users Controller中添加 protect_from_forgery :except => :liveAuth 允許來自外部網域的POST行為。

其他相關細節請參考:
http://api.rubyonrails.org/classes/ActionController/RequestForgeryProtection/ClassMethods.html


下面是 Windows Live ID Auth 的基本運作流程:

使用者按下『透過Windows Live ID註冊』連結,會被導向 Windows Live ID 的登入頁面,要求登入Live ID帳號,若使用者已經登入過,且Users資料表中找不到相對應的wll_uid值,則會被導向我們的帳號註冊頁面,若找到符合的wll_uid,則將使用者登入我們的網站。


當使用者從Windows Live ID登入成功後,瀏覽器會被導向Return URL,並以HTTP POST夾帶一個stoken參數。這個參數是將Live ID Server端傳回給你的參數,先以SHA256和你的Secret做Digest簽章,以 &sig=XXX的方式附加到要給你的參數後面,再以AES128的方式加密,加密金鑰裡含有你的Secret字串。

當我們的Rails Application收到stoken參數的時候,會先利用算式來做出金鑰,再用金鑰解密,接著驗簽章是否正確,最後我們會得到一個來自Windows Live ID Auth的uid,它是一個Hash過的唯一使用者識別碼,而不是真正的Live ID,但只要以同樣的Live ID帳號登入,就會得到同樣的uid。

接著我們的Rails Application會去資料庫的Users資料表查看這個uid是否已存在,若uid存在則直接將使用者登入我們的網站,否則就將使用者導向註冊頁面,並且給一個暫時的wll_name,我們是用MD5.hexdigest(uid)取前8個字來當作暫時的wll_name,這個wll_name僅供顯示用,因為若是在現有的Rails Project中已經有Basic Auth認證機制,則這個wll_name欄位並沒有多大的意義,也可以乾脆省略掉。但若是在一個新建的Rails Project,且只允許透過Windows Live ID來註冊/登入,則這個wll_name就會有作用。

現在我們可以來修改app/views/users/new.html.erb視圖,若是透過Windows Live ID註冊,則不需要設定密碼,但日後可以在帳號設定頁面設定:


同樣也要修改app/views/users/edit.html.erb視圖的密碼設定部份:



最後修改User model中的password_required?方法,新增下面內容:




至於登出的部份,Windows Live ID Auth 的登出流程大致是這樣:

使用者在我們的Rails網站點擊『登出』連結後,瀏覽器會被自動導向Windows Live ID 的登出處理頁面,Windows Live ID Auth Server會向我們的Rails Application丟出如下的HTTP Request:

RETURN_URL?action=clearcookie

根據官方SDK Document的說明,我們必須去handle兩種action參數值,一個是clearcookie,另一個是logout 。在處理clearcookie時,我們必須清除使用者登入時所建立的session cookie,然後丟出一個Gif圖檔給Windows Live服務端,告知我們要將使用者登出網站。官方版SDK Sample Code是直接透過CGI丟出http header和http content做到的,但我們採取較簡易的方式,直接redirect_to該圖檔的地址即可。

參考:Handling the Response from the Service
http://msdn.microsoft.com/en-us/library/bb676640.aspx

當Windows Live ID Auth Server看到這個圖檔之後,就會將該User在我們網站的Windows Live ID Session設為登出,然後再將瀏覽器導向RETURN_URL?action=logout,這時候就是真正的Logout了,我們在這裡就可以將使用者的Session清空,並將使用者導向指定的頁面。


『登入/登出』的連結,在官方版的SDK Document是這樣做的:『用一個iFrame嵌入在網頁裡,指定參數,由Live ID Login Server決定是登入連結還是登出連結』,方法大致如下。

先將Windows Live ID Auth的APPID放到application_helper.rb中:


然後在需要的頁面中嵌入如下的iframe內容:



詳細內容請參考:Displaying the Sign-in Link
http://msdn.microsoft.com/en-us/library/bb676638.aspx

登入/登出的處理方式,建議按照官方的方法使用iFrame來處理,若是把登入和登出連結另外拉出來可能會產生一些問題,我遇到的問題就是當使用者點擊登出後,瀏覽器直接被導向MSN首頁而不是導向我自己的網站頁面,弄了兩個晚上還是搞不定,最後還是乖乖依照官方的作法才能正常運作。

若是你遇到同樣的問題討論,可以參考以下的MSDN討論串
After logout the browser is redirected to msn instead of my site:
http://social.msdn.microsoft.com/Forums/en-US/wliddev/thread/12bd3e93-b66b-4aa7-9da9-2e6086a98ede/

大致上的實作就是這樣子.



延伸內容:

Using Windows Live Contacts in Ruby
http://www.badrit.com/blog/2010/1/11/using-windows-live-contacts-in-ruby

Importing Windows Live and Hotmail contacts in Django
http://rocketscience.itteco.org/2009/12/12/importing-windows-live-and-hotmail-contacts-in-django/

Delivering Data Portability – Delegated Authentication SDK v1.0
http://mes-newslive.blogspot.com/2008/02/delivering-data-portability-delegated.html

熱門文章

Nov 2024【陽明山溫泉】老字號「馬槽花藝村」的溫泉管線已恢復|在木造山景湯屋享受半露天硫磺溫泉

【新北金山】週末的北海岸吃蟹泡湯小旅行|奇峰石溫泉餐廳、巧晏漁坊、獅頭山公園散步、陽明山家新休閒會館、焿子坪、鮮滿樓海鮮料理、馬槽花藝村、醺花鑶鴛鴦鍋

Nov, 2024【新北金山】冷水坑至磺嘴山健行, 欣賞秋天的美景,下山後到陽明山水溫泉會館享受100%白硫磺泉的療癒

Sep, 2021【苗栗南庄】蓬萊林道Off Road小試|雨後很爛很濕滑|二傳低底盤車勿輕易嘗試

Dec 2024【苗栗泰安】水雲餐廳溫泉民宿♨️🥢⛰️|水雲三星之橫龍山~騰龍山健行|台中西嶼龍新鮮海鮮古早味餐廳

Feb, 2024【台中西區】桃太郎日本料理|隱身巷弄裡的39年老字號無菜單料理|食材新鮮、自然美味

Mar 12, 2022【重機一日遊】走北橫至宜蘭,經梨山、武嶺下埔里,再走台三線回桃園|16小時的半圈環島

July 2024【台北士林】陽明山彼端的原始秘境|颱風後的鹿角坑生態保護區|循著疊石指引造訪楓林瀑布

【南投信義】丹大林道與消失的省道台16線|可徒步深入中央山脈的經典長程林道

【美國加州】此生必去超美風景!加州一號公路自駕遊~Half Moon Bay、17 Mile Drive、Bixby Greek Bridge、Big Sur、McWay Falls、Elephant Seal Rookery

文章列表

Contact

名稱

以電子郵件傳送 *

訊息 *