566 lines
15 KiB
Vue
566 lines
15 KiB
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>
|