微信公众号 H5 支付与登录实现详解

一、微信公众号 H5 登录

（一）原理

微信公众号 H5 登录基于 OAuth2.0 授权机制。用户在公众号内访问 H5 页面时，H5 页面引导用户跳转到微信授权页面，用户同意授权后，微信服务器会重定向回 H5 页面，并带上授权码（code）。前端将此授权码传递给后端，后端通过它向微信服务器换取用户的 access_token 和 openid 等信息，openid 可用于识别用户身份。

（二）具体案例

1. 前端代码（HTML + JavaScript）

假设项目结构如下，在 public 目录下有 index.html 和 script.js 文件。

index.html

<!DOCTYPE html>
<html lang="zh - CN">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>微信公众号 H5 登录示例</title>
</head>

<body>
    <button id="loginButton">微信登录</button>
    <script src="script.js"></script>
</body>

</html>

页面仅设置了一个 “微信登录” 按钮，用于触发登录流程。

script.js

// 获取登录按钮元素
const loginButton = document.getElementById('loginButton'); 

// 为登录按钮添加点击事件
loginButton.addEventListener('click', function () {
    // 微信公众号 appId，需替换为实际公众号的 appId
    const appId = 'your_app_id'; 
    // 授权后重定向的回调链接地址，需在公众号后台配置白名单
    const redirectUri = 'encodeURIComponent('your_redirect_uri'); 
    // 微信授权登录的基础链接
    const authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;

    // 跳转到微信授权页面
    window.location.href = authorizeUrl; 
});

document.getElementById('loginButton') 用于获取页面中的登录按钮元素。
为按钮添加点击事件，点击后构建微信授权链接 authorizeUrl。
- appId 是公众号的唯一标识，用于标识公众号身份。
- redirectUri 是授权成功后微信服务器重定向的地址，需进行 URL 编码，且必须在公众号后台配置为白名单地址，否则无法回调。
- response_type=code 表明期望微信返回授权码。
- scope=snsapi_userinfo 表示授权作用域，通过此作用域可获取用户基本信息。
- state 是自定义参数，可用于保持请求和回调的状态，此处设置为 123。
最后通过 window.location.href 跳转到微信授权页面。

（三）登录返回页面常见问题及解决方法

1. 重定向失败

问题描述：点击登录按钮后，用户同意授权，却无法正常重定向回指定的 H5 页面。
原因分析：
- redirectUri 未在公众号后台配置为白名单地址。微信出于安全考虑，只允许重定向到配置好的白名单地址。
- redirectUri 地址编码问题。如果 redirectUri 没有正确进行 URL 编码，微信服务器可能无法识别。
解决方法：
- 前往微信公众平台，在 “设置与开发” -> “公众号设置” -> “功能设置” 中，将 redirectUri 添加到网页授权域名白名单中。
- 确保 redirectUri 在代码中正确进行了 encodeURIComponent 编码。

2. 授权码获取失败

问题描述：重定向回 H5 页面后，无法获取到微信返回的授权码（code）。
原因分析：
- 网络问题导致微信服务器与 H5 页面之间的数据传输异常。
- 前端代码中获取 code 的逻辑有误。例如，重定向后没有正确从 URL 参数中提取 code。
解决方法：
- 检查网络连接是否正常，可通过在其他页面进行网络请求测试。若网络不稳定，尝试切换网络环境。
- 确认前端代码中获取 code 的逻辑正确。一般来说，重定向后可以通过 window.location.search 获取 URL 参数，然后从中解析出 code。例如：

javascript

const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

二、微信公众号 H5 支付

（一）原理

微信公众号 H5 支付基于微信支付平台接口。前端发起支付请求，后端据此组织支付参数向微信支付服务器发起预支付请求，微信支付服务器返回预支付交易会话标识（prepay_id），后端将包含 prepay_id 等相关参数返回给前端。前端使用这些参数调用微信支付 API 唤起微信支付界面，用户完成支付后，微信支付服务器通知后端支付结果，后端进行相应业务处理。

