uniapp手机号一键登录

  • 前置条件:
  • 手机安装有sim卡
  • 手机开启数据流量(与wifi无关,不要求关闭wifi,但数据流量不能禁用。)
  • 开通uniCloud服务(但不要求所有后台代码都使用uniCloud)

第一步 开通uni一键登陆服务

开发者需要登录 DCloud开发者中心,申请开通一键登录服务。
在这里插入图片描述

第二步 .开通uniCloud服务并创建服务空间

在这里插入图片描述

第三步 实战教程

loginByUniverify云函数

'use strict';

const db = uniCloud.database()

exports.main = async (event, context) => {
	const res = await uniCloud.getPhoneNumber({
		appid: '', // 替换成uniapp的__UNI__的id
		provider: 'univerify',
		apiKey: '', // 服务空间的key
		apiSecret: '', // 服务空间的apiSecret
		access_token: event.access_token,
		openid: event.openid
	});

	console.log(res); // res里的数据格式	{ code: 0, success: true, phoneNumber: '手机号' }
	return await db.collection('regUser').add({		
		openid: event.openid, 
		PhoneNumber:res.phoneNumber,
		createTime: Date.now()		
	})
};

云函数调用

<template>
	<view>
			<view @click="submitlogin()">
				一键登陆
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		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: { // 自定义登录框样式
						"fullScreen": true, // 是否全屏显示,true表示全屏模式,false表示非全屏模式,默认值为false。
						"backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff 
						"phoneNum": {
							"color": "#2281F5", // 手机号文字颜色 默认值:#000000   
						},
						"authButton": {
							"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5  
							"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)  
							"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)  
							"textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff  
							"title": "本机号码一键登录" // 授权按钮文案 默认值:“本机号码一键登录”  
						}
					},
					success(res) { // 正式登录成功
						console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}

						// 在得到access_token后,通过callfunction调用云函数
						uniCloud.callFunction({
							name: 'loginByUniverify', // 云函数名称
							data: { //传给云函数的参数
								'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
								'openid': res.authResult.openid // 客户端一键登录接口返回的openid
							},
							success(callRes) {
								console.log('调用云函数成功' + callRes)
							},
							fail(callErr) {
								console.log('调用云函数出错' + callErr)
							},
							complete() {
								uni.closeAuthView() //关闭授权登录界面
							}
						})
					},
					fail(err) { // 正式登录失败
						console.log(err.errCode)
						console.log(err.errMsg)
						uni.closeAuthView() //关闭授权登录界面
					}
				})
			}
		}
	}
</script>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值