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

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

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

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

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

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

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

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

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

余額充值

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

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

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

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

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

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

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

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

打開“getPhoneNumber”文件夾下的“index.js”,編寫如下代碼。

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

獲取手機(jī)號流程

(第一種) 前端直接調(diào)用云函數(shù)獲取手機(jī)號
這里寫一個簡單的登錄功能。
<template>
<view>
<button @tap="goLogin">手機(jī)號一鍵登錄</button>
</view>
</template>
<script setup>
//手機(jī)號一鍵登錄事件
function goLogin() {
uni.login({
provider: 'univerify',
univerifyStyle: { // 自定義登錄框樣式
//參考`univerifyStyle 數(shù)據(jù)結(jié)構(gòu)`
"fullScreen": true, // 是否全屏顯示,默認(rèn)值: false
"title": '快速登錄',
"backgroundColor": "#ffffff", // 授權(quán)頁面背景顏色,默認(rèn)值:#ffffff
"icon": {
"path": "../../static/my/頭像.png" // 自定義顯示在授權(quán)框中的logo,僅支持本地圖片 默認(rèn)顯示App logo
},
"phoneNum": {
"color": "#000000", // 手機(jī)號文字顏色 默認(rèn)值:#000000
"fontSize": "18" // 手機(jī)號字體大小 默認(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ài)背景顏色 默認(rèn)值:#2861c5(僅ios支持)
"disabledColor": "#73aaf5", // 授權(quán)按鈕不可點(diǎn)擊時背景顏色 默認(rèn)值:#73aaf5(僅ios支持)
"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認(rèn)值:#ffffff
"title": "本機(jī)號碼一鍵登錄" // 授權(quán)按鈕文案 默認(rèn)值:“本機(jī)號碼一鍵登錄”
},
// 其他登錄方式
"otherLoginButton": {
"visible": "true", // 是否顯示其他登錄按鈕,默認(rèn)值:true
"normalColor": "#f8f8f8", // 其他登錄按鈕正常狀態(tài)背景顏色 默認(rèn)值:#f8f8f8
"highlightColor": "#dedede", // 其他登錄按鈕按下狀態(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": { // 僅全屏模式生效,配置頁面下方按鈕 (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ī)號碼登錄", // 條款后的文案 默認(rèn)值:“并使用本機(jī)號碼登錄”
"fontSize": "12", // 字體大小 默認(rèn)值:12,
"privacyItems": [
// 自定義協(xié)議條款,最大支持2個,需要同時設(shè)置url和title. 否則不生效
{
"url": "https://", // 點(diǎn)擊跳轉(zhuǎn)的協(xié)議詳情頁面
"title": "用戶服務(wù)協(xié)議" // 協(xié)議名稱
}
]
}
},
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后,通過callfunction調(diào)用云函數(shù)
uniCloud.callFunction({
name: "getPhoneNumber",
data: {
openid,
access_token
}
}).then(res1 => {
console.log("獲取成功");
console.log(res1);
// 獲取用戶的手機(jī)號
let phoneNumber = res1.result.phoneNumber;
//接下來就進(jìn)行你自己的操作
//...
//...
}).catch((err) => {
// 執(zhí)行失敗后的操作
//...
//...
})
},
// 當(dāng)用戶點(diǎn)擊自定義按鈕時,會觸發(fā)uni.login的fail回調(diào)[點(diǎn)擊其他登錄方式,可以跳轉(zhuǎn)頁面,或執(zhí)行事件]
fail(res) { // 登錄失敗
console.log(res.code)
if (res.code == "30002") {
console.log('賬號密碼登錄');
}
}
})
}
</script>
(第三種)后臺調(diào)用云函數(shù)獲取手機(jī)號
后臺代碼
// 以nodejs為例
const crypto = require('crypto')
const secret = 'your-secret-string' // 自己的密鑰不要直接使用示例值,且注意不要泄露
const hmac = crypto.createHmac('sha256', secret);
// 自有服務(wù)器生成簽名,并以GET方式發(fā)送請求
const params = {
access_token: 'xxx', // 客戶端傳到自己服務(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')
// 最終請求如下鏈接,其中https://xxxx/xxx為云函數(shù)Url化地址
// https://xxxx/xxx?access_token=xxx&openid=xxx&sign=${sign} 其中${sign}為上一步得到的sign值云函數(shù)Url化地址設(shè)置可修改。


對應(yīng)云函數(shù)“index.js”,修改如下:
// 云函數(shù)驗(yàn)證簽名,此示例中以接受GET請求為例作演示
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('非法訪問')
}
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ī)號給自己服務(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ù)器的請求地址
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);
}
})
錯誤碼

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

