前言
微信小程序登錄
鑒權(quán)流程如下：
因wx.getUserProfile與wx.getUserInfo接口被收回了，都不能彈出授權(quán)窗口，只能使用頭像昵稱填寫能力去獲取微信用戶信息。在鑒權(quán)頁面如下操作：
1、在onShow中調(diào)用微信登錄wx.login獲取到唯一的code(用來獲取openid)；
2、根據(jù)wx.login獲取的code調(diào)用后臺接口來獲取openid；
3、根據(jù)獲取openid調(diào)用后臺接口獲取token，是否存在token：有token進入首頁，沒有則返回登錄頁面（以下將講解如何使用微信綁定的手機號碼一鍵登錄小程序）。
最終效果
鑒權(quán)流程如下(鑒權(quán)頁面:auth.vue)：
1、在onShow中調(diào)用微信登錄wx.login獲取到唯一的code
onShow() {
// 調(diào)用微信登錄wx.login
this.logining()
},
methods: {
logining() {
wx.showLoading({
title: '登錄微信用戶',
mask: true
})
wx.login({
success: (res) => {
if (res.code) {
wx.hideLoading()
this.code = res.code
// console.log('wx.login獲得code成功', res)
// vuex中的openId/unionId若存在就直接調(diào)用獲取token接口
if (this.openId) {
this.getAccessToken(this.openId)
} else {
this.getOpenId({ code: this.code })
}
} else {
console.log('獲取用戶登錄態(tài)失??！' + res.errMsg)
}
},
fail(err) {
wx.hideLoading()
wx.showToast({
title: 'wx.login失敗' + err,
icon: 'none',
duration: 1000
})
}
})
},
}
2、根據(jù)wx.login獲取的code調(diào)用后臺接口來獲取openid
methods: {
// 獲取openid
async getOpenId(parameter) {
wx.showLoading({
title: '獲取openId',
mask: true
})
const res = await this.$http('getOpenId', parameter)
console.log('獲取openId', res)
wx.hideLoading()
if (res.success) {
// 生成唯一值
this.setOpenId(res.data.openid)
// console.log('獲取openId---值', res.data.openid)
this.getAccessToken(res.data.openid)
}
}
}
3、根據(jù)獲取openid調(diào)用后臺接口獲取token
methods: {
// 獲取token
async getAccessToken(openId) {
const res = await this.$http('getAccessToken', { openid: openId })
// console.log('獲取token', res)
if (res.success) {
if (res.data) {
this.isShowPhone = false
this.setToken(res.data)
this.$reLaunch('/pages/tabbarPage/main')
} else {
// 是否顯示 一鍵登錄按鈕
this.isShowPhone = true
}
}
},
如何使用微信綁定的手機號碼實現(xiàn)一鍵登錄小程序
1、微信小程序開發(fā)文檔地址
2、步驟及注意事項：
1、因為需要
用戶主動觸發(fā)才能發(fā)起獲取手機號接口，所以該功能不由 API 來調(diào)用，需用button組件的點擊來觸發(fā)。
2、需要將button組件open-type的值設(shè)置為getPhoneNumber，當用戶點擊并允許之后，可以通過bindgetphonenumber事件回調(diào)獲取到動態(tài)令牌code，根據(jù)code調(diào)用phonenumber.getPhoneNumber接口，消費code來換取用戶手機號。每個code有效期為5分鐘，且只能消費一次。
注：getPhoneNumber返回的code與wx.login返回的code作用是不一樣的，不能混用。
3、頁面使用
<template>
<div class="auth flex-box flex-ver flex-col">
<button
class="btn flex-box flex-ver"
v-if="isShowPhone"
type="primary"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>門店手機號一鍵登錄</button>
</div>
</template>
<script>
export default {
name: 'Auth',
data() {
return {
isShowPhone: false // 是否顯示獲取手機號按鈕
}
},
methods: {
// 用戶按了允許授權(quán)按鈕
async getPhoneNumber(e) {
console.log('獲取手機號碼Code：', e.mp.detail)
if (e.mp.detail.code) {
// 用戶按了允許授權(quán)按鈕
// console.log('獲取手機號碼：', e.mp.detail)
this.isShowPhone = false
const res = await this.$http('registerPhone', { code: e.mp.detail.code, openid: this.openId })
if (res.success) {
this.setToken(res.data)
this.$reLaunch('/pages/tabbarPage/main')
}
} else {
// 用戶按了拒絕按鈕
wx.hideLoading()
wx.showModal({
title: '提示',
content: '拒絕授權(quán)將無法注冊登陸小程序！',
showCancel: false,
success: (res) => {
if (res.confirm) {
this.isShowPhone = true
}
}
})
}
}
}
}
</script>
4、頁面效果截圖如下
1、初始頁面如下：
2、點擊按鈕后如下：
3、點擊不允許后如下：
4、點擊允許后(直接進入首頁)如下：
鑒權(quán)頁面:auth.vue代碼如下：
<template>
<div class="auth flex-box flex-ver flex-col">
<div class="loading-wrap flex-box flex-col flex-ver">
<img class="launch_loading_logo" src="../../static/images/logo.png" />
<p class="app-name">{{ appName }}</p>
</div>
<button
class="btn flex-box flex-ver"
v-if="isShowPhone"
type="primary"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>門店手機號一鍵登錄</button>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { APP_NAME } from '@/utils/settingConfig'
export default {
name: 'Auth',
data() {
return {
appName: APP_NAME,
code: '', // wx.login拿回來的code
isShowPhone: false // 是否顯示獲取手機號按鈕
}
},
computed: {
...mapGetters([
'openId'
])
},
onLoad(option) {
// console.log('接受參數(shù)', option)
wx.showLoading({
title: '檢查應(yīng)用版本',
mask: true
})
// 檢測IOS版本
wx.getSystemInfo({
success: (res) => {
wx.hideLoading()
// console.log(11, res)
let versionIos = res.system.split(' ')[1].split('.')[0]
let version = res.system.split(' ')[0].toLowerCase()
// console.log(222, version, versionIos)
if (version === 'ios' && versionIos < 10) {
wx.showModal({
title: '提示',
content: `當前ios版本為${res.system.split(' ')[1]}，請升級10以上再登錄！`,
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用戶點擊確定')
}
}
})
}
}
})
},
onShow() {
// 調(diào)用微信登錄wx.login
this.logining()
},
methods: {
...mapMutations({
setToken: 'user/SET_TOKEN',
setOpenId: 'user/SET_OPEN_ID'
}),
// 調(diào)用微信登錄wx.login獲取code
logining() {
wx.showLoading({
title: '登錄微信用戶',
mask: true
})
wx.login({
success: (res) => {
if (res.code) {
wx.hideLoading()
this.code = res.code
// console.log('wx.login獲得code成功', res)
// vuex中的openId/unionId若存在就直接調(diào)用獲取token接口
if (this.openId) {
this.getAccessToken(this.openId)
} else {
this.getOpenId({ code: this.code })
}
} else {
console.log('獲取用戶登錄態(tài)失??！' + res.errMsg)
}
},
fail(err) {
wx.hideLoading()
wx.showToast({
title: 'wx.login失敗' + err,
icon: 'none',
duration: 1000
})
}
})
},
// 獲取openid
async getOpenId(parameter) {
wx.showLoading({
title: '獲取openId',
mask: true
})
const res = await this.$http('getOpenId', parameter)
console.log('獲取openId', res)
wx.hideLoading()
if (res.success) {
// 生成唯一值
this.setOpenId(res.data.openid)
// console.log('獲取openId---值', res.data.openid)
this.getAccessToken(res.data.openid)
}
},
// 獲取token
async getAccessToken(openId) {
const res = await this.$http('getAccessToken', { openid: openId })
// console.log('獲取token', res)
if (res.success) {
if (res.data) {
this.isShowPhone = false
this.setToken(res.data)
this.$reLaunch('/pages/tabbarPage/main')
} else {
this.isShowPhone = true
}
}
},
// 用戶按了允許授權(quán)按鈕
async getPhoneNumber(e) {
console.log('獲取手機號碼Code：', e.mp.detail)
if (e.mp.detail.code) {
// 用戶按了允許授權(quán)按鈕
// console.log('獲取手機號碼：', e.mp.detail)
this.isShowPhone = false
const res = await this.$http('registerPhone', { code: e.mp.detail.code, openid: this.openId })
if (res.success) {
this.setToken(res.data)
this.$reLaunch('/pages/tabbarPage/main')
}
} else {
// 用戶按了拒絕按鈕
wx.hideLoading()
wx.showModal({
title: '提示',
content: '拒絕授權(quán)將無法注冊登陸小程序！',
showCancel: false,
success: (res) => {
if (res.confirm) {
this.isShowPhone = true
}
}
})
}
}
}
}
</script>
<style lang="scss">
.auth {
height: 100%;
.loading-wrap {
.launch_loading_logo {
width: 80px;
height: 80px;
border-radius: 80px;
}
.app-name {
margin-top: 20px;
}
}
.btn {
position: fixed;
bottom: 35px;
width: 90%;
border-radius: 20px;
}
}
</style>
源碼地址
gitHub地址
碼云地址
其他文章
Vue3 + Vite + Ts開源后臺管理系統(tǒng)模板
基于ElementUi或AntdUI再次封裝基礎(chǔ)組件文檔文章來源：http://www.zghlxwxcb.cn/news/detail-517001.html
基于Element-plus再次封裝基礎(chǔ)組件文檔(vue3+ts)文章來源地址http://www.zghlxwxcb.cn/news/detail-517001.html
到了這里，關(guān)于mpVue 微信小程序授權(quán)登錄流程（即登錄鑒權(quán)流程）及獲取手機號一鍵登錄教程（getPhoneNumber使用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
