专栏首页老男孩成长之路单点登录(Single Sign On)解决方案

单点登录(Single Sign On)解决方案

需求

多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

A 网站和 B 网站是同一家公司的关联服务。现在要求,用户只要在其中一个网站登录,再访问另一个网站就会自动登录,请问怎么实现?

涉及到的关键点:

这里就涉及到了 跨域认证 以及 前端页面 JavaScript 跨域 问题。

一、跨域认证问题

互联网服务离不开用户认证。一般流程是下面这样。

  1. 用户向服务器发送账户和密码
  2. 服务器验证通过后,在当前会话 (session)里保存相关数据,如用户角色、用户ID等
  3. 服务器向用户返回一个 session_id,写入用户 cookie
  4. 用户之后的每一次请求,都会通过 Cookie 将 session_id 传回服务器
  5. 服务器收到 session_id ,找到之前存储的数据,由此得知用户身份

下面以 登录 A 站点 访问 B 站点 为例

方案一: session 持久化

将 session 数据持久化,写入数据库或别的持久层。各种服务受到请求后,都向持久层请求数据。

这种方案,对于各种系统的代码改动量少,只要在权限验证的地方进行判断即可。

  • A 登录成功代码 登录成功后,将 session 存储到 Redis 持久化存储,注意设置有效期 tip: Redis 以层级形式、目录形式保存数据,最大四级,格式如下: set('dir:dir:dir:key', 'value');
/**
 * 将 Session 存储到 Redis
 * @param boolean $logout 是否退出登陆 默认否
 * @return array
 */
public function sessionToRedis($logout = false) {
    try {
        if ($logout) {
            (new Redis())->del('Admin:session:' . session_id());
        }else{
            $userInfo = session('CH_ADMIN_LOGIN_STATUS');
            $res = (new Redis())->setex('Admin:session:' . session_id(), 28800, json_encode($userInfo, JSON_UNESCAPED_UNICODE));
                    if ($res === false) throw new \Exception('Redis 存储失败');
                    return true;
                }
            } catch (\Exception $e) {
                return false;
            }
        }
    </pre>
  • 登录成功后 访问 B, B 进行用户身份认证 注意 此时 访问 B的链接URL 要携带参数 sessionid! B 在处理请求- 身份验证时,先解析是否携带了sessionid参数,携带了则向 redis 中查询相关数据,并将数据保存到当前会话中。此时就成功 登录 B 了。
/**
             * 通过其他后台单点登陆
             * 传递session_id(用于session共享)
             */
$params = $request->param();
if (!empty($params) && isset($params['session_id'])) {
    session_id($params['session_id']);
    // 设置会话id
    $userInfo = Session::get('userinfo', 'admin');
    if (empty($userInfo)) {
        $userInfo = json_decode((new Redis())->get('Admin:session:'.$params['session_id']), true);
        Session::set('userinfo', $userInfo, 'admin');
    }
} else {
    $userInfo = Session::get('userinfo', 'admin');
}
</pre>

方案二:JWT(JSON Web Token)

服务器索性不保存 session 数据了,「用户数据」加密保存到「客户端」,每次请求都将数据发回服务器,服务器再进行解析得到用户身份信息数据。JWT 就是这种方案的一个代表。

JWT 原理


服务器认证后,生成一个 JSON 对象,发回给用户,就像下面这样。

{
  "姓名": "张三",
  "角色": "管理员",
  "到期时间": "2019年10月1日0点0分"
}

以后,用户与服务端通信的时候,都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用户篡改数据,服务器在生成这个对象的时候,会加上签名(详见后文)。

服务器就不保存任何 session 数据了,也就是说,服务器变成无状态了,从而比较容易实现扩展。

JWT 的数据结构


它是一个很长的字符串,中间用点(.)分隔成三个部分。注意,JWT 内部是没有换行的,这里只是为了便于展示,将它写成了几行。

JWT 的三个部分依次如下。

  • Header(头部)
  • Payload(负载)
  • Signature(签名)

写成一行,就是下面的样子。

Header.Payload.Signature


Header 部分是一个 JSON 对象,描述 JWT 的元数据,通常是下面的样子。

{
  "alg": "HS256",
  "typ": "JWT"
}

上面代码中,alg属性表示签名的算法(algorithm),默认是 HMAC SHA256(写成 HS256);typ属性表示这个令牌(token)的类型(type),JWT 令牌统一写为JWT。

最后,将上面的 JSON 对象使用 Base64URL 算法(详见后文)转成字符串。

Payload


Payload 部分也是一个 JSON 对象,用来存放实际需要传递的数据。JWT 规定了7个官方字段,供选用。

  • iss (issuer):签发人
  • exp (expiration time):过期时间
  • sub (subject):主题
  • aud (audience):受众
  • nbf (Not Before):生效时间
  • iat (Issued At):签发时间
  • jti (JWT ID):编号

除了官方字段,你还可以在这个部分定义私有字段,下面就是一个例子。

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

注意,JWT 默认是不加密的,任何人都可以读到,所以不要把秘密信息放在这个部分。

