uniapp手機(jī)號(hào)一鍵登錄實(shí)現(xiàn)保姆級(jí)教程(含前端和后端)
前置條件
- 手機(jī)安裝有sim卡
- 手機(jī)開(kāi)啟數(shù)據(jù)流量(與wifi無(wú)關(guān),不要求關(guān)閉wifi,但數(shù)據(jù)流量不能禁用。)
- 開(kāi)通uniCloud服務(wù)(但不要求所有后臺(tái)代碼都使用uniCloud)
創(chuàng)建uniapp項(xiàng)目并關(guān)聯(lián)uniClound云空間
新建uniapp項(xiàng)目,勾選下面“啟用uniClound”,選擇其中一個(gè)云服務(wù)商即可。

如果在已有項(xiàng)目中啟用uniClound,可直接右鍵項(xiàng)目文件夾,選擇“創(chuàng)建uniClound云開(kāi)發(fā)環(huán)境”。

創(chuàng)建好uniClound云開(kāi)發(fā)環(huán)境后,會(huì)在項(xiàng)目目錄中增加一個(gè)“uniClound”的文件夾,右鍵該文件夾,選擇“關(guān)聯(lián)云服務(wù)空間或項(xiàng)目”。

如果還沒(méi)有相應(yīng)的云服務(wù)空間,可以選擇新建云服務(wù)空間

打開(kāi)uniClound官網(wǎng)開(kāi)發(fā)者后臺(tái),選擇“新建服務(wù)空間”

目前阿里云還是免費(fèi)的,直接選擇“立即購(gòu)買(mǎi)”,

購(gòu)買(mǎi)之后,在前端再次刷新云服務(wù)空間,即可看到新購(gòu)的服務(wù)空間,選擇并關(guān)聯(lián)即可。

開(kāi)啟一鍵登錄模塊并開(kāi)通一鍵登錄服務(wù)
打開(kāi)項(xiàng)目的“manifest.json”,選擇“App模塊配置”,勾選“OAuth(登錄授權(quán))”

在uniClound官網(wǎng)開(kāi)發(fā)者后臺(tái)開(kāi)通一鍵登錄服務(wù),然后選擇“賬戶(hù)信息”,并完成充值。

余額充值

充值之后,打開(kāi)“應(yīng)用管理”,點(diǎn)擊添加應(yīng)用

填寫(xiě)應(yīng)用相關(guān)信息后,點(diǎn)擊“提交申請(qǐng)”,審核可能會(huì)需要幾個(gè)小時(shí)時(shí)間

如果還沒(méi)有Android包名,按圖點(diǎn)擊前往創(chuàng)建。

會(huì)跳到應(yīng)用列表頁(yè),點(diǎn)擊自己的應(yīng)用名稱(chēng)進(jìn)入詳情。

選擇“Android云端證書(shū)”,選擇創(chuàng)建證書(shū)

點(diǎn)擊證書(shū)詳情,記住“MD5”,“SHA1”和“SHA256”。

點(diǎn)擊“各平臺(tái)信息”,完善上面的“MD5”,“SHA1”和“SHA256”等信息即可。

編寫(xiě)云函數(shù)并上傳部署
回到項(xiàng)目,右鍵“cloundfunctions”,新建云函數(shù)/云對(duì)象,取名“getPhoneNumber”(函數(shù)名可自定義)。

打開(kāi)“getPhoneNumber”文件夾下的“index.js”,編寫(xiě)如下代碼。

