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>