WeChat JSSDK と NodeJS および Web の統合 WeChat JS-SDK と NodeJS および Web との統合。
英語 | リリースノート
npm install wechat-jssdk --save
# 或者
yarn add wechat-jssdk
const { Wechat } = require ( 'wechat-jssdk' ) ;
const wx = new Wechat ( wechatConfig ) ;
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/` ,
//小程序配置
"miniProgram" : {
"appId" : "mp_appid" ,
"appSecret" : "mp_app_secret" ,
}
}
サポートされているその他の設定にはデフォルト値があり、基本的には WeChat API のアドレスであり、 ./lib/config.js
確認できます。
1. WeChatパブリックプラットフォームに移動します
MP_verify_XHZon7GAGRdcAFxx.txt
のようなファイルをダウンロードし、Web サイトのルート ディレクトリに置きます ( http://yourdomain.com/MP_verify_XHZon7GAGRdcAFxx.txt
)。WeChat によってリンクが検証されます。
2. 次に、ブラウザが検証情報を取得するためのインターフェースを Express/koa アプリに提供します (@see デモ)
//express app:
router . get ( '/get-signature' , ( req , res ) => {
wx . jssdk . getSignature ( req . query . url ) . then ( signatureData => {
res . json ( signatureData ) ;
} ) ;
} ) ;
//koa2/koa-router app:
router . get ( '/get-signature' , async ctx => {
ctx . body = await wx . jssdk . getSignature ( ctx . request . query . url ) ;
} ) ;
3. 署名を取得したら、次のブラウザの使用方法に進みます。
const WechatJSSDK = require ( 'wechat-jssdk/dist/client.umd' ) ;
//ES6 import
import WechatJSSDK from 'wechat-jssdk/dist/client.umd' ;
//没有打包的话直接script扔到html,然后从`window`获取, e.g:
const wechatObj = new window . WechatJSSDK ( config )
config
次のようにする必要があります:
const config = {
//前4个是微信验证签名必须的参数,第2-4个参数为类似上面 '/get-signature' 从node端获取的结果
'appId' : 'xxx' ,
'nonceStr' : 'xxx' ,
'signature' : 'xxx' ,
'timestamp' : 'xxx' ,
//下面为可选参数
'debug' : true , //开启 debug 模式
'jsApiList' : [ ] , //设置所有想要使用的微信jsapi列表, 默认值为 ['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline', 'onMenuShareAppMessage'],分享到朋友圈及聊天记录
'customUrl' : '' //自定义微信js链接
}
const wechatObj = new WechatJSSDK ( config ) ;
wechatObj . initialize ( )
. then ( w => {
//set up your share info, "w" is the same instance as "wechatObj"
} )
. catch ( err => {
console . error ( err ) ;
} ) ;
署名が正常に検証されたら、共有コンテンツをカスタマイズできます。
デフォルトでは、SDK は
updateAppMessageShareData
、updateTimelineShareData
、onMenuShareTimeline(wx即将废弃)
、onMenuShareAppMessage(wx即将废弃)
のみを登録します。
//自定义分享到聊天窗口
//内部调用 `wechatObj.callWechatApi('updateAppMessageShareData', {...})`, 语法糖而已
wechatObj . updateAppMessageShareData ( {
type : 'link' ,
title : 'title' ,
link : location . href ,
imgUrl : '/logo.png' ,
desc : 'description' ,
success : function ( ) { } ,
fail : function ( ) { } ,
complete : function ( ) { } ,
cancel : function ( ) { }
} ) ;
//自定义分享到朋友圈
//语法糖
wechatObj . updateTimelineShareData ( {
type : 'link' ,
title : 'title' ,
link : location . href ,
imgUrl : '/logo.png'
} ) ;
オリジナルの WeChat オブジェクトwx
取得するには、 wechatObj.getOriginalWx()
を通じて取得できます。
最初の検証が失敗した場合は、 error
コールバックで署名情報を更新し、検証リクエストを再送信できます。
wechatObj.signSignature(newSignatureConfig);
newSignatureConfig
は次のもののみが含まれている必要があります。
{
'nonceStr': 'xxx',
'signature': 'xxx',
'timestamp': 'xxx',
}
他の WeChat インターフェースを呼び出します。
wechatObj.callWechatApi(apiName, apiConfig)
apiName
とapiConfig
WeChat 公式インターフェースのドキュメントを参照してください。
デフォルトで生成される WeChat 認証 URL はwx.oauth.snsUserInfoUrl
およびwx.oauth.snsUserBaseUrl
で、デフォルトのコールバック URL はwechatConfig
で構成されたwechatRedirectUrl
です。また、 wx.oauth. generateOAuthUrl(customUrl, scope, state)
を呼び出してコールバックをカスタマイズすることもできます。 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 の承認されたコールバック アドレス設定に設定されていることを確認してください。
wechatConfig でcard: true
を設定して、カードおよびクーポン機能のサーバー側サポートをサポートします。デモを参照してください。
カード API とクーポン API を表示するには、カード API を参照してください。
Wechat 支払い機能のサーバー側サポートをサポートするには、wechatConfig でpayment: true
を設定します。支払いに必要なその他の設定も一緒に設定する必要があります。
参考デモ。
支払い API を表示するには、支払い API を参照してください。
ミニ プログラムのサーバー側サポートを使用し (インターフェイスを参照)、構成でミニ プログラムのappId
とappSecret
設定します。
const { Wechat , MiniProgram } = require ( 'wechat-jssdk' ) ;
const wechatConfig = {
"appId" : "appid" ,
"appSecret" : "app_secret" ,
//...other configs
//...
//小程序配置
"miniProgram" : {
"appId" : "mp_appid" ,
"appSecret" : "mp_app_secret" ,
}
} ;
const wx = new Wechat ( wechatConfig ) ;
//调用小程序接口
wx . miniProgram . getSession ( 'code' ) ;
//手动实例化 MiniProgram
const miniProgram = new MiniProgram ( {
miniProgram : {
"appId" : "mp_appid" ,
"appSecret" : "mp_app_secret" ,
}
} )
Store は、ストレージ トークンの永続性 (ファイル、データベースなど) をカスタマイズし、独自の Store を実装するために使用されます。API をご覧ください。
ストア: FileStore
、 MongoStore
が付属します。デフォルトはFileStore
で、 wechat-info.json
ファイルに保存されます。
API Wiki を見る
v3.1.0 以降、デモ ページにはクーポンと支払いのユースケースdemo/wechat-config-sample.js
が追加されますdemo/wechat-config.js
次に、支払い機能を使用する必要がある場合は、 appId
、 appSecret
、および支払い構成などのその他の構成を変更します。
./demo/index.js
で独自のappId
とappSecret
を設定し、 npm start
またはnpm run dev
実行し、WeChat 開発者ツールを使用してテストします。
このプロジェクトが役に立ったと思ったら、コーヒーを買ってきてください
MIT @ 2016-現在 ジェイソン