微信小程序的授权登录

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

特别注意 appid 和secret、grant_type是小程序固定的；可以参考wx.loginparam.add(“appid”, “wx367d7fb4108a5162”);param.add(“secret”, “a700cf3aab35e53e98be18f96ddb4ed9”);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 param = new LinkedMultiValueMap();

param.add("appid", "wx367d7fb4108a5162");

param.add("secret", "a700cf3aab35e53e98be18f96ddb4ed9");

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.sha1Hreex(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 param){

RestTemplate restTemplate=new RestTemplate();

String s = restTemplate.postForObject(url, param, String.class);

return JSONObject.parseObject(s);

}

}

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

1.login.wxml

申请获取以下权限

获得你的公开信息(昵称，头像等)

授权登录

请升级微信版本

我的首页内容

2、login.jsPage({

/**

* 页面的初始数据

*/

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;

}