先放一张官网的图![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/89b971b9570712cb7b100eef2f785943.png#pic_center)
由此图可以得知前端通过wx.login()把code传给后端,后端返回用户id即openid与session_key 说明后台已经得知了你用户的id与session_key 完全可以在后台登录,所以可以省下我们再次向后端登陆 即图片的中自定义登陆.当后端返回给我们openid后 我们就实现了登陆(需要跟后端协商好)
省下的就是前端的事了
1 首先我们必须使用下面1中的button组件才可以获得用户授权,取得授权后返回给你一个用户信息,里面包含用户的名称,头像,省份等,选择你需要的信息存入本地 在其他页面调用就行 这里我们默认button 在页面中不展示
<button v-if="show" class='bottom' type="primary" open-type="getUserInfo" @getuserinfo="login">登录</button>
2 然后说我们的登陆流程
2.1首先进入页面需要判断用户是否授权
2.2 如果授权过了 直接登录
2.3 如何没有则需要让用户授权我们登录
onload(){
wx.getSetting({
success(res) {
console.log(res.authSetting)
if (res.authSetting['scope.userInfo'] == true) {//已授权
that.login()//这里是登录操作
}else{
this.setData({
show:true //这里展示我们的button组件.让用户授权
})
}
}
})
},
3 再次 说我们登录事件
3.1 我们需要获取用户信息存入本地
3.2 通过wx.login() code 传给后端 后端返回你openid 和session_key
login() {
wx.getUserInfo({
success: (res) => {
console.log(res)
uni.setStorageSync('headerImg', res.userInfo.avatarUrl) //用户头像
wx.login({
success: function(res) {
let code = res.code //取得code码
//这里执行你们后台定义的登陆 例如
wx.request ......//这里我不多写了
}
})
},
fail: () => {
console.log("未授权");
wx.showModal({
title: '警告',
content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
if (res.confirm) {
console.log('用户点击了“返回授权”')
}
}
})
}
})
},
这里是完整流程
2.当用户点击登陆时候弹出弹窗 通过wx.getUserInfo() 获取用户信息
3.用户授权同意后调用wx.login(){} 拿到code码 传给后端
4.后端返回给你小程序的秘钥session跟oppenid (代码中一般不放)
5.在调用后端的代码 把code码跟oppenid与秘钥session 一起传给后端(其实后端这里可以两步处理成一部,当然都可以)
6.后端会返回用户唯一appId (微信小程序每个用户对应的小程序appid 是唯一的)
7.然后再执行登陆操作 ==>登陆成功
8.登陆成功获取用户数据存入本地方便下次使用