小程序 - 授权登录小程序 Demo1

微信端登录api

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

请求参数:

返回参数

正常返回时的参数格式

{
    "openid": "opjzz5C4FZL408npv9VOLZF1FSgU", 
    "session_key": "6TACzKxiVH5S5PUA5YttmA=="
}

非正常返回的参数格式

1. 登录code过期

{
    "errcode": 40163, 
    "errmsg": "code been used, hints: [ req_id: BjbbqUNre-.Xzkqa ]"
}

2. 登录code是不存在的

{
    "errcode": 40029, 
    "errmsg": "invalid code, hints: [ req_id: cjbbL14ce-JamqFA ]"
}

实例代码演示

index.vue

<template>
	<view>
		<button open-type="getUserInfo" @getuserinfo="wxLogin">点击账户登录</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				code: ''
			}
		},
		methods: {
			wxLogin(e) {
				uni.showLoading({
					title: '登录中'
				});
				uni.login({
					provider: 'weixin',
					success: (login_res) => {
						let code = login_res.code;
						uni.getUserInfo({
							success(info_res) {
								uni.request({
									url: 'http://localhost:5098/test/user/wxLogin',
									method: 'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {
										code: code,
										rawData: info_res.rawData
									},
									success(res) {
										uni.hideLoading();

										if (res.data.data.status === 200) {
											uni.switchTab({
												url: '../index/index'
											})
										} else {
											console.log('服务器异常')
										}
									},
									fail (error) {
										uni.hideLoading();
										console.log(error);
									}
								});
							}
						});
					}
				});
			}
		
		}
	}
</script>

http://localhost:5098/test/user/wxLogin 是后端接口（java实现）

wxLogin 函数

@PostMapping("/wxLogin")
public ResponseEntity<ResponseResult<Map<String, Object>>> wxLogin(
		@RequestParam(value = "code", required = false) String code,
		@RequestParam(value = "rawData", required = false) String rawData) {
	Map<String, Object> map = new HashMap<>();
	map.put("status", 200);

	return new ResponseEntity<>(ResponseResult.success(map), HttpStatus.OK);
}

访问wxLogin成功时，status返回值为200。小程序跳转到activity.vue （tabbbar 第二个页面 []）

activity.vue

<template>
	<view>
		<p>message: {{message}}</p>
		<p>message: {{reversedMessage}}</p>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				message: 'Hello'
			};
		},
		computed: {
			reversedMessage: function() {
				return this.message.split('').reverse().join('')
			}
		}
	}
</script>

wxLogin 函数打印code，此时值为 "011J76000eIkhL1B71200bqrn64J760O"

login 函数

@PostMapping("/login")
public ResponseEntity<ResponseResult<Map<String, Object>>>  user_login (
		@RequestParam("code") String code,
		@RequestParam("userHead") String userHead,
		@RequestParam("userName") String userName,
		@RequestParam("userGender") String userGender,
		@RequestParam("userCity") String userCity,
		@RequestParam("userProvince") String userProvince
) throws IOException {
	// 配置请求参数
	Map<String, String> param = new HashMap<>();
	param.put("appid", WeixinConstants.WX_LOGIN_APP_ID);
	param.put("secret", WeixinConstants.WX_LOGIN_SECRET);
	param.put("js_code", code);
	param.put("grant_type", WeixinConstants.WX_LOGIN_GRANT_TYPE);

	// 发送请求
	String wxResult = HttpClientUtil.doGet(WeixinConstants.WX_LOGIN_URL, param);
	JSONObject jsonObject = JSON.parseObject(wxResult);

	System.out.println(jsonObject);

	// 获取参数返回的
	String session_key = jsonObject.get("session_key").toString();
	String open_id = jsonObject.get("openid").toString();

	// 封装返回小程序
	Map<String, Object> result = new HashMap<>();
	result.put("session_key", session_key);
	result.put("open_id", open_id);

	return new ResponseEntity<>(ResponseResult.success(result), HttpStatus.OK);
}

postman测试

主要对code更新，如上图。

成功运行后，控制台打印结果：

{"openid":"opjzz5C4FZL408npv9VOLZF1FSgU","session_key":"05Y4Avu4lK8TYNTRSJMUbA=="}

WeixinConstants.class

public final class WeixinConstants {
    private WeixinConstants() {
        // empty
    }

    public static final String WX_LOGIN_URL = "https://api.weixin.qq.com/sns/jscode2session";
    public static final String WX_LOGIN_APP_ID = "xxxxxx";
    public static final String WX_LOGIN_SECRET = "xxxxxx";
    public static final String WX_LOGIN_GRANT_TYPE = "authorization_code";
}