微信小程序-详解微信登陆、微信支付、模板消息

微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下:

wx.login(OBJECT)

调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。用户数据的加解密通讯需要依赖会话密钥完成。

OBJECT参数说明:

success返回参数说明:

示例代码:

//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 换取 session_key

这是一个 HTTP 接口,开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。

接口地址:

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

请求参数:

返回参数:

返回说明:

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

登录态维护

通过 wx.login() 获取到用户登录态之后,需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识,而应该自己派发一个 session 登录态(请参考登录时序图)。对于开发者自己生成的 session,应该保证其安全性且不应该设置较长的过期时间。session 派发到小程序客户端之后,可将其存储在 storage ,用于后续通信使用。

登录时序图

wx.checkSession(OBJECT)

检查登陆态是否过期

示例代码:

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

用户数据的签名验证和加解密

数据签名校验

为了确保 开放接口 返回用户数据的安全性,微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验,确保数据的完整性。

  • 签名校验算法涉及用户的session_key,通过 wx.login 登录流程获取用户session_key,并自行维护与应用自身登录态的对应关系。
  • 通过调用接口(如 wx.getUserInfo)获取数据时,接口会同时返回 rawData、signature,其中 signature = sha1( rawData + session_key )
  • 开发者将 signature、rawData 发送到开发者服务器进行校验。服务器利用用户对应的 session_key 使用相同的算法计算出签名 signature2 ,比对 signature 与 signature2 即可校验数据的完整性。

如wx.getUserInfo的数据校验:

接口返回的rawData:

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

用户的 session-key:

HyVFkGl5F5OQWJZZaNzBBg==

所以,用于签名的字符串为:

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

使用sha1得到的结果为

75e81ceda165f4ffa64f4068af58c64b8f54b88c

加密数据解密算法

接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptedData )进行对称解密。 解密算法如下:

  • 对称解密使用的算法为 AES-128-CBC,数据采用PKCS#7填充。
  • 对称解密的目标密文为 Base64_Decode(encryptedData),
  • 对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节
  • 对称解密算法初始向量 iv 会在数据接口中返回。

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

注:此前提供的加密数据(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

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

页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息。或者当用户完成支付行为,可以获取prepay_id用于发送模板消息。

调用接口下发模板消息(详见接口说明)

接口说明

1. 获取 access_token

access_token 是全局唯一接口调用凭据,开发者调用各接口时都需使用 access_token,请妥善保存。access_token 的存储至少要保留512个字符空间。access_token 的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的 access_token 失效。

公众平台的 API 调用所需的 access_token 的使用及生成方式说明:

  • 为了保密 appsecrect,第三方需要一个 access_token 获取和刷新的中控服务器。而其他业务逻辑服务器所使用的 access_token 均来自于该中控服务器,不应该各自去刷新,否则会造成 access_token 覆盖而影响业务;
  • 目前 access_token 的有效期通过返回的 expires_in 来传达,目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新 access_token。在刷新过程中,中控服务器对外输出的依然是老 access_token,此时公众平台后台会保证在刷新短时间内,新老 access_token 都可用,这保证了第三方业务的平滑过渡;
  • access_token 的有效时间可能会在未来有调整,所以中控服务器不仅需要内部定时主动刷新,还需要提供被动刷新 access_token 的接口,这样便于业务服务器在 API 调用获知 access_token 已超时的情况下,可以触发 access_token 的刷新流程。

开发者可以使用 AppID 和 AppSecret 调用本接口来获取 access_token。AppID 和 AppSecret 可登录微信公众平台官网-设置-开发设置中获得(需要已经绑定成为开发者,且帐号没有异常状态)。AppSecret 生成后请自行保存,因为在公众平台每次生成查看都会导致 AppSecret 被重置。注意调用所有微信接口时均需使用 https 协议。如果第三方不使用中控服务器,而是选择各个业务逻辑点各自去刷新 access_token,那么就可能会产生冲突,导致服务不稳定。

接口地址:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

HTTP请求方式:

GET

参数说明 :

返回参数说明:

正常情况下,微信会返回下述 JSON 数据包给开发者:

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

2. 发送模板消息

接口地址:(ACCESS_TOKEN 需换成上文获取到的 access_token)

https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN
HTTP请求方式:

POST

POST参数说明:

示例:

{
 "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"
}

返回码说明:

在调用模板消息接口后,会返回JSON数据包。

正常时的返回JSON数据包示例:

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

错误时会返回错误码信息,说明如下:

使用效果:

注意:内部测试阶段,模板消息下发后,在客户端仅能看到由“公众号安全助手”下发的简单通知。能收到该提示,即表明模板消息功能已经调试成功。待该功能正式上线后,将可以展示成上图效果。

 下发条件说明

1、支付

当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发1条,多次支付下发条数独立,互相不影响)

2、提交表单

当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)

 审核说明

1.标题

1.1标题不能存在相同

1.2标题意思不能存在过度相似

1.3标题必须以“提醒”或“通知”结尾

1.4标题不能带特殊符号、个性化字词等没有行业通用性的内容

1.5标题必须能体现具体服务场景

1.6标题不能涉及营销相关内容,包括不限于:

消费优惠类、购物返利类、商品更新类、优惠券类、代金券类、红包类、会员卡类、积分类、活动类等营销倾向通知

2.关键词

2.1同一标题下,关键词不能存在相同

2.2同一标题下,关键词不能存在过度相似

2.3关键词不能带特殊符号、个性化字词等没有行业通用性的内容

2.4关键词内容示例必须与关键词对应匹配

2.5关键词不能太过宽泛,需要具有限制性,例如:“内容”这个就太宽泛,不能审核通过

违规说明

