uniapp一键登录

1、创建云函数getPhoneNumber

 2、修改index.js

'use strict';
exports.main = async (event, context) => {
	const res = await uniCloud.getPhoneNumber({
		appid: 'xxxx',// 在manifest.json里面可以找到
		provider: 'univerify',
		apiKey: 'xxxx',// 在DCloud开发者中心开通一键登录基础服务时自动生成的
		apiSecret: 'xxxx',// 开通一键登录基础服务时自动生成的
		access_token: event.access_token,
		openid: event.openid
	});
	console.log(res,"res"); // res里的数据格式	{ code: 0, success: true, phoneNumber: '186*****078' }
	return {
		code: 0,
		data: res,
		message: '获取手机号成功'
	}
};

3、修改package.json

{
  "name": "univerify",
  "dependencies": {},
  "extensions": {
    "uni-cloud-jql": {},
	"uni-cloud-verify": {}
  }
}

4、右键getPhoneNumber上传部署

5、使用

5、1请求登录授权

uni.preLogin({
	provider: 'univerify',
	success(){  //预登录成功
		// 显示一键登录选项
	},
	fail(res){  // 预登录失败
		// 不显示一键登录选项（或置灰）
    // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
		console.log(res.errCode)
		console.log(res.errMsg)
	}
})

5、2登录

uni.preLogin({
					provider: 'univerify',
					success: () => {
						uni.login({
							provider: 'univerify',
							univerifyStyle: {
								"fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
								"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff  
								"phoneNum": {
									"color": "#000000", // 手机号文字颜色 默认值：#000000   
								},
								"slogan": {
									"color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90  
								},
								"icon": {
									"path": "static/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
								},
								"authButton": {
									"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5  
									"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
									"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
									"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  
									"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”  
								},
								"privacyTerms": {  
									"defaultCheckBoxState":false, // 条款勾选框初始状态 默认值： true
									"uncheckedImage":"", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)   
									"checkedImage":"", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)   
									"checkBoxSize":12, // 可选 条款勾选框大小，仅android支持
									"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
									"termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3  
									"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
									"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
									"privacyItems": [  // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
										{  
											"url": "http://live.opps.live/public/pdf/user1.html", // 点击跳转的协议详情页面  
											"title": "用户协议" // 协议名称  
										},
										{
											"url": "http://live.opps.live//public/pdf/user2.html", // 点击跳转的协议详情页面  
										  	"title": "隐私政策" // 协议名称  
										} 
									]  
								},
								"otherLoginButton": {
									"visible": "false", // 是否显示其他登录按钮，默认值：true  
								},
								"otherLoginButton": {  
									"visible": true, // 是否显示其他登录按钮，默认值：true  
									"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
									"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
									"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
									"title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
									"borderColor": "",  //边框颜色 默认值：透明（仅iOS支持）  
									"borderRadius": "0px" ,// 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
								},
							},
							success: (res) => {
								console.log(3333)
								console.log(res)
								uniCloud.callFunction({
									name: 'getPhoneNumber', // 你的云函数名称
									data: {
										access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
										openid: res.authResult.openid // 客户端一键登录接口返回的openid
									}
								}).then(dataRes => {
									console.log('云函数返回的参数3333', dataRes)
									console.log(dataRes)
									_this.logins(dataRes);
									
								}).catch(err => {
									console.log('云函数报错', err)
								})
								uni.showToast({
									title: res.authResult,
									icon: "none"
								})
								uni.closeAuthView() //关闭一键登录弹出窗口
							},
							fail(res) {
								uni.reLaunch({
									url: '/pages/login/login',
								});
								uni.closeAuthView()
								// console.log('失败')
							},
						})
					},
					fail(res) {
						console.log('一键登录失败',res)
						if (res.errMsg != 'login:ok') {
							uni.redirectTo({
								url: '/pages/login/login'
							});
							uni.showToast({
								title: res.metadata.msg,
								icon: "none"
							})
						}
					}
				})

简洁版

// 判断是否支持一键登陆
isAutoLogin() {
    let _that = this
    // 这一步写不写问题都不大
	uni.getProvider({ //获取可用的服务提供商
		service: 'oauth',
		success: function(res) {
			console.log(res.provider) // ['weixin', qq', 'univerify']
			}
		});
	uni.preLogin({ //预登录
		provider: 'univerify', //用手机号登录
		success() {
			console.log('预登录成功')
			uni.login({ //正式登录，弹出授权窗
			provider: 'univerify',
			univerifyStyle: { // 自定义登录框样式 },
				success(res) {
				    console.log(res, 'uni.login');
					// 在得到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)
                            // 此处可获得手机号，调用后端接口
							console.log(callRes.result.data)
							},
							fail(callErr) {
								console.log('调用云函数出错', callErr)
							},
							complete() {
								uni.closeAuthView() //关闭授权登录界面
							}
						})
					},
					fail(err) { // 正式登录失败
						console.log(err)
						console.log(err.errMsg)
						uni.closeAuthView() //关闭授权登录界面
					}
				})
			},
 
			fail(err) { //预登录失败
				console.log('错误码：', err)
				console.log(err.errMsg)
			}
		})
	},