您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下如何实现uni-app微信小程序授权登录，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
登录微信公众平台
官网链接：https://mp.weixin.qq.com/
第一次需要小伙伴们点击注册按钮，进行注册，如果有账号，直接扫描登录即可
官网小程序链接：
在manifest.json中输入申请的微信小程序id
这里给小伙伴们演示二种api
可以使用uni.getUserProfile请求用户授权获取用户信息， 也可以使用uni.getUserInfo获取
授权成功后获取到的用户信息在userInfo中：
页面部分：
<button class="login-btn" type="primary" @click="getUserInfo"> 微信用户一键登录 </button>
js部分：
methods: {
getUserInfo() {
uni.getUserInfo({
provider: 'weixin',
success: (res) => {
console.log('getUserInfo', res);
},
});
},
}获取的用户基础数据（无openid=》微信用户唯一标识）
可以使用uni.getUserInfo请求用户授权获取用户信息
页面一样，js部分：
getUserInfo() {
uni.getUserProfile({
desc: '登录后可同步数据',
lang: 'zh_CN',
success: (res) => {
console.log('getUserProfile', res);
},
});
},获取的用户基础数据（无openid=》微信用户唯一标识）
总结：uni.getUserProfile和uni.getUserInfo 二个api获取的用户数据基本一样，都无openid=》微信用户唯一标识。
使用uni.login方法，provider参数输入’weixin’,成功的返回值中如果errMsg=“login:ok” 代表成功，
微信小程序端会返回一个code字符串
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参数调用后端接口}官网文档
使用获取到的code请求微信登录接口，获取 openid 和 session_key
请求方式: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能够查询到一条用户数据，说明已经绑定，则登录该用户
前端部分：
/**
*
* 获取用户信息
*/
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/wxh6/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();
},
});
},后端部分
@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();
}
} /**
*
* 获取用户信息
*/
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
/**
* 微信用户授权登录，携带appid和code参数，调用后端接口获取Openid
*/
export function loginAuth(data) {
return request({
url: '/wx/user/' + data.appid + '/login/',
data: {
code: data.code,
},
});
}vuex user模块（user.js）
// 微信用户授权登录，携带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));
},
以上是“如何实现uni-app微信小程序授权登录”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。