支付宝官方参考链接
https://opendocs.alipay.com/mini/api/openapi-authorize?pathHash=22642781
官方流程相关图片
服务器地址要改成自己公司的服务器地址
示例
1、基本结构
<template>
<view class="header">
<image src="../../../static/login/bg_login.png" mode="aspectFill" class="pictureOne"></image>
<!-- <text class="loginTitle">登录</text> -->
</view>
<!-- 头像 -->
<view class="avatar">
<button open-type="chooseAvatar" class="avatarButton" @chooseavatar="getavatar">
<image class="picture" mode="scaleToFill" :src="zfbUserStore.userInfo.avatar ? zfbUserStore.userInfo.avatar : '../../../static/login/logo.png'"></image>
</button>
</view>
<!-- 昵称 -->
<view class="nick_name">
<text class="infoName">用户昵称: {{ zfbUserStore.userInfo.nickName ? zfbUserStore.userInfo.nickName : '未知用户' }}</text>
</view>
<!-- 授权按钮 -->
<button
class="game"
v-if="!zfbUserStore.userInfo.avatar || !zfbUserStore.userInfo.nickName"
scope="userInfo"
open-type="getAuthorize"
@GetAuthorize="getOpenUserInfo"
@error="getInfoError"
>
支付宝授权登录
</button>
</template>
2、在storen里面创建一个zfb.js文件
import {
defineStore
} from 'pinia'
import {
ref
} from 'vue'
export const useLoginStore = defineStore('login',
() => {
// 当前地址
const user = ref({
nick_name: ''
})
const phoneNumber = ref('');
const userInfo = ref({
avatar_url: ''
});
const getAuthorCode = () => {
return new Promise((resolve, inject) => {
my.getAuthCode({
// scopes: 'auth_user',
scopes: ['auth_base'],
success: ({
authCode
}) => {
// console.log('authCode: ', authCode);
my.request({
// 你的服务器地址
url: 'https://cs.jiarenmai.com/addons/yun_shop/api.php?route=plugin.lease-toy.api.ali_yun.index&i=1',
data: {
authCode
},
success: (res) => {
// 获取需要的用户信息
console.log(res);
user.value = res.data;
// 获取需要的用户信息
// this.userInfo = JSON.parse(res.response).response;
// console.log(this.userInfo.avatar);
uni.setStorage({
key: 'user_info',
data: JSON.stringify(res.data)
});
resolve(res)
}
});
}
});
})
}
const getOpenUserInfo = () => {
return new Promise((resolve, inject) => {
my.getOpenUserInfo({
success: (res) => {
console.log('res---getOpenUserInfo--->>>', res);
userInfo.value = JSON.parse(res.response).response;
userInfo.value.avatar_url = res.avatar;
uni.setStorage({
key: 'avatar_url',
data: userInfo.value.avatar
});
uni.showToast({
title: '授权个人信息成功'
});
resolve(res)
},
fail: (res) => {
uni.showToast({
title: '授权个人信息失败'
});
inject(res)
}
});
})
}
const getPhoneNumber = () => {
return new Promise((resolve, inject) => {
my.getPhoneNumber({
success: (res) => {
// 修改
let encryptedData = res.response;
let timestamp = new Date().getTime();
// console.log(timestamp);
// console.log(encryptedData);
my.request({
//你的服务器地址
method: 'post',
url: 'https://cs.jiarenmai.com/addons/yun_shop/api.php?route=plugin.lease-toy.api.ali_yun.get-phone&i=1',
data: {
encryptedData: encryptedData,
appid: 1,
timestamp: timestamp,
scope: 'freelogin',
open_id: '2088132524985913'
},
success: (res) => {
console.log(res);
phoneNumber.value = res.data.data;
uni.setStorage({
key: 'phone_number',
data: res.data.data
});
uni.showToast({
title: '手机号授权成功'
});
resolve(res)
}
});
},
fail: (res) => {
console.log(res);
inject(res)
}
});
})
};
const logout = () => {
console.log('--logout-----');
uni.showModal({
content: '确定要退出吗?',
success: (result) => {
console.log('-success---', result);
if (result.confirm) {
console.log('zfb--确定退出', 1111);
userInfo.value.nickName = '';
userInfo.value.avatar = '';
phoneNumber.value = '';
uni.clearStorage();
uni.showToast({
title: '退出成功',
icon: 'success'
})
} else if (result.cancel) {
console.log('zfb--取消退出', 222);
uni.showToast({
title: '取消退出',
icon: 'none'
})
}
}
});
};
return {
user,
phoneNumber,
userInfo,
getAuthorCode,
getOpenUserInfo,
getPhoneNumber,
logout
}
}, {
persist: {
}
}
)
3、在授权的页面导入store的zfb文件
<script setup>
// 支付宝的登录
const zfbUserStore = useLoginStore();
// 支付宝---授权登录
const getOpenUserInfo = () => {
console.log('getOpenUserInfo', 111111);
zfbUserStore.getAuthorCode();
zfbUserStore.getOpenUserInfo();
};
const getPhoneNumber = () => {
zfbUserStore.getPhoneNumber();
};
const getPhoneError = () => {
uni.showToast({
title: '取消手机号码授权'
});
};
</script>