基于Vue+SpringCloudAlibaba微服务电商项目实战-构建会员服务-009：基于策略设计构建联合登录平台

本文链接：https://blog.csdn.net/u012425860/article/details/117373771

009：基于策略设计构建联合登录平台

1 基于策略模式实现联合登录代码重构设计

今日课程任务

QQ、微信联合登录oauth2.0协议原理
基于策略模式设计第三方联合登录模块
Vue与服务器端如何保证openId传递的安全性
整合第三方QQ联合登录关联openId

2 联合登录关联页面设计原理设计

openId 对单个app机构用户生成的开放的userId
关联的原理就是用户授权成功之后，将对应的openId与数据库中表账户关联。

什么是联合登录？

根据用户授权的openId查询数据库中是否有关联账户，没有关联账户就跳转到关联页面
如果该用户openId从数据库中能够查询到用户的情况下，可以实现不需要账号密码登录

3 oath2.0协议基本原理设计思想

联合登录设计思想遵循oauth2.0协议

用户选择账户授权
获取到授权码code
通过授权码获取accessToken，每个授权码只能获取一次
通过accessToken获取用户的openId
通过openId调用接口获取用户基本信息

第三方联合登录实现原理
每特教育官方测试的
APP ID：101410454
APP Key：de56b00427f5970650c4f8ee3cfcfc2d
网站地址 : http://www.itmayiedu.com:7070
网站回调域 :
http://www.itmayiedu.com:7070/login/oauth/callback?unionPublicId=mayikt_qq
主办单位名称 : 蚂蚁课堂
网站备案号 : 16014350

注意回调地址一定修改host文件
C:\Windows\System32\drivers\etc 127.0.0.1 www.itmayiedu.com

文档资料：
https://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0

4 获取用户的基本信息流程

用户选择账户授权生成授权链接
请求地址：
https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101410454&redirect_uri=http://www.itmayiedu.com:7070/login/oauth/callback?unionPublicId=mayikt_qq&state=1
注意授权码10分钟有效期且仅可使用一次
授权成功之后，浏览器会自动重定向到回调地址，在回调地址中获取到授权码code
通过授权码获取accessToken，每个授权码只能获取一次
https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=101410454&client_secret=de56b00427f5970650c4f8ee3cfcfc2d&code=4CECB1FCBE67FE950B7D6A630DA9578D&redirect_uri=http://www.itmayiedu.com:7070/login/oauth/callback?unionPublicId=mayikt_qq
通过accessToken获取用户的openId
https://graph.qq.com/oauth2.0/me?access_token=834677789229DC83C46BB87FAB33BCBF
通过openId调用接口获取用户基本信息
https://graph.qq.com/user/get_user_info?access_token=834677789229DC83C46BB87FAB33BCBF&oauth_consumer_key=101410454&openid=F50C4E912A9064C764EC1FAABA48F24B

测试流程：
在这里插入图片描述

5 vue如何安全的获取用户的openid

当用户授权成功之后，拿到授权码获取accessToken，这个流程不能放到vue中实现，不安全（防止抓包分析）。这个回调地址写到服务器端（会员web工程），会员web工程调用会员服务接口，根据授权码获取accessToken，再根据accessToken获取openId。为了安全再把openId再包装一层变成令牌，会员web工程重定向到vue中传递openToken。
在这里插入图片描述
数据库表结构的设计

DROP TABLE IF EXISTS `meite_union_login`;
CREATE TABLE `meite_union_login` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `union_name` varchar(255) DEFAULT NULL,
  `union_public_id` varchar(255) DEFAULT NULL,
  `union_bean_id` varchar(255) DEFAULT NULL,
  `app_id` varchar(255) DEFAULT NULL,
  `app_key` varchar(255) DEFAULT NULL,
  `redirect_uri` varchar(255) DEFAULT NULL,
  `request_address` varchar(255) DEFAULT NULL,
  `is_availability` int(1) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of meite_union_login
