Detailed explanation of examples of mini program development login, payment and template messages

This article mainly introduces the WeChat applet-WeChat login, WeChat payment, and template messages. It has certain reference value and you can learn more if you need it.

The WeChat public platform has quietly begun internal testing of the WeChat mini program (WeChat public account) function recently, attracting the attention of countless developers and ordinary users. The ability to pay on WeChat was launched with the release of the mini program. , the introduction is as follows:

wx.login(OBJECT)

Call the interface to obtain the login credentials (code) and then exchange the user login status information. Including the user's unique identifier (openid) and the session key (session_key) for this login. Encryption and decryption of user data communication depends on the session key.

OBJECT parameter description:

success Return parameter description:

Sample code:

//app.js
App({
 onLaunch: function() {
  wx.login({
   success: function(res) {
    if (res.code) {
     //发起网络请求
     wx.request({
      url: 'https://test.com/onLogin',
      data: {
       code: res.code
      }
     })
    } else {
     console.log('获取用户登录态失败！' + res.errMsg)
    }
   }
  });
 }
})

code In exchange for session_key

This is an HTTP interface. The developer server uses the login credentials code to obtain session_key and openid. where session_key is the key used to encrypt and sign user data. For the security of your own application, session_key should not be uploaded and entered over the network.

Interface address:

api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

Request parameters ：

Return parameter:

Return description:

//正常返回的JSON数据包
{
   "openid": "OPENID",
   "session_key": "SESSIONKEY"
   "expires_in": 2592000
}
//错误时返回JSON数据包(示例为Code无效)
{
  "errcode": 40029,
  "errmsg": "invalid code"
}

Login status maintenance

After obtaining the user login status through wx.login(), the login status needs to be maintained. Developers should be careful not to directly use fields such as session_key and openid as user identifiers or session identifiers. Instead, they should dispatch a session login state by themselves (please refer to the login sequence diagram). For sessions generated by developers themselves, their security should be ensured and long expiration times should not be set. After the session is dispatched to the mini program client, it can be stored in storage for subsequent communication.

Login sequence diagram

wx.checkSession(OBJECT)

Check whether the login status has expired

Sample code:

wx.checkSession({
 success: function(){
  //登录态未过期
 },
 fail: function(){
  //登录态过期
  wx.login()
 }
})

Signature verification and encryption and decryption of user data

Data signature verification

In order to ensure the security of user data returned by the open interface, WeChat will sign the plain text data. Developers can perform signature verification on data packets based on business needs to ensure data integrity.

• The signature verification algorithm involves the user's session_key. The user's session_key is obtained through the wx.login login process, and the corresponding relationship with the application's own login state is maintained by itself.

• When obtaining data by calling an interface (such as wx.getUserInfo), the interface will return rawData and signature at the same time, where signature = sha1(rawData + session_key)

• The developer sends signature and rawData to the developer server for verification. The server uses the user's corresponding session_key to calculate the signature signature2 using the same algorithm, and compares signature and signature2 to verify the integrity of the data.
  

For example, data verification of wx.getUserInfo:

rawData returned by the interface:

{
 "nickName": "Band",
 "gender": 1,
 "language": "zh_CN",
 "city": "Guangzhou",
 "province": "Guangdong",
 "country": "CN",
 "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}

User’s session-key:

HyVFkGl5F5OQWJZZaNzBBg==

So, the string used for signature is:

{
 "nickName": "Band",
 "gender": 1,
 "language": "zh_CN",
 "city": "Guangzhou",
 "province": "Guangdong",
 "country": "CN",
 "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}HyVFkGl5F5OQWJZZaNzBBg==

The result obtained by using sha1 is

75e81ceda165f4ffa64f4068af58c64b8f54b88c

Encrypted data decryption algorithm

If the interface involves sensitive data (such as openId and unionId in wx.getUserInfo), the plain text of the interface The content will not contain this sensitive data. If developers need to obtain sensitive data, they need to symmetrically decrypt the encrypted data (encryptedData) returned by the interface. The decryption algorithm is as follows:

• The algorithm used for symmetric decryption is AES-128-CBC, and the data is filled with PKCS#7.

• The target ciphertext of symmetric decryption is Base64_Decode(encryptedData),

• The symmetric decryption key aeskey = Base64_Decode(session_key), aeskey is 16 Bytes

• The symmetric decryption algorithm initial vector iv will be returned in the data interface.
  

微信官方提供了多种编程语言的示例代码（点击下载）。每种语言类型的接口名字均一致。调用方式可以参照示例。

注：此前提供的加密数据（encryptData）以及对应的加密算法将被弃用，请开发者不要再依赖旧逻辑。

用户信息：

### wx.getUserInfo(OBJECT)

获取用户信息，需要先调用 wx.login 接口。

OBJECT参数说明：

success返回参数说明：

示例代码：

wx.getUserInfo({
 success: function(res) {
  var userInfo = res.userInfo
  var nickName = userInfo.nickName
  var avatarUrl = userInfo.avatarUrl
  var gender = userInfo.gender //性别 0：未知、1：男、2：女 
  var province = userInfo.province
  var city = userInfo.city
  var country = userInfo.country
 }
})

encryptedData 解密后为以下 json 结构，详见加密数据解密算法

{
  "appId": "APPID",
  "openId": "OPENID",
  "nickName": "NICKNAME",
  "gender": 1,
  "city": "CITY",
  "province": "PROVINCE",
  "country": "COUNTRY",
  "avatarUrl": "AVATARURL",
  "unionId": "UNIONID"
}

UnionID机制说明：

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

微信开放平台绑定小程序流程

前提：微信开放平台帐号必须已完成开发者资质认证

开发者资质认证流程：

登录微信开放平台(open.weixin.qq.com) – 帐号中心 – 开发者资质认证

微信支付：

wx.requestPayment(OBJECT)
发起微信支付。

Object参数说明：

示例代码：

wx.requestPayment({
  'timeStamp': '',
  'nonceStr': '',
  'package': '',
  'signType': 'MD5',
  'paySign': '',
  'success':function(res){
  },
  'fail':function(res){
  }
})

基于微信的通知渠道，我们为开发者提供了可以高效触达用户的模板消息能力，以便实现服务的闭环并提供更佳的体验。

模板推送位置：服务通知

模板下发条件：用户本人在微信体系内与页面有交互行为后触发，详见下发条件说明

模板跳转能力：点击查看详情仅能跳转下发模板的该帐号的各个页面

使用说明

获取模板 id

登录mp.weixin.qq.com获取模板，如果没有合适的模板，可以申请添加新模板，审核通过后可使用，详见模板审核说明

页面的

{"access_token": "ACCESS_TOKEN", "expires_in": 7200}

{
 "touser": "OPENID", 
 "template_id": "TEMPLATE_ID", 
 "page": "index",     
 "form_id": "FORMID",     
 "data": {
   "keyword1": {
     "value": "339208499", 
     "color": "#173177"
   }, 
   "keyword2": {
     "value": "2015年01月05日 12:30", 
     "color": "#173177"
   }, 
   "keyword3": {
     "value": "粤海喜来登酒店", 
     "color": "#173177"
   } , 
   "keyword4": {
     "value": "广州市天河区天河路208号", 
     "color": "#173177"
   } 
 },
 "emphasis_keyword": "keyword1.DATA" 
}

{
 "errcode": 0,
 "errmsg": "ok",
}