亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

uni-app中使用手機(jī)號(hào)一鍵登錄的詳細(xì)圖文教程

 更新時(shí)間:2023年01月05日 15:22:59   作者:Dcripple  
最近剛接觸了uni-app,用于開發(fā)微信小程序,設(shè)計(jì)到了微信授權(quán)登錄,下面這篇文章主要給大家介紹了關(guān)于uni-app中使用手機(jī)號(hào)一鍵登錄的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

1、首先需要在dcloud開發(fā)者控制臺(tái)開通一鍵登錄

https://dev.dcloud.net.cn/uniLogin

開通一鍵登錄服務(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ù)商等

https://unicloud.dcloud.net.cn/home

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))

    這篇文章主要介紹了使用 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)圖分享

    這篇文章主要介紹了學(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-03
  • 得到元素真實(shí)的背景顏色的js代碼

    得到元素真實(shí)的背景顏色的js代碼

    這個(gè)函數(shù)來(lái)自Rico,Longbill及Dnew.cn修改。 說(shuō)明: 傳入?yún)?shù)一個(gè),為元素的id值或元素本身,返回為元素的真實(shí)背景色值(字符串)。背景值均為16進(jìn)制的值(原代碼是是IE里面返回的是16進(jìn)制的值,而Mozilla則是rgb值,Dnew.cn將其修改為均返回16進(jìn)制的值)。
    2007-12-12
  • webpack 1.x升級(jí)過(guò)程中的踩坑總結(jié)大全

    webpack 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-08
  • js捕獲鼠標(biāo)滾輪事件代碼

    js捕獲鼠標(biāo)滾輪事件代碼

    本文為大家介紹下如何使用js捕獲鼠標(biāo)滾輪事件,原理很簡(jiǎn)單,感興趣的朋友可以參考下
    2013-12-12
  • JS面向?qū)ο蟮某绦蛟O(shè)計(jì)相關(guān)知識(shí)小結(jié)

    JS面向?qū)ο蟮某绦蛟O(shè)計(jì)相關(guān)知識(shí)小結(jié)

    這篇文章主要介紹了JS面向?qū)ο蟮某绦蛟O(shè)計(jì),現(xiàn)在很多代碼都是基于面向?qū)ο髮?shí)現(xiàn),需要的朋友可以參考下
    2018-05-05
  • js導(dǎo)出txt示例代碼

    js導(dǎo)出txt示例代碼

    很多新手朋友們都不知道js怎么導(dǎo)出txt,下面有個(gè)不錯(cuò)的示例,大家可以參考下
    2014-01-01
  • JS實(shí)現(xiàn)日期加減的方法

    JS實(shí)現(xiàn)日期加減的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)日期加減的方法,有需要的朋友可以參考一下
    2013-11-11
  • JavaScript常見事件對(duì)象與操作實(shí)例總結(jié)

    JavaScript常見事件對(duì)象與操作實(shí)例總結(jié)

    這篇文章主要介紹了JavaScript常見事件對(duì)象與操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)DOM、IE及跨瀏覽器事件對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • JavaScript 輕松搞定快捷留言功能 只需一行代碼

    JavaScript 輕松搞定快捷留言功能 只需一行代碼

    快捷留言功能,就是您現(xiàn)在看到在右側(cè)浮動(dòng)的那個(gè)小玩意,通過(guò)它可以直接提交留言并推薦,您想在博客里加上這個(gè)功能嗎?
    2010-04-04

最新評(píng)論