uniapp一键登录获取云函数手机号


'use strict';
exports.main = async (event, context) => {
	// event里包含着客户端提交的参数
	const res = await uniCloud.getPhoneNumber({
		appid: 'xxx', // 替换成自己开通一键登录的应用的DCloud appid,使用callFunction方式调用时可以不传(会自动取当前客户端的appid),如果使用云函数URL化的方式访问必须传此参数
		provider: 'univerify',
		apiKey: 'xxx', // 在开发者中心开通服务并获取apiKey
		apiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecret
		access_token: event.access_token,
		openid: event.openid,
		dataType: 'json'
	})

	console.log('res',res); // res里包含手机号
	// 执行用户信息入库等操作,正常情况下不要把完整手机号返回给前端
	// 如果数据库在uniCloud上,可以直接入库
	// 如果数据库不在uniCloud上,可以通过 uniCloud.httpclient API,将手机号通过http方式传递给其他服务器的接口,详见:https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
	return {
		code: 0,
		message: '获取手机号成功',
		data:res
	}
}


 

<template>


	<view>
		<view v-if="autoStatus" class="login-view">
			<image class="logo-img" src="/static/logo.png"></image>
			<view class="login-btn" @click="submitlogin()">
				本机号码一键登陆
			</view>
		</view>
		<view v-else>
			不支持一键登陆功能
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoStatus: true
			}
		},
		onLoad() {
			this.isAutoLogin()
		},
		methods: {
			// 判断是否支持一键登陆
			isAutoLogin() {
				let _that = this
				uni.getProvider({ //获取可用的服务提供商
					service: 'oauth',
					success: function(res) {
						console.log(res.provider) // ['weixin', qq', 'univerify']
					}
				});
				uni.preLogin({ //预登录
					provider: 'univerify', //用手机号登录
					success() {
						_that.autoStatus = true
						console.log('预登录成功')
					},

					fail(err) { //预登录失败
						_that.autoStatus = false
						console.log('错误码:' + err.errCode)
						console.log(err.errMsg)
					}
				})
			},
			submitlogin() {
				uni.login({ //正式登录,弹出授权窗
					provider: 'univerify',
					univerifyStyle: { // 自定义登录框样式
						//参考`univerifyStyle 数据结构`
						"backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff  
						"icon": {
							"path": "/static/logo.png" // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo   
						},
						"phoneNum": {
							"color": "#000000", // 手机号文字颜色 默认值:#000000   
							"fontSize": "18" // 手机号字体大小 默认值:18  
						},
						"slogan": {
							"color": "#8a8b90", //  slogan 字体颜色 默认值:#8a8b90  
							"fontSize": "12" // slogan 字体大小 默认值:12  
						},
						"authButton": {
							"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5  
							"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)  
							"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)  
							"textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff  
							"title": "本机号码一键登录" // 授权按钮文案 默认值:“本机号码一键登录”  
						},
						"otherLoginButton": {
							"visible": "true", // 是否显示其他登录按钮,默认值:true  
							"normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值:#f8f8f8  
							"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值:#dedede  
							"textColor": "#000000", // 其他登录按钮文字颜色 默认值:#000000  
							"title": "其他登录方式", // 其他登录方式按钮文字 默认值:“其他登录方式”  
							"borderWidth": "1px", // 边框宽度 默认值:1px(仅ios支持)  
							"borderColor": "#c5c5c5" //边框颜色 默认值: #c5c5c5(仅ios支持)  
						},
						"privacyTerms": {
							"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值: true   
							"textColor": "#8a8b90", // 文字颜色 默认值:#8a8b90  
							"termsColor": "#1d4788", //  协议文字颜色 默认值: #1d4788  
							"prefix": "我已阅读并同意", // 条款前的文案 默认值:“我已阅读并同意”  
							"suffix": "并使用本机号码登录", // 条款后的文案 默认值:“并使用本机号码登录”  
							"fontSize": "12", // 字体大小 默认值:12,  
							"privacyItems": [
								// 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效  
								{
									"url": "https://", // 点击跳转的协议详情页面  
									"title": "用户服务协议" // 协议名称  
								}
							]
						}

					},
					success(res) { // 正式登录成功
						console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}

						// 在得到access_token后,通过callfunction调用云函数
						uniCloud.callFunction({
							name: 'getPhoneNumber', // 云函数名称
							data: { //传给云函数的参数
								'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
								'openid': res.authResult.openid // 客户端一键登录接口返回的openid
							},
							success(callRes) {
								console.log('调用云函数成功' + callRes)
									var obj=callRes
								console.log('转换成Json:方便查看' + JSON.stringify(callRes))
							
								console.log('获取云函数手机号返回值' + 	obj.result.data.phoneNumber)
							},
							fail(callErr) {
								console.log('调用云函数出错' + callErr)
							},
							complete() {
								uni.closeAuthView() //关闭授权登录界面
							}
						})
					},
					fail(err) { // 正式登录失败
						console.log(err.errCode)
						console.log(err.errMsg)
						uni.closeAuthView() //关闭授权登录界面
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			margin: 100rpx auto;
		}

		.login-btn {
			width: 50%;
			text-align: center;
			background-color: #939393;
			color: #FFFFFF;
			border-radius: 50rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
		}
	}
</style>


版权声明:本文为OuNuo5280原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。