Mar 2026【隨筆】Clone a Meta Ray-ban Display glasses application|藍芽 L2CAP CoC 極致低延遲架構優化:實現 720p 智慧眼鏡流暢串流 👓(LIVE DEMO)

圖片
最近在做一些實驗性質的東西,記得去年短暫玩過 2023 年底上市的第二代 Ray-Ban Meta 智能眼鏡,雖然它主要還是依賴智慧型手機作為算力中心,但我們對它所使用的串流技術很感興趣,因為聽說他們是用藍芽做串流。 去年曾經有同事隨口問我:「我們的眼鏡做到跟他們一樣你覺得有可能嗎?」,因為我知道我們的硬體規格跟人家的相比並非等號,加上當時有其他事情在搞,所以隨口開玩笑回說:“可是聽說 Meta 有200個人在搞那個眼鏡捏(雖然不知道他們負責搞應用的有幾人),啊我如果一個人可以幹贏他們200人,那我還在這幹嘛???(笑)” 也記得更久以前,當我們還在研究那個眼鏡時,常聽到像是:『 他們不知道用了什麼黑科技 』,這類沒有建設性、不應該從 RD 嘴裡說出來的話,而我也是不以為然。坦白講,以前每次只要聽到某SW嘴砲部經理(暫且以H君稱之),沒事就把『 黑科技 』三個字掛在嘴上,當做無知的遮羞布,我就會感到倒胃口!同樣身為RD,我只覺得  Shame on you!(打嘴炮、作秀搶風頭、噁心帶風向、搞政治操作、把別人做事的成果搶去幫自己抬轎、有鍋直接推給下屬扛、散佈同事私生活謠言,還有職場霸凌,這些你他媽都頂級專業戶,除此之外沒啥洨用了!) 一件理論上可以做到的事情,外行人的認知被信息差,不懂加上沒實作能力去驗證,就什麼都變成黑科技了(多黑?比巴西黑鮑魚還黑嗎?)。反重力技術說不定也非啥黑科技,只是政府不讓你普通老百姓了解罷了。 Ray-ban Meta 的黑科技,講白了就是人家拉個百人團隊在搞那支眼鏡,然後把軟體技能和硬體規格點滿,再加上極致優化後的成果罷了! 某SW嘴砲部經理有多會帶風向?光是我印象比較深刻、跟現任or前同事有關的的就有三件,約莫兩年多前,有次我私底下跟他討論公事(已經忘了討論啥了)時,那廝跟我說:『 唉~你看像SDA那些老人,我可不想要以後變成跟他們一樣 』(我心想:你他媽的就只是一個打嘴炮的貨色而已,在那看不起別人,啊你是又多高尚?),還有更久的事,疫情發生前以前,當年我們SW處長(離職前好像升協理了,人稱J大),從這部門離開跳巢到另一間陸資企業,且帶了一批人一起走,那段時間有次我跟嘴砲部經理在公司用餐閒聊時,他跟我說:『 誒~有人說J大是現代吳三桂,你怎麼看? 』,我問他此話怎麼說?他說:『因為這個蘋果的產品供應鏈目前清一色台廠,他把陸資引...

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

熱門文章

[平成26年7月25日~28日]北アルプスの夏 ♪ 厳しく美しい後立山連峰南部3泊4日縦走★白馬八方から針ノ木岳(テント背負)

Jan 2025【苗栗三義】富貴牡丹(三義館)人文藝術餐廳|預約制|在美術館裡吃無菜單料理

Mar 2026【隨筆】Clone a Meta Ray-ban Display glasses application|藍芽 L2CAP CoC 極致低延遲架構優化:實現 720p 智慧眼鏡流暢串流 👓(LIVE DEMO)

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

Aug 2026【南投信義】郡大林道 19K 造訪郡大神木群的千年紅檜(望鄉山神木群)

Sep 2026【台北北投】陽明大學登山口~軍艦岩~丹鳳山~唭哩岸~奇岩山

Jun 2026【新北八里】觀音山後山隨便走|觀音亭、眾樂園、象牙石、牛寮埔步道、大英雄、硬漢嶺

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

Mar 2025【新竹五峰】油羅山森呼吸:擁抱原始柳杉林秘境之美(羅山林道第一登山口往返)

Jan 2025【苗栗泰安】泰安警光山莊泡湯&沐藏料理所X海龍王|彰化板前料理 ♨️🍁🥢🍲

文章列表

Contact

名稱

以電子郵件傳送 *

訊息 *