569 lines
16 KiB
Vue
569 lines
16 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>
|