（二）具体案例

1. 前端代码（HTML + JavaScript）

继续在上述项目的 public 目录下操作，修改 index.html 和 script.js。

index.html

<!DOCTYPE html>
<html lang="zh - CN">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>微信公众号 H5 支付示例</title>
</head>

<body>
    <button id="payButton">微信支付</button>
    <script src="https://res.wx.qq.com/open/js/jweixin - 1.6.0.js"></script>
    <script src="script.js"></script>
</body>

</html>

添加了 “微信支付” 按钮，并引入微信 JS – SDK，用于调用微信支付功能。

script.js

// 获取支付按钮元素
const payButton = document.getElementById('payButton'); 

// 为支付按钮添加点击事件
payButton.addEventListener('click', function () {
    // 模拟向后端发起支付请求，实际应用中需替换为真实接口地址
    fetch('/api/pay', {
        method: 'POST',
        headers: {
            'Content - Type': 'application/json'
        },
        body: JSON.stringify({
            amount: 100, // 支付金额，单位为分
            orderNumber: '20231010123456' // 订单号，需保证唯一
        })
    })
      .then(response => response.json())
      .then(data => {
            if (data.prepay_id) {
                wx.config({
                    debug: true,
                    appId: 'your_app_id',
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: ['chooseWXPay']
                });

                wx.ready(function () {
                    wx.chooseWXPay({
                        timestamp: data.timestamp,
                        nonceStr: data.nonceStr,
                        package: `prepay_id=${data.prepay_id}`,
                        signType: 'MD5',
                        paySign: data.paySign,
                        success: function (res) {
                            // 支付成功后的回调
                            alert('支付成功');
                        },
                        cancel: function () {
                            // 支付取消后的回调
                            alert('支付取消');
                        }
                    });
                });
            } else {
                alert('获取预支付信息失败');
            }
        });
});

document.getElementById('payButton') 获取支付按钮元素。
点击按钮后，使用 fetch 模拟向后端发送支付请求，传递支付金额（单位为分）和订单号。
后端返回数据后，若包含 prepay_id，则配置微信 JS – SDK。
wx.config 中的 appId 为公众号 appId，timestamp、nonceStr 和 signature 由后端计算并返回，用于验证请求合法性。
wx.ready 后调用 wx.chooseWXPay 发起支付，传入相关参数，包括 prepay_id 等。支付成功或取消会执行相应回调函数。

（三）支付常见问题及解决方法

1. 支付参数错误

问题描述：调用 wx.chooseWXPay 时提示 “支付验证签名失败” 等与参数相关的错误。
原因分析：
- 后端生成的 timestamp、nonceStr、signature 或 prepay_id 等参数不正确。这可能是由于后端计算签名的算法错误，或者在获取 prepay_id 过程中出现问题。
- 前端传递给 wx.chooseWXPay 的参数与后端返回的参数不一致。例如，参数名称拼写错误，或者参数类型不符合要求。
解决方法：
- 检查后端代码中生成支付参数的逻辑，确保签名算法正确，并且获取 prepay_id 的流程无误。可以参考微信支付官方文档中的签名生成算法和预支付流程说明。
- 仔细核对前端代码中传递给 wx.chooseWXPay 的参数，确保参数名称、类型和值与后端返回的一致。

2. 无法唤起支付界面

问题描述：点击支付按钮后，没有唤起微信支付界面。
原因分析：
- 微信 JS – SDK 配置错误。例如，wx.config 中的 appId 错误，或者 jsApiList 中没有正确包含 chooseWXPay。
- 网络问题导致无法与微信支付服务器进行通信。
解决方法：
- 确认 wx.config 中的各项配置参数正确无误，特别是 appId 需为公众号的真实 appId，jsApiList 需包含 chooseWXPay。
- 检查网络连接，确保网络稳定。可以通过在其他页面进行网络请求测试，若网络不稳定，尝试切换网络环境。同时，在 wx.config 中开启 debug: true，查看控制台输出的调试信息，以便定位问题。