復(fù)制下面代碼,修改成自己的DClound appid即可
'use strict';
exports.main = async (event, context) => {
// event里包含著客戶(hù)端提交的參數(shù)
let data = await uniCloud.getPhoneNumber({
appid: '__UNI__AAAAAA', // 替換成自己開(kāi)通一鍵登錄的應(yīng)用的DCloud appid,使用callFunction方式調(diào)用時(shí)可以不傳(會(huì)自動(dòng)取當(dāng)前客戶(hù)端的appid),如果使用云函數(shù)URL化的方式訪問(wèn)必須傳此參數(shù)
provider: 'univerify',
access_token: event.access_token,
openid: event.openid
})
return data//返回的data里包含手機(jī)號(hào)
}
自HBuilderX
3.4.0起,一鍵登錄相關(guān)功能移至擴(kuò)展庫(kù)uni-cloud-verify內(nèi)。在一段時(shí)間內(nèi)無(wú)論開(kāi)發(fā)者是否使用擴(kuò)展庫(kù)云函數(shù)都可以正常使用uniCloud.getPhoneNumber。HBuilderX 3.4.0及之后的版本上傳云函數(shù)時(shí)如果沒(méi)有指定使用uni-cloud-verify擴(kuò)展庫(kù)的云函數(shù)將無(wú)法調(diào)用uniCloud.getPhoneNumber接口。關(guān)于擴(kuò)展庫(kù)的說(shuō)明見(jiàn):云函數(shù)擴(kuò)展庫(kù)
在云函數(shù)的package.json內(nèi)添加uni-cloud-verify的引用即可為云函數(shù)啟用此擴(kuò)展,無(wú)需做其他調(diào)整,完整的package.json示例如下:
{
"name": "univerify",
"extensions": {
"uni-cloud-verify": {} // 啟用一鍵登錄擴(kuò)展,值為空對(duì)象即可
}
}
寫(xiě)完后,右鍵“cloudfunctions”,上傳所有云函數(shù)。

獲取手機(jī)號(hào)流程

