Java 后端（Spring boot）+微信小程序的授权登录

最新推荐文章于 2024-08-16 22:30:00 发布

qq_44805463

最新推荐文章于 2024-08-16 22:30:00 发布

阅读量4.3k

点赞数 6

分类专栏：笔记文章标签：小程序 java spring boot

本文链接：https://blog.csdn.net/qq_44805463/article/details/109896063

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

微信小程序的授权登录

第一、Java后端代码如下登录的接口的参数是微信小程序前端必须要传的参数
微信小程序登录、授权的用户基本信息 wx.getUserInfo

特别注意 appid 和secret、grant_type是小程序固定的；可以参考wx.login
param.add(“appid”, “wx”);
param.add(“secret”, “a”);
param.add(“js_code”, code);
param.add(“grant_type”, “authorization_code”);

 @Autowired
    private UserService userService;

    /**
     * 微信授权（登录）
     * @param code 状态码
     * @param rawData 原始数据
     * @return
     */
    @PostMapping("/wxLogin")
    public Result wxLogin(@RequestParam(value = "code", required = false) String code,
                          @RequestParam(value = "rawData", required = false) String rawData,
                          @RequestParam(value = "signature",required = false) String signature) {
//		登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程
        String url = "https://api.weixin.qq.com/sns/jscode2session";
        MultiValueMap<String, Object> param = new LinkedMultiValueMap<String, Object>();
        param.add("appid", "wx");
        param.add("secret", "a");
        param.add("js_code", code);
        param.add("grant_type", "authorization_code");
        //RestTemplate 的请求URL；
        // 开发者服务器 登录凭证校验接口 appi + appsecret + code
        JSONObject forObject = RestTemplateUtil.doPost(url,param);
        System.out.println(forObject);
        //接收微信接口服务 获取返回的参数
        String openid = forObject.getString("openid");
        String sessionKey = forObject.getString("session_key");
        //校验签名 小程序发送的签名signature与服务器端生成的签名signature2 = sha1(rawData + sessionKey)
        String signature2 = DigestUtils.sha1Hex(rawData + sessionKey);
        System.out.println(signature2);
        if (!signature.equals(signature2)) {
            return ResultUtil.error(500, "签名校验失败");
        }
        // 用户非敏感信息：rawData
        JSONObject rawDataJson = JSONObject.parseObject(rawData);
        //判断用户是否存在
        User selectone = userService.Selectone(openid);
        Integer userID=null;
        if (selectone==null){
            // 用户信息入库
            String nickName = rawDataJson.getString("nickName");
            String avatarUrl = rawDataJson.getString("avatarUrl");
            Integer gender = Integer.valueOf(rawDataJson.getString("gender"));
            //添加用户的信息
            User user=new User();
            user.setOpenid(openid);
            user.setUser_name(nickName);
            user.setUser_gender(gender);
            user.setUser_image(avatarUrl);
            this.userService.save(user);
            userID=user.getUser_id();
        }else {
            userID=selectone.getUser_id();
        }
        return ResultUtil.success(userID);

    }

其中的RestTemplateUtil工具类

import com.alibaba.fastjson.JSONObject;
import org.springframework.util.MultiValueMap;
import org.springframework.web.client.RestTemplate;

public class RestTemplateUtil {

    /**
     * post请求
     * @param url
     * @param param
     * @return
     */
    public static JSONObject doPost(String url, MultiValueMap<String, Object> param){
        RestTemplate restTemplate=new RestTemplate();
        String s = restTemplate.postForObject(url, param, String.class);
        return JSONObject.parseObject(s);
    }
}

第二、微信小程序的简单授权代码

1.login.wxml

<!--pages/login/login.wxml-->
<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='../images/index.jpg'></image>
        </view>
 
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称，头像等)</text>
        </view>

        <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授权登录
        </button>
    </view>
    <view wx:else>请升级微信版本</view>
</view>
 
<view wx:else>
    <view>我的首页内容</view>
</view>

2、login.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
       //判断小程序的API，回调，参数，组件等是否在当前版本可用。
       canIUse: wx.canIUse('button.open-type.getUserInfo'),
       isHide: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 查看是否授权
    wx.getSetting({
        success: function(res) {
            if (res.authSetting['scope.userInfo']) {
                wx.getUserInfo({
                    success: function(res) {
                        // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
                        // 根据自己的需求有其他操作再补充
                        // 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code
                        console.log(res.signature);
                        console.log(res.rawData);
                        
                        wx.login({
                            success: res => {
                                // 获取到用户的 code 之后：res.code
                                console.log("用户的code:" + res.code);
                                // 可以传给后台，再经过解析获取用户的 openid
                                // 或者可以直接使用微信的提供的接口直接获取 openid ，方法如下：
                                // wx.request({
                                //     // 自行补上自己的 APPID 和 SECRET
                                //     url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                                //     success: res => {
                                //         // 获取到用户的 openid
                                //         console.log("用户的openid:" + res.data.openid);
                                //     }
                                // });
                                wx.request({
                                    url: 'http://localhost:2056/user/wxLogin',
                                    method: 'POST',
                                    header: {
                                    'content-type': 'application/x-www-form-urlencoded'
                                    },
                                    data: {
                                        code: res.code, //临时登录凭证
                                        rawData: res.rawData, //用户非敏感信息
                                        signature: res.signature, //签名
                                    },
                                    success: function(res) {
                                        if (res.data.status == 200) {
                                            // 7.小程序存储skey（自定义登录状态）到本地
                                            wx.setStorageSync('userInfo', userInfo);
                                            wx.setStorageSync('skey', res.data.data);
                                        } else{
                                            console.log('服务器异常');
                                        }
                                    }
                                })
                                
                            }
                        });
                    }
                });
            } else {
                // 用户没有授权
                // 改变 isHide 的值，显示授权页面
                that.setData({
                    isHide: true
                });
            }
        }
    });
  },

  bindGetUserInfo: function(e) {
    if (e.detail.userInfo) {
        //用户按了允许授权按钮
        var that = this;
        // 获取到用户的信息了，打印到控制台上看下
        console.log("用户的信息如下：");
        console.log(e.detail.userInfo); 
        //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
        that.setData({
            isHide: false
        });
    } else {
        //用户按了拒绝按钮
        wx.showModal({
            title: '警告',
            content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
            showCancel: false,
            confirmText: '返回授权',
            success: function(res) {
                // 用户没有授权成功，不需要改变 isHide 的值
                if (res.confirm) {
                    console.log('用户点击了“返回授权”');
                }
            }
        });
    }
  }

})

3.样式 login.wxss

/* pages/login/login.wxss */

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}