【大前端】認識單點登陸

時間  2019-11-19
標籤 大前端 認識 單點 登陸 简体版
原文   原文鏈接

初識單點登陸

最初接觸到單點登陸要追溯到3年多之前了，那時候看到的只是passport，當時要作全國全部社區的登陸，而後就照着內部文檔寫了代碼，而後就接入了（這裏要提一句是百度與騰訊一旦造成產品的技術項目，文檔都很不錯）而後就沒有而後了......前端

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

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

因此，脫離工做去學習node可能收效不大，脫離項目去說前端優化可能不讓人信服，不被ie坑也認識不到兼容，這個時候咱們就要抓住工做中的點，一點點深刻進去了，也許這一輪的瓶頸就天然而然的突破了呢，這是我最近的想法，也試着朝着相關的方向努力。web

今天想要寫passport事實上是工做中用到了這個點了，若是我就照着內部文檔接入了彷佛意義不大，因此我準備就着這個機會騷騷瞭解下原理，指望將他變成第一類知識沉澱。算法

文中內容皆是自我總結或者查詢，若是有誤請您提出，文中代碼比較簡陋，僅幫助理解，勿用做實際項目數據庫

什麼是單點登陸

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

通常來講單點登陸實現原理爲，首次訪問一個站點時會被引導至登陸頁，用戶登陸驗證經過，瀏覽器會存儲一個關鍵key（通常採用cookie），用戶訪問其餘系統時會帶着這個key，服務器系統發現具備key標誌後，會對其進行驗證，若是經過便不須要再次登陸了。json

這裏的關鍵爲二，第一是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的實現

首先咱們看看鑑權代碼的實現

 1 var path = require('path');
 2 var express = require('express');
 3 var router = express.Router();
 4 //偷懶，將token數據寫入文件
 5 var fs = require('fs');
 6 
 7 /* GET home page. */
 8 router.get('/', function (req, res, next) {
 9   if (!req.query.from) {
10     res.render('index', {
11       title: '統一登陸passport'
12     });
13     return;
14   }
15   var from = req.query.from;
16   var token = null;
17   var cookieObj = {};
18   var token_path = path.resolve() + '/token_user.json';
19   req.headers.cookie && req.headers.cookie.split(';').forEach(function (Cookie) {
20     var parts = Cookie.split('=');
21     cookieObj[parts[0].trim()] = (parts[1] || '').trim();
22   });
23   token = cookieObj.token;
24   //若是url帶有token，則代表已經在passport鑑權過
25   if (token) {
26     //存在token，則在內存中尋找以前與用戶的映射關係
27     //異步的
28     fs.readFile(token_path, 'utf8', function (err, data) {
29       if (err) throw err;
30       if (!data) data = '{}';
31       data = JSON.parse(data);
32       //若是存在標誌，則驗證經過
33       if (data[token]) {
34         res.redirect('http://' + from + '?token=' + token);
35         return;
36       }
37       //若是不存在便引導至登陸頁從新登陸
38       res.redirect('/');
39     });
40   } else {
41     res.render('index', {
42       title: '統一登陸passport'
43     });
44   }
45 });
46 
47 router.post('/', function (req, res, next) {
48   if (!req.query.from) return;
49   var name = req.body.name;
50   var pwd = req.body.password;
51   var from = req.query.from;
52   var token = new Date().getTime() + '_';
53   var cookieObj = {};
54   var token_path = path.resolve() + '/token_user.json';
55   //簡單驗證
56   if (name === pwd) {
57     req.flash('success', '登陸成功');
58     //passport生成用戶憑證，而且生成令牌入cookie返回給子系統
59     token = token + name;
60     res.setHeader("Set-Cookie", ['token=' + token]);
61     //持久化，將token與用戶的映射寫入文件
62     fs.readFile(token_path, 'utf8', function (err, data) {
63       if (err) throw err;
64       if (!data) data = '{}';
65       data = JSON.parse(data);
66       //以token爲key
67       data[token] = name;
68       //存回去
69       fs.writeFile(token_path, JSON.stringify(data), function (err) {
70         if (err) throw err;
71       });
72     });
73     res.redirect('http://' + from + '?token=' + token);
74   } else {
75     console.log('登陸失敗');
76   }
77 });
78 module.exports = router;

子系統A的實現

 1 var express = require('express');
 2 var router = express.Router();
 3 var request = require('request');
 4 
 5 /* GET home page. */
 6 router.get('/', function (req, res, next) {
 7   var token = req.query.token;
 8   var userid = null;
 9   //若是本站已經存在憑證，便不須要去passport鑑權
10   if (req.session.user) {
11     res.render('index', {
12       title: '子產品-A-' + req.session.user,
13       user: req.session.user
14     });
15     return;
16   }
17   //若是沒有本站信息，又沒有token，便去passport登陸鑑權
18   if (!token) {
19     res.redirect('http://passport.com?from=a.com');
20     return;
21   }
22   //存在token的狀況下，去passport主站檢查該token對應用戶是否存在，
23   //存在並返回對應userid
24   //這段代碼是大坑！！！設置的代理request不起效，調了3小時
25   request(
26     'http://127.0.0.1:3000/check_token?token=' + token + '&t=' + new Date().getTime(),
27     function (error, response, data) {
28       if (!error && response.statusCode == 200) {
29         data = JSON.parse(data);
30         if (data.code == 0) {
31           //這裏userid須要經過一種算法由passport獲取，
32           //這裏圖方便直接操做token
33           //由於token很容易僞造，因此須要去主戰驗證token的有效性，
34           //通常經過webservers 這裏驗證就簡單驗證便可......
35           userid = data.userid;
36           //有問題就繼續登陸
37           if (!userid) {
38             res.redirect('http://passport.com?from=a.com');
39             return;
40           }
41           //取得userid後，系統便認爲有權限去數據庫根據用戶id獲取用戶信息
42           //根據userid操做數據庫流程省略......
43           // req.session.user = userid;
44           res.render('index', {
45             title: '子產品-A-' + userid,
46             user: userid
47           });
48           return;
49         } else {
50           //驗證失敗，跳轉
51           res.redirect('http://passport.com?from=a.com');
52         }
53       } else {
54         res.redirect('http://passport.com?from=a.com');
55         return;
56       }
57     });
58 });
59 module.exports = router;

passport鑑權程序模擬

 1 var express = require('express');
 2 var router = express.Router();
 3 var path = require('path');
 4 var fs = require('fs'); 
 5 
 6 /* GET users listing. */
 7 router.get('/', function(req, res, next) {
 8   var token = req.query.token;
 9   var ret = {};
10   var token_path = path.resolve() + '/token_user.json';
11   ret.code = 1;//登陸失敗
12   if(!token) {
13     res.json(ret);
14     return;
15   }
16   //若是傳遞的token與cookie不等也認爲是鑑權失敗
17   // if(token != cookieObj['token']){
18   //     res.json(ret);
19   //   return;
20   // }
21   fs.readFile(token_path, 'utf8', function (err, data) {
22         if (err) throw err;
23         if(!data) data = '{}';
24         data = JSON.parse(data);
25         //若是存在標誌，則驗證經過，未考慮帳號爲0的狀況
26         if(data[token]) {
27             ret.code = 0;//登陸成功
28             ret.userid = data[token];
29         }
30         res.json(ret);
31     });
32 });
33 module.exports = router;

簡單測試

測試以前須要設置host，這裏繼續採用fiddler神器幫助：

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

而後打開瀏覽器輸入a.com，直接跳到了，登陸頁：

簡單登陸後(帳號密碼輸入一致便可)：

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

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

結語

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程