(第一種) 前端直接調(diào)用云函數(shù)獲取手機(jī)號(hào)
這里寫(xiě)一個(gè)簡(jiǎn)單的登錄功能。
<template>
<view>
<button @tap="goLogin">手機(jī)號(hào)一鍵登錄</button>
</view>
</template>
<script setup>
//手機(jī)號(hào)一鍵登錄事件
function goLogin() {
uni.login({
provider: 'univerify',
univerifyStyle: { // 自定義登錄框樣式
//參考`univerifyStyle 數(shù)據(jù)結(jié)構(gòu)`
"fullScreen": true, // 是否全屏顯示,默認(rèn)值: false
"title": '快速登錄',
"backgroundColor": "#ffffff", // 授權(quán)頁(yè)面背景顏色,默認(rèn)值:#ffffff
"icon": {
"path": "../../static/my/頭像.png" // 自定義顯示在授權(quán)框中的logo,僅支持本地圖片 默認(rèn)顯示App logo
},
"phoneNum": {
"color": "#000000", // 手機(jī)號(hào)文字顏色 默認(rèn)值:#000000
"fontSize": "18" // 手機(jī)號(hào)字體大小 默認(rèn)值:18
},
"slogan": {
"color": "#8a8b90", // slogan 字體顏色 默認(rèn)值:#8a8b90
"fontSize": "12" // slogan 字體大小 默認(rèn)值:12
},
// 一鍵登錄
"authButton": {
"normalColor": "#3479f5", // 授權(quán)按鈕正常狀態(tài)背景顏色 默認(rèn)值:#3479f5
"highlightColor": "#2861c5", // 授權(quán)按鈕按下?tīng)顟B(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)碼一鍵登錄”
},
// 其他登錄方式
"otherLoginButton": {
"visible": "true", // 是否顯示其他登錄按鈕,默認(rèn)值:true
"normalColor": "#f8f8f8", // 其他登錄按鈕正常狀態(tài)背景顏色 默認(rèn)值:#f8f8f8
"highlightColor": "#dedede", // 其他登錄按鈕按下?tīng)顟B(tài)背景顏色 默認(rèn)值:#dedede
"textColor": "#000000", // 其他登錄按鈕文字顏色 默認(rèn)值:#000000
"title": "密碼登錄", // 其他登錄方式按鈕文字 默認(rèn)值:“其他登錄方式”
"borderWidth": "1px", // 邊框?qū)挾?默認(rèn)值:1px(僅ios支持)
"borderColor": "#c5c5c5" //邊框顏色 默認(rèn)值: #c5c5c5(僅ios支持)
},
// 自定義按鈕登錄方式
"buttons": { // 僅全屏模式生效,配置頁(yè)面下方按鈕 (3.1.14+ 版本支持)
"iconWidth": "45px", // 圖標(biāo)寬度(高度等比例縮放) 默認(rèn)值:45px
"list": [{
"provider": "apple",
"iconPath": "/static/test.jpg", // 圖標(biāo)路徑僅支持本地圖片
},
{
"provider": "weixin",
"iconPath": "/static/test.jpg",
}
]
},
"privacyTerms": {
"defaultCheckBoxState": "true", // 條款勾選框初始狀態(tài) 默認(rèn)值: true
"textColor": "#8a8b90", // 文字顏色 默認(rèn)值:#8a8b90
"termsColor": "#1d4788", // 協(xié)議文字顏色 默認(rèn)值: #1d4788
"prefix": "我已閱讀并同意", // 條款前的文案 默認(rèn)值:“我已閱讀并同意”
"suffix": "并使用本機(jī)號(hào)碼登錄", // 條款后的文案 默認(rèn)值:“并使用本機(jī)號(hào)碼登錄”
"fontSize": "12", // 字體大小 默認(rèn)值:12,
"privacyItems": [
// 自定義協(xié)議條款,最大支持2個(gè),需要同時(shí)設(shè)置url和title. 否則不生效
{
"url": "https://", // 點(diǎn)擊跳轉(zhuǎn)的協(xié)議詳情頁(yè)面
"title": "用戶(hù)服務(wù)協(xié)議" // 協(xié)議名稱(chēng)
}
]
}
},
success(res) { // 登錄成功
console.log(res);
let openid = res.authResult.openid; //拿到openid
let access_token = res.authResult.access_token; //拿到access_token
console.log(openid)
console.log(access_token)
// 在得到access_token和openid后,通過(guò)callfunction調(diào)用云函數(shù)
uniCloud.callFunction({
name: "getPhoneNumber",
data: {
openid,
access_token
}
}).then(res1 => {
console.log("獲取成功");
console.log(res1);
// 獲取用戶(hù)的手機(jī)號(hào)
let phoneNumber = res1.result.phoneNumber;
//接下來(lái)就進(jìn)行你自己的操作
//...
//...
}).catch((err) => {
// 執(zhí)行失敗后的操作
//...
//...
})
},
// 當(dāng)用戶(hù)點(diǎn)擊自定義按鈕時(shí),會(huì)觸發(fā)uni.login的fail回調(diào)[點(diǎn)擊其他登錄方式,可以跳轉(zhuǎn)頁(yè)面,或執(zhí)行事件]
fail(res) { // 登錄失敗
console.log(res.code)
if (res.code == "30002") {
console.log('賬號(hào)密碼登錄');
}
}
})
}
</script>
(第三種)后臺(tái)調(diào)用云函數(shù)獲取手機(jī)號(hào)
后臺(tái)代碼
// 以nodejs為例
const crypto = require('crypto')
const secret = 'your-secret-string' // 自己的密鑰不要直接使用示例值,且注意不要泄露
const hmac = crypto.createHmac('sha256', secret);
// 自有服務(wù)器生成簽名,并以GET方式發(fā)送請(qǐng)求
const params = {
access_token: 'xxx', // 客戶(hù)端傳到自己服務(wù)器的參數(shù)
openid: 'xxx'
}
// 字母順序排序后拼接簽名串
const signStr = Object.keys(params).sort().map(key => {
return `${key}=${params[key]}`
}).join('&')
hmac.update(signStr);
const sign = hmac.digest('hex')
// 最終請(qǐng)求如下鏈接,其中https://xxxx/xxx為云函數(shù)Url化地址
// https://xxxx/xxx?access_token=xxx&openid=xxx&sign=${sign} 其中${sign}為上一步得到的sign值云函數(shù)Url化地址設(shè)置可修改。


