uni-app中使用手機(jī)號(hào)一鍵登錄的詳細(xì)圖文教程
1、首先需要在dcloud開發(fā)者控制臺(tái)開通一鍵登錄
開通一鍵登錄服務(wù), 獲取關(guān)鍵最關(guān)鍵的兩個(gè)參數(shù) ApiKey 和 ApiSecret
真機(jī)調(diào)試無(wú)需添加應(yīng)用,如需打包使用請(qǐng)?zhí)砑?。一鍵登錄應(yīng)用ID為離線打包時(shí)配置的appid
2、登錄云服務(wù)空間,創(chuàng)建服務(wù)空間,選擇云服務(wù)商等
3、在uni-app項(xiàng)目中開通uniCloud服務(wù)【關(guān)聯(lián)云空間選擇阿里云或騰訊云】
4、新建云函數(shù) 創(chuàng)建 getPhoneNumber
新建云函數(shù)后會(huì)有一個(gè)index.js【getPhoneNumber/index.js】生成,粘貼以下代碼:
'use strict'; // const crypto = require('crypto') exports.main = async (event, context) => { //event為客戶端上傳的參數(shù) const res = await uniCloud.getPhoneNumber({ appid: '__UNI__66AWES5', // 替換成自己開通一鍵登錄的應(yīng)用的DCloud appid,使用callFunction方式調(diào)用時(shí)可以不傳(會(huì)自動(dòng)取當(dāng)前客戶端的appid),如果使用云函數(shù)URL化的方式訪問(wèn)必須傳此參數(shù) provider: 'univerify', apiKey: '******', // 在開發(fā)者中心開通服務(wù)并獲取apiKey apiSecret: '******', // 在開發(fā)者中心開通服務(wù)并獲取apiSecret access_token: event.access_token, openid: event.openid }) // 執(zhí)行用戶信息入庫(kù)等操作,正常情況下不要把完整手機(jī)號(hào)返回給前端 // 如果數(shù)據(jù)庫(kù)在uniCloud上,可以直接入庫(kù) // 如果數(shù)據(jù)庫(kù)不在uniCloud上,可以通過(guò) uniCloud.httpclient API,將手機(jī)號(hào)通過(guò)http方式傳遞給其他服務(wù)器的接口,詳見:https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient //返回?cái)?shù)據(jù)給客戶端 return { code: 0, message: '獲取手機(jī)號(hào)成功', data:res } }
5、項(xiàng)目右鍵關(guān)聯(lián)云服務(wù)空間
選擇創(chuàng)建的云服務(wù)空間
6、關(guān)聯(lián)后上傳部署到云空間
7、勾選一鍵登錄(項(xiàng)目中的 manifest.json)
8、一鍵登錄本地方法
// 手機(jī)號(hào)一鍵登錄 loginPhone() { uni.preLogin({ provider: 'univerify', success(res) { //預(yù)登錄成功 // 顯示一鍵登錄選項(xiàng) console.log(res); console.log('999',2222); console.log('預(yù)登錄成功'); 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à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à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); this.openid = res.authResult.openid; this.access_token = res.authResult.access_token; console.log(this.openid); console.log("access_token",this.access_token); // 客戶端(調(diào)用云函數(shù)) 調(diào)用云函數(shù)來(lái)實(shí)現(xiàn)整個(gè)業(yè)務(wù)邏輯 // 在得到access_token后,通過(guò)callfunction調(diào)用云函數(shù) uniCloud.callFunction({ name:"getPhoneNumber", data:{ 'openid': this.openid, 'access_token': this.access_token } }).then(res=>{ console.log("獲取成功"); console.log(res); // res 內(nèi)容則包含手機(jī)號(hào)碼 // 獲取用戶的手機(jī)號(hào) this.phoneNumber=res.result.data.phoneNumber; console.log(this.phoneNumber); console.log(res); return utils.request( "/api/api.php?action=phonelogin", //接口 "POST", { '參數(shù)' }, false, true, true) .then(res => { uni.closeAuthView() //成功關(guān)閉授權(quán)頁(yè)面 console.log('登錄成功', res) console.log(res.code); if (res.code == 1){ setTimeout(() => { uni.redirectTo({ url: '/pages/index/index' }) }, 500) } }) }).catch((err)=>{ // 執(zhí)行失敗 }) }, // 當(dāng)用戶點(diǎn)擊自定義按鈕時(shí),會(huì)觸發(fā)uni.login的fail回調(diào)[點(diǎn)擊其他登錄方式,可以跳轉(zhuǎn)頁(yè)面] // 判斷返回?cái)?shù)據(jù)執(zhí)行任意邏輯 fail(res){ // 登錄失敗 console.log(res.errCode) console.log(res.errMsg) if (res.code == "30002") { console.log('密碼登錄'); }else if(res.code == "30008"){ console.log('自定義按鈕登錄方式'); } } }) }, fail(res) { // 預(yù)登錄失敗 // 不顯示一鍵登錄選項(xiàng)(或置灰) // 根據(jù)錯(cuò)誤信息判斷失敗原因,如有需要可將錯(cuò)誤提交給統(tǒng)計(jì)服務(wù)器 console.log('失敗',2222); console.log(res.errCode) console.log(res.errMsg) } }); },
可以查看點(diǎn)擊一鍵登錄時(shí)返回的參數(shù)
總結(jié)
到此這篇關(guān)于uni-app中使用手機(jī)號(hào)一鍵登錄的文章就介紹到這了,更多相關(guān)uni-app手機(jī)號(hào)一鍵登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用 electron 實(shí)現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動(dòng)畫、窗體3D翻轉(zhuǎn))
這篇文章主要介紹了使用 electron 實(shí)現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動(dòng)畫、窗體3D翻轉(zhuǎn)),其實(shí)主要用到的就是 CSS3 的效果:邊框圓角、陰影,3D變換,實(shí)現(xiàn)代碼超級(jí)簡(jiǎn)單,需要的朋友可以參考下2018-10-10學(xué)習(xí)JavaScript編程語(yǔ)言的8張思維導(dǎo)圖分享
這篇文章主要介紹了學(xué)習(xí)JavaScript編程語(yǔ)言的8張思維導(dǎo)圖分享,本文給出了javascript變量、javascript運(yùn)算符、javascript數(shù)組、javascript流程語(yǔ)句、javascript字符串函數(shù)、javascript函數(shù)基礎(chǔ)、javascript基礎(chǔ)DOM操作、javascript正則表達(dá)式的思維導(dǎo)圖,需要的可以參考下2015-03-03webpack 1.x升級(jí)過(guò)程中的踩坑總結(jié)大全
webpack1已結(jié)不再維護(hù)了,官方在主推webpack2,最近在升級(jí)webpack過(guò)程中遇到了不少的問(wèn)題,所以下面這篇文章主要給大家總結(jié)了一些在webpack 1.x升級(jí)過(guò)程中的遇到的坑,以及詳細(xì)的解決方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08JS面向?qū)ο蟮某绦蛟O(shè)計(jì)相關(guān)知識(shí)小結(jié)
這篇文章主要介紹了JS面向?qū)ο蟮某绦蛟O(shè)計(jì),現(xiàn)在很多代碼都是基于面向?qū)ο髮?shí)現(xiàn),需要的朋友可以參考下2018-05-05JavaScript常見事件對(duì)象與操作實(shí)例總結(jié)
這篇文章主要介紹了JavaScript常見事件對(duì)象與操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)DOM、IE及跨瀏覽器事件對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01