uniapp支付宝小程序授权用户信息、授权手机号码

需求说明

完成需求

授权用户手机号码前,需要先在支付宝开放平台—>控制台—>产品绑定,绑定产品 – 获取会员手机号

用到的API:uni.getOpenUserInfo,uni.getPhoneNumber

<template>
	<view style="padding:30rpx">
		<u-navbar title="演示" :is-back="false" />
		<button style="margin-top:100rpx" open-type="getAuthorize" scope="userInfo" @getAuthorize="getOpenUserInfo" @error="getInfoError">
			个人信息授权
		</button>

		<button style="margin-top:100rpx" open-type="getAuthorize" scope=phoneNumber @getAuthorize="getPhoneNumber" error="getPhoneError">
			手机号码授权
		</button>
	</view>
</template>

<script>
	export default {
            
     
		data() {
            
     
			return {
            
     

			};
		},
		onLoad() {
            
     

		},
		methods: {
            
     
            // 触发
			getOpenUserInfo() {
            
     
				uni.getOpenUserInfo({
            
     
					success: (res) => {
            
     
						let userinfo = JSON.parse(res.response).response
						console.log(userinfo)
						uni.showToast({
            
     
							title: "授权个人信息成功"
						});
					},
					fail: res => {
            
     
						uni.showToast({
            
     
							title: "授权个人信息失败"
						});
					}
				});
			},
			// 授权失败回调
			getInfoError() {
            
     
				uni.showToast({
            
     
					title: "取消授权个人信息"
				});
			},
			getPhoneNumber() {
            
     
				uni.getPhoneNumber({
            
     
					success: (res) => {
            
     
						let encryptedData = res.response;
						console.log(encryptedData)
						uni.showToast({
            
     
							title: "获得手机号码加密数据成功"
						});
						uni.request({
            
     
							url: 开发者的后端服务端,
							data: encryptedData,
						});
					},
					fail: (res) => {
            
     
						uni.showToast({
            
     
							title: "授权手机号码失败"
						});
					},
				});
			},
			getPhoneError() {
            
     
				uni.showToast({
            
     
					title: "取消手机号码授权"
				});
			},
		}
	}
</script>

<style scoped>

</style>
图1 演示页面 图2 弹出授权用户信息 图2 弹出用户手机号

经验分享 程序员 微信小程序 职场和发展