-- ----------------------------
INSERT INTO `meite_union_login` VALUES ('1', '腾讯QQ联合登陆', 'mayikt_qq', 'QQUnionLoginStrategy', '101410454', 'de56b00427f5970650c4f8ee3cfcfc2d', 'http://www.itmayiedu.com:7070/login/oauth/callback?unionPublicId=mayikt_qq', 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101410454&redirect_uri=http://www.itmayiedu.com:7070/login/oauth/callback?unionPublicId=mayikt_qq&state=1', '1');
INSERT INTO `meite_union_login` VALUES ('2', '腾讯微信联合登陆', 'mayikt_weixin', null, '123456', '12133', null, null, '0');

6 会员服务提供oath2.0授权链接

@Data
public class UnionLoginDO {
    Long id;
    /**
     * 登陆名称 比如 腾讯QQ 腾讯支付
     */
    String unionName;
    /**
     * appId
     */
    String appId;
    /**
     * 联合登陆的id
     */
    String unionPublicId;
    /**
     * beanId
     */
    String unionBeanId;
    /**
     * appKey
     */
    String appKey;
    /**
     * redirectUri 回调地址
     */
    String redirectUri;
    /**
     * 回调地址
     */
    String requestAddress;
}

public interface UnionLoginMapper {

    @Select("SELECT ID AS ID ,union_name AS  unionname ,\n" +
            "union_public_id AS unionpublicid, union_bean_Id as unionBeanId, app_id AS appid,\n" +
            "app_key AS appkey,redirect_uri as redirecturi,\n" +
            "request_address as requestaddress,is_availability as isavailability\n" +
            " FROM meite_union_login where union_public_id=#{unionPublicId} and is_availability='1'")
    UnionLoginDO selectByUnionLoginId(@Param("unionPublicId") String unionPublicId);
}

@Api(tags = "联合登录接口")
public interface MemberUnionLoginService {

    /**
     * 根部不同联合id登录
     *
     * @param unionPublicId
     * @return
     */
    @GetMapping("/unionLogin")
    BaseResponse<String> unionLogin(@RequestParam("unionPublicId") String unionPublicId);
}

@RestController
public class MemberUnionLoginServiceImpl extends BaseApiService implements MemberUnionLoginService {

    @Autowired
    private UnionLoginMapper unionLoginMapper;
    @Autowired
    private TokenUtil tokenUtil;

    @Override
    public BaseResponse<String> unionLogin(String unionPublicId) {
        if (StringUtils.isEmpty(unionPublicId)) {
            return setResultError("unionPublicId不能为空");
        }
        // 根据渠道id查询联合登录基本信息
        UnionLoginDO unionLoginDo = unionLoginMapper.selectByUnionLoginId(unionPublicId);
        if (unionLoginDo == null) {
            return setResultError("该渠道可能已经关闭或者不存在");
        }
        // state 防止重复提交
        String state = tokenUtil.createToken("member.unionLogin", "");
        String requestAddress = unionLoginDo.getRequestAddress() + "&state=" + state;
        JSONObject dataObjects = new JSONObject();
        dataObjects.put("requestAddress", requestAddress);
        return setResultSuccess(dataObjects);
    }
}

测试效果：
在这里插入图片描述

7 基于策略模式实现联合登录的重构

基于策略模式解决多重if判断的问题
在这里插入图片描述
SpringContextUtils

package com.mayikt.utils;

import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.stereotype.Component;

/**
 * 对Spring容器进行各种上下文操作的工具类
 * <p>
 * 该工具类必须声明为Spring 容器里的一个Bean对象，否则无法自动注入ApplicationContext对象
 * <p>
 * 可使用@Component注解实例化，注意要开启包扫描并且所在包路径能被扫描到
 */
@Component
public class SpringContextUtils implements ApplicationContextAware {

    private static ApplicationContext context;

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        context = applicationContext;
    }

    /**
     * 根据Bean名称获取Bean对象
     *
     * @param name Bean名称
     * @return 对应名称的Bean对象
     */
    public static Object getBean(String name) {
        return context.getBean(name);
    }

    /**
     * 根据Bean的类型获取对应的Bean
     *
     * @param requiredType Bean类型
     * @return 对应类型的Bean对象
     */
    public static <T> T getBean(Class<T> requiredType) {
        return context.getBean(requiredType);
    }

    /**
     * 根据Bean名称获取指定类型的Bean对象
     *
     * @param name         Bean名称
     * @param requiredType Bean类型（可为空）
     * @return 获取对应Bean名称的指定类型Bean对象
     */
    public static <T> T getBean(String name, Class<T> requiredType) {
        return context.getBean(name, requiredType);
    }

    /**
     * 判断是否包含对应名称的Bean对象
     *
     * @param name Bean名称
     * @return 包含：返回true，否则返回false。
     */
    public static boolean containsBean(String name) {
        return context.containsBean(name);
    }

    /**
     * 获取对应Bean名称的类型
     *
     * @param name Bean名称
     * @return 返回对应的Bean类型
     */
    public static Class<?> getType(String name) {
        return context.getType(name);
    }

    /**
     * 获取上下文对象，可进行各种Spring的上下文操作
     *
     * @return Spring上下文对象
     */
    public static ApplicationContext getContext() {
        return context;
    }
}

//  从Spring容器中根据beanId 查找到策略类
UnionLoginStrategy unionLoginStrategy = SpringContextUtils.getBean(unionBeanId, UnionLoginStrategy.class);

数据库中存的unionBeanId对应字段为QQUnionLoginStrategy，即QQ联合登录策略类类名。

8 策略模式回调获取openId

联合登录接口及实现

@Api(tags = "联合登录接口")
public interface MemberUnionLoginService {

    /**
     * 根部不同联合id登录
     *
     * @param unionPublicId
     * @return
     */
    @GetMapping("/unionLogin")
    BaseResponse<String> unionLogin(@RequestParam("unionPublicId") String unionPublicId);

