uni-app 微信小程序授权登录的实现步骤

网友投稿 2477 2023-11-11

−目录一、appID相关申请和配置1. appid获取方式2. appID配置二、获取用户基础数据2.1. 获取用户信息2.2. 获取用户信息2三、调用登录api3.1. 登录api3.2. 案例代码四、获取唯一标识信息4.1. 官网文档4.2. 接口简述五、绑定用户 实现登录5.1. 代码案例（未封装）5.2. 代码案例（封装）六、项目开源地址6.1. 前端6.2. 后端

一、appID相关申请和配置

1. appid获取方式

登录微信公众平台

uni-app 微信小程序授权登录的实现步骤

官网链接：https://mp.weixin.qq.com/

第一次需要小伙伴们点击注册按钮，进行注册，如果有账号，直接扫描登录即可

官网小程序链接：

2. appID配置

在manifest.json中输入申请的微信小程序id

二、获取用户基础数据

这里给小伙伴们演示二种api

2.1. 获取用户信息

可以使用uni.getUserProfile请求用户授权获取用户信息， 也可以使用uni.getUserInfo获取

授权成功后获取到的用户信息在userInfo中：

页面部分：

?
1
2
3
<button class="login-btn" type="primary" @click="getUserInfo">
微信用户一键登录
</button>

js部分：

获取的用户基础数据（无openid=》微信用户唯一标识）

2.2. 获取用户信息2

可以使用uni.getUserInfo请求用户授权获取用户信息

页面一样，js部分：

?
1
2
3
4
5
6
7
8
9
getUserInfo() {
uni.getUserProfile({
desc: 登录后可同步数据,
lang: zh_CN,
success: (res) => {
console.log(getUserProfile, res);
},
});
},

获取的用户基础数据（无openid=》微信用户唯一标识）

总结：uni.getUserProfile和uni.getUserInfo 二个api获取的用户数据基本一样，都无openid=》微信用户唯一标识。

三、调用登录api

3.1. 登录api

使用uni.login方法，provider参数输入’weixin’,成功的返回值中如果errMsg=“login:ok” 代表成功，

微信小程序端会返回一个code字符串

3.2. 案例代码

?
1
2
3
4
5
6
7
8
uni.login({
provider: weixin,
success: (res) => {
console.log(res-login, res);
this.code = res.code;
console.log(code, res.code);
if (res.errMsg == login:ok) {
//TODO 获取code 携带code参数调用后端接口}

四、获取唯一标识信息

4.1. 官网文档

官网文档

使用获取到的code请求微信登录接口，获取 openid 和 session_key

4.2. 接口简述

请求方式:GET

APPID：小程序唯一标识，上面有获取方式

SECRET：小程序唯一标识的秘钥，上面参考APPID获取方式，就在他的下面

JSCODE：这个前端调用  uni.login获取

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

五、绑定用户 实现登录

获取到微信用户的唯一id后，就可以绑定至自己系统中的用户，我的做法是在用户表中加入weixinId字段，跳转至自己的用户绑定界面，如果用户选择绑定微信，则更新该行用户数据的weixinId。下次用户使用微信登录时，如果通过openId能够查询到一条用户数据，说明已经绑定，则登录该用户

5.1. 代码案例（未封装）

前端部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
*
* 获取用户信息
*/
getUserInfo() {
// 展示加载框
uni.showLoading({
title: 加载中,
});
uni.getUserProfile({
desc: 登录后可同步数据,
success: async (obj) => {
console.log(obj, obj);
// 调用 action ，请求登录接口
// await this.login(obj);
uni.login({
provider: weixin,
success: (res) => {
console.log(res-login, res);
this.code = res.code;
console.log(code, res.code);
if (res.errMsg == login:ok) {
uni
.request({
url:
http://127.0.0.1:8080/wxh5/wx/user/ +
wx55822xxxx75e422 +
/login/,
data: {
code: this.code,
},
})
.then((res) => {
//获取到 openid 和 session_k后，自己的逻辑
console.log(授权登录, res[1].data);
console.log(res[1].data.openid);
console.log(res[1].data.session_key);
// DoSomeThing.................
});
console.log(res, res);
}
},
});
},
fail: () => {
uni.showToast({
title: 授权已取消,
icon: error,
mask: true,
});
},
complete: () => {
// 隐藏loading
uni.hideLoading();
},
});
},

后端部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@GetMapping("/login")
public String login(@PathVariable String appid, String code) {
if (StringUtils.isBlank(code)) {
return "empty jscode";
}
final WxMaService wxService = WxMaConfiguration.getMaService(appid);
try {
WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
this.logger.info(session.getSessionKey());
this.logger.info(session.getOpenid());
//TODO 可以增加自己的逻辑，关联业务相关数据
return JsonUtils.toJson(session);
} catch (WxErrorException e) {
this.logger.error(e.getMessage(), e);
return e.toString();
}
}

5.2. 代码案例（封装）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
*
* 获取用户信息
*/
getUserInfo() {
// 展示加载框
uni.showLoading({
title: 加载中,
});
uni.getUserProfile({
desc: 登录后可同步数据,
success: async (obj) => {
// this.userInfo = obj.userInfo;
// 调用 action ，请求登录接口
uni.login({
provider: weixin,
success: async (res) => {
this.code = res.code;
// console.log(登录获取code, res.code);
if (res.errMsg == login:ok) {
await this.loginAuth({
userProfile: obj,
appid: wx558xxxxxxxxxxxxxxx2,
code: this.code,
});
}
},
});
},
fail: () => {
uni.showToast({
title: 授权已取消,
icon: error,
mask: true,
});
},
complete: () => {
// 隐藏loading
uni.hideLoading();
},
});
},
},

user.js

?
1
2
3
4
5
6
7
8
9
10
11
/**
* 微信用户授权登录，携带appid和code参数，调用后端接口获取Openid
*/
export function loginAuth(data) {
return request({
url: /wx/user/ + data.appid + /login/,
data: {
code: data.code,
},
});
}

vuex user模块（user.js）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 微信用户授权登录，携带appid和code参数，调用后端接口获取Openid
async loginAuth(context, data) {
console.log(data, data);
const userInfo = data.userProfile;
const { content: res } = await loginAuth({
appid: data.appid,
code: data.code,
});
// 解析后端传送过来的json对象
const userAuthInfo = JSON.parse(res);
const openid = userAuthInfo.openid;
// console.log(sessionKey, userAuthInfo.sessionKey);
console.log(openid, openid);
// 保存到vuex中，通过commit
this.commit(user/setOpenid, userAuthInfo.openid);
this.commit(user/setUserInfo, JSON.parse(userInfo.rawData));
},

六、项目开源地址

6.1. 前端

applet-chock-in

6.2. 后端

weixin-java-miniapp

到此这

您可能感兴趣的文章:uni-app小程序实现微信在线聊天功能(私聊/群聊)微信小程序使用uni-app一键获取用户信息微信小程序使用uni-app实现首页搜索框导航栏功能详解uni-app微信小程序使用echarts的详细图文教程如何基于uni-app实现微信小程序一键登录与退出登录功能解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题微信小程序使用uni-app开发小程序及部分功能实现详解uniapp微信小程序多环境配置以及使用教程Vue微信和uniapp配置环境地址

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 方法
上一篇:微信小程序连接MySQL数据库的全过程
下一篇:微信小程序tabbar不显示解决办法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~