微信小程序登录

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序登录脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

概况描述

后台使用SPRing boot,部分功能需要在小程序上实现。

我们的后台是有权限验证的,所以需要用户登录才能调用后端API。所以,小程序端就需要登录后端。

本文实现了微信小程序的登录来完成自己服务器后端的登录功能。

实现原理

首先,我们需要登录小程序,用微信对其授权,然后带着授权的状态进行后端的登录。我们来看一下微信官方提供给我们的时序图:

微信小程序登录

我们看到,最开始会调用wx.login以获取code,然后携带获取的code,去请求后我们的后端的。

微信小程序登录

然后,我们需要在后端,使用获取的code和小程序的appId以及secret,共同请求微信接口,实现授权,然后微信会返回给我们oPEnIdsession_key

微信小程序登录

接着,我们需要将openIdsession_key进行保存,就和我们原来后端的登录做法一样,对登录的用户进行session存储,然后再登录的时候,去session中请求,看是否存在用户信息,以达到验证登录的目的。

微信小程序登录

这之后,我们就可以带着登录的状态去请求后端的API了。

大致的原理知道了,我们就去实现一下登录的过程。

实现

小程序端

首先我们要知道一点,如果要验证你是哪个用户,就需要微信进行授权。微信给我们提供了比较方便的解决办法。

微信小程序登录

button中有这么一个属性:open-type,通过他我们可以直接去获取用户的微信信息。

<button open-type='getUserInfo' bindgetuserinfo='doLOGin'>登录</button>

open-type设置为getUserInfo,然后再使用bindgetuserinfo去触发登录的方法,这个函数会返回用户的信息。

@H_355_126@

然后,就是调用wx.login()来获取code

    wx.login({
      success: function(res) {
        console.log(res)
      }
    })

当微信端登录成功的时候,我们就会获取到相应的code,这是用户的临时登录凭证,每次登录都会不同,过一段时间也会失效:

微信小程序登录

接着带着code去请求我们的后端:

    wx.login({
      success: function(res) {
        console.log(res)
        
        // 获取登录的临时凭证
        VAR code = res.code;

        // 调用后台,获取session_key,openid
        wx.request({
          url: 'http://localhost:8080/user/wxLogin?code=' + code,
          method: 'POST',  
        })
      }
    })

好了,现在我们需要一个支撑微信小程序登录的后台了。

后端

控制器:

    /**
     * 微信登录
     * @param code  登录临时凭证code
     */
    @PostMapping("/wxLogin")
    public voidwxLogin(String code) {
        userService.wxLogin(code);
    }

service:

    public void wxLogin(String code) {
        String url = "https://api.weixin.QQ.COM/sns/jscode2session?" +
                "appid=APPID&amp;" +
                "secret=SERECT&" +
                "js_code=" + code + "&" +
                "grant_type=authorization_code";

        logger.debug("请求微信api,进行登录授权,获取session_key和openid");
        String jsonString = restTemplate.getForObject(url, String.class);
        JSONObject jsonObject = JSONObject.parseObject(jsonString);

        logger.debug("获取openid,进行存储");
        String openid = jsonObject.get("openid").toString();
        httpSession.setattribute("openid", openid);
    }

因为这里,对于同一个用户而言,openid是相同的,所以,当下次再来请求的时候,我们只需要获取它,就能判断是否登录了。

后面,对于其他请求的处理,还需要涉及到拦截器,但是原理和之前一样,这里就不做赘述。


官方参考:@H_406_299@https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序登录全部内容,希望文章能够帮你解决微信小程序登录所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。