NGTools/uni_modules/uni-id-pages/components/uni-id-pages-fab-login/uni-id-pages-fab-login.vue

<template>
	<view>
		<view class="fab-login-box">
			<view class="item" v-for="(item, index) in servicesList" :key="index" @click="item.path ? toPage(item.path) : login_before(item.id, false)">
				<image class="logo" :src="item.logo" mode="scaleToFill"></image>
				<text class="login-title">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import config from '@/uni_modules/uni-id-pages/config.js';
//前一个窗口的页面地址。控制点击切换快捷登录方式是创建还是返回
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
let allServicesList = [];
export default {
	computed: {
		agreements() {
			if (!config.agreements) {
				return [];
			}
			let { serviceUrl, privacyUrl } = config.agreements;
			return [
				{
					url: serviceUrl,
					title: '用户服务协议'
				},
				{
					url: privacyUrl,
					title: '隐私政策条款'
				}
			];
		},
		agree: {
			get() {
				return this.getParentComponent().agree;
			},
			set(agree) {
				return (this.getParentComponent().agree = agree);
			}
		}
	},
	data() {
		return {
			servicesList: [
				{
					id: 'username',
					text: '账号登录',
					logo: '/uni_modules/uni-id-pages/static/login/uni-fab-login/user.png',
					path: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
				},
				{
					id: 'smsCode',
					text: '短信验证码',
					logo: '/uni_modules/uni-id-pages/static/login/uni-fab-login/sms.png',
					path: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=smsCode'
				},
				{
					id: 'weixin',
					text: '微信登录',
					logo: '/uni_modules/uni-id-pages/static/login/uni-fab-login/weixin.png'
				},
				// #ifndef MP-WEIXIN
				{
					id: 'apple',
					text: '苹果登录',
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/apple.png'
				},
				{
					id: 'univerify',
					text: '一键登录',
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/univerify.png'
				},
				{
					id: 'taobao',
					text: '淘宝登录', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/taobao.png'
				},
				{
					id: 'facebook',
					text: '脸书登录', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/facebook.png'
				},
				{
					id: 'alipay',
					text: '支付宝登录', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/alipay.png'
				},
				{
					id: 'qq',
					text: 'QQ登录', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/qq.png'
				},
				{
					id: 'google',
					text: '谷歌登录', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/google.png'
				},
				{
					id: 'douyin',
					text: '抖音登录', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/douyin.png'
				},
				{
					id: 'sinaweibo',
					text: '新浪微博', //暂未提供该登录方式的接口示例
					logo: '/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/sinaweibo.png'
				}
				// #endif
			],
			univerifyStyle: {
				//一键登录弹出窗的样式配置参数
				fullScreen: true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
				backgroundColor: '#ffffff', // 授权页面背景颜色，默认值：#ffffff
				buttons: {
					// 自定义登录按钮
					iconWidth: '45px', // 图标宽度（高度等比例缩放） 默认值：45px
					list: []
				},
				privacyTerms: {
					defaultCheckBoxState: false, // 条款勾选框初始状态 默认值： true
					textColor: '#BBBBBB', // 文字颜色 默认值：#BBBBBB
					termsColor: '#5496E3', //  协议文字颜色 默认值： #5496E3
					prefix: '我已阅读并同意', // 条款前的文案 默认值：“我已阅读并同意”
					suffix: '并使用本机号码登录', // 条款后的文案 默认值：“并使用本机号码登录”
					privacyItems: []
				}
			}
		};
	},
	watch: {
		agree(agree) {
			this.univerifyStyle.privacyTerms.defaultCheckBoxState = agree;
		}
	},
	async created() {
		let servicesList = this.servicesList;
		let loginTypes = config.loginTypes;

		servicesList = servicesList.filter((item) => {
			// #ifndef APP
			//非app端去掉apple登录
			if (item.id == 'apple') {
				return false;
			}
			// #endif

			// #ifdef APP
			//去掉非ios系统上的apple登录
			if (item.id == 'apple' && uni.getSystemInfoSync().osName != 'ios') {
				return false;
			}
			// #endif

			return loginTypes.includes(item.id);
		});
		//处理一键登录
		if (loginTypes.includes('univerify')) {
			this.univerifyStyle.privacyTerms.privacyItems = this.agreements;
			//设置一键登录功能底下的快捷登录按钮
			servicesList.forEach(({ id, logo, path }) => {
				if (id != 'univerify') {
					this.univerifyStyle.buttons.list.push({
						iconPath: logo,
						provider: id,
						path //路径用于点击快捷按钮时判断是跳转页面
					});
				}
			});
		}
		//	console.log(servicesList);

		//去掉当前页面对应的登录选项
		this.servicesList = servicesList.filter((item) => {
			let path = item.path ? item.path.split('?')[0] : '';
			return path != this.getRoute(1);
		});
	},
	methods: {
		getParentComponent() {
			// #ifndef H5
			return this.$parent;
			// #endif

			// #ifdef H5
			return this.$parent.$parent;
			// #endif
		},
		setUserInfo(e) {
			console.log('setUserInfo', e);
		},
		getRoute(n = 0) {
			let pages = getCurrentPages();
			if (n > pages.length) {
				return '';
			}
			return '/' + pages[pages.length - n].route;
		},
		toPage(path, index = 0) {
			//console.log('比较', this.getRoute(1),this.getRoute(2), path)
			if (this.getRoute(1) == path.split('?')[0] && this.getRoute(1) == '/uni_modules/uni-id-pages/pages/login/login-withoutpwd') {
				//如果要被打开的页面已经打开，且这个页面是 /uni_modules/uni-id-pages/pages/index/index 则把类型参数传给他
				let loginType = path.split('?')[1].split('=')[1];
				uni.$emit('uni-id-pages-setLoginType', loginType);
			} else if (this.getRoute(2) == path) {
				// 如果上一个页面就是，马上要打开的页面，直接返回。防止重复开启
				uni.navigateBack();
			} else if (this.getRoute(1) != path) {
				if (index === 0) {
					uni.navigateTo({
						url: path,
						animationType: 'slide-in-left',
						complete(e) {
							// console.log(e);
						}
					});
				} else {
					uni.redirectTo({
						url: path,
						animationType: 'slide-in-left',
						complete(e) {
							// console.log(e);
						}
					});
				}
			} else {
				console.log('出乎意料的情况,path：' + path);
			}
		},
		async login_before(type, navigateBack = true, options = {}) {
			console.log(type);
			//提示空实现
			if (['qq', 'xiaomi', 'sinaweibo', 'taobao', 'facebook', 'google', 'alipay', 'douyin'].includes(type)) {
				return uni.showToast({
					title: '该登录方式暂未实现，欢迎提交pr',
					icon: 'none',
					duration: 3000
				});
			}

			//检查当前环境是否支持这种登录方式
			// #ifdef APP
			let isAppExist = true;
			await new Promise((callback) => {
				plus.oauth.getServices(
					(oauthServices) => {
						let index = oauthServices.findIndex((e) => e.id == type);
						if (index != -1) {
							isAppExist = oauthServices[index].nativeClient;
							callback();
						} else {
							return uni.showToast({
								title: '当前设备不支持此登录，请选择其他登录方式',
								icon: 'none',
								duration: 3000
							});
						}
					},
					(err) => {
						throw new Error('获取服务供应商失败：' + JSON.stringify(err));
					}
				);
			});
			// #endif

			if (
				// #ifdef APP
				!isAppExist[]
					// #endif
					//非app端使用了，app特有登录方式
					// #ifndef APP
					('univerify', 'apple')
				.includes(type)
				// #endif
			) {
				return uni.showToast({
					title: '当前设备不支持此登录，请选择其他登录方式',
					icon: 'none',
					duration: 3000
				});
			}

			//判断是否需要弹出隐私协议授权框
			let needAgreements = (config?.agreements?.scope || []).includes('register');
			if (type != 'univerify' && needAgreements && !this.agree) {
				let agreementsRef = this.getParentComponent().$refs.agreements;
				return agreementsRef.popup(() => {
					this.login_before(type, navigateBack, options);
				});
			}

			// #ifdef H5
			if (type == 'weixin') {
				// console.log('开始微信网页登录');
				// let redirectUrl = location.protocol +'//'+
				// 				document.domain +
				// 				(window.location.href.includes('#')?'/#':'') +
				// 				'/uni_modules/uni-id-pages/pages/login/login-withoutpwd?is_weixin_redirect=true&type=weixin'
				// #ifdef VUE2
				const baseUrl = process.env.BASE_URL;
				// #endif
				// #ifdef VUE3
				const baseUrl = import.meta.env.BASE_URL;
				// #endif

				let redirectUrl =
					location.protocol +
					'//' +
					location.host +
					baseUrl.replace(/\/$/, '') +
					(window.location.href.includes('#') ? '/#' : '') +
					'/uni_modules/uni-id-pages/pages/login/login-withoutpwd?is_weixin_redirect=true&type=weixin';

				// console.log('redirectUrl----',redirectUrl);
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					// console.log('在微信公众号内');
					return window.open(`https://open.weixin.qq.com/connect/oauth2/authorize?
										appid=${config.appid.weixin.h5}
										&redirect_uri=${encodeURIComponent(redirectUrl)}
										&response_type=code
										&scope=snsapi_userinfo
										&state=STATE&connect_redirect=1#wechat_redirect`);
				} else {
					// console.log('非微信公众号内');
					return (location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${config.appid.weixin.web}
											&redirect_uri=${encodeURIComponent(redirectUrl)}
											&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`);
				}
			}
			// #endif

			uni.showLoading({
				mask: true
			});

			if (type == 'univerify') {
				let univerifyManager = uni.getUniverifyManager();
				let clickAnotherButtons = false;
				let onButtonsClickFn = async (res) => {
					console.log('点击了第三方登录，provider：', res, res.provider, this.univerifyStyle.buttons.list);
					clickAnotherButtons = true;
					let checkBoxState = await uni.getCheckBoxState();
					// 同步一键登录弹出层隐私协议框是否打勾
					// #ifdef VUE2
					this.agree = checkBoxState[1].state;
					// #endif
					// #ifdef VUE3
					this.agree = checkBoxState.state;
					// #endif
					let { path } = this.univerifyStyle.buttons.list[res.index];
					if (path) {
						if (this.getRoute(1).includes('login-withoutpwd') && path.includes('login-withoutpwd')) {
							this.getParentComponent().showCurrentWebview();
						}
						this.toPage(path, 1);
						closeUniverify();
					} else {
						if (this.agree) {
							closeUniverify();
							setTimeout(() => {
								this.login_before(res.provider);
							}, 500);
						} else {
							uni.showToast({
								title: '你未同意隐私政策协议',
								icon: 'none',
								duration: 3000
							});
						}
					}
				};

				function closeUniverify() {
					uni.hideLoading();
					univerifyManager.close();
					// 取消订阅自定义按钮点击事件
					univerifyManager.offButtonsClick(onButtonsClickFn);
				}
				// 订阅自定义按钮点击事件
				univerifyManager.onButtonsClick(onButtonsClickFn);
				// 调用一键登录弹框
				return univerifyManager.login({
					univerifyStyle: this.univerifyStyle,
					success: (res) => {
						this.login(res.authResult, 'univerify');
					},
					fail(err) {
						console.log(err);
						if (!clickAnotherButtons) {
							uni.navigateBack();
						}
						// uni.showToast({
						// 	title: JSON.stringify(err),
						// 	icon: 'none',
						// 	duration: 3000
						// });
					},
					complete: async (e) => {
						uni.hideLoading();
						//同步一键登录弹出层隐私协议框是否打勾
						// this.agree = (await uni.getCheckBoxState())[1].state
						// 取消订阅自定义按钮点击事件
						univerifyManager.offButtonsClick(onButtonsClickFn);
					}
				});
			}

			if (type === 'weixinMobile') {
				return this.login(
					{
						phoneCode: options.phoneNumberCode
					},
					type
				);
			}

			uni.login({
				provider: type,
				onlyAuthorize: true,
				// #ifdef APP
				univerifyStyle: this.univerifyStyle,
				// #endif
				success: async (e) => {
					if (type == 'apple') {
						let res = await this.getUserInfo({
							provider: 'apple'
						});
						Object.assign(e.authResult, res.userInfo);
						uni.hideLoading();
					}
					this.login(
						type == 'weixin'
							? {
									code: e.code
							  }
							: e.authResult,
						type
					);
				},
				fail: async (err) => {
					console.log(err);
					uni.hideLoading();
				}
			});
		},
		login(params, type) {
			//联网验证登录
			// console.log('执行登录开始----');
			console.log({ params, type });
			//toLowerCase
			let action = 'loginBy' + type.trim().replace(type[0], type[0].toUpperCase());
			const uniIdCo = uniCloud.importObject('uni-id-co', {
				customUI: true
			});
			uniIdCo[action](params)
				.then((result) => {
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 2000
					});
					// #ifdef H5
					result.loginType = type;
					// #endif
					mutations.loginSuccess(result);
				})
				.catch((e) => {
					uni.showModal({
						content: e.message,
						confirmText: '知道了',
						showCancel: false
					});
				})
				.finally((e) => {
					if (type == 'univerify') {
						uni.closeAuthView();
					}
					uni.hideLoading();
				});
		},
		async getUserInfo(e) {
			return new Promise((resolve, reject) => {
				uni.getUserInfo({
					...e,
					success: (res) => {
						resolve(res);
					},
					fail: (err) => {
						uni.showModal({
							content: JSON.stringify(err),
							showCancel: false
						});
						reject(err);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
.fab-login-box,
.item {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
}
/* #endif */

.fab-login-box {
	flex-direction: row;
	flex-wrap: wrap;
	width: 750rpx;
	justify-content: space-around;
	position: fixed;
	left: 0;
}

.item {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200rpx;
	cursor: pointer;
}

/* #ifndef APP-NVUE */
@media screen and (min-width: 690px) {
	.fab-login-box {
		max-width: 500px;
		margin-left: calc(50% - 250px);
	}
	.item {
		height: 160rpx;
	}
}

@media screen and (max-width: 690px) {
	.fab-login-box {
		bottom: 10rpx;
	}
}

/* #endif */

.logo {
	width: 60rpx;
	height: 60rpx;
	max-width: 40px;
	max-height: 40px;
	border-radius: 100%;
	border: solid 1px #f6f6f6;
}

.login-title {
	text-align: center;
	margin-top: 6px;
	color: #999;
	font-size: 10px;
	width: 70px;
}
</style>