【大前端】認識單點登入

初識單點登入

最初接觸到單點登入要追溯到3年多以前了，那時候看到的只是passport，當時要做全國所有社群的登入，然後就照著內部文件寫了程式碼，然後就接入了（這裡要提一句是百度與騰訊一旦形成產品的技術專案，文件都很不錯）然後就沒有然後了......

而知識的珍貴程度卻是這樣的：

知識珍貴度排名：
聽過 < demo過 < 實際工作用過 < 實際工作中被坑過< 實際工作中被多次坑過或者深入研究總結過

所以，脫離工作去學習node可能收效不大，脫離專案去說前端優化可能不讓人信服，不被ie坑也認識不到相容，這個時候我們就要抓住工作中的點，一點點深入進去了，也許這一輪的瓶頸就自然而然的突破了呢，這是我最近的想法，也試著朝著相關的方向努力。

今天想要寫passport事實上是工作中用到了這個點了，如果我就照著內部文件接入了似乎意義不大，所以我準備就著這個機會騷騷瞭解下原理，期望將他變成第一類知識沉澱。

文中內容皆是自我總結或者查詢，如果有誤請您提出，文中程式碼比較簡陋，僅幫助理解，勿用作實際專案

什麼是單點登入

單點登入即single sign on，用以解決同一公司不同子產品之間身份認證問題，也就是說，a.baidu.com與b.baidu.com兩個站點之間只需要登入一次即可。

一般來說單點登入實現原理為，首次訪問一個站點時會被引導至登入頁，使用者登入驗證通過，瀏覽器會儲存一個關鍵key（一般採用cookie），使用者訪問其他系統時會帶著這個key，伺服器系統發現具有key標誌後，會對其進行驗證，如果通過便不需要再次登入了。

這裡的關鍵為二，第一是key，其二為系統統一的認證機制，這當中key會有一系列規則保證登入的安全性，而統一的認證機制是單點登入的前提，key是由他提供出去，每次使用者由以這個給出的key來這裡驗證，判斷其有效性，這裡的統一的驗證平臺便是passport，他負責著製作通行令牌，並且對其進行驗證。

這裡舉個例子來說（有誤請您指出）：

子系統A統一到passport伺服器鑑權，並且在passport處獲取cookie，並將token加入url，跳轉回子系統A
跳回子系統A後，使用token再次去passport驗證（這裡直接走webservice服務驗證，不再跳轉），驗證通過便在A系統伺服器生成session，以後訪問子系統A，在有效時間內不到passport驗證
進入子系統B，跳到passport鑑權，發現passport cookie已經存在（token），便直接跳回子系統B，url帶有token值，使用token去驗證流程與A一致

實現原理

以騰訊百度等公司產品來說，他們一般會有一個統一的域，比如：

baidu.com => tieba.baidu.com、music.baidu.com、baike.baidu.com......

qq.com => feiji.qq.com、cd.qq.com、music.qq.com

這類共享一個主域，但是這類網站往往還會提供給第三方使用，比如騰訊會給tencent.com與jd.com使用，這個時候一些實現細節又不一樣，但有一點是確定的：

單點登入要求共享一套賬號體系，至少儲存各個子系統的公共資訊

使用者登入態，我們存於session中，這個時候第一類站點的單點登入便比較簡單，以百度為例，直接設定baike.baidu.com與tieba.baidu.com的session為cookie domain為baidu.com便可解決問題。

第二種情況比較普遍，便是music.qq.com與jd.com要實現單點登入，這個便完全跨域了，SSO的做法是將登入態儲存至公用域，一般是passport.xx.com，比如百度為passport.baidu.com。

這個時候tieba.baidu.com或者music.baidu.com的授權檢查與退出操作全部由SSO（passport.baidu.com）來進行

簡單實現

單點登入的呼叫表現一般有兩種：

① 跳轉

② 彈出層回撥

當使用者在子系統未登入時，便會攜帶相關引數，比如tieba.baidu.com去到SSO（passport.baidu.com）進行登入

登入成功SSO會生成ticket key並附加給源網址跳轉回去，這個時候SSO上已經有使用者的登入狀態了，但是各個子系統仍然沒有登入態，所以根據這個ticket設定各個子系統獨立的登入態是需要的。

當在SSO驗證結束後，會回到子系統，子系統會根據得到的ticket（SSO為此次登入生成的使用者基本資訊加密串）獲取使用者的基本資訊，從而在本站設定登入態。

這裡使用程式碼做一個說明，有2年沒有寫伺服器端程式碼了，最後選來選去使用了node實現，才發現自己對node也很不熟悉啊！！！

passport的實現

首先我們看看鑑權程式碼的實現

var path = require('path');
var express = require('express');
var router = express.Router();
//偷懶，將token資料寫入檔案
var fs = require('fs');

