предисловие
После завершения платежа WeChat h5 может быть проще продолжить платеж на официальном аккаунте.
Сцены
Оплата приложения в браузере WeChat должна опираться на оплату официального аккаунта.Ниже приводится подробный анализ некоторых технических моментов оплаты официального аккаунта.
Готов к работе
Приложение базовой конфигурации
Использованная литература:Официальный аккаунт WeChat открывает функцию оплаты — руководство по работе с Baidu
Основная информация
- Идентификатор службы, идентификатор администратора, привязанный к идентификатору службы
- Откройте платежную учетную запись и запомните платежную учетную запись, учетную запись WeChat, привязанную к платежной учетной записи.
- приложение, секретный ключ
- Платежный аккаунт открывает каталог платежей (На один уровень выше адреса прямого платежа)
- Доменное имя авторизации страницы задано, и это адрес доменного имени вашего сайта.
- Основные разрешения интерфейса, особенно некоторые разрешения jssdk, убедитесь, что все разрешения максимально открыты
Диаграмма бизнес-процессов и диаграмма последовательности
В основном это то же самое, что и WeChat h5, с той лишь разницей, что на этот раз WeChat возвращает список параметров, которые должны вызвать оплату WeChat SDK.
техническая проблема
получить openid
Приложение веб-сайта WeChat login — это авторизованная система авторизации WeChat OAuth2.0, основанная на стандарте протокола OAuth2.0. Получение openid делится на два шага, получение кода, а затем получение openid по коду.Рекомендуется, чтобы эти две части запроса инициировались бэкендом, а прямой запрос фронтендом. будет включать междоменные проблемы. Серверная часть напрямую определяет эти два метода как методы инструментов, которые просты в использовании и легко повторно используются в других сценариях.
1: Запросите код, если вы не хотите тратить время, скопируйте и вставьте его напрямую.
-
Код сварки стандартного формата:
let encodeUrl=encodeURIComponent(`http://xxx/xhxwxpay?productId=${productId}&orderNo=${orderNo}`) let tempUrl=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6f5de09c8ef178a7&redirect_uri=${encodeUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect` -
Описание параметра запроса
параметр Это необходимо иллюстрировать appid да Уникальный идентификатор приложения redirect_uri да Пожалуйста, используйте urlEncode для обработки ссылки response_type да введите код scope да Область авторизации приложения с несколькими областями, разделенными запятыми (,), в настоящее время заполните только snsapi_login для веб-приложений, а snsapi_userinfo используется здесь. state нет Он используется для поддержания состояния запроса и обратного вызова, а после авторизации запроса возвращается третьей стороне как есть. Этот параметр можно использовать для предотвращения csrf-атак (атаки с подделкой межсайтовых запросов). Рекомендуется, чтобы этот параметр привносили третьи лица. Для проверки можно установить простое случайное число плюс сессию. -
Описание возврата:После того, как пользователь разрешит авторизацию, он будет перенаправлен на URL-адрес redirect_uri с параметрами кода и состояния.
redirect_uri?code=CODE&state=STATEЕсли пользователь запрещает авторизацию, параметр code после редиректа не берется, берется только параметр stateredirect_uri?state=STATE -
Справочная документация:Получите справочный документ по коду с веб-сайта в WeChat.
2 Получить openid по коду
-
OpenID пользователя фиксируется для общедоступной учетной записи, поэтому нет сомнений в том, что получено то же самое.Это включает в себя секретный ключ некоторых конфиденциальных общедоступных учетных записей и т. д. Рекомендуется, чтобы внутренний процесс инициировал запрос, который также может избежать междоменных проблем с внешним интерфейсом.
//网关或者后端的设置（以koa框架的为例） *post_getOpenId(){ let reqData = this.request.body; let param = { appid:'wxxxx', secret:'affsdcsdvdsvfv6', code:reqData.code, grant_type:'authorization_code' } let result = yield this.api.getOpenId(param); this.body = result; } // 获取openid 传入对象的形式，改造通用的api方法 getOpenId: function* (apiParam, json = true) { // 获取token的地址 let apiUrl='https://api.weixin.qq.com/sns/oauth2/access_token' let response = yield request.get(apiUrl, { qs: apiParam, json: json }); return responseHandle(response, apiUrl, apiParam); }.bind(this), //前端的写法，好处是避免暴露公众号的相关信息 this.$api.post("order/getOpenId", { code: this.code }).then(res => { // 正确获取openid的情况下 请求后台参数得到对应的返回参数,目前只需要openid if (res.openid) { this.openId = res.openid; //准备条件足够的话 可以唤起支付 this.topay() }else { //请求失败或者没有对应的字段 } -
Запросить описание параметра, получить access_token через код
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_codeпараметр Это необходимо иллюстрировать appid да Уникальный идентификатор заявки, полученный после подачи заявки и ее одобрения открытой платформой WeChat. secret да Ключ приложения AppSecret получается после отправки приложения на открытую платформу WeChat для рассмотрения и утверждения. code да Заполните параметр кода, полученный на первом шаге grant_type да Заполните код_авторизации -
Описание возвращаемого результата
//正确的返回 { "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" } //错误的返回 {"errcode":40029,"errmsg":"invalid code"} -
Обновить срок действия свежего токена Если токен недействителен, вы можете использовать refresh_token, чтобы получить новый.
SDK оплаты wechat
Способ 1: метод официального сайта
Метод вызова прост и эффективен и вызывается непосредственно в соответствии с возвращаемыми параметрами интерфейса. Следующие примеры кода относятся к среде Vue. Пожалуйста, сопоставьте другие среды самостоятельно, только для справки.
// 准备好微信sdk部分
jsSdk(){
// 判断微信的WeixinJSBridge
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
}
}else{
this.onBridgeReady();
}
},
// 支付sdk准备完成
onBridgeReady() {
// 触发微信支付
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
appId: this.payOption.appId, //公众号名称，由商户传入
timeStamp: this.payOption.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: this.payOption.nonceStr, //随机串
package: this.payOption.package, //prepay_id用等式的格式
signType: this.payOption.signType, //微信签名方式：
paySign: this.payOption.paySign, //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
// 支付成功 返回成功页
let tempUrl="//paysucc"
location.href=tempUr
} else{
// 取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
let tempUrl='//topay'
location.href=tempUrl
}
}
);
},
Способ 2: необходимо импортировать модуль js-weixin, процесс выглядит следующим образом:
Ввести модуль --ready--get access-token--get ticket--сгенерировать подпись (требуется wx.config)-в сочетании с параметрами возврата интерфейса--вызвать wxpay. (более хлопотно, не рекомендуется) Справочная документация: