uniapp app一键登录（组件代码封装）

一键登录配置

去查看一键登录配置

代码

<template>
	<view>
		<view class="flexaround font28" style="margin: 10rpx 0;" @click="univerifyLogin">
			本机号码登录
		</view>
	</view>
</template>

<script>
	//后端登录注册接口和一键登录接口
	import { getPhoneByToken,oneClickLogin } from "@/api/all.js"
	import { appShareUrl} from "@/config/url.js"
	// #ifdef APP
		const univerifyManager = uni.getUniverifyManager();
	// #endif
	
	export default {
		name:"oneKeyLogin",
		props:{
			params:{},
			//是否返回页面
			backpage:{
				default:false
			}
		},
		data() {
			return {
				// 运营商一键登录配置
				univerifyStyle: {
					fullScreen: true, // 是否全屏显示，默认值： false
					backgroundColor: '#ffffff', // 授权页面背景颜色，默认值：#ffffff
					backgroundImage: '', // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）
					icon: {
						path: 'static/logo.png' // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
					},
					closeIcon: {
						path: 'static/xxx.png' // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持
					},
					phoneNum: {
						color: '#202020' // 手机号文字颜色 默认值：#202020
					},
					slogan: {
						color: '#BBBBBB' //  slogan 字体颜色 默认值：#BBBBBB
					},
					authButton: {
						normalColor: '#1578FA', // 授权按钮正常状态背景颜色 默认值：#3479f5
						highlightColor: '#1578FA', // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
						disabledColor: '#1578FA', // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
						textColor: '#ffffff', // 授权按钮文字颜色 默认值：#ffffff
						title: '本机号码一键登录', // 授权按钮文案 默认值：“本机号码一键登录”
						borderRadius: '24px' // 授权按钮圆角 默认值："24px" （按钮高度的一半）
					},
					otherLoginButton: {
						visible: true, // 是否显示其他登录按钮，默认值：true
						normalColor: '', // 其他登录按钮正常状态背景颜色 默认值：透明
						highlightColor: '', // 其他登录按钮按下状态背景颜色 默认值：透明
						textColor: '#656565', // 其他登录按钮文字颜色 默认值：#656565
						title: '其他登录方式', // 其他登录方式按钮文字 默认值：“其他登录方式”
						borderColor: '', //边框颜色 默认值：透明（仅iOS支持）
						borderRadius: '0px' // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
					},
					privacyTerms: {
						defaultCheckBoxState: false, // 条款勾选框初始状态 默认值： true
						uncheckedImage: '', // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
						checkedImage: '', // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
						checkBoxSize: 14, // 可选 条款勾选框大小，仅android支持
						textColor: '#BBBBBB', // 文字颜色 默认值：#BBBBBB
						termsColor: '#313743', //  协议文字颜色 默认值： #5496E3
						prefix: '我已阅读并同意', // 条款前的文案 默认值：“我已阅读并同意”
						suffix: '并使用本机号码登录', // 条款后的文案 默认值：“并使用本机号码登录”
						privacyItems: [
							// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
							{
								url: appShareUrl + 'privacy.html', // 点击跳转的协议详情页面
								title: '《隐私政策》' // 协议名称
							},
							{
								url: appShareUrl + 'contract.html', // 点击跳转的协议详情页面
								title: '《服务协议》' // 协议名称
							}
						]
					}
					// "buttons": { // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
					// 	"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
					// 	"list": [{
					// 			"provider": "apple",
					// 			"iconPath": "/static/apple.png" // 图标路径仅支持本地图片
					// 		},
					// 		{
					// 			"provider": "weixin",
					// 			"iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
					// 		}
					// 	]
					// }
				},
				errorList: {
					30005: '不具备一键登录的使用前提，设备不支持/未开启数据流量/其他原因',
					20202: '终端未开启SIM流量,手动开启设备流量',
					5000: '请检查SIM卡是否停机欠费'
				},
				isSupport: false,
			};
		},
		created() {
			// #ifdef APP
			// 运营商一键登录预登录
			uni.getProvider({
				service: 'oauth',
				success: (res) => {
					console.log(res.provider);
					if (~res.provider.indexOf('univerify')) {
						univerifyManager.preLogin({
							provider: 'univerify'
						});
					}
				}
			});
			// #endif
		},
		mounted() {
			// #ifdef APP
			this.checkEnvironment(1);
			// 订阅自定义按钮点击事件
			univerifyManager.onButtonsClick(this.callback);
			// #endif
		},
		methods:{
			// 获取用户信息
			getUser(e) {
				getPhoneByToken().then(res => {
					console.log(res);
					uni.setStorageSync('userInfo', res.data)
					univerifyManager.close();
					// if(res.province || res.address){
					if (!e){
						// if (this.backpage) {
						// 	uni.navigateBack()
						// } else {
							this.com.tab('/pages/index/index')
						// }
					}
					// }else{
					// 	//设置信息页面
					// 	this.com.navto('/pages/user/editInfo')
					// }
				})
			},
			// 运营商一键登录
			univerifyLogin() {
				let _this = this;
				univerifyManager.preLogin();
				univerifyManager.login({
					univerifyStyle: _this.univerifyStyle,
					success: (res) => {
						console.log('login success', res);
						oneClickLogin({
							openId: res.authResult.openid,
							accessToken: res.authResult.access_token,
							invitationCode: _this.params.invitationCode
						}).then((ret) => {
							console.log('-------888-----', ret);
							if (ret.code == 1) {
								uni.setStorageSync('token', ret.data.token)
								if(ret.data.type == 1){ //1 登录， 0 注册
									_this.getUser('')
								}else{
									_this.com.navto('/pages/login/setOnePassword')
									_this.getUser(1)
								}
							} else {
								uni.closeAuthView();
								uni.showModal({
									title: '未插入sim卡' + ret.msg,
									icon: 'none'
								});
							}
						}).catch(err=>{
							console.log(err);
						});
					},
					fail: (err) => {
						console.log(err);
						if (err.code == 30002) {
							// 用户点击其他登录方式
							// this.otherLogin();
							univerifyManager.close();
						}
					}
				});
			},
			//校验一键登录环境
			checkEnvironment(type) {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						console.log(res.provider);
						if (~res.provider.indexOf('univerify')) {
							uni.preLogin({
								provider: 'univerify',
								success: () => {
									//预登录成功
									// 显示一键登录选项
									//拉起运营商一键登录界面
									this.isSupport = true;
								},
								fail: (res) => {
									// 预登录失败
									// 不显示一键登录选项（或置灰）
									// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
									if (type == 1) {
										console.log('与登录', Object.keys(this.errorList).includes(res
											.errCode.toString()));
										if (Object.keys(this.errorList).includes(res.errCode
												.toString())) {
											uni.showToast({
												title: this.errorList[res.errCode],
												icon: 'none',
												duration: 3000
											});
										} else {
											uni.showToast({
												title: '设备不支持一键登录',
												icon: 'none',
												duration: 3000
											});
										}
										this.isSupport = false;
									}
									console.warn(res.errCode);
									console.warn(res.errMsg);
								}
							});
						}
					}
				});
			},
			// 获取一键登录弹框协议勾选状态
			callback(res) {
				// 参数和 uni.getCheckBoxState 相同
				univerifyManager.getCheckBoxState({
					success(res) {
						console.log('getCheckBoxState res: ', res);
						if (res.state) {
							// 关闭一键登录弹框
							// 参数和 uni.closeAuthView 相同
							univerifyManager.close();
						}
					}
				});
			},
		}
	}
</script>

<style>

</style>