feat 获取OpenId演示界面, 优化认证授权地址配置

2026-08-12 15:35:39 +08:00 · 2024-06-21 18:03:05 +08:00
parent cd345d64f1
commit 83f368a99f
9 changed files with 233 additions and 16 deletions
--- a/src/views/demo/cashier/Cashier.vue
+++ b/src/views/demo/cashier/Cashier.vue
@@ -1,5 +1,6 @@
 <template>
  <div style="background-color: #f5f5f7">
+    <!--  云闪付表单方式专用  -->
    <div v-html="payForm"></div>
    <div class="page paydemo">
      <div class="blog-container" id="container">
--- a/src/views/demo/openid/OpenId.api.ts
+++ b/src/views/demo/openid/OpenId.api.ts
@@ -0,0 +1,66 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 微信 返回获取OpenId授权页面地址和标识码
+ */
+export function wxGenerateAuthUrl() {
+  return defHttp.post<Result<AuthUrlResult>>({
+    url: '/wechat/auth/generateAuthUrl',
+  })
+}
+
+/**
+ * 根据标识码查询OpenId
+ */
+export function wxGetOpenId(code) {
+  return defHttp.get<Result<OpenIdResult>>({
+    url: '/wechat/auth/queryOpenId',
+    params: { code },
+  })
+}
+
+/**
+ * 支付宝 返回获取OpenId授权页面地址和标识码
+ */
+export function aliGenerateAuthUrl() {
+  return defHttp.post<Result<AuthUrlResult>>({
+    url: '/alipay/auth/generateAuthUrl',
+  })
+}
+
+/**
+ * 支付宝 根据标识码查询OpenId
+ */
+export function aliGetOpenId(code) {
+  return defHttp.get<Result<OpenIdResult>>({
+    url: '/alipay/auth/queryOpenId',
+    params: { code },
+  })
+}
+
+/**
+ * 获取授权访问链接和标识码
+ */
+export interface AuthUrlResult {
+  // 授权访问链接
+  authUrl: string
+  // 标识码, 用于查询是否获取到了OpenId
+  code: string
+}
+
+/**
+ * OpenId结果类
+ */
+export interface OpenIdResult {
+  // OpenId
+  openId: string
+  /**
+   * 状态
+   * pending:查询中
+   * success:查询成功
+   * fail:查询失败
+   */
+  status: string
+}
--- a/src/views/demo/openid/OpenIdDemo.vue
+++ b/src/views/demo/openid/OpenIdDemo.vue
@@ -0,0 +1,122 @@
+<template>
+  <div style="display: flex; height: 768px; margin: 20px; flex-direction: column; align-items: center; background: white; padding: 15px">
+    <div class="mt-15px mb-15px" style="display: flex; font-size: 32px; flex-direction: row; align-items: center; justify-content: center">
+      <a-form-item label="支付通道">
+        <a-radio-group v-model:value="channel" button-style="solid" @change="getUrl">
+          <a-radio-button :value="payChannelEnum.WECHAT">微信</a-radio-button>
+          <a-radio-button :value="payChannelEnum.ALI">支付宝</a-radio-button>
+        </a-radio-group>
+      </a-form-item> </div
+    ><qr-code :options="{ margin: 0 }" :width="250" :value="url" />
+    <div style="font-size: 26px"> {{}} </div>
+    <a-form-item label="" style="margin-top: 30px">
+      <a-input v-model:value="openId" disabled placeholder="请扫码获取OpenID" style="width: 350px" />
+      <a-button type="primary" :disabled="!openId" @click="copy">复制OpenID</a-button>
+    </a-form-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref, unref } from 'vue'
+  import { payChannelEnum } from '/@/enums/payment/payChannelEnum'
+  import { aliGenerateAuthUrl, aliGetOpenId, wxGenerateAuthUrl, wxGetOpenId } from '/@/views/demo/openid/OpenId.api'
+  import { useIntervalFn } from '@vueuse/shared'
+  import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'
+  import { useMessage } from '/@/hooks/web/useMessage'
+
+  const { createMessage } = useMessage()
+
+  const channel = ref(payChannelEnum.WECHAT)
+  const code = ref('')
+  const url = ref('null')
+  const openId = ref('')
+  let pause: any = () => {}
+
+  function copy() {
+    useCopyToClipboard(openId.value)
+    createMessage.info('已复制到剪贴板中')
+  }
+
+  onMounted(() => {
+    getUrl()
+  })
+
+  /**
+   * 获取扫码链接
+   */
+  function getUrl() {
+    openId.value = ''
+    if (channel.value === payChannelEnum.ALI) {
+      aliGenerateAuthUrl().then((res) => {
+        code.value = res.data.code
+        url.value = res.data.authUrl
+        alipayGet()
+      })
+    } else {
+      wxGenerateAuthUrl().then((res) => {
+        code.value = res.data.code
+        url.value = res.data.authUrl
+        wxGet()
+      })
+    }
+  }
+
+  /**
+   * 微信查询
+   */
+  function wxGet() {
+    pause()
+    let intervalFn = useIntervalFn(
+      () => {
+        wxGetOpenId(code.value)
+          .then((res) => {
+            // 成功
+            if (res.data.status === 'success') {
+              createMessage.success('获取OpenID成功')
+              openId.value = res.data.openId
+              pause()
+            }
+          })
+          .catch((err) => {
+            // 失败
+            createMessage.error(err.message)
+            pause()
+          })
+      },
+      1000 * 3,
+      { immediate: false },
+    )
+    pause = intervalFn.pause
+    intervalFn.resume()
+  }
+  /**
+   * 支付宝查询
+   */
+  function alipayGet() {
+    pause()
+    let intervalFn = useIntervalFn(
+      () => {
+        aliGetOpenId(code.value)
+          .then((res) => {
+            // 成功
+            if (res.data.status === 'success') {
+              createMessage.success('获取OpenID成功')
+              openId.value = res.data.openId
+              pause()
+            }
+          })
+          .catch((err) => {
+            // 失败
+            createMessage.error(err.message)
+            pause()
+          })
+      },
+      1000 * 3,
+      { immediate: false },
+    )
+    pause = intervalFn.pause
+    intervalFn.resume()
+  }
+</script>
+<style scoped lang="less"></style>
--- a/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
+++ b/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
@@ -88,11 +88,7 @@
  import { useDict } from '/@/hooks/bootx/useDict'
  import { LabeledValue } from 'ant-design-vue/lib/select'
  import Icon from '/@/components/Icon'
