微信小程序?qū)崿F(xiàn)一鍵登錄
本文實例為大家分享了微信小程序?qū)崿F(xiàn)手機(jī)號登錄的具體代碼,供大家參考,具體內(nèi)容如下
項目需求
點擊按鈕獲取用戶電話號碼綁定到后臺,登錄。
實現(xiàn)思路
1、使用微信開放功能為獲取用戶手機(jī)號的button按鈕綁定點擊事件為獲取用戶授權(quán)。
2、如果獲取用戶手機(jī)號授權(quán)成功調(diào)用微信登錄接口獲取code。
3、用獲取到的code去調(diào)用后臺接口獲取到用戶的openid。
4、code+openid去調(diào)用后臺寫的小程序自動登錄接口獲取到access_token,至此登錄功能完成。
5、查詢用戶是否綁定過手機(jī)號,未綁定就去調(diào)用綁定手機(jī)號的接口。綁定過就直接提示登錄成功,根據(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) ? ? ? ? ? ? ? ? // 查詢用戶是否綁定過手機(jī)號 ? ? ? ? ? ? ? ? app.api.user.info().then(res4 => { ? ? ? ? ? ? ? ? ? if (res4.code === 2000) { ? ? ? ? ? ? ? ? ? ? if (res4.data.bind === 2) { ? ? ? ? ? ? ? ? ? ? ? app.toast('登錄成功', 'none'); ? ? ? ? ? ? ? ? ? ? ? that.goBack(); ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? ? // 未綁定手機(jī)號,去綁定 ? ? ? ? ? ? ? ? ? ? ? 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); ? ? ? } ? ? } ? }) }, /** ?* 綁定用戶手機(jī)號 ?*/ 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('綁定手機(jī)號失敗', '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;
參考文檔
1. 小程序登錄 | 微信開放文檔
2. wx.login(Object object) | 微信開放文檔
3. button | 微信開放文檔
4. 獲取手機(jī)號 | 微信開放文檔
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JS實現(xiàn)動態(tài)添加新元素、刪除元素方法
這篇文章主要介紹了原生js實現(xiàn)動態(tài)添加新元素、刪除元素方法 ,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05xmlplus組件設(shè)計系列之分隔框(DividedBox)(8)
xmlplus 是一個JavaScript框架,用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus布局類組件之分隔框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05比較簡單的一個符合web標(biāo)準(zhǔn)的JS調(diào)用flash方法
比較簡單的一個符合web標(biāo)準(zhǔn)的JS調(diào)用flash方法...2007-11-11

TS報錯:Parameter?'xxx'?implicitly?has?an?'