SpringBoot+Vue实现第三方支付宝登录(二)

1 支付宝登录授权流程

本步骤的作用：

　　登录 开放平台控制台 获取创建应用的 APPID

　　接入支付宝登录前，网站需首先进行申请，获得对应的appid，以保证后续流程中可正确对网站与用户进行验证与授权。

　   注意：对appid和appkey信息进行保密，不要随意泄漏。

2 放置“支付宝登录”按钮

本步骤的作用：

　　在网站页面上放置“支付宝登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出支付宝登录对话框 。

2.1 下载“支付宝登录”按钮图片，并将按钮放置在页面合适的位置

　　按钮图片下载： 点击这里下载 。

　　可以到阿里矢量图库下载更多图标：阿里巴巴矢量图标库 。

　　按照UI规范，将按钮放置在页面合适的位置：点击这里查看 。

2.2 为“支付宝登录”按钮添加前台代码

2.2.1 效果演示

2.2.2 前端代码(Vue)

　　为了实现上述效果，应该为“支付宝登录”按钮图片添加如下前台代码：

  第三方登录:
  
  
  
  
  
  

// 支付宝登录
handleZhiFuBaoLogin() {
  this.dialogVisible = true;
  this.pictureType = 'ZhiFuBaoLogin'
},

2.2.3 后端代码(Java)

　　支付宝登录配置文件信息：

# 支付宝登录配置
zhifubao.appID = 66666666 （ 替换成你的 ）
zhifubao.redirectURI = https://www.youyoushop.work/zhiFuBaoCallback （ 替换成你的 ）
zhifubao.authorizeURL = https://openauth.alipay.com/oauth2/publicAppAuthorize.htm
zhifubao.gateway = https://openapi.alipay.com/gateway.do
zhifubao.appPrivateKey = MIIujfisadjfeifjsaldjfjaejfufsdf0d8fsad （ 替换成你的私钥 ）
zhifubao.alipayPublicKey = MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAlO1HqdX5uME+xdtMXY3JiKq27FbovsgdTUqaUKhF （ 替换成你的公钥 ）

　　读取配置文件信息常量类：

package com.liyh.modules.security.constants;

import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

@Data
@Configuration
@PropertySource("classpath:thirdparty/config.properties")  // 指定配置文件的路径，属性文件需放在根目录的resources文件夹下面，才能被读取出来
public class ZhiFuBaoConstants {

   @Value("${zhifubao.appID}")
   private String appID;

   @Value("${zhifubao.redirectURI}")
   private String redirectURI;

   @Value("${zhifubao.authorizeURL}")
   private String authorizeURL;

   @Value("${zhifubao.gateway}")
   private String gateway;

   @Value("${zhifubao.appPrivateKey}")
   private String appPrivateKey;

   @Value("${zhifubao.alipayPublicKey}")
   private String alipayPublicKey;

}

　　Conteoller（获取支付宝登录的url）

@ApiOperation("获得跳转到支付宝登录页的url")
@GetMapping("/getZhiFuBaoCode")
public ResponseEntity