除不能违反运营规范外,还不能违反以下规则,包括但不限于:

  1. 不允许恶意诱导用户进行触发操作,以达到可向用户下发模板目的
  2. 不允许恶意骚扰,下发对用户造成骚扰的模板
  3. 不允许恶意营销,下发营销目的模板
  4. 不允许通过服务号下发模板来告知用户在小程序内触发的服务相关内容

处罚说明

根据违规情况给予相应梯度的处罚,一般处罚规则如下:

  1. 第一次违规,删除违规模板以示警告,
  2. 第二次违规,封禁接口7天,
  3. 第三次违规,封禁接口30天,
  4. 第四次违规,永久封禁接口

处罚结果及原因以站内信形式告知

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序支付之c#后台实现方法

    微信小程序支付c#后台实现 今天为大家带来比较简单的支付后台处理 首先下载官方的c#模板(WxPayAPI),将模板(WxPayAPI)添加到服务器上,然后在WxPayAPI项目目录中添加两个"一般处理程序" (改名为GetOpenid.ashx.pay.ashx) 之后打开business目录下的JsApiPay.cs,在JsApiPay.cs中修改如下两处 然后在GetOpenid.ashx中加入代码如下: public class GetOpenid : IHttpHandler

  • PHP:微信小程序 微信支付服务端集成实例详解及源码下载

    微信小程序 微信支付服务端集 理论上集成微信支付的全部工作可以在小程序端完成,因为小程序js有访问网络的能力,但是为了安全,不暴露敏感key,而且可以使用官方提供的现成php demo更省力,于是在服务端完成签名与发起请求,小程序端只做一个wx.requestPayment(OBJECT)接口的对接. 整体集成过程与JSAPI.APP类似,先统一下单,然后拿返回的结果来请求支付. 一共三步: 1.小程序端通过wx.login的返回的code换取openid 2.服务端向微信统一下单 3.小程序端

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序微信支付接入开发实例详解

    本文主要讲述微信小程序接入微信支付开发过程中遇到的坑,分为两大块,小程序端和后台接口封装.本文主要内容如下: 一.后台接口封装: 二.小程序端整合: 三.总结 一.后台接口封装 本文介绍基于ThinkPHP5进行接口封装,具体步骤如下: 1.微信支付官方文档提供了PHP脚本微信支付的样例,下载下来: 2.样例已经封装好了每个类,我们只需要加上命名空间即可,在TP5的extend目录下新建一个目录wxpay,把样例中的类复制到该目录下,然后加上命名空间即可: 样例改造结果 其中最主要的一个类即Wx

  • 微信小程序 支付功能开发错误总结

    微信小程序 支付功能开发错误总结 微信小程序支付终于踩完坑了,发现里面坑挺大的,现在发个贴,希望以后入坑的同学可以看一下 : https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=2 业务流程在这里大家看文档的时候可以看到.第一个坑,获取用户的openid,参数一定要拼在url连接上,否则会报{"errcode":40013,"errmsg":"invali

  • 微信小程序 支付简单实例及注意事项

    微信小程序 支付 微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口!!! 首先调用统一下单接口我们需要知道一些信息 var bookingNo = 'davdian' + this.createNonceStr() + this.createTimeStamp() var deferred = Q.defer() var appid = conf

  • 微信小程序 支付功能实现PHP实例详解

    微信小程序 支付功能实现PHP实例详解 前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee',//改成你自己的链接 header: { 'Content-Type': 'application/x-www-form-urlencoded' }, method:'POST', success: function(res) { console.log(res.data); console.lo

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序 详解Page中data数据操作和函数调用

    微信小程序 详解Page中data数据操作和函数调用 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js <pre code_snippet_id="2049407" snippet_file_name="blog_20161214_1_1145312" name="code" class="javascript">Page(

  • 微信小程序详解如何实现付款功能

    目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页 总结 1 支付场景 我们梳理一下支付场景是什么样子的,首先可以浏览商品,然后在商品的详情页里进行结算.结算的主要目的是生成订单,订单生成好之后就可以进行支付. 支付其实是先向微信支付提交一个在线订单,订单提交成功之后就可以调用支付接口来拉起支付界面. 拉起支付界面之后我们需要按照提示的金额进行付费,付费成功后我们更新一下订单的状

  • 微信小程序-详解微信登陆、微信支付、模板消息

    微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 详解微信小程序开发用户授权登陆

    本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口.

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

  • 微信小程序结合ThinkPHP5授权登陆后获取手机号

    1.在我们授权登陆后会获取到用户的 sessionKey 这个是获取手机号不可分割的一部分 上代码 wxml: <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> js:当我们在调用这个方法的时候可以在控制台输出一下 e 下方用红框框起来的两个也是获取手机号不可分割的一部分 getPhoneNumber: function

  • 基于Python实现的恋爱对话小程序详解

    目录 导语 一.小简介 二.代码演示 1)导入模块 2)倒计时 3)画2份不同的礼物 4)二种选择是不同的绘图倒计时之后就是绘制你回答的那个礼物. 5)弹窗设计的文字(可修改) 三.效果展示 1)视频展示 2)截图展示 导语 哈喽!大家好~我是木木子啦!自从写了一些表白类型的一些小脚本.小程序之后,越发不可收拾了,哈哈哈. 常常会有小粉丝说:这......小程序不够啊!刚表白去了,但是被拉黑了. 那我不答应了,我得努努力:多多益善给大家开发一些更有趣的各种各样的适合表白的小程序! 让每个人都争取

  • 微信小程序 后台登录(非微信账号)实例详解

    微信小程序 后台登录 实现效果图: 最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录.由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以写的时候各种坑,现在把趟好坑的代码共享给大家吧!(PS:如有不妥之处,共勉之.) 废话不说,直接上代码 找到app.js在里面写如下代码 App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('log

随机推荐