一键登录配置
去查看一键登录配置
代码
<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"
//
const univerifyManager = uni.getUniverifyManager();
//
export default {
name:"oneKeyLogin",
props:{
params:{},
//是否返回页面
backpage:{
default:false
}
},
data() {
return {
// 运营商一键登录配置
univerifyStyle: {
fullScreen: true, // 是否全屏显示,默认值: false
backgroundColor: '#ffffff', // 授权页面背景颜色,默认值:
backgroundImage: '', // 全屏显示的背景图片,默认值:"" (仅支持本地图片,只有全屏显示时支持)
icon: {
path: 'static/logo.png' // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo
},
closeIcon: {
path: 'static/xxx.png' // 自定义关闭按钮,仅支持本地图片。 HBuilderX3.3.7+版本支持
},
phoneNum: {
color: '#202020' // 手机号文字颜色 默认值:
},
slogan: {
color: '#BBBBBB' // slogan 字体颜色 默认值:
},
authButton: {
normalColor: '#1578FA', // 授权按钮正常状态背景颜色 默认值:
highlightColor: '#1578FA', // 授权按钮按下状态背景颜色 默认值:
disabledColor: '#1578FA', // 授权按钮不可点击时背景颜色 默认值:
textColor: '#ffffff', // 授权按钮文字颜色 默认值:
title: '本机号码一键登录', // 授权按钮文案 默认值:“本机号码一键登录”
borderRadius: '24px' // 授权按钮圆角 默认值:"24px" (按钮高度的一半)
},
otherLoginButton: {
visible: true, // 是否显示其他登录按钮,默认值:true
normalColor: '', // 其他登录按钮正常状态背景颜色 默认值:透明
highlightColor: '', // 其他登录按钮按下状态背景颜色 默认值:透明
textColor: '#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', // 文字颜色 默认值:
termsColor: '#313743', // 协议文字颜色 默认值:
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() {
//
// 运营商一键登录预登录
uni.getProvider({
service: 'oauth',
success: (res) => {
console.log(res.provider);
if (~res.provider.indexOf('univerify')) {
univerifyManager.preLogin({
provider: 'univerify'
});
}
}
});
//
},
mounted() {
//
this.checkEnvironment(1);
// 订阅自定义按钮点击事件
univerifyManager.onButtonsClick(this.callback);
//
},
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>