一鍵登錄Dcloud官網(wǎng)請戳這里，感興趣的可以看看官網(wǎng)，有很詳細(xì)的示例，選擇App一鍵登錄，可以看到一些常用的概述
比如：
1、調(diào)用uni.login就能彈出一鍵登錄的頁面
2、一鍵登錄的流程，可以選擇先預(yù)登錄uni.prelogin()或直接登錄uni.login()
3、要先開通Dcloud一鍵登錄服務(wù)，在Dcloud開發(fā)者中心登錄賬戶開通一鍵登錄服務(wù)，這個需要付費的，每調(diào)用一次是0.02元，充值多少是無限制的，夠你測試用就行。
4、設(shè)置uniCloud云函數(shù)，一鍵登錄需要調(diào)用uniCloud.getPhoneNumber()
5、HBuilderX 3.4.0及之后的版本上傳云函數(shù)時如果沒有指定使用uni-cloud-verify擴展庫的云函數(shù)將無法調(diào)用uniCloud.getPhoneNumber接口，所以要在云函數(shù)的package.json內(nèi)添加uni-cloud-verify的引用
6、一鍵登錄頁面是配置出來的，如何配置，可以看univerifyStyle 數(shù)據(jù)結(jié)構(gòu)
7、關(guān)閉一鍵登錄授權(quán)界面，調(diào)用uni.closeAuthView()
8、用戶點擊一鍵登錄自定義按鈕
9、一鍵登錄成功后，根據(jù)自己的后端接口判斷是直接進(jìn)入app頁面還是需要去注冊的業(yè)務(wù)處理
uni一鍵登錄概述請戳這里
Uni手機號一鍵登錄，請戳這里
一鍵登錄具體實現(xiàn)：
首先得有Dcloud賬號，申請好應(yīng)用之后，申請開通一鍵登錄服務(wù)，開通一鍵登錄服務(wù)詳細(xì)流程，請戳這里，在左側(cè)選擇一鍵登錄，點擊基礎(chǔ)配置，取ApiKey和ApiSecret的值
1、mainfest.json中選擇App模塊配置，勾選一鍵登錄
2、要實現(xiàn)一鍵登錄，需要借助UniCloud 云函數(shù)的 API：uniCloud.getPhoneNumber
創(chuàng)建uniCloud.getPhoneNumber云函數(shù)步驟如下：
1、在項目根目錄uniCloud文件夾下找到 cloudfunctions 文件夾。如果沒有該文件夾，可以手動創(chuàng)建
2、在 cloudfunctions 文件夾中創(chuàng)建一個新的文件夾，作為你的云函數(shù)的名稱，例如 getPhoneNumber。我這里名稱是login
3、進(jìn)入 getPhoneNumber 文件夾，并創(chuàng)建一個 JavaScript 文件，例如 index.js。
4、在 index.js 中編寫云函數(shù)的代碼，具體實現(xiàn)獲取手機號碼的邏輯。
備注：這段代碼在下面引起了一個報錯，報錯已解決，此段代碼不要直接復(fù)制，用解決后的代碼
exports.main = async (event, context) => {
//登錄Dcloud賬號，左側(cè)選擇一鍵登錄，點擊基礎(chǔ)配置，取ApiKey和ApiSecret的值
const res = await uniCloud.getPhoneNumber({
provider: 'univerify',
apiKey: '對應(yīng)的apiKey',
apiSecret: '對應(yīng)的apiSecret',
access_token: event.access_token,
openid: event.openid
})
// 這里需要改成你們自己后端登錄成功后的接口地址 ...
const url = event.serversUrl + '/user/login'
// md5加密方式：手機號 時間戳 私鑰
const phone = res.phoneNumber
const timestamp = new Date().getTime()
const signKey = '對應(yīng)的signKey '
const sign = crypto.createHash('md5').update(phone + timestamp + signKey).digest('hex')
const result = await uniCloud.httpclient.request(url, {
method: 'POST',
data: {
phone,
timestamp,
sign
},
contentType: 'json',
dataType: 'json',
// 是否在證書不受信任時返回錯誤
rejectUnauthorized: false
})
console.log('服務(wù)端返回結(jié)果=', result)
if (result.data.code == 200) {
return {
code: 0,
message: '獲取手機號成功',
data: result.data.data
}
} else {
return {
code: result.data.code,
message: result.data.msg,
data: result.data.data
}
}
}
5、在項目根目錄的uniCloud文件夾下，在云函數(shù)的package.json內(nèi)添加uni-cloud-verify的引用即可為云函數(shù)啟用此擴展，無需做其他調(diào)整
{
"name": "login",
"dependencies": {},
"extensions": {
"uni-cloud-verify": {} // 啟用一鍵登錄擴展，值為空對象即可
}
}
3、頁面中具體使用
關(guān)于如何使用，我自己踩了些坑
1、首先一鍵登錄頁面類似于一個彈窗，在app剛打開的時候先彈出這個一鍵登錄的頁面
如果不想選一鍵登錄，點左上角的叉號，關(guān)閉彈窗。
我遇到的第一個坑是，我對一鍵登錄不了解，
我自己按ui圖畫了一個一鍵登錄的頁面，在實現(xiàn)過程中一直很疑惑，如何獲得加密的手機號和對應(yīng)的供應(yīng)商認(rèn)證服務(wù)來渲染到頁面上，誤區(qū)在于一鍵登錄頁面是配置出來的。
既然它是彈窗，關(guān)閉之后就得有一個展示的頁面，我這里是關(guān)閉之后顯示的是賬號登錄頁面
2、uniapp介紹中，左側(cè)菜單欄點擊uni一鍵登錄
里面有張流程圖，先預(yù)登錄然后是一鍵登錄
關(guān)于預(yù)登錄，需要調(diào)用 uni.preLogin(), 主要是檢查預(yù)登錄環(huán)境
然后緊接著就是調(diào)用uni.login(),
這個地方就很疑惑，我一直覺得是點擊一鍵登錄按鈕才會調(diào)用login方法
誤區(qū)就在于，uni.login()獲取用戶的登錄憑證 code。然后將這個 code 發(fā)送給后端服務(wù)器，服務(wù)器使
用這個憑證進(jìn)行登錄驗證，并返回用戶的身份信息或生成用戶的會話憑證，直白的說就是調(diào)用
uni.login()之后才能拿到手機號和對應(yīng)的供應(yīng)商認(rèn)證服務(wù)
，一鍵登錄頁面上的手機號和對應(yīng)的供應(yīng)商認(rèn)證服務(wù)才會顯示出來
緊接著是一鍵登錄按鈕，當(dāng)點擊按鈕的時候會觸發(fā)uniCloud.callFunction，就是去調(diào)用云函數(shù)，云函
數(shù)返回的參數(shù)有用戶的完整手機號，拿著這個手機號，去調(diào)我們自己后端的接口，根據(jù)后端給的標(biāo)識
判斷是放行到主頁還是需要用戶去注冊頁
function preLogin(isShowMsg = false) {
//預(yù)登陸檢查是否符合一鍵登錄的環(huán)境
uni.preLogin({
provider: "univerify",
success: (res) => {
//調(diào)用login方法，我是vue3，沒有thi實例，vue2框架this.login()
login()
},
fail(err) {
// 如果手機沒有插入有效的sim卡，或者手機蜂窩數(shù)據(jù)網(wǎng)絡(luò)關(guān)閉，都有可能造成預(yù)登錄校驗失敗。
if (isShowMsg && err.errMsg != "login:ok") {
// 不同運營商 返回的報錯字段不同
uni.showModal({
title: "當(dāng)前設(shè)備環(huán)境不支持一鍵登錄",
content:
err.errMsg ||
err.metastate.resultMsg ||
err.metastate.error_data ||
err.metastate.resultDesc ||
"請檢查是否插入有效sim卡及開啟蜂窩數(shù)據(jù)網(wǎng)絡(luò)",
showCancel: false,
});
}
},
});
}
function login() {
uni.login({
provider: 'univerify',
univerifyStyle: {
"fullScreen": true, // 是否全屏顯示，true表示全屏模式，false表示非全屏模式，默認(rèn)值為false。
"backgroundColor": "#ffffff", // 授權(quán)頁面背景顏色，默認(rèn)值：#ffffff
"icon": {
"path": "static/images/logo.png",// 自定義顯示在授權(quán)框中的logo，僅支持本地圖片 默認(rèn)顯示App logo
"width": "60px", //圖標(biāo)寬度 默認(rèn)值：60px
"height": "60px",//圖標(biāo)高度 默認(rèn)值：60px,
},
"phoneNum": {
"color": "#525252",// 手機號文字顏色 默認(rèn)值：#202020
"fontSize": "22",// 手機號字體大小 默認(rèn)值：18
},
"slogan": {
"color": "#525252", // slogan 字體顏色 默認(rèn)值：#8a8b90
"fontSize": "14"
},
"authButton": {
"normalColor": "#FF9CAE", // 授權(quán)按鈕正常狀態(tài)背景顏色 默認(rèn)值：#3479f5
"highlightColor": "#FF9CAE", // 授權(quán)按鈕按下狀態(tài)背景顏色 默認(rèn)值：#2861c5（僅ios支持）
"disabledColor": "#73aaf5", // 授權(quán)按鈕不可點擊時背景顏色 默認(rèn)值：#73aaf5（僅ios支持）
"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認(rèn)值：#ffffff
"title": "一鍵登錄/注冊" // 授權(quán)按鈕文案 默認(rèn)值：“本機號碼一鍵登錄”
},
"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": false, // 條款勾選框初始狀態(tài) 默認(rèn)值： true
"uncheckedImage": "", // 可選 條款勾選框未選中狀態(tài)圖片（僅支持本地圖片 建議尺寸 24x24px）(3.2.0+ 版本支持)
"checkedImage": "", // 可選 條款勾選框選中狀態(tài)圖片（僅支持本地圖片 建議尺寸24x24px）(3.2.0+ 版本支持)
"checkBoxSize": 12, // 可選 條款勾選框大小，僅android支持
"textColor": "#BBBBBB", // 文字顏色 默認(rèn)值：#BBBBBB
"termsColor": "#5496E3", // 協(xié)議文字顏色 默認(rèn)值： #5496E3
"prefix": "請閱讀并同意", // 條款前的文案 默認(rèn)值：“我已閱讀并同意”
"suffix": "并使用本機號碼登錄", // 條款后的文案 默認(rèn)值：“并使用本機號碼登錄”
"privacyItems": [ // 自定義協(xié)議條款，最大支持2個，需要同時設(shè)置url和title. 否則不生效
{
"url": "/pages/privacy/use", // 點擊跳轉(zhuǎn)的協(xié)議詳情頁面
"title": "《xxx用戶注冊協(xié)議》" //用戶注冊協(xié)議名稱
},
{
"url": "/pages/privacy/privacy", // 點擊跳轉(zhuǎn)的協(xié)議詳情頁面
"title": "《xx隱私政策》" // 隱私政策名稱
}
]
}
},
success: (res) => {
uniCloud.callFunction({
name: 'login', // 你的云函數(shù)名稱
data: {
access_token: res.authResult
.access_token, // 客戶端一鍵登錄接口返回的access_token
openid: res.authResult.openid // 客戶端一鍵登錄接口返回的openid
}
}).then(dataRes => {
console.log('云函數(shù)返回的參數(shù)', dataRes)
data.form.mobile = dataRes.result.data.phoneNumber
$Api.post("user/direct",data.form).then((res) => {
console.log(res,'調(diào)后端接口判斷登錄后操作');
if(res&&res.code==0){
if(res.id){
uni.switchTab({
url: "/pages/square/square",
});
}else{
uni.navigateTo({
url: "/pages/user/register?mobile=" + data.form.mobile,
});
}
}
});
}).catch(err => {
console.log('云函數(shù)報錯', err)
})
uni.showToast({
title: res.authResult,
icon: "none"
})
uni.closeAuthView() //關(guān)閉一鍵登錄彈出窗口
},
fail(res) { // 登錄失敗
uni.closeAuthView() //關(guān)閉一鍵登錄彈出窗口
console.log('失敗')
},
})
}
3、當(dāng)uni.login()調(diào)用成功之后，一鍵登錄頁面就出現(xiàn)了，然后就是調(diào)整樣式，大框架是沒法改變的，只能調(diào)整一些類似于字體大小，顏色之類的，如何調(diào)整icon和phoneNumber之間的間距，我一直沒有實現(xiàn)，有實現(xiàn)的可以給我留言，感謝感謝
通過univerifyStyle 配置，官網(wǎng)是這樣的，我自己的配置看上面的代碼
{
"fullScreen": false, // 是否全屏顯示，默認(rèn)值： false
"backgroundColor": "#ffffff", // 授權(quán)頁面背景顏色，默認(rèn)值：#ffffff
"backgroundImage": "", // 全屏顯示的背景圖片，默認(rèn)值："" （僅支持本地圖片，只有全屏顯示時支持）
"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" // 手機號文字顏色 默認(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)按鈕不可點擊時背景顏色 默認(rèn)值：#73aaf5（僅ios支持）
"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認(rèn)值：#ffffff
"title": "本機號碼一鍵登錄", // 授權(quán)按鈕文案 默認(rèn)值：“本機號碼一鍵登錄”
"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ù)條款時點擊登錄按鈕的提示是否居中顯示 默認(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": "并使用本機號碼登錄", // 條款后的文案 默認(rèn)值：“并使用本機號碼登錄”
"privacyItems": [ // 自定義協(xié)議條款，最大支持2個，需要同時設(shè)置url和title. 否則不生效
{
"url": "https://", // 點擊跳轉(zhuǎn)的協(xié)議詳情頁面
"title": "用戶服務(wù)協(xié)議" // 協(xié)議名稱
}
]
},
"buttons": { // 自定義頁面下方按鈕僅全屏模式生效（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)路徑僅支持本地圖片
}
]
}
}
這里遇到一個報錯，云函數(shù)中這個接口的前綴是underfiend，導(dǎo)致找不到，云函數(shù)index.js中的代碼之前是其他人寫的，我打印之后才發(fā)現(xiàn)，event只返回兩個參數(shù)，access_token和openid，沒有event.serversUrl這個參數(shù)，所以導(dǎo)致顯示的是undefined
代碼改為：
exports.main = async (event, context) => {
//登錄Dcloud賬號，左側(cè)選擇一鍵登錄，點擊基礎(chǔ)配置，取ApiKey和ApiSecret的值
const res = await uniCloud.getPhoneNumber({
appid: '_xxxxA3', // 替換成自己開通一鍵登錄的應(yīng)用的DCloud appid
provider: 'univerify',
apiKey: '對應(yīng)的apiKey',
apiSecret: '對應(yīng)的apiSecret',
access_token: event.access_token,
openid: event.openid
})
return {
code: 0,
message: '獲取手機號成功',
data:res
}
}
然后調(diào)用成功后會返回這樣的數(shù)據(jù)格式
我們需要的就是完整的手機號
在自己的頁面中調(diào)用uni.login，uniCloud.callFunction({}).then((dataRes=>{
console.log(‘云函數(shù)返回的參數(shù)’, dataRes)
})),打印之后就能拿到：文章來源：http://www.zghlxwxcb.cn/news/detail-709726.html
{
"result": {
"code": 0,
"message": "獲取手機號成功",
"data": {
"code": 0,
"success": true,
"phoneNumber": "1510000xxxx"
}
}
}
再說個小細(xì)節(jié)點，如果你想在云函數(shù)中打印看結(jié)果的話，一定要右擊云函數(shù)選擇上傳部署，不然的話云函數(shù)不會更新，我就是自己傻傻的等著看結(jié)果，試了好幾次才反應(yīng)過來
歡迎留言溝通或私信溝通~~~~文章來源地址http://www.zghlxwxcb.cn/news/detail-709726.html
到了這里，關(guān)于【uniapp】Dcloud的uni手機號一鍵登錄，具體實現(xiàn)及踩過的坑，調(diào)用uniCloud.getPhoneNumber(),uni.login()等的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
