uniapp实战(三) -- 小程序微信登录
2023-09-11 14:16:57 时间
小程序微信登录的核心是围绕着openId来的,对于每个用户在这个小程序中都有一个唯一的openId来标识用户的身份,但是出于安全考虑,小程序是无法获得openId的,只能获得code,把这个code传给后台,后台根据code,appid,appsecret去获取openid,然后用这个openid来跟用户进行绑定,这样通过code-openid-用户信息的方式,小程序只需要传给后台code就能获取到用户的信息了。
第一步,获取微信code,使用code登录
可以通过调用uni.login获取微信code,然后调用后台接口传递code,如果调用成功则跳转到首页,失败则跳转到注册页
由于uni.login不是promise的,我们先来个封装
const uniUtils = {
login(data = {provider: "weixin"}) {
return new Promise((resolve, reject) => {
uni.login({
...data,
success: function (resp) {
resolve(resp);
},
fail: function (e) {
reject(e);
}
})
});
},
getUserInfo(data = {provider: "weixin"}) {
return new Promise((resolve, reject) => {
uni.getUserInfo({
...data,
success: function (resp) {
resolve(resp)
},
fail: function (err) {
reject(err)
}
});
})
}
}
export default uniUtils
然后在main.js里面引入下就能直接用了
import utils from "./utils";
Vue.prototype.$utils = utils
获取微信code,调用后台接口
login: function () {
this.$utils.uniUtils.login().then(async resp => {
try {
let code = resp.code
//通过微信code登录
const res = await this.$api.post({
url: 'api/public/wxLogin',
data: {code}
})
//把用户信息放入vuex中
this.$store.commit('user/SET_USER_INFO', res.data)
//跳转到index页面
uni.switchTab({
url: "/pages/index/index"
})
} catch (e) {
console.error(e)
//状态码50001表示未绑定
if (e.status == 50001) {
uni.showToast({
title: '请先绑定账号',
icon: 'none'
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/register/register'
})
}, 1500)
}
}
})
}
第二步,如果未绑定,则去绑定账号
register: function () {
//获取code
this.$utils.uniUtils.login().then(async resp => {
const {userInfo} = await this.$utils.uniUtils.getUserInfo()
console.log(userInfo)
const bindRes = await this.$api.post({
url: '/api/public/bindUser',
data: {
...this.form,
avatar: userInfo.avatarUrl,
nickname: userInfo.nickName,
code: resp.code
}
})
this.$store.commit('user/SET_USER_INFO', bindRes.data)
//跳转到index页面
uni.switchTab({
url: "/pages/index/index"
})
})
}
相关文章
- Android开发之高仿微信界面(1)
- 从一个程序员的角度看——微信小应用(第一弹 初学)
- 关于微信小程序在ios中无法调起摄像头问题
- 微信小程序苹果手机请求地址 报错404,安卓可以正常请求
- 微信公众号菜单添加小程序,miniprogram,pagepath参数详解,php开发公众号
- 微信小程序for循环中传递动态参数
- .net Core2.2 WebApi通过OAuth2.0实现微信登录
- 微信登录后返回微信名等信息
- OpenCV每日函数 WeChat QR 微信二维码检测器
- 微信小程序----原生API实现【到这里去(目的地)】路线规划
- 微信小程序----全局变量
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序----Uncaught ReferenceError: ret is not defined
- 微信小程序----radio组件
- 微信小程序----icon组件
- Atitit 项目wechat微信截屏生成vcf通讯录384 个 384个人 42个节拍,平均每个8个人 技术点 im图像裁剪, ocr Tesseract Vcf格式 /wechatTel
- Java Web项目,Android和微信小程序的初始页面配置
- 微信程序开发系列教程(四)使用微信API创建公众号自定义菜单
- hbuilder X发布微信小程序失败的解决方法
- uni-app微信小程序报错:更改appid失败touristappid Error:tourist appid
- 微信开发本地服务器映射外网服务器步骤顺序
- 【微信小程序】深入学习小程序基本目录文件与代码结构
- 微信小程序开发入门教程-小程序账号注册及开通
- 微信小程序----开发rui-swiper多样式轮播组件