uniapp手機號一鍵登錄實現(xiàn)保姆級教程(含前端和后端)
前置條件
- 手機安裝有sim卡
- 手機開啟數(shù)據(jù)流量(與wifi無關,不要求關閉wifi,但數(shù)據(jù)流量不能禁用。)
- 開通uniCloud服務(但不要求所有后臺代碼都使用uniCloud)
創(chuàng)建uniapp項目并關聯(lián)uniClound云空間
新建uniapp項目,勾選下面“啟用uniClound”,選擇其中一個云服務商即可。
如果在已有項目中啟用uniClound,可直接右鍵項目文件夾,選擇“創(chuàng)建uniClound云開發(fā)環(huán)境”。
創(chuàng)建好uniClound云開發(fā)環(huán)境后,會在項目目錄中增加一個“uniClound”的文件夾,右鍵該文件夾,選擇“關聯(lián)云服務空間或項目”。
如果還沒有相應的云服務空間,可以選擇新建云服務空間
打開uniClound官網(wǎng)開發(fā)者后臺,選擇“新建服務空間”
目前阿里云還是免費的,直接選擇“立即購買”,
購買之后,在前端再次刷新云服務空間,即可看到新購的服務空間,選擇并關聯(lián)即可。
開啟一鍵登錄模塊并開通一鍵登錄服務
打開項目的“manifest.json”,選擇“App模塊配置”,勾選“OAuth(登錄授權)”
在uniClound官網(wǎng)開發(fā)者后臺開通一鍵登錄服務,然后選擇“賬戶信息”,并完成充值。
余額充值
充值之后,打開“應用管理”,點擊添加應用
填寫應用相關信息后,點擊“提交申請”,審核可能會需要幾個小時時間
如果還沒有Android包名,按圖點擊前往創(chuàng)建。
會跳到應用列表頁,點擊自己的應用名稱進入詳情。
選擇“Android云端證書”,選擇創(chuàng)建證書
點擊證書詳情,記住“MD5”,“SHA1”和“SHA256”。
點擊“各平臺信息”,完善上面的“MD5”,“SHA1”和“SHA256”等信息即可。
編寫云函數(shù)并上傳部署
回到項目,右鍵“cloundfunctions”,新建云函數(shù)/云對象,取名“getPhoneNumber”(函數(shù)名可自定義)。
打開“getPhoneNumber”文件夾下的“index.js”,編寫如下代碼。
復制下面代碼,修改成自己的DClound appid即可
'use strict'; exports.main = async (event, context) => { // event里包含著客戶端提交的參數(shù) let data = await uniCloud.getPhoneNumber({ appid: '__UNI__AAAAAA', // 替換成自己開通一鍵登錄的應用的DCloud appid,使用callFunction方式調用時可以不傳(會自動取當前客戶端的appid),如果使用云函數(shù)URL化的方式訪問必須傳此參數(shù) provider: 'univerify', access_token: event.access_token, openid: event.openid }) return data//返回的data里包含手機號 }
自HBuilderX
3.4.0起,一鍵登錄相關功能移至擴展庫uni-cloud-verify內。在一段時間內無論開發(fā)者是否使用擴展庫云函數(shù)都可以正常使用uniCloud.getPhoneNumber。HBuilderX 3.4.0及之后的版本上傳云函數(shù)時如果沒有指定使用uni-cloud-verify擴展庫的云函數(shù)將無法調用uniCloud.getPhoneNumber接口。關于擴展庫的說明見:云函數(shù)擴展庫
在云函數(shù)的package.json內添加uni-cloud-verify的引用即可為云函數(shù)啟用此擴展,無需做其他調整,完整的package.json示例如下:
{ "name": "univerify", "extensions": { "uni-cloud-verify": {} // 啟用一鍵登錄擴展,值為空對象即可 } }
寫完后,右鍵“cloudfunctions”,上傳所有云函數(shù)。
獲取手機號流程
(第一種) 前端直接調用云函數(shù)獲取手機號
這里寫一個簡單的登錄功能。
<template> <view> <button @tap="goLogin">手機號一鍵登錄</button> </view> </template> <script setup> //手機號一鍵登錄事件 function goLogin() { uni.login({ provider: 'univerify', univerifyStyle: { // 自定義登錄框樣式 //參考`univerifyStyle 數(shù)據(jù)結構` "fullScreen": true, // 是否全屏顯示,默認值: false "title": '快速登錄', "backgroundColor": "#ffffff", // 授權頁面背景顏色,默認值:#ffffff "icon": { "path": "../../static/my/頭像.png" // 自定義顯示在授權框中的logo,僅支持本地圖片 默認顯示App logo }, "phoneNum": { "color": "#000000", // 手機號文字顏色 默認值:#000000 "fontSize": "18" // 手機號字體大小 默認值:18 }, "slogan": { "color": "#8a8b90", // slogan 字體顏色 默認值:#8a8b90 "fontSize": "12" // slogan 字體大小 默認值:12 }, // 一鍵登錄 "authButton": { "normalColor": "#3479f5", // 授權按鈕正常狀態(tài)背景顏色 默認值:#3479f5 "highlightColor": "#2861c5", // 授權按鈕按下狀態(tài)背景顏色 默認值:#2861c5(僅ios支持) "disabledColor": "#73aaf5", // 授權按鈕不可點擊時背景顏色 默認值:#73aaf5(僅ios支持) "textColor": "#ffffff", // 授權按鈕文字顏色 默認值:#ffffff "title": "本機號碼一鍵登錄" // 授權按鈕文案 默認值:“本機號碼一鍵登錄” }, // 其他登錄方式 "otherLoginButton": { "visible": "true", // 是否顯示其他登錄按鈕,默認值:true "normalColor": "#f8f8f8", // 其他登錄按鈕正常狀態(tài)背景顏色 默認值:#f8f8f8 "highlightColor": "#dedede", // 其他登錄按鈕按下狀態(tài)背景顏色 默認值:#dedede "textColor": "#000000", // 其他登錄按鈕文字顏色 默認值:#000000 "title": "密碼登錄", // 其他登錄方式按鈕文字 默認值:“其他登錄方式” "borderWidth": "1px", // 邊框寬度 默認值:1px(僅ios支持) "borderColor": "#c5c5c5" //邊框顏色 默認值: #c5c5c5(僅ios支持) }, // 自定義按鈕登錄方式 "buttons": { // 僅全屏模式生效,配置頁面下方按鈕 (3.1.14+ 版本支持) "iconWidth": "45px", // 圖標寬度(高度等比例縮放) 默認值:45px "list": [{ "provider": "apple", "iconPath": "/static/test.jpg", // 圖標路徑僅支持本地圖片 }, { "provider": "weixin", "iconPath": "/static/test.jpg", } ] }, "privacyTerms": { "defaultCheckBoxState": "true", // 條款勾選框初始狀態(tài) 默認值: true "textColor": "#8a8b90", // 文字顏色 默認值:#8a8b90 "termsColor": "#1d4788", // 協(xié)議文字顏色 默認值: #1d4788 "prefix": "我已閱讀并同意", // 條款前的文案 默認值:“我已閱讀并同意” "suffix": "并使用本機號碼登錄", // 條款后的文案 默認值:“并使用本機號碼登錄” "fontSize": "12", // 字體大小 默認值:12, "privacyItems": [ // 自定義協(xié)議條款,最大支持2個,需要同時設置url和title. 否則不生效 { "url": "https://", // 點擊跳轉的協(xié)議詳情頁面 "title": "用戶服務協(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調用云函數(shù) uniCloud.callFunction({ name: "getPhoneNumber", data: { openid, access_token } }).then(res1 => { console.log("獲取成功"); console.log(res1); // 獲取用戶的手機號 let phoneNumber = res1.result.phoneNumber; //接下來就進行你自己的操作 //... //... }).catch((err) => { // 執(zhí)行失敗后的操作 //... //... }) }, // 當用戶點擊自定義按鈕時,會觸發(fā)uni.login的fail回調[點擊其他登錄方式,可以跳轉頁面,或執(zhí)行事件] fail(res) { // 登錄失敗 console.log(res.code) if (res.code == "30002") { console.log('賬號密碼登錄'); } } }) } </script>
(第三種)后臺調用云函數(shù)獲取手機號
后臺代碼
// 以nodejs為例 const crypto = require('crypto') const secret = 'your-secret-string' // 自己的密鑰不要直接使用示例值,且注意不要泄露 const hmac = crypto.createHmac('sha256', secret); // 自有服務器生成簽名,并以GET方式發(fā)送請求 const params = { access_token: 'xxx', // 客戶端傳到自己服務器的參數(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ù)“index.js”,修改如下:
// 云函數(shù)驗證簽名,此示例中以接受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 }) // 返回手機號給自己服務器 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', //自己應用服務器的請求地址 data: { data: JSON.stringify(data) }, method: "POST", header: { "content-type": "application/x-www-form-urlencoded" }, success: function(r) { console.log('結果---', r) //獲取登錄成功的token,并保存在前端 }, fail: function(err) { console.log('err--', err); } }) }, fail: function(err) { console.log('err', err); } })
錯誤碼
30004
login:fail -20102其他錯誤 Android:
1.確認開發(fā)者中心一鍵登錄已添加應用并審核通過
2.檢查開通一鍵登錄時使用的簽名證書和云打包時使用的簽名證書一致
常見問題
- 后臺請求云函數(shù)獲取手機號報錯: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
總結
到此這篇關于uniapp手機號一鍵登錄實現(xiàn)的文章就介紹到這了,更多相關uniapp手機號一鍵登錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS事件Event元素(兼容IE,Firefox,Chorme)
今天,想聊聊JS事件對象。相信大家對于獲得激發(fā)JS事件的原對象的理解,有的人可能簡單停留在IE上。也就是window.event這個對象2012-11-11