玩物得志SSO设计

前言

随着公司的发展，公司内部各种系统后台也越来越多，需要进行的登录验证的操作也越来越多。不同的账号体系，不受限制的密码管理也成了一个问题。为了解决这些问题，需要对公司的登录管理进行统一，使用同一套的账号密码体系，并对密码的安全管控进行限制。

于是单点登录的需求就变得很现实。单点登录-Single Sign On，简称SSO。可以理解为：一处登录，处处登录

以我司为例：内部系统的域名为 wwdz.com，设计单点登录的目标是，只要登录了其中的一个系统  a.wwdz.com 再打开其他接入单点登录的系统，比如 b.wwdz.com，可以直接获取用户信息，无需再次输入账号密码

SSO流程

以下是SSO登录时序图

• 为其在SSO服务端创建session

• 签发token（JWT格式），并在payload中指定过期时间等信息。

• 通知浏览器进行重定向，目标是系统A，并把token作为url参数进行传递 或者 将token写入 cookie中（*.wwdz.com Authorization）
  

token过期
用户在使用过程中，密码变化
token无法解码
用户被锁定

以上就实现了一个SSO的登录流程。

钉钉扫码登录

但是随着各种密码安全规章制度的完善，我司对用户密码的生命周期与强度都做了一定的要求，这就导致了一个很尴尬的问题：有些同学在设计了一个超复杂的密码后……把自己的密码忘记了。虽然提供重置密码功能，但不能总是在需要用密码的时候重置密码（虽然这个方法会提高密码更新频率，对安全来说是个好办法，但是还是影响工作效率），于是在现有SSO的基础上添加钉钉扫码登录功能

钉钉扫码登录的逻辑不是很复杂，钉钉提供了很详细的文档对此操作进行了描述。

1. 在钉钉开放平台创建 移动接入应用 并在 登录 中创建 扫码登录应用授权 ，指定相应的回调地址、appId、 appSecret等信息。
2. 在登录页引入钉钉的js文件，并设定回调地址等信息。
3. 用户扫码并在手机上点击确认后，js会将获取的loginTmpCode返回给设定的回调地址
4. 回调服务器获取loginTmpCode后构造相应的url跳转到钉钉服务器
5. 如果钉钉服务器调用成功，则会302跳转到goto参数指定的redirect_uri，并向url参数中追加临时授权码code及state参数。
6. 调用钉钉接口获取授权用户的个人信息。
7. 将钉钉的个人信息与SSO中的信息进行关联实现免密码登录。

一键登录

但是，随着时间的推移，又有同学说扫码登录还是要掏手机，不方便，于是乎萌生了一键登录的想法。

大家在使用QQ的时候可能会注意到：当用户使用QQ客户端之后，在使用浏览器访问腾讯的一些登录页面时，登录页面会获取到QQ信息，登录页面会变成QQ一键登录。实现这样的一键登录就要自己做一个客户端，客户端listen一个本地端口。浏览器在访问统一登录的时候请求这个本地端口以获取用户信息，进而实现一键登录的功能。

但是，这个想法的出现不仅仅是想做一键登录，也是由于VPN客户端安装使用的不方便（这是另一个话题了）。

为了实现这个功能，首先要改造一下SSO登录页面。需要假定一个请求用户信息的本机接口。

默认情况下一键登录是不显示的。但如果这个接口是通的，则隐藏原有的登录界面，直接提示一键登录，并获取从该接口获取相应的用户鉴权信息（username passwd）。以下是添加到SSO登录页中的js代码。

$(document).ready(function(){
   document.getElementById('autologin').style.display='none'
   $.get("http://127.0.0.1:xxxx",function(data,status){
   let datas = data.split(' ')
   let username = datas[0]
   let passwd = datas[1]
   console.log("username = " + username)
   console.log("passwd = " + passwd)
   document.getElementById('login').style.display='none'
   document.getElementById('autologin').style.display=''
   document.getElementById('autousername').value=username
   document.getElementById('autopasswd').value=passwd
   });
});

之后就是创建客户端，具体逻辑可以再写一篇，这里直说一下实现方案。

由于公司里使用MAC和win的都很多，所以搞一套易于扩展的跨平台方案是很必要的。最后我选择了Electron。

在我的理解中，Electron可以看做是用有一定限制的浏览器做GUI的跨平台APP解决方案。

启动了这个客户端app后，它会监听本机的指定端口，一旦被访问就会返回相应账号信息（只有用户登录并开启一键登录之后才会监听），这样就能与改造后的SSO登录页面进行适配，效果如下

客户端效果（由于是内嵌浏览器，基本的界面都是与SSO登录页保持一个风格，vpn客户端功能以后再说）

SSO统一登录在检测到一键登录后的效果

点击一键登录后，页面会自动将鉴权信息发送给SSO，其流程完全没有改变。

                                THE END