/* GET home page. */
router.get('/', function (req, res, next) {
  if (!req.query.from) {
    res.render('index', {
      title: '統一登入passport'
    });
    return;
  }
  var from = req.query.from;
  var token = null;
  var cookieObj = {};
  var token_path = path.resolve() + '/token_user.json';
  req.headers.cookie && req.headers.cookie.split(';').forEach(function (Cookie) {
    var parts = Cookie.split('=');
    cookieObj[parts[0].trim()] = (parts[1] || '').trim();
  });
  token = cookieObj.token;
  //如果url帶有token，則表明已經在passport鑑權過
  if (token) {
    //存在token，則在記憶體中尋找之前與使用者的對映關係
    //非同步的
    fs.readFile(token_path, 'utf8', function (err, data) {
      if (err) throw err;
      if (!data) data = '{}';
      data = JSON.parse(data);
      //如果存在標誌，則驗證通過
      if (data[token]) {
        res.redirect('http://' + from + '?token=' + token);
        return;
      }
      //如果不存在便引導至登入頁重新登入
      res.redirect('/');
    });
  } else {
    res.render('index', {
      title: '統一登入passport'
    });
  }
});

router.post('/', function (req, res, next) {
  if (!req.query.from) return;
  var name = req.body.name;
  var pwd = req.body.password;
  var from = req.query.from;
  var token = new Date().getTime() + '_';
  var cookieObj = {};
  var token_path = path.resolve() + '/token_user.json';
  //簡單驗證
  if (name === pwd) {
    req.flash('success', '登入成功');
    //passport生成使用者憑證，並且生成令牌入cookie返回給子系統
    token = token + name;
    res.setHeader("Set-Cookie", ['token=' + token]);
    //持久化，將token與使用者的對映寫入檔案
    fs.readFile(token_path, 'utf8', function (err, data) {
      if (err) throw err;
      if (!data) data = '{}';
      data = JSON.parse(data);
      //以token為key
      data[token] = name;
      //存回去
      fs.writeFile(token_path, JSON.stringify(data), function (err) {
        if (err) throw err;
      });
    });
    res.redirect('http://' + from + '?token=' + token);
  } else {
    console.log('登入失敗');
  }
});
module.exports = router;

子系統A的實現

var express = require('express');
var router = express.Router();
var request = require('request');

/* GET home page. */
router.get('/', function (req, res, next) {
  var token = req.query.token;
  var userid = null;
  //如果本站已經存在憑證，便不需要去passport鑑權
  if (req.session.user) {
    res.render('index', {
      title: '子產品-A-' + req.session.user,
      user: req.session.user
    });
    return;
  }
  //如果沒有本站資訊，又沒有token，便去passport登入鑑權
  if (!token) {
    res.redirect('http://passport.com?from=a.com');
    return;
  }
  //存在token的情況下，去passport主站檢查該token對應使用者是否存在，
  //存在並返回對應userid
  //這段程式碼是大坑！！！設定的代理request不起效，調了3小時
  request(
    'http://127.0.0.1:3000/check_token?token=' + token + '&t=' + new Date().getTime(),
    function (error, response, data) {
      if (!error && response.statusCode == 200) {
        data = JSON.parse(data);
        if (data.code == 0) {
          //這裡userid需要通過一種演算法由passport獲取，
          //這裡圖方便直接操作token
          //因為token很容易偽造，所以需要去主戰驗證token的有效性，
          //一般通過webservers 這裡驗證就簡單驗證即可......
          userid = data.userid;
          //有問題就繼續登入
          if (!userid) {
            res.redirect('http://passport.com?from=a.com');
            return;
          }
          //取得userid後，系統便認為有許可權去資料庫根據使用者id獲取使用者資訊
          //根據userid運算元據庫流程省略......
          // req.session.user = userid;
          res.render('index', {
            title: '子產品-A-' + userid,
            user: userid
          });
          return;
        } else {
          //驗證失敗，跳轉
          res.redirect('http://passport.com?from=a.com');
        }
      } else {
        res.redirect('http://passport.com?from=a.com');
        return;
      }
    });
});
module.exports = router;

passport鑑權程式模擬

var express = require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs'); 

/* GET users listing. */
router.get('/', function(req, res, next) {
  var token = req.query.token;
  var ret = {};
  var token_path = path.resolve() + '/token_user.json';
  ret.code = 1;//登入失敗
  if(!token) {
    res.json(ret);
    return;
  }
  //如果傳遞的token與cookie不等也認為是鑑權失敗
  // if(token != cookieObj['token']){
  //     res.json(ret);
  //   return;
  // }
  fs.readFile(token_path, 'utf8', function (err, data) {
        if (err) throw err;
        if(!data) data = '{}';
        data = JSON.parse(data);
        //如果存在標誌，則驗證通過，未考慮賬號為0的情況
        if(data[token]) {
            ret.code = 0;//登入成功
            ret.userid = data[token];
        }
        res.json(ret);
    });
});
module.exports = router;

簡單測試

測試之前需要設定host，這裡繼續採用fiddler神器幫助：

這邊直接用node跑了3個伺服器：

然後開啟瀏覽器輸入a.com，直接跳到了，登入頁：

簡單登入後(賬號密碼輸入一致即可)：

這個時候直接進入子系統B：

直接便登入了，說明方案大體上是可行的

結語

首先，這裡的程式很簡陋，很多問題，也沒有做統一退出的處理，今天主要目的是瞭解單點登入，後面有實際工作再求深入。

這裡附上原始碼，感興趣的朋友看看吧：http://files.cnblogs.com/files/yexiaochai/web.rar，注意依賴包