uniapp 苹果授权登录

文章发布于2021年03月15日 16:43, 归类于: 前端

App模块设置

打开 HBuilder X-manifest.json-App模块设置-OAuth(登录授权),勾选苹果登录。

uniapp 苹果授权登录

示例代码

<template>
	<!-- ios 13以上的系统才支持 apple 授权登录 -->
	<view class="c-apple-login-btn" v-if="system >= 13 && platform=='ios'" @click="appleAuth">
		<image class="icon" src="/static/images/icon/User/apple.png" mode=""></image>
		<text>通过</text>
		<text class="Apple">Apple</text>
		<text>登录</text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				system: '', // 系统版本
				platform: '', // 平台
				identityToken: ''
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.system = res.system || ''
					this.platform = res.platform || ''
				},
				fail: (err) => {},
				complete: () => {}
			})
		},
		methods: {
			// 苹果授权登录
			appleAuth() {
				uni.login({
					provider: 'apple',
					success: loginRes => {
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {
                // 获取 identityToken
								if (userInfoRes.userInfo && userInfoRes.userInfo.identityToken) {
									// 请求后台
									uni.request({
										url: 'https://www.xxx.com/request', //仅为示例,并非真实接口地址。
										data: {
											identityToken
										},
										success: (res) => {}
									});
								}
							},
							fail: (err) => {
								this.$ShowToast('登录失败')
							}
						})
					},
					fail: (err) => {
						this.$ShowToast('登录失败')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.c-apple-login-btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		margin: 30upx auto;
		width: 360upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 12upx;
		background-color: #000000;

		.icon {
			position: relative;
			top: -2upx;
			margin-right: 15upx;
			width: 26upx;
			height: 26upx;
		}

		text {
			color: #ffffff;
			font-size: 32upx;
			font-weight: bold;
		}

		.Apple {
			margin: 0 6upx;
		}
	}
</style>

uniapp 苹果授权登录

参考

https://developer.apple.com/cn/app-store/review/guidelines/#sign-in-with-apple https://ask.dcloud.net.cn/article/36651

转载请注明来源:《 uniapp 苹果授权登录》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1615797794.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager() 下一篇:uniapp app 跳转到微信小程序