做一个开源的小程序登录模块组件（token）

curlyCheng 发布于2019-08-16 13:46 / 1882人阅读

摘要：项目目录包中的就是对配置参数的读取。包是存放一个的请求工具。返回值为空存在错误码，内容与存在用户的信息进行对比，返回用户，不存在则注册用户模拟获取到的用户记得添加扫描包路径，一个配合小程序登录的前后台组件形式，附带前端小程序代码

先了解下SSO

对于单点登陆浅显一点的说就是两种，一种web端的基于Cookie、另一种是跨端的基于Token，一般想要做的都优先做Token吧，个人建议，因为后期扩展也方便哦。

小程序也是呢，做成token的形式是较好的。

流程图

PS：图中4的文字打错了~

1、启动服务
2、小程序初次加载app.js校验token，使用code去换取token
3、检测User信息是否存在code，不存在则注册新用户，最后返回对应用户Id
4、将随机Token与UserId一起存入Redis中
5、返回Token信息，小程序存于缓存中，作为api请求的认证凭证

这个流程思路对什么后台语言都是通用的。

具体实现

本文的环境主要是做SpringBoot的，所有对于其他框架可能没有很好的兼容。

直接上代码弄起来吧！

首先是开源的话，我们需要确定某些东西是一定要配置的，不能写死。那么我写了两个Config类来获取application.yml中的数据，不同用户可以配置他们的参数。

wechat:
  wxurl: https://api.weixin.qq.com/sns/jscode2session?
  appid: wxabc2f8828c8e0049
  appsecret: cec2412a3af99200f4573c337715329a
  granttype: authorization_code
  redis:
    expire: 7200
    wxtoken: wx_token_%s
spring:
  redis:
    port: 6379
    host: 192.168.192.132

我这边了以上的参数作为组件中的可配置，其实部分可以作为默认的，不过暂时没有改了，如果你像要使用就是暂时都是必选的。

项目目录

config包中的就是对配置参数的读取。

utils包是存放一个Http的请求工具。

最核心的就是我们的WechatTemplate类了。

根据业务，我们需要以下几个方法：

根据小程序传递来的code获取openid

/**
 * 获取OpenId
 * @param code 微信code
 * @return {@link Map}
 */
public Map getOpenId(String code){
    Map back = new HashMap<>();
    Map wxResult = new HashMap<>();
    String wxLoginUrl = weChatComponent.url(code);
    String result = HttpServiceUtils.sendGet(wxLoginUrl);
    if (result.isEmpty()){
        back.put("null","null");
    }else{
        wxResult = (Map) JSON.parse(result);
        if (wxResult.containsKey("errCode")){
            //存在错误码
            back.put("errCode",wxResult.get("errCode"));
        }else{
            //不存在错误码
            String session_key = wxResult.get("session_key");
            back.put("session_key",session_key);
            log.info("【微信Token】session_key:"+session_key);
            String openid = wxResult.get("openid");
            back.put("openid",openid);
        }
    }
    return back;
}

根据openid，我们可以和数据库对接得到用户id并生成自己Token

/**
 * 生成Token
 * @param userid 用户id
 * @return {@link String}
 */
public String granToken(String userid){
    return saveToRedis(userid);
}

/**
 * 获取Token并存放到redis中
 * @param userid 用户id
 * @return {@link String}
 */
private String saveToRedis(String userid) {
    String token = UUID.randomUUID().toString();
    Integer expire = redisComponent.getExpire();
    redisTemplate.opsForValue().set(String.format(redisComponent.getWxtoken(),token),userid,expire, TimeUnit.SECONDS);
    return token;
}

还有校验Token，是否存在

/**
 * 校验是否存在用户信息
 * @param token 唯一值
 * @return {@link Boolean}
 */
public boolean verifyToken(String token){
    String tokenValue = redisTemplate.opsForValue().get(String.format(redisComponent.getWxtoken(),token));
    if (tokenValue.isEmpty()){
        return false;
    }
    return true;
}

Maven包

接着打包发到Maven中央仓库中，生成自己的maven包


  com.github.UncleCatMySelf
  wechat-login
  2.1.0

如何使用？

我在Github项目中，做了Demo演示。

我们仅需在Service中调用，并使用对应方法即可。

@Slf4j
@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private WechatTemplate wechatTemplate;

    @Autowired(required = true)
    private ResultVOUtil resultVOUtil;

    @Override
    public ResultVo getToken(String code) {
        Map result = wechatTemplate.getOpenId(code);
        if (result.containsKey("null")){
            return resultVOUtil.error(555,"返回值为空");
        }else if(result.containsKey("errCode")){
            return resultVOUtil.error(666,"存在错误码，内容："+result.get("errCode"));
        }else{
            String sessionKey = result.get("session_key");
            String openid = result.get("openid");
            log.info("openid="+openid+"--sessionKey="+sessionKey);
            //与存在用户的openid信息进行对比，返回用户id，不存在则注册用户
            String userid = "WX_10agg";//模拟获取到的用户id
            String token = wechatTemplate.granToken(userid);
            return resultVOUtil.success(token);
        }
    }

    @Override
    public ResultVo verifyToken(String token) {
        return resultVOUtil.success(wechatTemplate.verifyToken(token));
    }
}

tip:记得添加扫描包路径，@ComponentScan({"com.github.unclecatmyself"})

GitHub

wechat-login
一个配合小程序登录的前后台组件（Token形式），附带前端小程序代码

云服务器 GPU云服务器一个教你开发小程序的小程序自己做的小程序怎么做附近的小程序附近的小程序怎么做

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/72295.html

开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？

摘要：中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，截至年月，我国网民规模达亿人，微信月活亿支付宝月活亿百度月活亿另一方面，中国手机占智能手机整体的比例超过，月活约亿。在年末正式发布了面向未来的跨端的。开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？原创：嘉宾-张楠开源中国以往我们说某一功能跨多端，往往是指在诸如 PC、移动等不同类型的设备之...

GraphQuery 2019-08-23 15:29 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
Spring Security

摘要：框架具有轻便，开源的优点，所以本译见构建用户管理微服务五使用令牌和来实现身份验证往期译见系列文章在账号分享中持续连载，敬请查看在往期译见系列的文章中，我们已经建立了业务逻辑数据访问层和前端控制器但是忽略了对身份进行验证。重拾后端之Spring Boot（四）：使用JWT和Spring Security保护REST API 重拾后端之Spring Boot（一）：REST API的搭建...

keelii 2019-06-21 16:40 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

worldligang 2019-08-22 15:53 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

pepperwang 2019-08-02 10:03 评论0 收藏0