Javashop 电商系统sso登录实现

业务需求

嵌入到三方原有系统中，用户数据不留存在本系统中，而是调取三方的接口实现登录判断

架构

一.登录的时序图

对方提供了登录页面，对面会员详细数据不存在本系统内。对方提供了4个接口，用来嵌入。以下为时序图

二.数据结构

Member | 字段名 | 类型 | 备注 | |--|--|--| |memberId|String|-| |avatarUrl|String|头像| |cardNO|String|会员号| |email|String|邮箱| |memberName|String|会员昵称| |memberPoint|Int|积分| |memberTypeID|String|会员类型（会员卡等级）| |oldCardNO|String|用户唯一标识| |papersType|String|证件类型| |totalPoint|Int|总积分| |tel|String|手机号| |papersNo|String|证件编号| |applicationChannel|String|渠道|

三.源码

说明：此处仅展示预存款充值相关代码，其他关联业务不做具体展示

1. 商城前端页面，加载一段JS。获取浏览器和被嵌入服务器的sessionid
2. 拦截所有需要权限的访问，通过sessionid，调取被嵌入系统接口，查询是否存登录状态。

BuyerSecurityConfig.java

@Configuration
@EnableWebSecurity
public class BuyerSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
public void configure(HttpSecurity http) throws Exception {
//过滤掉不需要买家权限的api ，在里面加上访问嵌入系统的API路径
http.authorizeRequests().antMatchers("/debugger/**"。。。).permitAll().and();
//定义有买家权限才可以访问
http.authorizeRequests().anyRequest().hasRole(Role.BUY.name());
}}

　　

3.访问本系统连接第三方的API，通过接口查询登录状态，如果登录状态存在，那么继续调用接口。查询用户的基本信息，在本系统中，查询是否存在该用户基本信息

//查询是否在本地存在
Member member = memberManager.getMemberByID(ID);
if (member == null) {
    //同步用户数据到本地
}

4.当用户数据同步完成或者已经存在，那么生成一个Buy权限的token ，并且返回给前端。

//新建买家角色
Buy buyer = new Buy();
//设置唯一ID,uuid为前端生成传值到后台
buyer.setUuid(uuid);
//名字为接口返回的用户名
buyer.setUsername(memberName);
//设置用户ID为
buyer.setUid(member.getMemberId());
//通过角色创建TOKEN
Token token = tokenManager.create(buyer);
String accessToken = token.getAccessToken();
String refreshToken = token.getRefreshToken();

5.前端中进行判断

/**
 * 检查token：
 * 1. user/accessToken/refreshToken都不存在。
 *    表示用户没有登录，放行所有API
 * 2. 不存在accessToken，但是user/refreshToken存在。
 *    表示accessToken过期，需要重新获取accessToken。
 *    如果重新获取accessToken返回token失效错误，说明已被登出。
 * @param options
 * @returns {Promise<any>}
 */

6.然后把accessToken 信息存入 COOKIE中。

四.注意事项

本系统前端 由VUE搭建。分为本地渲染和服务器渲染。

PC页面由本地渲染，不涉及跨域问题，所以存入的COOKIE有效

但是WAP由服务器渲染，无法通过

$store.dispatch('user/setAccessTokenAction', response.accessToken)

这种方式获取COOKIE中的信息

在VUE的package.json中，在dependencies 内，加入

"cookie-universal-nuxt": "^2.1.4",

通过该方法，可以使前端传入cookie 。并且通过app.$cookies 属性使用cookie：

   app.$cookies.set(''uid'', res.uid);
   app.$cookies.get('uid');

易族智汇（javashop）原创文章