欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uni-app中使用手機號一鍵登錄的詳細圖文教程

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

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

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

開通一鍵登錄服務(wù), 獲取關(guān)鍵最關(guān)鍵的兩個參數(shù) ApiKey 和 ApiSecret

真機調(diào)試無需添加應(yīng)用,如需打包使用請?zhí)砑印R绘I登錄應(yīng)用ID為離線打包時配置的appid

2、登錄云服務(wù)空間,創(chuàng)建服務(wù)空間,選擇云服務(wù)商等

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

3、在uni-app項目中開通uniCloud服務(wù)【關(guān)聯(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', // 替換成自己開通一鍵登錄的應(yīng)用的DCloud appid,使用callFunction方式調(diào)用時可以不傳(會自動取當前客戶端的appid),如果使用云函數(shù)URL化的方式訪問必須傳此參數(shù)
		provider: 'univerify',
		apiKey: '******', // 在開發(fā)者中心開通服務(wù)并獲取apiKey
		apiSecret: '******', // 在開發(fā)者中心開通服務(wù)并獲取apiSecret
		access_token: event.access_token,
		openid: event.openid
	})
 
	// 執(zhí)行用戶信息入庫等操作,正常情況下不要把完整手機號返回給前端
	// 如果數(shù)據(jù)庫在uniCloud上,可以直接入庫
	// 如果數(shù)據(jù)庫不在uniCloud上,可以通過 uniCloud.httpclient API,將手機號通過http方式傳遞給其他服務(wù)器的接口,詳見:https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
	//返回數(shù)據(jù)給客戶端
	return {
		code: 0,
		message: '獲取手機號成功',
		data:res
	}
}

5、項目右鍵關(guān)聯(lián)云服務(wù)空間  

選擇創(chuàng)建的云服務(wù)空間

6、關(guān)聯(lián)后上傳部署到云空間 

7、勾選一鍵登錄(項目中的 manifest.json)

8、一鍵登錄本地方法

// 手機號一鍵登錄
loginPhone() {
	uni.preLogin({
		provider: 'univerify',
		success(res) { //預(yù)登錄成功
			// 顯示一鍵登錄選項
			console.log(res);
			console.log('999',2222);
			console.log('預(yù)登錄成功');
			uni.login({
				provider: 'univerify',
				univerifyStyle: { // 自定義登錄框樣式
					//參考`univerifyStyle 數(shù)據(jù)結(jié)構(gòu)`
                    "fullScreen": true, // 是否全屏顯示,默認值: false
					"title": '快速登錄',
					"backgroundColor": "#ffffff", // 授權(quán)頁面背景顏色,默認值:#ffffff
					"icon": {
						"path": "../../static/my/頭像.png" // 自定義顯示在授權(quán)框中的logo,僅支持本地圖片 默認顯示App logo
					},
					"phoneNum": {
						"color": "#000000", // 手機號文字顏色 默認值:#000000
						"fontSize": "18" // 手機號字體大小 默認值:18
					},
					"slogan": {
						"color": "#8a8b90", //  slogan 字體顏色 默認值:#8a8b90
						"fontSize": "12" // slogan 字體大小 默認值:12
					},
                    // 一鍵登錄
					"authButton": {
						"normalColor": "#3479f5", // 授權(quán)按鈕正常狀態(tài)背景顏色 默認值:#3479f5
						"highlightColor": "#2861c5", // 授權(quán)按鈕按下狀態(tài)背景顏色 默認值:#2861c5(僅ios支持)
						"disabledColor": "#73aaf5", // 授權(quán)按鈕不可點擊時背景顏色 默認值:#73aaf5(僅ios支持)
						"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認值:#ffffff
						"title": "本機號碼一鍵登錄" // 授權(quán)按鈕文案 默認值:“本機號碼一鍵登錄”
					},
                    // 其他登錄方式
					"otherLoginButton": {
						"visible": "true", // 是否顯示其他登錄按鈕,默認值:true
						"normalColor": "#f8f8f8", // 其他登錄按鈕正常狀態(tài)背景顏色 默認值:#f8f8f8
						"highlightColor": "#dedede", // 其他登錄按鈕按下狀態(tài)背景顏色 默認值:#dedede
						"textColor": "#000000", // 其他登錄按鈕文字顏色 默認值:#000000
						"title": "密碼登錄", // 其他登錄方式按鈕文字 默認值:“其他登錄方式”
						"borderWidth": "1px", // 邊框?qū)挾?默認值: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個,需要同時設(shè)置url和title. 否則不生效
							{
								"url": "https://", // 點擊跳轉(zhuǎn)的協(xié)議詳情頁面
								"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ù)來實現(xiàn)整個業(yè)務(wù)邏輯
				// 在得到access_token后,通過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)容則包含手機號碼
					// 獲取用戶的手機號
					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)頁面
					 		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回調(diào)[點擊其他登錄方式,可以跳轉(zhuǎn)頁面]
				// 判斷返回數(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ù)登錄失敗
			// 不顯示一鍵登錄選項(或置灰)
			// 根據(jù)錯誤信息判斷失敗原因,如有需要可將錯誤提交給統(tǒng)計服務(wù)器
			console.log('失敗',2222);
			console.log(res.errCode)
			console.log(res.errMsg)
		}
	});
},

可以查看點擊一鍵登錄時返回的參數(shù)

總結(jié)

到此這篇關(guān)于uni-app中使用手機號一鍵登錄的文章就介紹到這了,更多相關(guān)uni-app手機號一鍵登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用 electron 實現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動畫、窗體3D翻轉(zhuǎn))

    使用 electron 實現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動畫、窗體3D翻轉(zhuǎn))

    這篇文章主要介紹了使用 electron 實現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動畫、窗體3D翻轉(zhuǎn)),其實主要用到的就是 CSS3 的效果:邊框圓角、陰影,3D變換,實現(xiàn)代碼超級簡單,需要的朋友可以參考下
    2018-10-10
  • 學(xué)習(xí)JavaScript編程語言的8張思維導(dǎo)圖分享

    學(xué)習(xí)JavaScript編程語言的8張思維導(dǎo)圖分享

    這篇文章主要介紹了學(xué)習(xí)JavaScript編程語言的8張思維導(dǎo)圖分享,本文給出了javascript變量、javascript運算符、javascript數(shù)組、javascript流程語句、javascript字符串函數(shù)、javascript函數(shù)基礎(chǔ)、javascript基礎(chǔ)DOM操作、javascript正則表達式的思維導(dǎo)圖,需要的可以參考下
    2015-03-03
  • 得到元素真實的背景顏色的js代碼

    得到元素真實的背景顏色的js代碼

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

    webpack 1.x升級過程中的踩坑總結(jié)大全

    webpack1已結(jié)不再維護了,官方在主推webpack2,最近在升級webpack過程中遇到了不少的問題,所以下面這篇文章主要給大家總結(jié)了一些在webpack 1.x升級過程中的遇到的坑,以及詳細的解決方法,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-08-08
  • js捕獲鼠標滾輪事件代碼

    js捕獲鼠標滾輪事件代碼

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

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

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

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

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

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

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

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

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

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

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

最新評論