LiveGBS國標GB/T28181流媒體服務如何實現跨域鑑權

LiveGBS 實現了 GB28181 協議，能夠接入各個廠家的監控設備和監控平臺，實現統一管理，和 web 端無插件播放，同時支持手機、微信播放。

LiveGBS 提供簡單的登錄鑑權,客戶端通過用戶名密碼登錄成功後,服務端返回認證token的cookie, 後續的接口訪問, 服務端從cookie讀取token進行校驗. 但是, 在與客戶系統集成時, 往往需要在客戶系統完成鑑權過程. 這時就涉及到跨域的問題. 那麼,這一套鑑權過程如何應用到跨域場景中呢?

服務端處理

服務端需要做以下處理:

1. 登錄成功, 服務端主動寫 token 到 cookie

   按照之前的接口設計, 登錄成功, 服務端在 HTTP Response Body 中返回 token,由客戶端自己負責將 token 寫入 cookie. 在跨域場景中, 這樣就行不通了,由於瀏覽器的限制, 客戶端無法將 token 寫到非子域名 cookie. 改爲服務端主動寫 token 到 cookie 就沒有這個問題了. 服務端在 HTTP Response Header 中添加 Set-Cookie 字段, 寫入 token=xxx

2. 服務端統一做充許跨域訪問設置

   服務端配置充許跨域並且攜帶cookie, 需要在 HTTP Response Header 中添加以下兩項:

   Access-Control-Allow-Credentials: true
   Access-Control-Allow-Origin: $http_origin
   

   Access-Control-Allow-Origin 不可以配置成 *, 而是當前HTTT前求客戶端的 Origin

3. 註銷登錄時, 服務端主動將 token 從 cookie 清理

   Set-Cookie: token=; expires=Thu, 01 Jan 1970 00:00:00 GMT;
   

客戶端處理

客戶端不必顯示保存 token 到 cookie. 所有和 LiveGBS 的交互接口需要添加跨域配置, xhrFields: { withCredentials: true } 和 crossDomain: true

例如跨域登錄接口調用示例如下:

$.ajax({
    type: "GET",
    url: "http://other-domain/api/v1/login",
    xhrFields: { 
        withCredentials: true
    },
    crossDomain: true, 
    data: {
        username: 'admin',
        password: '21232f297a57a5a743894a0e4a801fc3'//admin
    },
    success: function(data) {
        console.log(data);
    }
});