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)買”,
購(gòu)買之后,在前端再次刷新云服務(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ù),然后選擇“賬戶信息”,并完成充值。
余額充值
充值之后,打開(kāi)“應(yīng)用管理”,點(diǎn)擊添加應(yīng)用
填寫應(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)用名稱進(jìn)入詳情。
選擇“Android云端證書”,選擇創(chuàng)建證書
點(diǎn)擊證書詳情,記住“MD5”,“SHA1”和“SHA256”。
點(diǎn)擊“各平臺(tái)信息”,完善上面的“MD5”,“SHA1”和“SHA256”等信息即可。
編寫云函數(shù)并上傳部署
回到項(xiàng)目,右鍵“cloundfunctions”,新建云函數(shù)/云對(duì)象,取名“getPhoneNumber”(函數(shù)名可自定義)。
打開(kāi)“getPhoneNumber”文件夾下的“index.js”,編寫如下代碼。
復(fù)制下面代碼,修改成自己的DClound appid即可
'use strict'; exports.main = async (event, context) => { // event里包含著客戶端提交的參數(shù) let data = await uniCloud.getPhoneNumber({ appid: '__UNI__AAAAAA', // 替換成自己開(kāi)通一鍵登錄的應(yīng)用的DCloud appid,使用callFunction方式調(diào)用時(shí)可以不傳(會(huì)自動(dòng)取當(dāng)前客戶端的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ì)象即可 } }
寫完后,右鍵“cloudfunctions”,上傳所有云函數(shù)。
獲取手機(jī)號(hào)流程
(第一種) 前端直接調(diào)用云函數(shù)獲取手機(jī)號(hào)
這里寫一個(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": "用戶服務(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后,通過(guò)callfunction調(diào)用云函數(shù) uniCloud.callFunction({ name: "getPhoneNumber", data: { openid, access_token } }).then(res1 => { console.log("獲取成功"); console.log(res1); // 獲取用戶的手機(jī)號(hào) let phoneNumber = res1.result.phoneNumber; //接下來(lái)就進(jìn)行你自己的操作 //... //... }).catch((err) => { // 執(zhí)行失敗后的操作 //... //... }) }, // 當(dāng)用戶點(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', // 客戶端傳到自己服務(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í)使用的簽名證書一致
常見(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-06JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
這篇文章主要為大家介紹了JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步早日升職加薪2023-05-05Javascript var變量刪除原理及實(shí)現(xiàn)
這篇文章主要介紹了Javascript var變量刪除原理及實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08JS事件Event元素(兼容IE,Firefox,Chorme)
今天,想聊聊JS事件對(duì)象。相信大家對(duì)于獲得激發(fā)JS事件的原對(duì)象的理解,有的人可能簡(jiǎn)單停留在IE上。也就是window.event這個(gè)對(duì)象2012-11-11