對(duì)應(yīng)云函數(shù)“index.js”,修改如下:
// 云函數(shù)驗(yàn)證簽名,此示例中以接受GET請(qǐng)求為例作演示
const crypto = require('crypto')
exports.main = async function (event){
const secret = 'your-secret-string' // 自己的密鑰不要直接使用示例值,且注意不要泄露
const hmac = crypto.createHmac('sha256', secret);
let params = event.queryStringParameters
const sign = params.sign
delete params.sign
const signStr = Object.keys(params).sort().map(key => {
return `${key}=${params[key]}`
}).join('&')
hmac.update(signStr);
if(sign!==hmac.digest('hex')){
throw new Error('非法訪問(wèn)')
}
const {
access_token,
openid
} = params
const res = await uniCloud.getPhoneNumber({
provider: 'univerify',
appid: 'xxx', // DCloud appid
access_token: event.queryStringParameters.access_token,
openid: event.queryStringParameters.openid
})
// 返回手機(jī)號(hào)給自己服務(wù)器
return res
}注意:云函數(shù)修改之后,右鍵“getPhoneNumber”,上傳部署才能生效。
前端代碼:
uni.login({
provider: 'univerify',
success: function(res) {
console.log('LOGINres----', res);
let data = {
accessToken: res.authResult.access_token,
openId: res.authResult.openid
}
console.log('data----', data);
uni.request({
url: 'https://xxxxx/xxx', //自己應(yīng)用服務(wù)器的請(qǐng)求地址
data: {
data: JSON.stringify(data)
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: function(r) {
console.log('結(jié)果---', r)
//獲取登錄成功的token,并保存在前端
},
fail: function(err) {
console.log('err--', err);
}
})
},
fail: function(err) {
console.log('err', err);
}
})
錯(cuò)誤碼

30004
login:fail -20102其他錯(cuò)誤 Android:
1.確認(rèn)開(kāi)發(fā)者中心一鍵登錄已添加應(yīng)用并審核通過(guò)
2.檢查開(kāi)通一鍵登錄時(shí)使用的簽名證書(shū)和云打包時(shí)使用的簽名證書(shū)一致
常見(jiàn)問(wèn)題
- 后臺(tái)請(qǐng)求云函數(shù)獲取手機(jī)號(hào)報(bào)錯(cuò):Error: Parameter access_token is required(1)首先檢查后端是否傳了access_token。
(2)檢查前端云函數(shù)的“index.js”的openid和access_token的獲取方式要加上“queryStringParameters”。并確保修改“index.js”文件后要右鍵上傳部署才生效。
參考:
1.官網(wǎng):https://uniapp.dcloud.net.cn/univerify.html
總結(jié)
到此這篇關(guān)于uniapp手機(jī)號(hào)一鍵登錄實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp手機(jī)號(hào)一鍵登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
json前后端數(shù)據(jù)交互相關(guān)代碼
本篇文章給大家分享了關(guān)于json前后端數(shù)據(jù)交互方法實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)內(nèi)容,有興趣的讀者們可以參考學(xué)習(xí)下。2018-09-09
基于JS實(shí)現(xiàn)簡(jiǎn)單的3D立方體自動(dòng)旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的3D立方體自動(dòng)旋轉(zhuǎn)的效果,文中的實(shí)現(xiàn)代碼講解詳細(xì),感興趣的可以嘗試一下2022-06-06
JavaScript 隱式類(lèi)型轉(zhuǎn)換規(guī)則詳解
這篇文章主要為大家介紹了JavaScript 隱式類(lèi)型轉(zhuǎn)換規(guī)則詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步早日升職加薪2023-05-05
Javascript var變量刪除原理及實(shí)現(xiàn)
這篇文章主要介紹了Javascript var變量刪除原理及實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
JS事件Event元素(兼容IE,Firefox,Chorme)
今天,想聊聊JS事件對(duì)象。相信大家對(duì)于獲得激發(fā)JS事件的原對(duì)象的理解,有的人可能簡(jiǎn)單停留在IE上。也就是window.event這個(gè)對(duì)象2012-11-11

