请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 微信全家桶接入指南(登录、支付、分享)

4
回复
269
查看
[复制链接]

1

主题

4

帖子

25

积分

 楼主| 2020-4-25 23:21:49 显示全部楼层 |阅读模式
本帖最后由 saubcy 于 2020-4-25 23:35 编辑
目前来说快应用平台上支持的微信功能主要是三个:微信登录、微信支付、微信分享
踩了一个多月的坑,总算是都给集成上了,简单总结一下集成过程,以及掉进去过的坑,让大家少走一点儿弯路……

准备工作
1、新建快应用工程,并使用下面命令生成发布证书
  1. openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
复制代码
过程中的信息可以根据自身情况随意输入,或是全部使用默认值,最后会得到2个文件:certificate.pem,private.pem
将他们都拷贝至工程的 sign/release目录下,当然,为了后期调试方便,debug目录下我也拷贝了一份

p.s. 如果说是Windows系统的话,默认没有openssl命令,可以下载Win32/Win64 OpenSSL(
http://slproweb.com/products/Win32OpenSSL.html)这个软件。

2、计算得到Android应用签名(微信开放平台上使用)
  1. PS D:\quick\sign\release> openssl x509 -noout -fingerprint -md5 -inform pem -in certificate.pem
  2. MD5 Fingerprint=81:83:4D:1F:15:25:22:A5:EB:5C:72:CD:F8:78:EC:72
复制代码
将上面得到“81:83:4D:1F:15:25:22:A5:EB:5C:72:CD:F8:78:EC:72”去掉其中的冒号,并转换成全小写,得到:81834d1f152522a5eb5c72cdf878ec72,记住他,这就是申请微信应用时需要用到的Android签名

3、获取快应用使用签名(配置在工程manifest.json文件里),这个比较简单,只需要打开第一步中生成的certificate.pem文件,可以看见如下内容:
  1. -----BEGIN CERTIFICATE-----
  2. MIIDazCCAlOgAwIBAgIUJkm6BJdPFGni+iuUwI/FAHL+AscwDQYJKoZIhvcNAQEL
  3. BQAwRTELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxITAfBgNVBAoM
  4. GEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDA0MjUxMjU0MjZaFw0zMDA0
  5. MjMxMjU0MjZaMEUxCzAJBgNVBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEw
  6. HwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwggEiMA0GCSqGSIb3DQEB
  7. AQUAA4IBDwAwggEKAoIBAQDggUNoltlOObtgXq4cwuRYsVq3PJ/1izR7Zp+/Cqwt
  8. Th68cUWPysMi01Cc2F9rcJw4drbKj/M+1DhyvVP7/dVDEAj9UDUKVsQGKlAIOBuV
  9. MZJIr8BEQtFUi/k7vXe8LS4Kqmh3z+S4Mfe9RPwECfsn4qdwXg0TdVs1mA67vZue
  10. fkZkyNMBHgdU6hthK+dIMAFzjaietPXqrotsJZMROM9QAN+qYGQtJDmgrzWz8FPr
  11. aQtIQk5DWmcqh9AN97QjjTDHZoPbMeVRSrsYoUkZYiWM7y0k3nfWc0xvVd5ilS2L
  12. N7GIjbP5A0MyZxKnceJ3WzKwPJtMEg1biOo2US1kduzdAgMBAAGjUzBRMB0GA1Ud
  13. DgQWBBTHW/pb1FpJw/80hQaGPRQt8XY7UjAfBgNVHSMEGDAWgBTHW/pb1FpJw/80
  14. hQaGPRQt8XY7UjAPBgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQCU
  15. DYeIDFJkwmR9OTgrNXZ4AfbORSMBYDQ31o4TtIBl4po+PSUI86tDbh45tmu73xI9
  16. awLn+VPsgU3Q3jabyHiAvic5Q3Ge7mdYzZfLIlwTNDcr4HhnRvMvPhF3Owg6UaUl
  17. 1E9LD5XeIvhVO51PfgOZqTSX1CpEF7uPdKk4jCa7Py7mBvvzFqzIEo0LAf6yFKf/
  18. zqGCH2x70uXwoTDb1Kc0CCUPmVxF5gtHbdWjP76BDPleA7cAy6ig5FOZwWzRKmUE
  19. jFuHs27nYFf3sdR7zjRKVrzYiqPBHJnxP5nH0zqRAyR8mD4GCg8jcpDdITZlsfeQ
  20. ShbFDlK+AQl6cMBaVt/f
  21. -----END CERTIFICATE-----
复制代码
去掉文件的头尾,然后找一个可以在线去回车换行的网站,比如这个(http://www.txttool.com/WenBen_StrCompress.asp),可以得到最终要用在manifest.json中的签名字符串:
  1. MIIDazCCAlOgAwIBAgIUJkm6BJdPFGni+iuUwI/FAHL+AscwDQYJKoZIhvcNAQELBQAwRTELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxITAfBgNVBAoMGEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDA0MjUxMjU0MjZaFw0zMDA0MjMxMjU0MjZaMEUxCzAJBgNVBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDggUNoltlOObtgXq4cwuRYsVq3PJ/1izR7Zp+/CqwtTh68cUWPysMi01Cc2F9rcJw4drbKj/M+1DhyvVP7/dVDEAj9UDUKVsQGKlAIOBuVMZJIr8BEQtFUi/k7vXe8LS4Kqmh3z+S4Mfe9RPwECfsn4qdwXg0TdVs1mA67vZuefkZkyNMBHgdU6hthK+dIMAFzjaietPXqrotsJZMROM9QAN+qYGQtJDmgrzWz8FPraQtIQk5DWmcqh9AN97QjjTDHZoPbMeVRSrsYoUkZYiWM7y0k3nfWc0xvVd5ilS2LN7GIjbP5A0MyZxKnceJ3WzKwPJtMEg1biOo2US1kduzdAgMBAAGjUzBRMB0GA1UdDgQWBBTHW/pb1FpJw/80hQaGPRQt8XY7UjAfBgNVHSMEGDAWgBTHW/pb1FpJw/80hQaGPRQt8XY7UjAPBgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQCUDYeIDFJkwmR9OTgrNXZ4AfbORSMBYDQ31o4TtIBl4po+PSUI86tDbh45tmu73xI9awLn+VPsgU3Q3jabyHiAvic5Q3Ge7mdYzZfLIlwTNDcr4HhnRvMvPhF3Owg6UaUl1E9LD5XeIvhVO51PfgOZqTSX1CpEF7uPdKk4jCa7Py7mBvvzFqzIEo0LAf6yFKf/zqGCH2x70uXwoTDb1Kc0CCUPmVxF5gtHbdWjP76BDPleA7cAy6ig5FOZwWzRKmUEjFuHs27nYFf3sdR7zjRKVrzYiqPBHJnxP5nH0zqRAyR8mD4GCg8jcpDdITZlsfeQShbFDlK+AQl6cMBaVt/f
复制代码

微信开放平台应用申请

1、登录微信开放平台(https://open.weixin.qq.com/),在 管理中心中创建一个移动应用


1.png

2、在Android的应用签名处填上签名得到的签名值“81834d1f152522a5eb5c72cdf878ec72”,应用包名处保持跟快应用的一致(对于微信登录、支付来说,并不无包名一致的限制,但是微信分享则要求必须保持一致,这里后期在微信开放平台也可以随时修改随时生效)

2.png

3、在 管理中心中创建一个网站应用,这里的授权回调域填写自己的域名就可以了(其实好像也不会进行校验,并且真正的支付回调通知也不是跟这个相关)
5.png

4、然后耐心的等待微信审核通过,通常都要一周多一点的样子(7个工作日),接着就可以拿到AppID跟AppSecret了
3.png


微信登录对接
1、首先需要修改manifest.json,添加上对应的features信息
  1.     {
  2.       "name": "service.wxaccount",
  3.       "params": {
  4.         "appId": "wx1234567890abcdef",
  5.         "package": "com.application.demo",
  6.         "sign": "MIIDazCCAlOgAwIBAgIUJkm6BJdPFGni+iuUwI/FAHL+AscwDQYJKoZIhvcNAQELBQAwRTELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxITAfBgNVBAoMGEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDA0MjUxMjU0MjZaFw0zMDA0MjMxMjU0MjZaMEUxCzAJBgNVBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDggUNoltlOObtgXq4cwuRYsVq3PJ/1izR7Zp+/CqwtTh68cUWPysMi01Cc2F9rcJw4drbKj/M+1DhyvVP7/dVDEAj9UDUKVsQGKlAIOBuVMZJIr8BEQtFUi/k7vXe8LS4Kqmh3z+S4Mfe9RPwECfsn4qdwXg0TdVs1mA67vZuefkZkyNMBHgdU6hthK+dIMAFzjaietPXqrotsJZMROM9QAN+qYGQtJDmgrzWz8FPraQtIQk5DWmcqh9AN97QjjTDHZoPbMeVRSrsYoUkZYiWM7y0k3nfWc0xvVd5ilS2LN7GIjbP5A0MyZxKnceJ3WzKwPJtMEg1biOo2US1kduzdAgMBAAGjUzBRMB0GA1UdDgQWBBTHW/pb1FpJw/80hQaGPRQt8XY7UjAfBgNVHSMEGDAWgBTHW/pb1FpJw/80hQaGPRQt8XY7UjAPBgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQCUDYeIDFJkwmR9OTgrNXZ4AfbORSMBYDQ31o4TtIBl4po+PSUI86tDbh45tmu73xI9awLn+VPsgU3Q3jabyHiAvic5Q3Ge7mdYzZfLIlwTNDcr4HhnRvMvPhF3Owg6UaUl1E9LD5XeIvhVO51PfgOZqTSX1CpEF7uPdKk4jCa7Py7mBvvzFqzIEo0LAf6yFKf/zqGCH2x70uXwoTDb1Kc0CCUPmVxF5gtHbdWjP76BDPleA7cAy6ig5FOZwWzRKmUEjFuHs27nYFf3sdR7zjRKVrzYiqPBHJnxP5nH0zqRAyR8mD4GCg8jcpDdITZlsfeQShbFDlK+AQl6cMBaVt/f"
  7.       }
  8.     }
复制代码
参数说明:
appId,从微信开放平台上移动应用的值
package,微信开放平台上填写的包名
sign,certificate.pem文件中的内容

2、参考快应用官方文档(https://doc.quickapp.cn/features/service/wxaccount.html),使用wxaccount.authorize接口进行拉起微信进行登录,登录成功可以得到对应的code参数

3、将code参数传递给服务器,由服务器根据微信官方文档(https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_1)交换回来微信客户信息,然后给客户端返回登录token,至此,则微信登录完成。

p.s. 因为之前有在微信公众号上做过微信登录信息的对接,服务器接口都可以原样复用,所以这一块的对接比较顺畅,基本没遇到什么问题。

微信支付对接
1、首先也是修改manifest.json,添加上对应的features信息
  1.     {
  2.       "name": "service.wxpay",
  3.       "params": {
  4.         "url": "https://demo.application.com/mweb",
  5.         "package": "com.application.demo",
  6.         "sign": "MIIDazCCAlOgAwIBAgIUJkm6BJdPFGni+iuUwI/FAHL+AscwDQYJKoZIhvcNAQELBQAwRTELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxITAfBgNVBAoMGEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDA0MjUxMjU0MjZaFw0zMDA0MjMxMjU0MjZaMEUxCzAJBgNVBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDggUNoltlOObtgXq4cwuRYsVq3PJ/1izR7Zp+/CqwtTh68cUWPysMi01Cc2F9rcJw4drbKj/M+1DhyvVP7/dVDEAj9UDUKVsQGKlAIOBuVMZJIr8BEQtFUi/k7vXe8LS4Kqmh3z+S4Mfe9RPwECfsn4qdwXg0TdVs1mA67vZuefkZkyNMBHgdU6hthK+dIMAFzjaietPXqrotsJZMROM9QAN+qYGQtJDmgrzWz8FPraQtIQk5DWmcqh9AN97QjjTDHZoPbMeVRSrsYoUkZYiWM7y0k3nfWc0xvVd5ilS2LN7GIjbP5A0MyZxKnceJ3WzKwPJtMEg1biOo2US1kduzdAgMBAAGjUzBRMB0GA1UdDgQWBBTHW/pb1FpJw/80hQaGPRQt8XY7UjAfBgNVHSMEGDAWgBTHW/pb1FpJw/80hQaGPRQt8XY7UjAPBgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQCUDYeIDFJkwmR9OTgrNXZ4AfbORSMBYDQ31o4TtIBl4po+PSUI86tDbh45tmu73xI9awLn+VPsgU3Q3jabyHiAvic5Q3Ge7mdYzZfLIlwTNDcr4HhnRvMvPhF3Owg6UaUl1E9LD5XeIvhVO51PfgOZqTSX1CpEF7uPdKk4jCa7Py7mBvvzFqzIEo0LAf6yFKf/zqGCH2x70uXwoTDb1Kc0CCUPmVxF5gtHbdWjP76BDPleA7cAy6ig5FOZwWzRKmUEjFuHs27nYFf3sdR7zjRKVrzYiqPBHJnxP5nH0zqRAyR8mD4GCg8jcpDdITZlsfeQShbFDlK+AQl6cMBaVt/f"
  7.       }
  8.     }
复制代码
参数说明:
url,快应用MWEB支付中间页,后面再做说明
package,微信开放平台上填写的包名
sign,certificate.pem文件中的内容

2、参考快应用官方文档(https://doc.quickapp.cn/features/service/wxpay.html),这里有2中微信支付方式,一种是APP方式,一种是MWEB方式,并且不能选择,只能依据用户手机的情况决定哪一种是可以使用的。

3、针对APP方式,首先需要根据微信官方文档(https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_1)在服务端对接统一下单接口,即使抛开快应用不说,微信支付的这个下单接口也是大坑满满,总结起来有下面几个:
  a) trade_type参数,这里注意需要设置成APP,因为之前服务端接口对接的是JSAPI,原以为可以直接复用,结果在这里踩中了第一个大坑
  b)微信支付签名参数,其中JSAPI的签名参数为:appId, timeStamp, nonceStr, package, signType,而APP支付的签名参数则为:appid, noncestr, package, partnerid, prepayid, timestamp,注意大小写!!!

  c)如果说你一直遇到玄学的2001错误,其首先就是需要使用微信支付接口签名校验工具来校验一下生成的签名,具体使用方式参考下图:
4.png
参数说明:
package,使用固定值:“Sign=WXPay”
appid,微信开放平台上填写的appid
partnerid,微信商户号
prepayid,统一下单接口返回的预支付交易会话标识
noncestr,随机字符串
timestamp,时间戳
商户key,在微信支付上配置的加密key

p.s. 基本上来说,只要这里的签名正确,微信app支付就没有什么大问题了

4、针对MWEB方式,还是先参考微信官方的统一下单接口(https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_20&index=1)进行服务端对接
  a)在服务端上MWEB比较简单,不用再关心签名的问题,只需要把统一下单接口返回的mweb_url返回给客户端就好了
  b)关于manifest.json中的url值,官方的说法在1040版本之前需要实现一个跳转中间页面,不需要界面,只需要单纯从url参数中解析出来mweb_url参数,然后进行跳转即可,因为手上没有1040版本的手机,所以没有进行验证,这个页面也没有实现
  c)关于接口中的referer字段值,填写在微信开放平台申请网站应用时填写的“授权回调域”的值就好了,比如:“https://demo.application.com/mweb”
  d)统一下单接口使用的AppID跟AppSecret,依然使用移动应用的值,不要使用网站应用的,网站应用单纯就只有一个授权回调域有用

