2025年网页版的支付宝授权登录（vue+java）

科技前沿 • 2025-01-10 23:20 • 阅读 40

大家好，我是讯享网，很高兴认识大家。

api接口文档：https://docs.open.alipay.com/289/

后台管理系统原本是用账号密码登录的，不过需求要改成支付宝授权，

前端仅仅需要改登录页，以及添加一个授权返回页

大致流程：访问首页，因为我们有分（测试，开发）环境的，所以访问支付宝地址以及backurl是从后台获取的

因为在支付宝授权的缓存暂无办法清除，可以搞个中转页，我就不写了。

后端可以参考：

官方文档：PC 网页内获取用户信息｜网页&移动应用

支付宝支付-手机浏览器H5支付 - niceyoo - 博客园

讯享网

支付宝如何获取buyer_id (即user_id)。支付宝服务窗（生活号）支付方式_Emine-CSDN博客_支付宝获取userid

支付宝生活号获取 userId 和生活号支付 - 张玉坤 - 博客园

前端授权页

<script> import { getZFBINfo } from 'api/login'; export default { data() { return {} }, methods: { handleLogin() { getZFBINfo().then((res) => { //backUrl是授权返回页（去后台调支付宝接口获取token和user_id,然后进行用户验证和其他逻辑处理） const backUrl = encodeURIComponent(res.backUrl) //url是跳转到支付宝登录页面，然后他会跳转到redirect_uri const url = res.url + '&scope=auth_base&redirect_uri='+backUrl window.location.href = url }).catch((res) => { console.log('error', res) }) } }, creatd() { //这里是一进页面就会加载的操作,例如执行handleLogin方法 handleLogin(); }, destroyed() {} } </script>

讯享网

讯享网 前端授权返回页

<script> import { getByAuthCode } from 'api/login';//这个方法是去后台接口调支付宝接口获取userid和token，然后进行业务逻辑的处理 import { mapGetters } from 'vuex'; import { setToken, removeToken } from 'utils/auth'; export default { data() { return {} }, computed: { ...mapGetters([ 'elements' ]) },created() { this.getCode() }, methods: { getCode() { //获取当前页面的url let url = decodeURI(location.href) let theRequest = new Object() if (url.indexOf('?') !== -1) { let str = url.substr(1); let strs = str.split('&'); for (let i = 0; i < strs.length; i++) { theRequest[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1]); } } if (theRequest.auth_code) { getByAuthCode(theRequest.auth_code).then((res)=>{ // 获取到token if(res.data){ setToken(res.data); this.$store.commit('SET_TOKEN', res.data); //进入首页 this.$router.replace({path: '/dashboard'}) }else{ alert("用户不存在，请清除缓存重新登录"); //如果有写中转页，可以调到中转页 this.$router.push({path: `/login`}) } }).catch((res) => { console.log('error', res) }) } } } } </script>

讯享网如果扫码登录跳转到这个地方

是没有在支付宝管理后台配置

2025年网页版的支付宝授权登录（vue+java）

相关推荐