uni-app中使用手機號一鍵登錄的詳細圖文教程
更新時間：2023年01月05日 15:22:59 作者：Dcripple
最近剛接觸了uni-app,用于開發(fā)微信小程序,設計到了微信授權登錄,下面這篇文章主要給大家介紹了關于uni-app中使用手機號一鍵登錄的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
1、首先需要在dcloud開發(fā)者控制臺開通一鍵登錄
開通一鍵登錄服務, 獲取關鍵最關鍵的兩個參數(shù) ApiKey 和 ApiSecret
真機調試無需添加應用，如需打包使用請?zhí)砑?。一鍵登錄應用ID為離線打包時配置的appid
2、登錄云服務空間，創(chuàng)建服務空間，選擇云服務商等
3、在uni-app項目中開通uniCloud服務【關聯(lián)云空間選擇阿里云或騰訊云】
4、新建云函數(shù) 創(chuàng)建 getPhoneNumber
新建云函數(shù)后會有一個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', // 替換成自己開通一鍵登錄的應用的DCloud appid，使用callFunction方式調用時可以不傳（會自動取當前客戶端的appid），如果使用云函數(shù)URL化的方式訪問必須傳此參數(shù)
provider: 'univerify',
apiKey: '******', // 在開發(fā)者中心開通服務并獲取apiKey
apiSecret: '******', // 在開發(fā)者中心開通服務并獲取apiSecret
access_token: event.access_token,
openid: event.openid
})
// 執(zhí)行用戶信息入庫等操作，正常情況下不要把完整手機號返回給前端
// 如果數(shù)據(jù)庫在uniCloud上，可以直接入庫
// 如果數(shù)據(jù)庫不在uniCloud上，可以通過 uniCloud.httpclient API，將手機號通過http方式傳遞給其他服務器的接口，詳見：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
//返回數(shù)據(jù)給客戶端
return {
code: 0,
message: '獲取手機號成功',
data:res
}
}5、項目右鍵關聯(lián)云服務空間
選擇創(chuàng)建的云服務空間
6、關聯(lián)后上傳部署到云空間
7、勾選一鍵登錄（項目中的 manifest.json）
8、一鍵登錄本地方法
// 手機號一鍵登錄
loginPhone() {
uni.preLogin({
provider: 'univerify',
success(res) { //預登錄成功
// 顯示一鍵登錄選項
console.log(res);
console.log('999',2222);
console.log('預登錄成功');
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);
this.openid = res.authResult.openid;
this.access_token = res.authResult.access_token;
console.log(this.openid);
console.log("access_token",this.access_token);
// 客戶端(調用云函數(shù)) 調用云函數(shù)來實現(xiàn)整個業(yè)務邏輯
// 在得到access_token后，通過callfunction調用云函數(shù)
uniCloud.callFunction({
name:"getPhoneNumber",
data:{
'openid': this.openid,
'access_token': this.access_token
}
}).then(res=>{
console.log("獲取成功");
console.log(res); // res 內容則包含手機號碼
// 獲取用戶的手機號
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() //成功關閉授權頁面
console.log('登錄成功', res)
console.log(res.code);
if (res.code == 1){
setTimeout(() => {
uni.redirectTo({
url: '/pages/index/index'
})
}, 500)
}
})
}).catch((err)=>{
// 執(zhí)行失敗
})
},
// 當用戶點擊自定義按鈕時，會觸發(fā)uni.login的fail回調[點擊其他登錄方式，可以跳轉頁面]
// 判斷返回數(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) { // 預登錄失敗
// 不顯示一鍵登錄選項（或置灰）
// 根據(jù)錯誤信息判斷失敗原因，如有需要可將錯誤提交給統(tǒng)計服務器
console.log('失敗',2222);
console.log(res.errCode)
console.log(res.errMsg)
}
});
},
可以查看點擊一鍵登錄時返回的參數(shù)
總結
到此這篇關于uni-app中使用手機號一鍵登錄的文章就介紹到這了,更多相關uni-app手機號一鍵登錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
目前，幾乎所有業(yè)務的開發(fā)構建都會用到 webpack 。所以下面這篇文章主要給大家介紹了關于webpack構建的詳細流程的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2018-01-01
微信小程序多列表渲染數(shù)據(jù)開關互不影響的實現(xiàn)
這篇文章主要介紹了微信小程序多列表渲染數(shù)據(jù)開關互不影響的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
今天小編就為大家分享一篇layui插件表單驗證提交觸發(fā)提交的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS畫圖(非VML)--兼容IE/FF...2006-12-12
這篇文章主要為大家詳細介紹了小程序實現(xiàn)帶年月選取效果的日歷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
微信小程序開發(fā)搜索功能實現(xiàn)(前端+后端+數(shù)據(jù)庫)
這篇文章主要介紹了微信小程序開發(fā)搜索功能實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強大的字符替換處理能力，這里簡單介紹下，方便需要的朋友2013-12-12
javascript foreach中如何獲取數(shù)組下標/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標/index問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
JavaScript判斷變量數(shù)據(jù)類型的常見方法小結
在JavaScript開發(fā)中,了解和判斷變量的數(shù)據(jù)類型是編寫健壯代碼的基礎,變量的類型可以在運行時改變,這為開發(fā)者帶來了靈活性的同時也增加了復雜性,本文將深入探討幾種常見的判斷變量類型的技巧,并結合實際案例進行分析,需要的朋友可以參考下2024-12-12
Bootstrap 網(wǎng)格系統(tǒng)布局詳解
在平面設計中，網(wǎng)格是一種由一系列用于組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。這篇文章主要介紹了Bootstrap 網(wǎng)格系統(tǒng)布局,需要的朋友可以參考下2017-03-03