微信分享对接
1、按照惯例,依然是修改manifest.json,添加上对应的features信息

  1.     {
  2.       "name": "service.share",
  3.       "params": {
  4.         "appSign": "MIIDazCCAlOgAwIBAgIUJkm6BJdPFGni+iuUwI/FAHL+AscwDQYJKoZIhvcNAQELBQAwRTELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxITAfBgNVBAoMGEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMDA0MjUxMjU0MjZaFw0zMDA0MjMxMjU0MjZaMEUxCzAJBgNVBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDggUNoltlOObtgXq4cwuRYsVq3PJ/1izR7Zp+/CqwtTh68cUWPysMi01Cc2F9rcJw4drbKj/M+1DhyvVP7/dVDEAj9UDUKVsQGKlAIOBuVMZJIr8BEQtFUi/k7vXe8LS4Kqmh3z+S4Mfe9RPwECfsn4qdwXg0TdVs1mA67vZuefkZkyNMBHgdU6hthK+dIMAFzjaietPXqrotsJZMROM9QAN+qYGQtJDmgrzWz8FPraQtIQk5DWmcqh9AN97QjjTDHZoPbMeVRSrsYoUkZYiWM7y0k3nfWc0xvVd5ilS2LN7GIjbP5A0MyZxKnceJ3WzKwPJtMEg1biOo2US1kduzdAgMBAAGjUzBRMB0GA1UdDgQWBBTHW/pb1FpJw/80hQaGPRQt8XY7UjAfBgNVHSMEGDAWgBTHW/pb1FpJw/80hQaGPRQt8XY7UjAPBgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQCUDYeIDFJkwmR9OTgrNXZ4AfbORSMBYDQ31o4TtIBl4po+PSUI86tDbh45tmu73xI9awLn+VPsgU3Q3jabyHiAvic5Q3Ge7mdYzZfLIlwTNDcr4HhnRvMvPhF3Owg6UaUl1E9LD5XeIvhVO51PfgOZqTSX1CpEF7uPdKk4jCa7Py7mBvvzFqzIEo0LAf6yFKf/zqGCH2x70uXwoTDb1Kc0CCUPmVxF5gtHbdWjP76BDPleA7cAy6ig5FOZwWzRKmUEjFuHs27nYFf3sdR7zjRKVrzYiqPBHJnxP5nH0zqRAyR8mD4GCg8jcpDdITZlsfeQShbFDlK+AQl6cMBaVt/f",
  5.         "qqKey": "123456",
  6.         "wxKey": "wx1234567890abcdef",
  7.         "sinaKey": "123456"
  8.       }
复制代码
参数说明:
appSign,certificate.pem文件中的内容
wxKey,从微信开放平台上移动应用的值
其他值,如果不使用其他分享方式可以随便填或是留空

2、参考官方文档(https://doc.quickapp.cn/features/service/share.html)调用分享接口进行分享

p.s. 跟前面的登录、支付比起来,分享一没有服务器交互,二没有乱七八糟的前面字段算法,似乎也没什么坑可踩了。


以上就是微信全家桶对接的全过程,分享一下希望大家对接过程中能少踩一些坑

回复

使用道具 举报

1

主题

3

帖子

20

积分

2020-4-29 11:52:24 显示全部楼层
兄弟你真棒!可惜我快踩完坑了才看到你这篇文章
回复

使用道具 举报

1

主题

4

帖子

25

积分

 楼主| 2020-4-29 19:46:33 显示全部楼层
艾登 发表于 2020-4-29 11:52
兄弟你真棒!可惜我快踩完坑了才看到你这篇文章

寄几踩一遍印象更深刻,我也是踩了一个来月
回复

使用道具 举报

1

主题

17

帖子

90

积分

2020-5-8 16:30:53 显示全部楼层
666
回复

使用道具 举报

0

主题

1

帖子

5

积分

2020-5-9 11:07:52 显示全部楼层
six six six   
图文并茂,不错
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册