我們來實作一鍵登錄以及第三方登陸
一鍵登錄手登陸機號使用
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910

未經本人允許，禁止轉載

非常方便的一個東西

主要以本機號碼為例演示 下面也有其它(微信/qq)

預登陸只有app支持

開通一鍵登錄

登陸開發者后臺 https://dev.dcloud.net.cn/

在這里開通即可 可以先充值一塊錢測驗

一鍵登陸

獲取可用服務商

uni.getProvider({
    service: 'oauth',
    success: function (res) {
        console.log(res.provider)
    }
});

我的手機測驗 如下

微信小程式開發工具內

預登陸

可以判斷當前設備環境是否支持一鍵登錄

uni.preLogin({
	provider: 'univerify',
	success() { //預登錄成功
		// 顯示一鍵登錄選項
		console.log("預登陸成功")
	},
	fail(res) { // 預登錄失敗
		// 不顯示一鍵登錄選項（或置灰）
		// 根據錯誤資訊判斷失敗原因，如有需要可將錯誤提交給統計服務器
		console.log(res.errCode)
		console.log(res.errMsg)
	}
})

小案例

如果支持一鍵登陸 就顯示一鍵登錄 否則就顯示普通賬號密碼登陸

<template>
	<view>
		<view v-if="isSupport" class="content">
			<image class="logo" src="/static/logo.png" @click="login()"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
		</view>
		<view v-if="!isSupport">
			<input placeholder="賬號" />
			<input placeholder="密碼" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '點擊圖片一鍵登錄',
				isSupport: true
			}
		},
		onLoad() {
			this.prelogin()
		},
		methods: {
			login(){
				uni.login({
				    provider: 'univerify',
				    univerifyStyle: { // 自定義登錄框樣式
				    //參考`univerifyStyle 資料結構`
				  },
				    success(res){ // 登錄成功
				        console.log(res.authResult);  // {openid:'登錄授權唯一標識',access_token:'介面回傳的 token'}
				    },
				    fail(res){  // 登錄失敗
				        console.log(res.errCode)
				        console.log(res.errMsg)
				    }
				})
			},
			prelogin() {
				let vm = this;
				uni.preLogin({
				    provider: 'univerify',
				    success(){  //預登錄成功
				        // 顯示一鍵登錄選項
						console.log("預登陸成功")
				    },
				    fail(res){  // 預登錄失敗
				        // 不顯示一鍵登錄選項（或置灰）
				    // 根據錯誤資訊判斷失敗原因，如有需要可將錯誤提交給統計服務器
						vm.isSupport = false;
				        console.log(res.errCode)
				        console.log(res.errMsg)
				    }
				})
				

			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

登陸

一鍵登錄拿到access_token

univerifyStyle 資料結構樣式 參考鏈接 https://uniapp.dcloud.io/univerify

uni.login({
	provider: 'univerify',
	univerifyStyle: { // 自定義登錄框樣式
		//參考`univerifyStyle 資料結構`
	},
	success(res) { // 登錄成功
		console.log(res.authResult); // {openid:'登錄授權唯一標識',access_token:'介面回傳的 token'}
		uni.closeAuthView(); //關閉一鍵登陸視窗 
	},
	fail(res) { // 登錄失敗
		console.log(res.errCode)
		console.log(res.errMsg)
	}
})

如下
這里拿到 openid 和access_token
console.log(res.authResult)

一鍵登陸成功后 記得關閉登陸視窗

uni.closeAuthView()

access_token換取手機號

拿到手機號就可以用手機號注冊什么的了 也可以通過手機號獲取資訊

在云函式中

如果不知道如何創建云函式 請參考 https://dmhsq.blog.csdn.net/article/details/113746528

'use strict';
exports.main = async (event, context) => {
	//event為客戶端上傳的引數
	const res = await uniCloud.getPhoneNumber({），
		provider: 'univerify', //微信 weixin qq qq
		apiKey: 'xxx', // 在開發者中心開通服務并獲取apiKey
		apiSecret: 'xxx', // 在開發者中心開通服務并獲取apiSecret
		access_token: event.access_token,
		openid: event.openid
	})
	console.log(res);
	//回傳資料給客戶端
	return "登陸成功"
};

客戶端傳送access_token

uni.login({
	provider: 'univerify',
	univerifyStyle: { // 自定義登錄框樣式
		//參考`univerifyStyle 資料結構`
	},
	success(res) { // 登錄成功
		console.log(res.authResult); // {openid:'登錄授權唯一標識',access_token:'介面回傳的 token'}
		uniCloud.callFunction({ //換取手機號 但是不回傳手機號(回傳不安全)
			name: 'dologintest',
			data: {
				access_token: res.authResult.access_token,
				openid: res.authResult.openid
			},
			success:function(res){
				console.log(res)
			}
		})
		uni.closeAuthView()
	},
	fail(res) { // 登錄失敗
		console.log(res.errCode)
		console.log(res.errMsg)
	}
})

呼叫成功

本機號碼一鍵登錄案例

邏輯和效果

一鍵登錄 獲取手機號 在資料查詢 如果沒有此賬號 就默認注冊
如果環境不支持號碼一鍵登錄 就顯示賬號密碼登陸

創建云資料庫 如果你不知道如何創建 請參考 https://dmhsq.blog.csdn.net/article/details/113855441
這里只用用戶名和手機號

首先我們預登陸 如果成功 說明支持號碼一鍵登錄 如果不支持 就顯示 賬號密碼登陸
一鍵登陸

如果沒有注冊 就默認注冊
如果注冊過 就回傳用戶名

云函式

'use strict';
exports.main = async (event, context) => {
	//event為客戶端上傳的引數
	const res = await uniCloud.getPhoneNumber({
	      provider: 'univerify',
	      apiKey: 'xxxxxx', // 在開發者中心開通服務并獲取apiKey
	      apiSecret: 'xxxxxxx', // 在開發者中心開通服務并獲取apiSecret
	      access_token: event.access_token,
	      openid: event.openid
	  })
	  
	 // console.log(res.phoneNumber);
	 if (res.success){
		 const db = uniCloud.database();
		 // 獲取 `usertest` 集合的參考
		 const collection = db.collection('usertest');
		 let resp = await collection.where({phone:res.phoneNumber}).get();
		 let msgs = {
			 code: 0,
			 msg: "成功"
		 }
		 if(resp.data.length==0){
			 let resps = await collection.add({username:"無名稱",phone:res.phoneNumber});
			 msgs.msg = "注冊成功,歡迎使用,親愛的用戶"
		 }else{
			 msgs.msg = "登陸成功,"+resp.data[0].username
		 }
		 return msgs;
	 }else{
		 return {
			 code: 4001,
			 msg: "獲取手機號失敗"
		 }
	 }
	 
	
};

頁面代碼

<template>
	<view>
		<view v-if="isSupport" class="content">
			<image class="logo" src="/static/logo.png" @click="login()"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
		</view>
		<view v-if="!isSupport">
			<input placeholder="賬號" />
			<input placeholder="密碼" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '點擊圖片一鍵登錄',
				isSupport: true
			}
		},
		onLoad() {
			this.prelogin()
		},
		methods: {
			login(){
				uni.login({
				    provider: 'univerify',
				    univerifyStyle: { // 自定義登錄框樣式
				    //參考`univerifyStyle 資料結構`
				  },
				    success(res){ // 登錄成功
				        console.log(res.authResult);  // {openid:'登錄授權唯一標識',access_token:'介面回傳的 token'}
						uniCloud.callFunction({
							name:'dologintest',
							data:{access_token:res.authResult.access_token,openid:res.authResult.openid},
							success:function(res){
								uni.showToast({
									icon:"none",
									title:res.result.msg
								})
							}
						})
						uni.closeAuthView()
				    },
				    fail(res){  // 登錄失敗
				        console.log(res.errCode)
				        console.log(res.errMsg)
				    }
				})
			},
			prelogin() {
				let vm = this;
				uni.preLogin({
				    provider: 'univerify',
				    success(){  //預登錄成功
				        // 顯示一鍵登錄選項
						console.log("預登陸成功")
						uni.showToast({
							icon:"none",
							title:"預登陸成功"
						})
				    },
				    fail(res){  // 預登錄失敗
				        // 不顯示一鍵登錄選項（或置灰）
				    // 根據錯誤資訊判斷失敗原因，如有需要可將錯誤提交給統計服務器
						vm.isSupport = false;
				        console.log(res.errCode)
				        console.log(res.errMsg)
				    }
				})
				

			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

微信登陸

效果

登陸

uni.login({
	provider: 'weixin',
	success(res) { // 登錄成功
		uni.showToast({
			icon: 'none',
			title: '登陸成功'
		})
	},
	fail(res) { // 登錄失敗
		uni.showToast({
			icon: 'none',
			title: '登陸失敗'
		})
	}
})

獲取用戶資訊

這里顯示 用戶名

uni.getUserInfo({
	success: function(res) {
		uni.showToast({
			icon: 'none',
			title: '用戶名為' + res.userInfo.nickName
		})
	}
})

回傳的資料格式為

{
	"errMsg": "getUserInfo:ok",
	"userInfo": {
		"openId": "xxxxx",
		"nickName": "xxxx",
		"gender": xxxx,
		"city": "xxx",
		"province": "xxx",
		"country": "xxxx",
		"avatarUrl": "xxxxxxxxxx",
		"unionId": "xxxx"
	}
}

參考上面的手機號碼登陸案例 一樣可以實作登陸注冊

檢測登陸是否過期

uni.checkSession({
	success: function(res) {
		console.log(res)
	}
})

演示代碼

<template>
	<view>
		<view class="content">
			<button type="primary" @click="login()">登陸</button>
			<button type="primary" @click="getUser()">獲取用戶資訊</button>
			<button type="primary" @click="check()">檢測登陸是否過期</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			getUser(){
				uni.getUserInfo({
					success:function(res){
						uni.showToast({
							icon: 'none',
							title: '用戶名為'+res.userInfo.nickName
						})
					}
				})
			},
			check(){
				uni.checkSession({
					success:function(res){
						console.log(res)
					}
				})
			},
			login() {
				uni.login({
					provider: 'weixin',
					success(res) { // 登錄成功
						uni.showToast({
							icon: 'none',
							title: '登陸成功'
						})
					},
					fail(res) { // 登錄失敗
						uni.showToast({
							icon: 'none',
							title: '登陸失敗'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

QQ登陸

相當于微信登陸 只改變了

效果

登陸

uni.login({
	provider: 'weixin',
	success(res) { // 登錄成功
		uni.showToast({
			icon: 'none',
			title: '登陸成功'
		})
	},
	fail(res) { // 登錄失敗
		uni.showToast({
			icon: 'none',
			title: '登陸失敗'
		})
	}
})

獲取用戶資訊

這里顯示 用戶名

uni.getUserInfo({
	success: function(res) {
		uni.showToast({
			icon: 'none',
			title: '用戶名為' + res.userInfo.nickName
		})
	}
})

如果獲取不到 就使用
<button @getuserinfo=“getUserInfo” open-type=“getUserInfo” type=“primary”>獲取資訊

getUserInfo(e) {
	console.log(e.detail.userInfo)
	uni.showToast({
		icon: 'none',
		title: "歡迎您" + e.detail.userInfo.nickName
	})
}

回傳的資料格式為

userInfo:{
	avatarUrl: "xxxxxx"
	city: "xxxx
	country: "xxxx"
	gender: 1
	language: "zh_CN"
	nickName: "xxxx"
	province: "xxxxx"
}

參考上面的手機號碼登陸案例 一樣可以實作登陸注冊

檢測登陸是否過期

uni.checkSession({
	success: function(res) {
		console.log(res)
	}
})

演示代碼

<template>
	<view>
		<view class="content">
			<button type="primary" @click="login()">登陸</button>
			<button @getuserinfo="getUserInfo" open-type="getUserInfo" type="primary">獲取資訊</button>
			<button type="primary" @click="check()">檢測登陸是否過期</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			  getUserInfo(e) {
				  console.log(e.detail)
				  uni.showToast({
				  	icon:'none',
				  	title: "歡迎您"+e.detail.userInfo.nickName
				  })
			  },
			getUser(){
				uni.getUserInfo({
					withCredentials:true,
					success:function(res){
						console.log(res)
						uni.showToast({
							icon:'none',
							title:res.userInfo
						})
					},
					fail:function(res){
						console.log(res)
					}
				})
			},
			check(){
				uni.checkSession({
					success:function(res){
						console.log(res)
					}
				})
			},
			login() {
				uni.login({
					provider: 'qq',
					success(res) { // 登錄成功
						console.log(res)
						uni.showToast({
							icon:'none',
							title:"登陸成功"
						})
						
					},
					fail(res) { // 登錄失敗
						uni.showToast({
							icon: 'none',
							title: '登陸失敗'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910