-  import {
-    generateAliAuthUrl,
-    generateWxAuthUrl, queryAliOpenId,
-    queryWxOpenId
-  } from "/@/api/payment/WechatOpenId.api";
+  import { generateAliAuthUrl, generateWxAuthUrl, queryAliOpenId, queryWxOpenId } from '/@/api/payment/WechatOpenId.api'
  import OpenIdQrCode from './OpenIdQrCode.vue'
  import { useIntervalFn } from '@vueuse/shared'

--- a/src/views/payment/channel/alipay/config/AlipayConfig.api.ts
+++ b/src/views/payment/channel/alipay/config/AlipayConfig.api.ts
@@ -61,6 +61,8 @@ export interface AlipayConfig extends BaseEntity {
  limitAmount?: number
  // 商户账号ID
  alipayUserId?: string
+  // 授权回调地址
+  redirectUrl?: string
  // 服务器异步通知页面路径
  notifyUrl?: string
  // 页面跳转同步通知页面路径
--- a/src/views/payment/channel/alipay/config/AlipayConfigEdit.vue
+++ b/src/views/payment/channel/alipay/config/AlipayConfigEdit.vue
@@ -47,22 +47,33 @@
          </template>
          <a-input v-model:value="form.alipayUserId" placeholder="请输入合作者身份ID" />
        </a-form-item>
+        <a-form-item name="wxRedirectUrl">
+          <template #label>
+            <basic-title
+              helpMessage="不填写时默认使用平台配置中的系统地址，受到支付宝授权回调地址只可以配置一个个的限制，我们有时需要通过代理转发来绕过这个限制，
+                  此时回调地址就会与系统地址不一致"
+            >
+              授权回调地址
+            </basic-title>
+          </template>
+          <a-input placeholder="请输入支付宝授权回调地址" v-model:value="form.redirectUrl" />
+        </a-form-item>
        <a-form-item name="notifyUrl">
          <template #label>
-            <basic-title helpMessage="此处为本网关接收通知的地址, 而不是客户系统接收通知所需的地址"> 异步通知地址 </basic-title>
+            <basic-title helpMessage="为本网关接收支付宝相关的异步回调数据的地址, 而不是业务系统所需的地址"> 异步通知地址 </basic-title>
          </template>
-          <a-input v-model:value="form.notifyUrl" placeholder="请输入异步通知URL" style="width: calc(100% - 80px)" />
+          <a-input v-model:value="form.notifyUrl" placeholder="请输入异步通知地址" style="width: calc(100% - 80px)" />
          <a-button class="w-80px" type="primary" @click="genNotifyUrl">自动生成</a-button>
        </a-form-item>
        <a-form-item name="returnUrl">
          <template #label>
-            <basic-title helpMessage="此处为本网关接收通知的地址, 而不是客户系统接收通知所需的地址"> 同步通知地址 </basic-title>
+            <basic-title helpMessage="此处为本网关接收支付宝同步跳转通知的地址, 而不是业务系统所需的地址"> 同步通知地址 </basic-title>
          </template>
-          <a-input v-model:value="form.returnUrl" placeholder="请输入同步通知URL" style="width: calc(100% - 80px)" />
+          <a-input v-model:value="form.returnUrl" placeholder="请输入同步通知地址" style="width: calc(100% - 80px)" />
          <a-button class="w-80px" type="primary" @click="genReturnUrl">自动生成</a-button>
        </a-form-item>
-        <a-form-item label="支付网关URL" name="serverUrl">
-          <a-input v-model:value="form.serverUrl" placeholder="请输入支付网关URL" />
+        <a-form-item label="支付网关U地址" name="serverUrl">
+          <a-input v-model:value="form.serverUrl" placeholder="请输入支付网关地址" />
        </a-form-item>
        <a-form-item label="支持支付方式" name="payWays">
          <a-select
--- a/src/views/payment/channel/wechat/config/WechatPayConfig.api.ts
+++ b/src/views/payment/channel/wechat/config/WechatPayConfig.api.ts
@@ -73,6 +73,8 @@ export interface WechatPayConfig extends BaseEntity {
  p12?: string | null
  // 应用域名，回调中会使用此参数
  domain?: string
+  // 授权回调地址
+  redirectUrl?: string
  // 服务器异步通知页面路径
  notifyUrl?: string
  // 页面跳转同步通知页面路径
--- a/src/views/payment/channel/wechat/config/WechatPayConfigEdit.vue
+++ b/src/views/payment/channel/wechat/config/WechatPayConfigEdit.vue
@@ -36,18 +36,29 @@
          </template>
          <a-input-number :precision="2" :min="0.01" v-model:value="form.limitAmount" placeholder="请输入支付限额(元)" />
        </a-form-item>
+        <a-form-item name="wxRedirectUrl">
+          <template #label>
+            <basic-title
+              helpMessage="不填写时默认使用平台配置中的系统地址，受到微信授权回调地址只可以配置两个的限制，我们有时需要通过代理转发来绕过这个限制，
+                  此时回调地址就会与系统地址不一致"
+            >
+              授权回调地址
+            </basic-title>
+          </template>
+          <a-input placeholder="请输入微信授权回调地址" v-model:value="form.redirectUrl" />
+        </a-form-item>
        <a-form-item name="notifyUrl">
          <template #label>
-            <basic-title helpMessage="此处为本网关接收通知的地址, 而不是客户系统接收通知所需的地址"> 异步通知地址 </basic-title>
+            <basic-title helpMessage="此处为本网关接收微信支付相关的回调数据的地址, 而不是业务系统所需的地址"> 异步通知地址 </basic-title>
          </template>
-          <a-input v-model:value="form.notifyUrl" placeholder="请输入异步通知URL" style="width: calc(100% - 80px)" />
+          <a-input v-model:value="form.notifyUrl" placeholder="请输入异步通知地址" style="width: calc(100% - 80px)" />
          <a-button class="w-80px" type="primary" @click="genNotifyUrl">自动生成</a-button>
        </a-form-item>
        <a-form-item name="returnUrl">
          <template #label>
-            <basic-title helpMessage="此处为本网关接收通知的地址, 而不是客户系统接收通知所需的地址"> 同步通知地址 </basic-title>
+            <basic-title helpMessage="此处为本网关接收微信支付同步跳转通知的地址, 而不是业务系统所需的地址"> 同步通知地址 </basic-title>
          </template>
-          <a-input v-model:value="form.returnUrl" placeholder="请输入同步通知URL" style="width: calc(100% - 80px)" />
+          <a-input v-model:value="form.returnUrl" placeholder="请输入同步通知地址" style="width: calc(100% - 80px)" />
          <a-button class="w-80px" type="primary" @click="genReturnUrl">自动生成</a-button>
        </a-form-item>
        <a-form-item label="支持支付方式" name="payWays">
--- a/src/views/payment/system/platform/PayPlatformConfig.vue
+++ b/src/views/payment/system/platform/PayPlatformConfig.vue
@@ -61,7 +61,13 @@
                    订单限额(元)
                  </basic-title>
                </template>
-                <a-input-number placeholder="请输入订单限额" v-model:value="form.limitAmount" :min="0.01" precision="2" :disabled="!edit" />
+                <a-input-number
+                  placeholder="请输入订单限额"
+                  v-model:value="form.limitAmount"
+                  :min="0.01"
+                  :precision="2"
+                  :disabled="!edit"
+                />
              </a-form-item>
            </a-col>
            <a-col :span="20">