uniapp Apple iOS 绑定解绑

绑定
- uni.login 拉起Apple的登录授权，获取返回的唯一标识：res.authResult.openid
- 请求后端服务，保存绑定状态
- 提示：操作成功
解绑
- uni.showModal确认弹框，是否解绑
- 请求后端服务，保存绑定状态
- 提示：操作成功

结构

<view class="cu-list menu"><view class="cu-item arrow" v-if="showIOS" @click="boundApple"><view class="content">Apple绑定</view><view class="action"><text v-if="bindApple" class="text-gray">已绑定</text><text v-else class="text-red">去绑定</text></view></view>
</view>

逻辑

export default {name: 'BindAccount',components: {},props: {},data() {return {showIOS: isAppleLogin(),  // 是否显示iOS登录bindApple: false            // 是否绑定Apple}},created() {this.bindApple = false;          // 请求获取是否已绑定},methods: {async boundApple() {const provider = 'apple'if (this.bindApple) {// 已绑定await modal({         // 封装 uni.showModal 确认弹框title: '提示',content: '解除绑定后，将无法用Apple登录，确定要解绑吗？'})// #ifdef APP-PLUSconst system = uni.getSystemInfoSync()if (system.platform == 'ios') {plus.oauth.getServices((services) => {const providers = services.reduce((cur, next) => {cur.push(next.id);return cur}, [])const apple = services[providers.indexOf(provider)]apple.logout((res) => {console.log('解绑成功', res)}, (err) => {console.log('解绑失败', err)})})}// #endif// 请求后端服务 保存绑定状态// await ...uni.showToast({ title: '操作成功', icon: 'none' });} else {// 未绑定const res = await login(provider);    // 封装 uni.login 拉起Apple的登录授权console.log('--- openId --->', res.authResult.openid); // 唯一标识// 请求后端服务 保存绑定状态// await ...uni.showToast({ title: '操作成功', icon: 'none' });}}}
}

样式使用colorUI：ColorUI-UniApp - DCloud 插件市场

一些工具方法

/*** 是否显示iOS登录*/
export function isAppleLogin() {const systemInfo = uni.getSystemInfoSync();if (systemInfo.platform == 'ios') {let systemVersion = systemInfo.system.replace(/[^0-9\\.\\^0-9]/ig, ''); // 'iOS 14.4.2' => 14.4.2if (systemVersion && parseFloat(systemVersion) > 13) {// 操作系统版本 && 只有 iOS13+ 才显示Apple登录的选项return true;}}return false;
}
/*** 封装 uni.showModal* @param {Object} params*/
export function modal(params) {return new Promise((resolve, reject) => {uni.showModal({...params,success: (res) => {if (res.confirm) {resolve()} else {reject()}}})})
}
/*** 封装 uni.login* @param {String} provider*/
export function login(provider) {return new Promise((resolve, reject) => {uni.login({provider,success: (res) => {if (res.errMsg == 'login:ok') {resolve(res);} else {reject(res);}},fail: (err) => {reject(err);}})})
}

uniapp Apple iOS 绑定解绑相关推荐

uniapp 账号登陆，账号绑定/解绑流程，躺坑
第一次开发uniapp微信小程序,记录一下开发中遇到的流程以及坑账号登陆 1.uni.login 获取code,在调用接口传入code获取uKey 绑定账号/解绑 1.uni.login获取code ...
jquery事件绑定解绑机制源码分析
引子为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){alert("The par ...
JQuery事件绑定解绑方法小结
常用的方法绑定:bind().delegate().on() 解绑:unbind().undelegate().off() 此外还有live() 不过JQuery1.9及其以上版本删除了此方法推荐 ...
linux 网卡绑定解绑,网卡绑定开机绑定，关机解绑
Linux下实现双网卡负载均衡系统环境:RHEL5根据甘肃兰州实际情况的双网卡绑定方案, 方案思路:开机绑定,关机解绑一.建立虚拟网络接口ifcfg-bond0文件[root@yangwenjun ...
44session绑定解绑、钝化活化
BeanListener监听绑定或者解绑 HttpSessionActivationListener,Serializable 监听钝化活化 Serializable接口拿来实现获取session里面 ...
华为云如何绑定/解绑二次验证码/虚拟MFA/谷歌身份验证器？
工具华为云平台微信小程序二次验证码方法登陆华为云平台,点击账户名,点击"安全设置" 点击"虚拟MFA"中的"立即绑定",进行绑定无 ...
阿里云绑定解绑第三方支付宝，淘宝账号
阿里云上有个一直常用的很早注册的一个账号,后来支付宝登录授权又自动生成了一个账号弄成了两个账号,始终没有找到绑定和解绑支付宝账号的功能,找了人工客服,响应很神速,貌似部分用户的账号在安全设置页面账号名 ...
微信绑定/解绑设备ticket
在微信绑定和解绑的时候需要一个ticke来进行该过程可是一直没有获取到ticket 一直都是返回fail 后来发现原来是需要在原来是需要初始化设备库,才能或得到ticket
安卓服务service全解，生命周期，前台服务、后台服务，启动注销、绑定解绑，注册
全栈工程师开发手册 (作者:栾鹏) python教程全解定义服务(服务的生命周期) 调用context.startService()时依次执行 ->onCreate()- >onStar ...

uniapp Apple iOS 绑定解绑

uniapp Apple iOS 绑定解绑相关推荐

最新文章

热门文章