微信小程序?qū)崿F(xiàn)一鍵登錄

更新時間：2022年07月01日 14:36:00 作者：是拾玖不是十九

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)一鍵登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)手機號登錄的具體代碼，供大家參考，具體內(nèi)容如下

項目需求

點擊按鈕獲取用戶電話號碼綁定到后臺，登錄。

實現(xiàn)思路

1、使用微信開放功能為獲取用戶手機號的button按鈕綁定點擊事件為獲取用戶授權(quán)。
2、如果獲取用戶手機號授權(quán)成功調(diào)用微信登錄接口獲取code。
3、用獲取到的code去調(diào)用后臺接口獲取到用戶的openid。
4、code+openid去調(diào)用后臺寫的小程序自動登錄接口獲取到access_token，至此登錄功能完成。
5、查詢用戶是否綁定過手機號，未綁定就去調(diào)用綁定手機號的接口。綁定過就直接提示登錄成功，根據(jù)自己項目需求跳轉(zhuǎn)頁面，我是直接返回到上一頁。

關(guān)鍵代碼

<!-- wxml -->
<button open-type="getPhoneNumber" class="button" bindgetphonenumber="author">
? <image class="button-img" src="../../assets/images/wx_icon@2x.png"></image>
? <text>微信一鍵授權(quán)登錄</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
/**
?* 用戶點擊一鍵授權(quán)登錄按鈕
?*/
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未過期時調(diào)用的方法
?* @param {function} error seesion_key過期時調(diào)用的方法
?* @param {eventhandle} e getPhoneNumber傳參
?*/
check.session = (success, error, e) => {
? wx.checkSession({
? ? //session_key 未過期，并且在本生命周期一直有效
? ? success,
? ? fail() {
? ? ? // session_key 已經(jīng)失效，需要重新執(zhí)行登錄流程
? ? ? 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;