uniapp 實(shí)現(xiàn)一鍵登錄前置條件: 開通uniCloud, 開通一鍵登錄功能參考的文檔 :
官網(wǎng) - 一鍵登錄uniapp指南 : https://uniapp.dcloud.net.cn/univerify.html#%E6%A6%82%E8%BF%B0
官網(wǎng) - 一鍵登錄開通指南 : https://ask.dcloud.net.cn/article/37965
官網(wǎng) - unicloud使用指南 https://uniapp.dcloud.net.cn/uniCloud/quickstart.html#
官網(wǎng) - 一鍵登錄uniCloud使用說(shuō)明 https://uniapp.dcloud.net.cn/uniCloud/univerify.html#
一、開通阿里云服務(wù)
二、新建云函數(shù)getPhoneNumber
由于一鍵登錄依賴?verify
?
編寫云函數(shù)代碼
'use strict'
const crypto = require('crypto')
exports.main = async (event, context) => {
const res = await uniCloud.getPhoneNumber({
provider: 'univerify',
apiKey: '', // 在開發(fā)者中心開通服務(wù)并獲取apiKey
apiSecret: '', // 在開發(fā)者中心開通服務(wù)并獲取apiSecret
access_token: event.access_token,
openid: event.openid
})
if(res.phoneNumber){
return {
code: 0,
message: '獲取手機(jī)號(hào)成功',
data: res.phoneNumber
}
} else {
return {
code: result.data.code,
message: result.data.msg,
data: result.data.data
}
}
}
三、配置 uni-app項(xiàng)目
?
?
四、編寫getPhoneLogin.js
export default{
methods:{
async oneClickLogin() {
await this.preLogin(true)
uni.login({
provider: 'univerify',
univerifyStyle: {
fullScreen: false,
backgroundColor: '#ffffff',
otherLoginButton: {
// 是否顯示其他登錄按鈕
visible: false
},
icon: {
"path":"static/logo.png",
"width": "60px",
"height": "60px"
},
authButton: {
normalColor: '#2dc8a1'
},
privacyTerms: {
defaultCheckBoxState: false
}
},
success(res) {
uniCloud.callFunction({
name: 'getPhoneNumber',
data: {
access_token: res.authResult.access_token,
openid: res.authResult.openid
}
}).then(async (dataRes) => {
if (dataRes.result.code == 0) {
setTimeout(async () => {
uni.closeAuthView()
}, 1000)
} else {
uni.showToast({
title: dataRes.result.message,
icon: 'none'
})
}
}).catch((err) => {
uni.showModal({
title: '登錄失敗',
content: err.errMsg,
showCancel: false,
success() {
uni.closeAuthView()
}
})
})
},
fail(err) {
if (err.errCode != 30002 && err.errCode != '30003' && err.errCode != '30006') {
uni.showModal({
title: '登錄失敗',
content: err.errMsg,
showCancel: false,
success() {
// 客戶端關(guān)閉一鍵登錄授權(quán)界面
uni.closeAuthView()
}
})
}
}
})
},
/**
* 預(yù)登錄
* 1、預(yù)登錄操作可以判斷當(dāng)前設(shè)備環(huán)境是否支持一鍵登錄，如果能支持一鍵登錄，此時(shí)可以顯示一鍵登錄選項(xiàng)，同時(shí)預(yù)登錄會(huì)準(zhǔn)備好相關(guān)環(huán)境，顯著提升顯示授權(quán)登錄界面的速度。
* 2、如果當(dāng)前設(shè)備環(huán)境不支持一鍵登錄，此時(shí)應(yīng)該顯示其他的登錄選項(xiàng)。
* 3、如果手機(jī)沒(méi)有插入有效的sim卡，或者手機(jī)蜂窩數(shù)據(jù)網(wǎng)絡(luò)關(guān)閉，都有可能造成預(yù)登錄校驗(yàn)失敗。
* @param Boolean isShowMsg: 是否顯示錯(cuò)誤提示
*/
preLogin(isShowMsg = false) {
return new Promise((resolve, reject) => {
uni.preLogin({
provider: 'univerify',
success() {
this.isOneClickLogin = true
resolve(true)
},
fail(err) {
// 如果手機(jī)沒(méi)有插入有效的sim卡，或者手機(jī)蜂窩數(shù)據(jù)網(wǎng)絡(luò)關(guān)閉，都有可能造成預(yù)登錄校驗(yàn)失敗。
this.isOneClickLogin = false
if (isShowMsg && err.errMsg != 'login:ok') {
// 不同運(yùn)營(yíng)商 返回的報(bào)錯(cuò)字段不同
uni.showModal({
title: '當(dāng)前設(shè)備環(huán)境不支持一鍵登錄',
content: err.errMsg || err.metadata.resultMsg || err.metadata.error_data || err.metadata.resultDesc ||
'請(qǐng)檢查是否插入有效sim卡及開啟蜂窩數(shù)據(jù)網(wǎng)絡(luò)',
showCancel: false
})
}
resolve(false)
}
})
})
}
}
}
也可成功后自己請(qǐng)求自己的 后臺(tái)接口
async oneClickLogin() {
await this.preLogin(true)
uni.login({
provider: 'univerify',
univerifyStyle: {
fullScreen: true,
backgroundColor: '#ffffff',
otherLoginButton: {
// 是否顯示其他登錄按鈕
visible: false
},
authButton: {
normalColor: '#2dc8a1'
},
privacyTerms: {
// 條款勾選框初始狀態(tài)
defaultCheckBoxState: false,
privacyItems: [{
url: 'https://xxx/agreement.html',
title: '用戶服務(wù)協(xié)議'
},
{
url: 'https://xxx/privacypolicy.html',
title: '隱私政策'
}
]
}
},
success(res) {
uniCloud.callFunction({
name: 'login',
data: {
access_token: res.authResult.access_token,
openid: res.authResult.openid,
serversUrl: '這里上傳你的接口地址'
}
}).then(async (dataRes) => {
if (dataRes.result.code == 0) {
// 這里寫你登錄成功后的邏輯 ...
uni.showToast({
title: '登錄成功',
icon: 'success'
})
uni.setStorageSync('token', dataRes.result.data.access_token)
setTimeout(async () => {
uni.closeAuthView()
uni.navigateBack()
}, 1000)
} else {
uni.showToast({
title: dataRes.result.message,
icon: 'none'
})
}
}).catch((err) => {
uni.showModal({
title: '登錄失敗',
content: err.errMsg,
showCancel: false,
success() {
uni.closeAuthView()
}
})
})
},
fail(err) {
if (err.errCode != 30002 && err.errCode != '30003' && err.errCode != '30006') {
uni.showModal({
title: '登錄失敗',
content: err.errMsg,
showCancel: false,
success() {
// 客戶端關(guān)閉一鍵登錄授權(quán)界面
uni.closeAuthView()
}
})
}
}
})
},
四、配置參數(shù)（可自行配置）
{
"fullScreen": false, // 是否全屏顯示，默認(rèn)值： false
"backgroundColor": "#ffffff", // 授權(quán)頁(yè)面背景顏色，默認(rèn)值：#ffffff
"backgroundImage": "", // 全屏顯示的背景圖片，默認(rèn)值："" （僅支持本地圖片，只有全屏顯示時(shí)支持）
"icon": {
"path": "static/xxx.png", // 自定義顯示在授權(quán)框中的logo，僅支持本地圖片 默認(rèn)顯示App logo
"width": "60px", //圖標(biāo)寬度 默認(rèn)值：60px
"height": "60px" //圖標(biāo)高度 默認(rèn)值：60px
},
"closeIcon": {
"path": "static/xxx.png" // 自定義關(guān)閉按鈕，僅支持本地圖片。 HBuilderX3.3.7+版本支持
},
"phoneNum": {
"color": "#202020" // 手機(jī)號(hào)文字顏色 默認(rèn)值：#202020
},
"slogan": {
"color": "#BBBBBB" // slogan 字體顏色 默認(rèn)值：#BBBBBB
},
"authButton": {
"normalColor": "#3479f5", // 授權(quán)按鈕正常狀態(tài)背景顏色 默認(rèn)值：#3479f5
"highlightColor": "#2861c5", // 授權(quán)按鈕按下狀態(tài)背景顏色 默認(rèn)值：#2861c5（僅ios支持）
"disabledColor": "#73aaf5", // 授權(quán)按鈕不可點(diǎn)擊時(shí)背景顏色 默認(rèn)值：#73aaf5（僅ios支持）
"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認(rèn)值：#ffffff
"title": "本機(jī)號(hào)碼一鍵登錄", // 授權(quán)按鈕文案 默認(rèn)值：“本機(jī)號(hào)碼一鍵登錄”
"borderRadius": "24px" // 授權(quán)按鈕圓角 默認(rèn)值："24px" （按鈕高度的一半）
},
"otherLoginButton": {
"visible": true, // 是否顯示其他登錄按鈕，默認(rèn)值：true
"normalColor": "", // 其他登錄按鈕正常狀態(tài)背景顏色 默認(rèn)值：透明
"highlightColor": "", // 其他登錄按鈕按下狀態(tài)背景顏色 默認(rèn)值：透明
"textColor": "#656565", // 其他登錄按鈕文字顏色 默認(rèn)值：#656565
"title": "其他登錄方式", // 其他登錄方式按鈕文字 默認(rèn)值：“其他登錄方式”
"borderColor": "", //邊框顏色 默認(rèn)值：透明（僅iOS支持）
"borderRadius": "0px" // 其他登錄按鈕圓角 默認(rèn)值："24px" （按鈕高度的一半）
},
"privacyTerms": {
"defaultCheckBoxState":true, // 條款勾選框初始狀態(tài) 默認(rèn)值： true
"isCenterHint":false, //未勾選服務(wù)條款時(shí)點(diǎn)擊登錄按鈕的提示是否居中顯示 默認(rèn)值: false (3.7.13+ 版本支持)
"uncheckedImage":"", // 可選 條款勾選框未選中狀態(tài)圖片（僅支持本地圖片 建議尺寸 24x24px）(3.2.0+ 版本支持)
"checkedImage":"", // 可選 條款勾選框選中狀態(tài)圖片（僅支持本地圖片 建議尺寸24x24px）(3.2.0+ 版本支持)
"checkBoxSize":12, // 可選 條款勾選框大小
"textColor": "#BBBBBB", // 文字顏色 默認(rèn)值：#BBBBBB
"termsColor": "#5496E3", // 協(xié)議文字顏色 默認(rèn)值： #5496E3
"prefix": "我已閱讀并同意", // 條款前的文案 默認(rèn)值：“我已閱讀并同意”
"suffix": "并使用本機(jī)號(hào)碼登錄", // 條款后的文案 默認(rèn)值：“并使用本機(jī)號(hào)碼登錄”
"privacyItems": [ // 自定義協(xié)議條款，最大支持2個(gè)，需要同時(shí)設(shè)置url和title. 否則不生效
{
"url": "https://", // 點(diǎn)擊跳轉(zhuǎn)的協(xié)議詳情頁(yè)面
"title": "用戶服務(wù)協(xié)議" // 協(xié)議名稱
}
]
},
"buttons": { // 自定義頁(yè)面下方按鈕僅全屏模式生效（3.1.14+ 版本支持）
"iconWidth": "45px", // 圖標(biāo)寬度（高度等比例縮放） 默認(rèn)值：45px
"list": [
{
"provider": "apple",
"iconPath": "/static/apple.png" // 圖標(biāo)路徑僅支持本地圖片
},
{
"provider": "weixin",
"iconPath": "/static/wechat.png" // 圖標(biāo)路徑僅支持本地圖片
}
]
}
}
注意：寫完后這個(gè)uniClound目錄是跟我們前端代碼放在一起的。云函數(shù)代碼寫完后需要上傳部署到云服務(wù)空間。?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-741575.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-741575.html
到了這里，關(guān)于Uni-App 快捷登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