    /**
     * 联合登录回调接口
     *
     * @param unionPublicId
     * @return
     */
    @GetMapping("/login/oauth/callback")
    public BaseResponse<JSONObject> unionLoginCallback(@RequestParam("unionPublicId") String unionPublicId);
}

@RestController
public class MemberUnionLoginServiceImpl extends BaseApiService implements MemberUnionLoginService {

    @Autowired
    private UnionLoginMapper unionLoginMapper;
    @Autowired
    private TokenUtil tokenUtil;

    @Override
    public BaseResponse<String> unionLogin(String unionPublicId) {
        if (StringUtils.isEmpty(unionPublicId)) {
            return setResultError("unionPublicId不能为空");
        }
        // 根据渠道id查询联合登录基本信息
        UnionLoginDO unionLoginDo = unionLoginMapper.selectByUnionLoginId(unionPublicId);
        if (unionLoginDo == null) {
            return setResultError("该渠道可能已经关闭或者不存在");
        }
        // state 防止重复提交
        String state = tokenUtil.createToken("member.unionLogin", "");
        String requestAddress = unionLoginDo.getRequestAddress() + "&state=" + state;
        JSONObject dataObjects = new JSONObject();
        dataObjects.put("requestAddress", requestAddress);
        return setResultSuccess(dataObjects);
    }

    @Override
    public BaseResponse<JSONObject> unionLoginCallback(String unionPublicId) {
        if (StringUtils.isEmpty(unionPublicId)) {
            return setResultError("unionPublicId不能为空");
        }
        // 根据渠道id查询 联合基本信息
        UnionLoginDO unionLoginDo = unionLoginMapper.selectByUnionLoginId(unionPublicId);
        if (unionLoginDo == null) {
            return setResultError("该渠道可能已经关闭或者不存在");
        }
        String unionBeanId = unionLoginDo.getUnionBeanId();
        if (StringUtils.isEmpty(unionBeanId)) {
            return setResultError("系统参数错误");
        }
        //  从Spring容器中根据beanId 查找到策略类
        UnionLoginStrategy unionLoginStrategy = SpringContextUtils.getBean(unionBeanId, UnionLoginStrategy.class);
        // 根据当前线程获取request对象
        HttpServletRequest request = ((ServletRequestAttributes)
                (RequestContextHolder.currentRequestAttributes())).getRequest();
        String openId = unionLoginStrategy.unionLoginCallback(request, unionLoginDo);
        if (StringUtils.isEmpty(openId)) {
            return setResultError("系统错误");
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("openId", openId);
        jsonObject.put("unionPublicId", unionPublicId);
        String openToken = tokenUtil.createToken("mayikt.unionLogin.", jsonObject.toJSONString());
        JSONObject dataToken = new JSONObject();
        dataToken.put("openToken", openToken);
        return setResultSuccess(dataToken);
    }
}

抽象策略类及QQ登录策略类

public interface UnionLoginStrategy {

    String unionLoginCallback(HttpServletRequest request, UnionLoginDO unionLoginDo);
}

@Component
public class QQUnionLoginStrategy implements UnionLoginStrategy {

    @Value("${mayikt.login.qq.accesstoken}")
    private String qqAccessTokenAddress;
    @Value("${mayikt.login.qq.openid}")
    private String qqOpenIdAddress;

    @Override
    public String unionLoginCallback(HttpServletRequest request, UnionLoginDO unionLoginDo) {
        String code = request.getParameter("code");
        if (StringUtils.isEmpty(code)) {
            return null;
        }
        // 根据授权码获取accessToken
        String tokenAddress = qqAccessTokenAddress.replace("{client_id}", unionLoginDo.getAppId()).replace("{client_secret}", unionLoginDo.getAppKey()).
                replace("{code}", code).replace("{redirect_uri}", unionLoginDo.getRedirectUri());
        String resultAccessToken = HttpClientUtils.httpGetResultString(tokenAddress);
        boolean contains = resultAccessToken.contains("access_token=");
        if (!contains) {
            return null;
        }
        String[] split = resultAccessToken.split("=");
        String accessToken = split[1];
        if (StringUtils.isEmpty(accessToken)) {
            return null;
        }
        // 2.根据accessToken获取用户的openId
        String resultQQOpenId = HttpClientUtils.httpGetResultString(qqOpenIdAddress + accessToken);
        if (StringUtils.isEmpty(resultQQOpenId)) {
            return null;
        }
        boolean openid = resultQQOpenId.contains("openid");
        if (!openid) {
            return null;
        }
        String array[] = resultQQOpenId.replace("callback( {", "").
                replace("} );", "").split(":");
        String openId = array[2].replace("\n","").replace("\"", "");
        return openId;
    }
}

bootstrap.yml

mayikt:
  login:
    qq:
      accesstoken: https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id={client_id}&client_secret={client_secret}&code={code}&redirect_uri={redirect_uri}
      openid: https://graph.qq.com/oauth2.0/me?access_token=

测试结果：
在这里插入图片描述
小米官网是如何实现保证openid的安全性
网页上显示token，token对应的就是授权成功后的openId，通过token能够换区到真实openId。