【方案】跨站点(授权)登录方式

文章探讨了三种跨域跨站点实现免登录操作的方法:一是使用iframe和cookie,但受限于浏览器的SameSite策略;二是通过window.open打开新窗口授权,交互流程较长;三是利用jsonp进行跨域请求,但安全性较低。每种方法都有其优缺点。

场景:跨域跨站点实现免登录操作,方案记录 持续更新

站点A 和站点B 已经实现用户打通
在站点A 登录之后  访问站点B不用再次登录

方式一

站点A 登录之后dom创建iframe src为B站点主域名下接口 以及A站点登录后的用户用户信息  通过接口把A站点登录的用户信息 写入到B站点主域名下的cookie中 实现用户访问B站点页面 也有用户信息达成免登录效果

鉴于chrome浏览器限制 接口写入cookie 会被samesite策略限制  需设置SameSite=None 和 Secure [Chrome Docs]

优点:静默就能实现功能 用户无感知

缺点:iframe 对接口限制🚫

方式二

父站点A  通过window.open 打开一个新的小窗口 同样窗口url中增加 A站点用户信息 窗口中B站点通过url 获取A站点用户信息 写入B站点主域名cookie中 成功之后 跳转到A站点地址 

父站点A可以监听 子窗口url(同域)兼容到A站点成功页 就可调用close()方法关闭子窗口

优点:新窗口授权 没有任何限制

缺点:交互流程长 父站点只能获取同域下窗口信息

方式三

站点A 登录后可以通过 link 或者 script 标签 的支持跨域请求的功能  地址填写站点B的接口以及A站点的用户信息  ,可以通过jsonp的方式进行交互

缺点:jsonp自身安全性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值