微信小程序实现一键登录
作者：是拾玖不是十九
这篇文章主要为大家详细介绍了微信小程序实现一键登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现手机号登录的具体代码，供大家参考，具体内容如下
项目需求
点击按钮获取用户电话号码绑定到后台，登录。
实现思路
1、使用微信开放功能为获取用户手机号的button按钮绑定点击事件为获取用户授权。
2、如果获取用户手机号授权成功调用微信登录接口获取code。
3、用获取到的code去调用后台接口获取到用户的openid。
4、code+openid去调用后台写的小程序自动登录接口获取到access_token，至此登录功能完成。
5、查询用户是否绑定过手机号，未绑定就去调用绑定手机号的接口。绑定过就直接提示登录成功，根据自己项目需求跳转页面，我是直接返回到上一页。
关键代码
<!-- wxml --> <button open-type="getPhoneNumber" class="button" bindgetphonenumber="author"> <image class="button-img" src="../../assets/images/wx_icon@2x.png"></image> <text>微信一键授权登录</text> </button>
// wxss
@import '../../common.less';
.button {
width: 80%;
height: 88rpx;
display: flex;
background: @baseColor1;
color: #fff;
font-size: 30rpx;
border: none;
border-radius: 44rpx;
justify-content: center;
align-items: center;
font-weight: 400;
margin: 254rpx auto 74rpx;
.button-img {
width: 56rpx;
height: 40rpx;
margin-right: 6rpx;
}
}// login.js
/**
* 用户点击一键授权登录按钮
*/
author(e) {
if (e.detail.errMsg === 'getPhoneNumber:ok') {
this.login(e);
}
},
/**
* 用户登录
*/
login(e) {
let that = this;
// 微信获取登录code
wx.login({
success(res1) {
if (res1.code) {
wx.setStorageSync('code', res1.code);
// 后台获取用户openid
app.api.user.getOpenID({
code: res1.code
}).then(res2 => {
if (res2.code === 2000) {
wx.setStorageSync('openid', res2.data.openid);
wx.setStorageSync('session_key', res2.data.session_key);
// 后台小程序自动登录
app.api.user.autologin({
openid: res2.data.openid,
code: res1.code
}).then(res3 => {
if (res3.code === 2000) {
// 至此登录完成
wx.setStorageSync('access_token', res3.data.access_token)
// 查询用户是否绑定过手机号
app.api.user.info().then(res4 => {
if (res4.code === 2000) {
if (res4.data.bind === 2) {
app.toast('登录成功', 'none');
that.goBack();
} else {
// 未绑定手机号，去绑定
that.getPhoneNumber(e);
}
} else {
app.toast(res4.msg, 'none');
}
})
} else {
app.toast(res3.msg, 'none');
}
})
} else {
app.toast(res2.msg, 'none');
}
})
} else {
app.toast('登录失败！' + res1.errMsg);
}
}
})
},
/**
* 绑定用户手机号
*/
getPhoneNumber(e) {
// 判断session是否失效
app.check.session((res) => {
let token = wx.getStorageSync('access_token');
let session_key = wx.getStorageSync('session_key');
app.api.user.bindphone({
token,
session_key,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
}).then(res => {
if (res.code === 2000) {
app.toast('绑定成功', 'none');
this.goBack();
} else {
app.toast(res.msg, 'none');
}
}).catch(err => {
app.toast('绑定手机号失败', 'none');
})
}, this.getPhoneNumber, e)
}
// utils/check.js
let api = require('../api/index');
let toast = require('./toast');
let check = {};
/**
* session是否过期
* @param {function} success seesion_key未过期时调用的方法
* @param {function} error seesion_key过期时调用的方法
* @param {eventhandle} e getPhoneNumber传参
*/
check.session = (success, error, e) => {
wx.checkSession({
//session_key 未过期，并且在本生命周期一直有效
success,
fail() {
// session_key 已经失效，需要重新执行登录流程
wx.login({
success(res1) {
if (res1.code) {
wx.setStorageSync('code', res1.code);
// 后台获取用户openid
api.user.getOpenID({
code: res1.code
}).then(res2 => {
if (res2.code === 2000) {
wx.setStorageSync('openid', res2.data.openid);
wx.setStorageSync('session_key', res2.data.session_key)
// 后台小程序自动登录
api.user.autologin({
openid: res2.data.openid,
code: res1.code
}).then(res3 => {
if (res3.code === 2000) {
wx.setStorageSync('access_token', res3.data.access_token)
error(e);
}
})
}
})
} else {
toast('登录失败！' + res.errMsg);
}
}
})
}
})
}
module.exports = check;参考文档
1. 小程序登录 | 微信开放文档
2. wx.login(Object object) | 微信开放文档
3. button | 微信开放文档
4. 获取手机号 | 微信开放文档
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。