这个 JSON 对象也要使用 Base64URL 算法转成字符串。

Signature


Signature 部分是对前两部分的签名,防止数据篡改。

首先,需要指定一个密钥(secret)。这个密钥只有服务器才知道,不能泄露给用户。然后,使用 Header 里面指定的签名算法(默认是 HMAC SHA256),按照下面的公式产生签名。

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

算出签名以后,把 Header、Payload、Signature 三个部分拼成一个字符串,每个部分之间用"点"(.)分隔,就可以返回给用户。

Base64URL


前面提到,Header 和 Payload 串型化的算法是 Base64URL。这个算法跟 Base64 算法基本类似,但有一些小的不同。

JWT 作为一个令牌(token),有些场合可能会放到 URL(比如 api.example.com/?token=xxx)。Base64 有三个字符+、/和=,在 URL 里面有特殊含义,所以要被替换掉:=被省略、+替换成-,/替换成_。这就是 Base64URL 算法。

JWT 的使用方式


客户端收到服务器返回的 JWT,可以储存在 Cookie 里面,也可以储存在 localStorage。

此后,客户端每次与服务器通信,都要带上这个 JWT。你可以把它放在 Cookie 里面自动发送,但是这样不能跨域,所以更好的做法是放在 HTTP 请求的头信息Authorization字段里面。

Authorization: Bearer <token>

另一种做法是,跨域的时候,JWT 就放在 POST 请求的数据体里面。

JWT 的几个特点


(1)JWT 默认是不加密,但也是可以加密的。生成原始 Token 以后,可以用密钥再加密一次。

(2)JWT 不加密的情况下,不能将秘密数据写入 JWT。

(3)JWT 不仅可以用于认证,也可以用于交换信息。有效使用 JWT,可以降低服务器查询数据库的次数。

(4)JWT 的最大缺点是,由于服务器不保存 session 状态,因此无法在使用过程中废止某个 token,或者更改 token 的权限。也就是说,一旦 JWT 签发了,在到期之前就会始终有效,除非服务器部署额外的逻辑。

(5)JWT 本身包含了认证信息,一旦泄露,任何人都可以获得该令牌的所有权限。为了减少盗用,JWT 的有效期应该设置得比较短。对于一些比较重要的权限,使用时应该再次对用户进行认证。

(6)为了减少盗用,JWT 不应该使用 HTTP 协议明码传输,要使用 HTTPS 协议传输。

二、JavaScript 跨域

单点登录难免会遇到窗口之间 JS 跨域问题,此时的解决方案是 postMessage

postMessage 是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题: a.) 页面和其打开的新窗口的数据传递 b.) 多窗口之间消息传递 c.) 页面与嵌套的iframe消息传递 d.) 上面三个场景的跨域数据传递

用法:postMessage(data,origin) 方法接受两个参数 data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。 origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

1.)a.html:(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

2.)b.html:(http://www.domain2.com/b.html)

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OpenCV 可视化工具

    OpenCV 传统的调试方式是 cv2.imshow() cv2.waitKey() ,即显示一张图片,然后查看之后再销毁它, 这个操作实在是太不方便了,如果调...

    机器视觉CV
  • 运营商劫持狠起来,连json都改

    运营商劫持,是常见的流氓手段,它们老少通吃,连孩子都不放过,经常嚣张的在右下角或者网页头尾,弹出一些羞羞的广告。这让正在辅导孩子功课的妈妈,很难解释。

    用户4143945
  • 聊起 BigTable,让你不再胆怯

    GFS 作为其中一驾宝车,解决了大数据存储的难题。它能够把大量廉价的普通机器,聚在一起,充分让每台廉价的机器发挥光和热。其中在《从谷歌 GFS 架构设计聊开去》...

    一猿小讲
  • AJAX 与跨域通信(三):跨域解决方案

    承接上文,继续补充跨域方案:postMessage、location.hash、WebSocket、Nginx 反向代理、Nodejs 中间件代理。

    Chor
  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • 带你认识 flask 个人主页和头像

    作为创建个人主页的第一步,让我们为其URL /user/ 新建一个对应的视图函数。

    公众号---志学Python
  • HTML引入文件的绝对路径、相对路径、根目录

    什么是绝对路径?绝对路径指的是文件的真正路径,使用绝对路径链接外部资源,如:图片、超级链接、flash、音频、视频等等。代码如下:

    德顺
  • 深入探讨 Python 的 import 机制:实现远程导入模块

    与此相反。恰恰我觉得这篇文章的内容可以算是 Python 的进阶技能,会深入地探讨并以真实案例讲解 Python import Hook 的知识点。

    Python猫
  • H5 + WebGL 实现的地铁站 3D 可视化系统

    工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领...

    HT for Web
  • 轻松掌握 Linux 命令(1):ls 命令

    ls 命令是 linux 下最常用的命令。ls 命令就是 list 的缩写,缺省下用来打印出当前目录的清单。如果 ls 指定其他目录,那么就会显示指定目录里的文...

    Python猫

扫码关注云+社区

领取腾讯云代金券