POC-實作Web與Window應用程式互動

  今天同事提到Spotify,有個很酷的登入功能,在桌面應用程式登入後,再到網頁作登入的動作,會自動登入。登出,再登入,也都不用輸入帳號密碼。但若桌面程式關閉後,Web要登入就要輸入帳密。
  雖不知它實作的機制是如何,但停不住好奇心的我們,花了些時間朝著Web與Window互動的方法去尋找類似的作法。找了幾篇後,在CodeProject剛好有篇文章,介紹到使用 HttpListener讓Desktop與Browser溝通,在瞭解相關作法後,實作了一個類似的Spotify的登入機制。
  如下示意圖,使用者電腦的Desktop應用程式,使用HttpListener在本機Host一個port為60999。瀏覽器透過對localhost:60999Request,會取到目前的登入者作登入。
image

實作Web自動登入


1.撰寫要求登入的Listener
image
  • 依傳入的urlPrefix作監聽(例:localhost:60099/)
  • MainWindow.CurrentAccount 取得目前的登入帳號(在MainWindow.cs 會實作),寫入response
  • Header加入Access-Control-Allow-Origin,避免cross-site 無法存取
2.撰寫Desktop 登入程式

image
登入後,開始HttpLoginListener的監聽

3.撰寫Browser自動登入

image
  • 透過jQuery ajax 向localhost:60999發出request,此時Desktop的HttpLoginListener會收到通知,並回傳目前的Account。
  • success callback收到資訊後,顯示Account。ps:這裡可以處理自動登入

測試程式

1.執行DesktopApp登入

image

2.瀏覽HttpLogin.html,按"Login”取得DesktopApp的登入資訊

image

範例程式下載

參考來源

http://www.codeproject.com/Articles/36517/Communicating-from-the-Browser-to-a-Desktop-Applic
https://msdn.microsoft.com/zh-tw/library/system.net.httplistener.begingetcontext(v=vs.110).aspx

這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS