springboot+vue+對接支付寶接口+二維碼掃描支付功能（沙箱環(huán)境）
更新時間：2020年10月15日 09:21:52 作者：￡漫步 云端彡
這篇文章主要介紹了springboot+vue+對接支付寶接口+二維碼掃描支付（沙箱環(huán)境）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1. 什么是支付寶接口（沙箱環(huán)境）？
記錄時間：2020年10月15日3:55
現如今，手機支付已相當普遍，而作為開發(fā)人員應該對手機支付操作有所了解。而支付寶接口是支付寶提供的一個接口，用來對接軟件應用程序在進行金錢交易使用。然后對于編程愛好者而言，想學習這一點就有點難，因為要想使用支付寶接口，必須前提是使用軟件應用程序，軟件應用程序需要向支付寶申請，提交一系列資料，這一點是實現不了的。這就對開發(fā)者增加了一定的難度，因為產品沒有上線，然后需要對接支付寶接口就是很大的問題，所以出現了沙箱環(huán)境，具有虛擬的用戶和管理員賬戶，進行實驗測試是否對接成功。接下來就根據我的經驗，簡單的介紹一下我的使用和學習過程。
使用技術+編程軟件：
springboot（idea）vue + elementui（HBuilderX）+ vue-qr（vue生成二維碼框架）NATAPP（連接外網，實現支付寶回調）websocket（實現前端響應）
步驟：
準備沙箱環(huán)境JAVA + springboot 中使用 SDK 連接支付寶接口配置前端使用vue+elementui頁面設計需要注意點結果測試
首先創(chuàng)建應用，這里是沙箱環(huán)境，先準備沙箱環(huán)境：
百度搜索**支付寶螞蟻金服**，登錄支付包賬號，出現如下顯示：
這里是創(chuàng)建應用的地方，也就是說有項目要上線時，在這里申請。使用沙箱環(huán)境的話，點擊左上角開放平臺，然后往下拉，會出現沙箱二字，點擊進入即可：
然后就可以看到支付寶官網介紹的沙箱環(huán)境的使用，其實官網已經介紹的非常詳細了，如有小伙伴們看著嫌麻煩，可以根據我學習的步驟作為參考。在如何使用沙箱環(huán)境下點擊沙箱應用鏈接，去配置自己的沙箱環(huán)境。
點擊 i 符號，上面有提示鏈接，如何生成RSA2密鑰，這里就不詳細介紹了，官網寫的非常明白，我這么笨的人也可以學會，相信小伙伴們也可以學會的。按照步驟會生成兩個文件：應用公鑰和應用私鑰。記住，是應用公鑰，而不是支付寶公鑰。這里學習過程中沒有使用證書模式。
然后點擊RSA2的設置/查看。將產生的應用公鑰復制進去就可以了，而下面會生成支付寶公鑰，在后續(xù)連接過程中非常重要，需要區(qū)分使用的是支付寶公鑰還是應用公鑰。
JAVA + springboot 中使用 SDK 連接支付寶接口配置
這里是官網使用SDK的方法，這里使用舊版的方式，新版的方式我使用過程中出現某些問題不會解決。
使用之前，先封裝幾個配置，第一個是連接支付寶的配置：
import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.internal.util.AlipaySignature;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;
/**
* 支付寶接口配置類
*/
@Configuration
public class PayConfig {
// 請?zhí)顚懩腁ppId，例如：2019091767145019（必填）
private static final String appID = "2016102500758313";
//應用私鑰，這里修改生成的私鑰即可（必填）
private static final String privateKey = "";
//支付寶公鑰，而非應用公鑰（必填）
public static final String publicKey = "";
//默認即可（必填）
public static final String charset = "utf-8";
//默認即可（必填）
public static final String signType = "RSA2";
@Bean
public AlipayClient alipayClient(){
//沙箱環(huán)境使用https://openapi.alipaydev.com/gateway.do，線上環(huán)境使用https://openapi.alipay.com/gateway.do
return new DefaultAlipayClient("https://openapi.alipaydev.com/gateway.do", appID, privateKey, "json", charset, publicKey, signType);
}
/**
* 驗簽，是否正確
*/
public static boolean checkSign(HttpServletRequest request){
Map<String, String[]> requestMap = request.getParameterMap();
Map<String, String> paramsMap = new HashMap<>();
requestMap.forEach((key, values) -> {
String strs = "";
for(String value : values) {
strs = strs + value;
}
System.out.println(key +"===>"+strs);
paramsMap.put(key, strs);
});
System.out.println();
//調用SDK驗證簽名
try {
return AlipaySignature.rsaCheckV1(paramsMap, PayConfig.publicKey, PayConfig.charset, PayConfig.signType);
} catch (AlipayApiException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("*********************驗簽失敗********************");
return false;
}
}
}
然后封裝一個支付寶回調的參數對象，這里就不需要自己手動去獲取參數了
import java.io.Serializable;
/**
* 支付寶回調參數
*/
public class AliReturnPayBean implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
* 開發(fā)者的app_id
*/
private String app_id;
/**
* 商戶訂單號
*/
private String out_trade_no;
/**
* 簽名
*/
private String sign;
/**
* 交易狀態(tài)
*/
private String trade_status;
/**
* 支付寶交易號
*/
private String trade_no;
/**
* 交易的金額
*/
private String total_amount;
public String getTotal_amount() {
return total_amount;
}
public void setTotal_amount(String total_amount) {
this.total_amount = total_amount;
}
public String getApp_id() {
return app_id;
}
public void setApp_id(String app_id) {
this.app_id = app_id;
}
public String getOut_trade_no() {
return out_trade_no;
}
public void setOut_trade_no(String out_trade_no) {
this.out_trade_no = out_trade_no;
}
public String getSign() {
return sign;
}
public void setSign(String sign) {
this.sign = sign;
}
public String getTrade_status() {
return trade_status;
}
public void setTrade_status(String trade_status) {
this.trade_status = trade_status;
}
public String getTrade_no() {
return trade_no;
}
public void setTrade_no(String trade_no) {
this.trade_no = trade_no;
}
@Override
public String toString() {
return "AliReturnPayBean [app_id=" + app_id + ", out_trade_no=" + out_trade_no + ", sign=" + sign
+ ", trade_status=" + trade_status + ", trade_no=" + trade_no + "]";
}
}
然后寫一個控制層去連接支付寶，控制層必須是@Controller修飾，而不是@RestController修飾，因為支付寶的回調函數里面返回的是請求。具體事例如下：
前提：在pom.xml 中導入SDK依賴:
<dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alipay-sdk-java</artifactId> <version>4.10.145.ALL</version> </dependency>
package com.example.zhifubaozhifu.controller;
import com.alibaba.fastjson.JSON;
import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.request.AlipayTradePrecreateRequest;
import com.alipay.api.response.AlipayTradePrecreateResponse;
import com.example.zhifubaozhifu.config.PayConfig;
import com.example.zhifubaozhifu.util.AliReturnPayBean;
import com.example.zhifubaozhifu.util.Shop;
import com.example.zhifubaozhifu.util.WebSocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.math.BigDecimal;
@Controller
@Slf4j
public class Test {
@Autowired
private AlipayClient alipayClient;
@Autowired
private WebSocket webSocket;
@RequestMapping("/createQR")
@ResponseBody
public String send() throws AlipayApiException {
AlipayTradePrecreateRequest request = new AlipayTradePrecreateRequest(); //創(chuàng)建API對應的request類
// 在下面會介紹notifyUrl怎么來的
request.setNotifyUrl("http://cv95x3.natappfree.cc/call");
//同步回調地址
// request.setReturnUrl("");
request.setBizContent(" {" +
" \"primary_industry_name\":\"IT科技/IT軟件與服務\"," +
" \"primary_industry_code\":\"10001/20102\"," +
" \"secondary_industry_code\":\"10001/20102\"," +
" \"secondary_industry_name\":\"IT科技/IT軟件與服務\"" +
" }");;
AlipayTradePrecreateResponse response = alipayClient.execute(request);
String path = "zhifu.jpg";
if (response.isSuccess()) {
System.out.println("調用成功");
return response.getQrCode();
} else {
System.out.println("調用失敗");
}
return "";
}
/**
* 支付寶回調函數
* @param request
* @param response
* @param returnPay
* @throws IOException
*/
@RequestMapping("/call")
public void call(HttpServletRequest request, HttpServletResponse response, AliReturnPayBean returnPay) throws IOException {
response.setContentType("type=text/html;charset=UTF-8");
log.info("支付寶的的回調函數被調用");
if (!PayConfig.checkSign(request)) {
log.info("驗簽失敗");
response.getWriter().write("failture");
return;
}
if (returnPay == null) {
log.info("支付寶的returnPay返回為空");
response.getWriter().write("success");
return;
}
log.info("支付寶的returnPay" + returnPay.toString());
//表示支付成功狀態(tài)下的操作
if (returnPay.getTrade_status().equals("TRADE_SUCCESS")) {
log.info("支付寶的支付狀態(tài)為TRADE_SUCCESS");
//業(yè)務邏輯處理 ,webSocket在下面會有介紹配置
webSocket.sendMessage("true");
}
response.getWriter().write("success");
}
}
前端使用vue+elementui頁面設計：
vue項目的搭建這里就不介紹，首先準備環(huán)境，添加 vue-qr 插件：
npm install vue-qr --save
前端代碼：
<template>
<div>
<!-- 支付按鈕，模擬支付操作 -->
<van-button type="primary" @click="pay">支付</van-button>
<el-dialog :title="paySucc?'支付成功':'掃碼支付'" :visible.sync="dialogVisible" width="16%" center>
<!-- 生成二維碼圖片 -->
<vueQr :text="text" :size="200" v-if="!paySucc"></vueQr>
<!-- 使用websocket監(jiān)控是否掃描，掃描成功顯示成功并退出界面 -->
<span class="iconfont icon-success" style="position: relative;font-size: 100px;color:#42B983;margin-left: 50px;top:-10px;" v-else></span>
</el-dialog>
</div>
</template>
<script>
import vueQr from 'vue-qr'
export default {
data() {
return {
dialogVisible: false,
text: "",
paySucc: false
}
},
components: {
vueQr
},
methods: {
pay() {
let _this = this;
_this.paySucc = false;
_this.dialogVisible = true;
this.axios.request("http://localhost:8081/createQR")
.then((response) => {
_this.text = response.data;
_this.dialogVisible = true;
//使用webSocket發(fā)送請求，下面會簡單介紹websocket使用
if ("WebSocket" in window) {
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:8081/bindingRecord");
ws.onopen = function() {
// Web Socket 已連接上，使用 send() 方法發(fā)送數據
// ws.send("data");
// alert("數據發(fā)送中...");
};
ws.onmessage = function(evt) {
var received_msg = evt.data;
// alert("數據已接收..." + evt.data);
if (Boolean(evt.data)) {
_this.paySucc = true;
setTimeout(() => {
_this.dialogVisible = false;
}, 3 * 1000);
}
ws.close();
};
ws.onclose = function() {
// // 關閉 websocket
console.log("連接已關閉...");
};
} else {
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}).catch((err) => {
console.log(err)
})
},
back(dataUrl, id) {
console.log(dataUrl, id)
}
}
}
</script>
<style>
.btn {
margin-left: 100px;
}
</style>
這樣前后端代碼就準備就緒了，再上面的代碼中有兩個需要注意的： 第一個問題是：notifyUrl使用的url是外網地址，并不是IP地址，否則會無法回調。但是在學習環(huán)境下使用不了外網地址。這就需要使用**NATAPP**。百度搜索NATAPp官網，點進去下載，它是一個natapp.exe 應用，這有這個。在官網注冊賬號，點擊購買免費隧道（免費隧道只能購買兩個，要珍惜哦。隧道協(xié)議寫web，其他的就按要本地環(huán)境配置就可以了）。購買之后就會有下面一條自己的隧道
雙擊natapp.exe ,進入控制臺，輸入以下命令，開啟隧道：
# 這里的值是上面的authtoken的值 natapp --authtoken=值
之后如下顯示：
這里的外網連接地址，就是notifyUrl的地址，然后再加上方法mapping路徑即可，如我的是：http://cv95x3.natappfree.cc/call
第二個問題是：支付成功后，回調函數執(zhí)行了，如何告訴前端我已經支付成功，同時關閉掃描二維碼按鈕，這里就用到了websocket,這里不詳細介紹websocket是什么，只要知道一點，它是可以監(jiān)聽到后端是否發(fā)送信息。首先在pom.xml中導入依賴：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.3.4.RELEASE</version> </dependency>
然后創(chuàng)建一個webconfig的配置類：
package com.example.zhifubaozhifu.util;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* @desc: WebSocket服務
*
**/
//連接webSocket服務的URL
@ServerEndpoint("/bindingRecord")
@Component
@Slf4j
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();
/**
* 新建webSocket配置類
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
/**
* 建立連接
* @param session
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSockets.add(this);
log.info("【新建連接】，連接總數:{}", webSockets.size());
}
/**
* 斷開連接
*/
@OnClose
public void onClose(){
webSockets.remove(this);
log.info("【斷開連接】，連接總數:{}", webSockets.size());
}
/**
* 接收到信息
* @param message
*/
@OnMessage
public void onMessage(String message){
log.info("【收到】，客戶端的信息:{}，連接總數:{}", message, webSockets.size());
}
/**
* 發(fā)送消息
* @param message
*/
public void sendMessage(String message){
log.info("【廣播發(fā)送】，信息:{}，總連接數:{}", message, webSockets.size());
for (WebSocket webSocket : webSockets) {
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (IOException e) {
log.info("【廣播發(fā)送】，信息異常:{}", e.fillInStackTrace());
}
}
}
}
然后使用的時候調用方法onMessage即可接收消息，使用onMessage即可廣發(fā)消息。
前端使用步驟：
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的瀏覽器支持 WebSocket!");
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已連接上，使用 send() 方法發(fā)送數據
ws.send("發(fā)送數據");
alert("數據發(fā)送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("數據已接收...");
};
ws.onclose = function()
{
// 關閉 websocket
alert("連接已關閉...");
};
}
else
{
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}
</script>
想詳細了解的話，可以去菜鳥教程學習。
使用思路： 前端先創(chuàng)建websocket , 連接到后端websocket ，這樣才能將websocket通道連接。當支付成功之后，后端向前端反饋支付成功信息，前端監(jiān)控接收到消息后做處理，即關閉二維碼對話框。
測試結果：
然后下載支付寶沙箱版手機即可掃描模擬支付，在螞蟻金服的沙箱環(huán)境中就有二維碼下載，如下圖：
這里指記錄了支付到回調處理的操作，再這之上還可進行進一步的封裝。
搞定，記錄結束。
結束時間：2020年10月15日6:12
到此這篇關于springboot+vue+對接支付寶接口+二維碼掃描支付（沙箱環(huán)境）的文章就介紹到這了,更多相關springboot對接支付寶支付接口內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue實現商城秒殺倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
在vue中，使用watch來響應數據的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
ElementUI之表格toggleRowSelection選中踩坑記錄
這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細解析了vue.js數據雙向綁定原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue3路由進階實戰(zhàn)教程之參數傳遞與導航守衛(wèi)核心技術
本文介紹了路由參數傳遞的進階應用技巧,包括路由配置與參數驗證、組件參數接收、查詢參數傳遞、導航守衛(wèi)以及性能優(yōu)化與最佳實踐,感興趣的朋友一起看看吧2025-03-03
vue項目中在外部js文件中直接調用vue實例的方法比如說this
這篇文章主要介紹了vue項目中在外部js文件中直接調用vue實例的方法比如說this,需要的朋友可以參考下2019-04-04
生成二維碼是一種常見的需求,無論是用于商業(yè)宣傳還是個人分享,二維碼都可以提供快速方便的方式來傳遞信息,在Vue框架中,我們可以使用qrcode庫來輕松地生成二維碼,本篇博文將介紹如何安裝qrcode庫,并通過一個實際例子來展示如何生成二維碼,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了Vue實現路由跳轉和嵌套，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要給大家介紹關于前端Vue3父子組件傳參有關sync修飾符的用法詳細解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09