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

时间：2024-01-25 22:27:12

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

 

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

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

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

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

 授权页

<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>





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

 

 

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

 

 

 

    

     

 

 

相关文章