本流程主要参考http://blog.csdn.net/s501936242/article/details/50826444
背景:
在Web应用中接入微信支付,我以为只是查看demo,根据demo和文档相结合然后调用接口就完事了,但是微信文档的复杂性和隐坑使我填坑填到怀疑人生,致敬在微信踩过的神坑,过年给他烧点纸记挂一下,NND。。。。。。。。。。。
注意事项:
坑一:几个签名的混淆
关于签名的调试,网上各种哭嚎,不少人在签名处调试多日无果。
那是因为整个工作流程中,涉及到了至少三个签名,稍不小心就会用错。
在统一下单的接口里,向微信服务器发送请求中的参数有一枚签名;
其返回的参数中,亦有一枚签名,后经观察,发现二者为同一签名。
但在使用JSSDK后所调用的wx.config里所需的参数signature却是另一枚签名。
而在wx.chooseWXPay里所需的支付签名paySign,却又是另另另外的一枚。
此坑所耗时间:2天。
坑二:两个Access_token
查看开发文档可以看到,微信搞了两个Access_token!
即使他们用再多的加粗文字来提醒我们两个token的不同之处,
也难以抚平我们在开发过程中陷入混乱的受伤之身心!
一个是网页授权的access_token,需要用户授权之后才能拿到。
而另一个是普通的access_token,支持公众号的各种基础服务,并非支付独用。
看文档所述的流程,以为用网页授权的token就对了?
恭喜,又进坑了…… 这里我没有遇到,不过还是在这里给你们提个醒
坑三:怎么获取code
这个是我刚开始做这块一直卡着的坎,微信文档中只是给了一个接口
一直以为是在后台调取接口,然后返回code,如果你也这样想,恭喜你,成功入坑,MD,这个接口你只有在前台调用,并且redirect_uri上填写后台写好的回调方法,使用 urlEncode 对链接进行处理,并且这个方法只能是get请求。
===============================================================================
在这里先给大家梳理一下总体流程,方便大家理解
前期的准备工作:
准备工作第一弹:
服务号一枚,并开通微信支付功能。
在微信公众平台(mp.weixin.qq.com)的[微信支付-开发配置]里对支付授权目录做配置。
测试期间,需要配置测试授权目录,以及将参与测试的微信号添加到白名单中。
由于测试必须在线上(测试)环境,debug不太方便,才耗费了辣么多美好的时光。
授权目录,即为调用微信支付控件的页面(请注意这里一定要是页面,支付页面所在的目录)所在目录。
准备工作第二弹:
还是在公众平台上,进入开发者中心,找到接口权限表。
在其中的网页服务中,找到“网页授权用户基本信息”并填写之。
这里所填的URL必须是用户进入应用的URL,且必须是oauth验证所用的URL里的redirect_uri里的值……
一处不对,都会在坑里苦熬良久。
准备工作第三弹:
还是在公众平台上,进入公众号设置,找到功能设置。
需要对JS接口安全域名做设置。
这里的安全域名就是你的应用相关的域名,改动次数受限制,要注意。
准备工作第四弹:
还是在公众平台上,在开发者中心里找到配置项。
这里需要有APPID和APPSecret的访问权限。
另外,还需要准备的是商户id:mch_id 和 key。
注:secret 和 key 在通信接口里有用到,不允许在前端页面使用!
接入的支付流程====================================
第一步骤:一个带验证的入口URI
首先引导用户进入应用,这里以H5页面为例。
由于微信支付必须在微信浏览器里进行,因此入口URL链接应当从公众号发布给用户,
这样用户才会在微信客户端中点击链接,进入应用。
(不要问京东为什么可以在纯网页端使用微信支付,那是微信给他的小伙伴京东开的后门好吗)
这个入口URL不是简单的URL,这里需要做oauth的验证,因此我们暂设此URL为entranceURL。
entranceURL的格式为:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
标红的几个变量需要说明:
1. APPID就是公众号的appid
2. REDIRECT_URI很眼熟?就是刚在网页授权里写的URI,要转义哦亲。
3. response_type须填code,理由是这是一个GET请求,微信会返回code然后用code再……blah blah blah
4. SCOPE,填snsapi_userinfo(需用户手动授权)或snsapi_base(直接进入页面)
5. STATE 会跟随code一起返回,看业务需要自己填。一般格式是有大小写和数字的组合。
参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
第二步骤:用code获取openId
用户点击了这个entranceURL之后会发生什么奇妙的事情咩?
这时候微信会返回给你一个code,并重定向到你在REDIRECT_URI里指定的页面。
你需要在这个页面的URL里拿到code的值,如果拿不到,要提示用户授权失败或未授权。
由于这个entranceURL可能是应用的首页,而需要调用支付控件的是其他页面,
所以可以先将其缓存到例如sessionStorage里,到了需要调用支付控件时再用。
拿到这个code需要做什么咩?
这时候要做的事情就不能在前端页面里继续进行了,这里必须写一个前后端通信的接口,
将这个code传送给后端服务器,然后在服务器里发起对微信的GET请求:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=我的appid&secret=我的secret&code=这个code&grant_type=authorization_code;
标红的是需要被替换的变量,其中appid和secret都应该保存在服务端文件中。
这个请求返回的Json里的openid就是我们要的。
参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
第三步骤:统一下单接口
接口地址:https://api.mch.weixin.qq.com/pay/unifiedorder
参考文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
这个接口在文档里讲得很清楚,在此不赘述。
注意这里有签名sign,它与后面要用的signature和paySign虽然都是签名,但完全不同。
如果你的trade_type是NATIVE就不需要openid,如果是JSAPI就必须要openid。
在统一下单的接口中,你会告诉微信当前这笔交易的一些基本信息,
包括但不限于商户id、交易号、交易金额等等。
微信会将其打包到一个package里,从接口返回的prepay_id里其实就对应了你的交易详情。
注意这个接口返回的状态码有两种,一个标识的是通信是否成功:return_code
另一个标识的是业务是否成功:result_code。详情见文档。
参考文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
第四步骤:前端配置wx.config
在上一步接口的业务返回成功之后,可以在前端引用JSSDK了。
开发文档在:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
首先注入权限验证配置时,需要用到wx.config。
它有几个参数要格外注意,不然又进坑了:
1. 随机字符串nonceStr,必须使用上一步的统一下单接口返回的nonceStr。
2. 签名signature,不是上步接口里的sign,需在服务端生成,返给前端。(见下一步骤)
3. jsApiList 里要指定微信支付接口“chooseWXPay”。
4. debug参数设为true时,会在移动端打出alert帮助调试。
这里也是个坑,微信文档在jssdk中给了一个微信支付,结果GG了。。。。。。。。。
参考文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
第五步骤:服务端生成wx.config所需的signature
首先用appid和secret从微信基础支持接口中获取access_token。
前面提到了两个token:网页授权型token和普通型token。
这里获取的是普通型token。
由于这个token是公众号所有服务都可能用到的,因此要格外注意。
有效期7200s,建议过期之前应当缓存之。
然后用这个token去获取jsapi_ticket,接口地址:
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" access_token "&type=jsapi
这个ticket同样也要做缓存。
现在可以准备生成signature了,所需的参数有:
1. jsapi_ticket
2. nonceStr 即统一下单接口返回的随机字符串
3. 时间戳:秒为单位(后续还会用到时间戳,要保持一致)
4. 当前页面URL,不需转义
注意这个签名是用sha1算法加密,其他的签名是用MD5算法加密的。
第六步骤:终于开始配置chooseWXPay了
wx.config的验证通过之后,就可以在wx.ready的回调里执行wx.chooseWXPay了。
chooseWXPay的几个属性配置说明如下:
1. timeStamp:刚才用到的那个时间戳,秒为单位。
2. nonceStr:统一下单接口里的随机字符串
3. package:值的格式为“prepay_id=” 统一下单接口返回的prepay_id
4. signType:由于这里的签名是MD5加密,因此这个值就是“MD5”
5. paySign:呵呵,此处是坑,这个签名也是在服务端生成,返给前端,见下一步骤。
6. success:支付成功后的回调。
7. fail:支付失败后的回调。
8. cancel:用户取消支付后的回调。
这里注意,由于进入应用时是带着oauth验证的,因此在用户取消支付后,
code可能已过期,因此建议在取消支付的回调里,调用wx.closeWindow()退出Web页返回微信客户端。
因为即使你不退出,再执行支付,code之后的验证也不会通过。
这时只能重新访问一次第一步骤中的entranceURL才行。
第七步骤:生成chooseWXPay所需的签名paySign
这个签名不同于刚才在wx.config里的签名signature,这是用MD5加密的。
生成签名所需参数有appid,nonceStr,package,signType和timeStamp。(字典序排列)
其中nonceStr和package都是前面调用的统一下单的接口返回的。
这里的signType是“MD5”.
另外,这个签名拼合的时候,最后要加一个key,就是app的key。
key的排序在最后,排序不参与字典序。具体规则见官方文档。
第八步骤:线上测试
至此,万事具备,包括东风。可以测试了。
建议使用iPhone手机测试,如果有问题IOS会报出错信息,Android不会。
最常见的问题就是“Invalid signature”,这个错误信息太笼统了。
需要更细致的调试和辛勤的打Log。我在这个坑里淌了两天……
注:本地测试环境不能测试,必须发布到线上测试环境(非生产环境),
并且线上测试环境的域名和URI等信息都要在公众号设置里有授权。
以上是微信支付的详细流程,无论接入那个产品的支付,大体流程都是这个样子,但是自己在做的时候一定要确定自己公司要接入的产品到底是哪个,比如公众号支付、APP支付等。。