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');