Глубокая интеграция WeChat JSSDK и NodeJS

Node.js внешний интерфейс WeChat JavaScript

Для студентов, работающих на мобильном терминале H5, WeChat является незаменимым входом.Естественно, нам нужно вызывать различные интерфейсы, предоставляемые WeChat, на H5 или JS.Нам также необходимо выполнять различные проверки подписи в соответствии с требованиями WeChat, чтобы мы могли наконец-то прибыл.Для наших нужд на GITHUB также есть много библиотек, которые можно использовать в этом отношении, но они всегда более или менее не в состоянии полностью удовлетворить потребности, или им приходится платить много дополнительной разработки, поэтому я также разработал сам.библиотекаwechat-jssdkЧтобы максимизировать функции WeChat JSSDK, эта библиотека фокусируется только на функциях, предоставляемых jssdk, и обеспечивает различную поддержку проверки на стороне сервера (NodeJS), а также автоматически управляет обработкой истечения срока действия различных токенов и билетов, чтобы разработчики могли больше сосредоточиться на сам бизнес. Ну, после разговора о ПОЧЕМУ, вот КАК: Сначала демонстрационная картинка:

основной набор функций

инструкции

npm install wechat-jssdk --save
или
yarn add wechat-jssdk

//require并初始化
const Wechat = require('wechat-jssdk');
const wx = new Wechat(wechatConfig);

Wechat Config

wechatConfigв следующем формате:

{
  //第一个为设置网页授权回调地址
  wechatRedirectUrl: "http://yourdomain.com/wechat/oauth-callback", 
  wechatToken: "xxx", //可选，第一次在微信控制台保存开发者配置信息时使用
  appId: "xxx",
  appSecret: "xxx",
  card: true, //开启卡券支持，默认关闭
  payment: true, //开启支付支持，默认关闭
  merchantId: '', //商户ID
  paymentSandBox: true, //沙箱模式，验收用例
  paymentKey: '', //必传，验签密钥，TIP:获取沙箱密钥也需要真实的密钥，所以即使在沙箱模式下，真实验签密钥也需要传入。
  //pfx 证书
  paymentCertificatePfx: fs.readFileSync(path.join(process.cwd(), 'cert/apiclient_cert.p12')),
  //默认微信支付通知地址
  paymentNotifyUrl: `http://your.domain.com/api/wechat/payment/`,
}

Настройте среду WeChat

1. Теперь вообще дайтеMP_verify_xxx.txtФайл помещается в корневой каталог вашего сайта, и WeChat может автоматически его проверить.

2. Вам также необходимо предоставить API, чтобы браузер мог получить подпись текущего адреса.

//express风格
router.get('/get-signature', function(req, res) {
  wx.jssdk.getSignature(req.query.url).then(function(signatureDate) {
    res.json(signatureDate);
  });
});

3. После получения подписи переходим к следующему шагу использования браузера.

сторона браузера

js в интерфейсе:

//ES6
import WechatJSSDK from 'wechat-jssdk/dist/client';
//commonjs
const WechatJSSDK = require('wechat-jssdk/dist/client');
//others
window.WechatJSSDK
//然后实例化:
const wechatObj = new WechatJSSDK(config);

configДолжно быть:

const config = {
  //前4个是微信验证签名必须的参数，第2-4个参数为类似上面 '/get-signature' 从node端获取的结果
  'appId': 'xxx',
  'nonceStr': 'xxx',
  'signature': 'xxx',
  'timestamp': 'xxx',
  //下面为可选参数
  'success': function(wechatObj){}, //微信签名成功回调函数, 跟 'successCallback' 一样
  'error': function(err, wechatObj){}, //微信签名失败回调函数, 跟 'errorCallback' 一样
  'debug': true, //开启 debug 模式
  'jsApiList': [], //设置所有想要使用的微信jsapi列表, 默认值为 ['onMenuShareTimeline', 'onMenuShareAppMessage']，分享到朋友圈及聊天记录
  'customUrl': '' //自定义微信js链接
}

После успешной проверки подписи вы можете настроить общий контент:

//自定义分享到聊天窗口
//内部调用 `wechatObj.callWechatApi('onMenuShareAppMessage', {...})`， 语法糖而已
wechatObj.shareOnChat({
  type: 'link',
  title: 'title',
  link: location.href,
  imgUrl: '/logo.png',
  desc: 'description',
  success: function (){},
  cancel: function (){}
});
//自定义分享到朋友圈
//语法糖
wechatObj.shareOnMoment({
  type: 'link',
  title: 'title',
  link: location.href,
  imgUrl: '/logo.png'
});

Чтобы получить исходный объект WeChatwx, в состоянии пройтиwechatObj.getOriginalWx()чтобы получить.
Если первая проверка не удалась, вы можетеerrorОбновите информацию о подписи в обратном вызове и повторно отправьте запрос на проверку:
wechatObj.signSignature(newSignatureConfig);, newSignatureConfigПросто включите:

{
  'nonceStr': 'xxx',
  'signature': 'xxx',
  'timestamp': 'xxx',
}

Позвоните в другие интерфейсы WeChat:
wechatObj.callWechatApi(apiName, apiConfig)
apiNameа такжеapiConfigПожалуйста, обратитесь к официальной документации по интерфейсу WeChat.

OAuth

Сгенерированный по умолчанию URL-адрес авторизации WeChat:wx.oauth.snsUserInfoUrlа такжеwx.oauth.snsUserBaseUrl, где URL-адрес обратного вызова по умолчаниюwechatConfigнастроен вwechatRedirectUrl. Вы также можете позвонитьwx.oauth.generateOAuthUrl(customUrl, scope, state)с пользовательского адреса обратного вызова

//callback url handler
//如"wechatRedirectUrl"配置为 "http://127.0.0.1/wechat/oauth-callback", 你的路由需要为：
router.get('/wechat/oauth-callback', function (req, res) {
  //得到code，获取用户信息
  wx.oauth.getUserInfo(req.query.code)
          .then(function(userProfile) {
            console.log(userProfile)
            res.render("demo", {
              wechatInfo: userProfile
            });
          });
});

СОВЕТ: Убедитесь, что указанное выше имя домена адреса перенаправления было установлено в настройках адреса обратного вызова авторизации в WeChat.

Купоны карт WeChat

установить в wechatconfigcard: trueИнформацию о поддержке сервером функции карточного купона см.demo.
Чтобы просмотреть Pass API, см.cards apis

WeChat Pay

установить в wechatconfigpayment: trueДля обеспечения поддержки функции оплаты WeChat на стороне сервера некоторые другие необходимые конфигурации для оплаты также должны быть установлены вместе.
Ссылаться наdemo.
Чтобы просмотреть платежные API, см.payment apis

Использование магазинов

Магазин используется для настройки сохраняемости токена хранилища (например, файлов, ожидания базы данных) и реализации собственного Магазина, см.API
Поставляется с магазином:FileStore, MongoStore, По умолчаниюFileStore, Хранится вwechat-info.jsonдокумент.

APIs

ПроверитьAPI wiki

Demo

Вытяните элемент:git clone git@github.com:JasonBoy/wechat-jssdk.gitкопироватьdemo/wechat-config-sample.jsприбытьdemo/wechat-config.js,
Затем измените его внутриappId, appSecret, и другиенастроитьДругие конфигурации, такие как оплата Если вам нужно использовать функцию оплаты. потомnpm startилиnpm run dev, используйте инструмент разработчика WeChat для тестирования.

В заключение

Ну, общее использование, как указано выше, в основном соответствует большинству функциональных требований JSSDK.Если вам интересно, вы можете перейти кGithubпопытайся.

Категории