【微信扫码登录】以及【微信扫码支付】解决方案

最近工作遇到了和微信合作的需求，【微信扫码支付】和【微信扫码登录】，下面已现有网站为例解读一下针对这两种需求的解决方案。仅供参考。

1、微信扫码登录

其实微信开发者中心说的很全面，大家可以看下：

登录：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN

获取token、用户信息等：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&token=&lang=zh_CN

下面以一号店为例说一下开发过程：

1、点击微信登录会打开一个tab页，网址如下：

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https://passport.yhd.com/wechat/callback.do&response_type=code&scope=snsapi_login&state=e68abe3f7542883fb323f60a2ec43fbe#wechat_redirect

appid：微信公众平台注册的appId

redirect_uri：实际上就是扫码之后的回调，微信会根据这个参数将当前页面跳转，直接redirect掉。会带上code和state的参数。

实际redirect url：https://passport.yhd.com/wechat/callback.do?code=微信返回的CODE&state=e68abe3f7542883fb323f60a2ec43fbe

response_type：响应的类型为code

scope：目前网页登录就是snsapi_login

state：自己传入的参数，防止被攻击。

2、用户扫码成功后，tab页的url会redirect为：https://passport.yhd.com/wechat/callback.do?code=微信返回的CODE&state=e68abe3f7542883fb323f60a2ec43fbe

此时callback.do 相当于是一号店自己的controller，那么这里面可以处理自己的逻辑。很显然逻辑就是用户登录

①步骤一：通过code获取access_token和openid

微信接口：https://api.weixin.qq.com/sns/oauth2/access_token？appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}

②步骤二：通过access_token和openid获取用户基本信息

微信接口：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

③步骤三：通过返回的用户基本信息，做登录或者注册登录的业务逻辑。

④步骤四：完成登录后，页面应该会被刷新。

这个时候需要知道一下js的基本知识:window.opener 获取父级url，然后改变父级url的location并关闭当前扫码页。

2、微信扫码支付

开发文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1#

下面模式二为例，线上也有成功的例子京东和凡客。下面对微信文档中的步骤做解释。

（1）商户后台系统根据用户选购的商品生成订单。

（2）用户确认支付后调用微信支付【统一下单API】生成预支付交易；

这里需要查看统一下单的接口，文档地址：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1

如果下单成功，返回结果中：code_url是生成二维码扫码链接。

（3）微信支付系统收到请求后生成预支付交易单，并返回交易会话的二维码链接code_url。

（4）商户后台系统根据返回的code_url生成二维码。

这里面说明一下几种生成二维码的方式，无论是C#和java网上都有现成的方式，实际上典型的验证码应用。下面以C#为例：

方式一：通过ZXing.dll

Bitmap img = null;

if (!string.IsNullOrEmpty(code_url))
{
BarcodeWriter writer = new BarcodeWriter();
writer.Format = BarcodeFormat.QR_CODE;
writer.Options.Hints.Add(EncodeHintType.CHARACTER_SET, "UTF-8");//编码问题
writer.Options.Hints.Add(
EncodeHintType.ERROR_CORRECTION,
ZXing.QrCode.Internal.ErrorCorrectionLevel.H
);
const int codeSizeInPixels = 250; //设置图片长宽
writer.Options.Height = writer.Options.Width = codeSizeInPixels;
writer.Options.Margin = 0;//设置边框
ZXing.Common.BitMatrix bm = writer.Encode(code_url);
img = writer.Write(bm);
}

生成的 Bitmap 直接response到页面。

if (img != null)
{
img.Save(MStream, System.Drawing.Imaging.ImageFormat.Jpeg);
//图片转btye[]
this.ViewBag.ImgArray = MStream.ToArray();
Response.ContentType = "image/Gif";
Response.ClearContent();
Response.BinaryWrite(MStream.ToArray());
Response.Flush();
Response.Close();
}

html会生成一下img标签装载图片

方式二：controller直接return File(MStream.ToArray(), "image/Gif");

方式三：base64位编码。

string base64DataString = Convert.ToBase64String(imgData);//byte转base64字符串

<img alt="微信扫码" title="微信扫码" src="data:image/png;base64,@base64DataString" />//html中img标签设置src

（5）用户打开微信“扫一扫”扫描二维码，微信客户端将扫码内容发送到微信支付系统。

（6）微信支付系统收到客户端请求，验证链接有效性后发起用户支付，要求用户授权。

（7）用户在微信客户端输入密码，确认支付后，微信客户端提交授权。

（8）微信支付系统根据用户授权完成支付交易。

（9）微信支付系统完成支付交易后给微信客户端返回交易结果，并将交易结果通过短信、微信消息提示用户。微信客户端展示支付交易结果页面。

（10）微信支付系统通过发送异步消息通知商户后台系统支付结果。商户后台系统需回复接收情况，通知微信后台系统不再发送该单的支付通知。

商户后台系统接收到消息，做自己的业务处理。

（11）未收到支付通知的情况，商户后台系统调用【查询订单API】。

（12）商户确认订单已支付后给用户发货。

另，有些业务需求要求扫码的网站也要给予更友好的提示，如支付成功、支付失败等温馨提醒，针对这种需求的解决方案为：

扫码的网站异步查询订单状态，文档地址：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_2

实际上微信的速度还是很不错。代码：

说到底，微信文档给出的API已经很完善了。好好研究就行。

End.

【微信扫码登录】以及【微信扫码支付】解决方案相关推荐

Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
微信扫码登录自定义二维码样式
微信扫码登录自定义二维码样式前言 Java生成data-url 1.工具类pom 2.代码实现将data-url赋值给href 前言今天在做web端扫码登录时,前端需要定义二维码的样式.官方文档 ...
微信扫码登录自定义二维码显示信息
微信扫码登录,自定义二维码显示信息 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js& ...
微信网页第三方登录原理微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户，比如自媒体和媒体，企业官方微信公众账号运营人员使用，当然你所在的团队或者公司有实力去开发一些内容，也可以调用公众
微信网页第三方登录原理微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户,比如自媒体和媒体,企业官方微信公众账号运营人员使用,当然你所在的团队或者公司有实力去开发一些内容,也可以调用公众平 ...
Python itchat模块报错：为了你的帐号安全，此微信号不能登录网页微信。你可以使用Windows微信或Mac微信在电脑端登录。
有谁知道Python itchat模块的问题? 我就写了两行代码: itchat.auto_login(True) friends = itchat.get_friends(update=True)[ ...
近期你已经授权登录过_微信上怎么登录QQ 微信和qq有什么实质区别
参加工作之后,大多数人都将自己常用的聊天软件换成了微信,QQ也渐渐不再使用.但是,QQ中基本上都是小学.初中.高中的好友以及同学,这些人的消息我们也是不想错过的.近期,有网友称微信上可登录QQ,那么微 ...
修改微信扫码登录，二维码样式
开工后的第一篇博客,记得在去年给自己定的计划是每月一篇博客,看来有点没有持之以恒,抱歉-,进入正题: 过完年来一直在赶项目进度,期间也遇到很多问题,很想把它分享出来,时间问题吧,没有及时写出来,今天遇 ...
微信扫码登录，微信公众号生成二维码，关注登录nodejs+vue
微信公众号生成二维码,关注后扫码登录技术栈为nodejs+vue 有不懂的可以加我微信yizheng369 1.效果初始: 关注后: 2.源码此项目为前后端分离项目,前后端代码都在这个仓库里, ...
微信网页扫码登录与微信公众号授权登录的区别
最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似.以下是我个人摸索过程中发现的两者的异同: 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(昵称 ...
PHP小程序码扫码登录网站,微信扫小程序码实现网页端登录
常见的微信扫码登录有两种这两种方式都需要提交企业资料认证和300元年费,有些想要学习或者自己的网站没有盈利的,其实不舍得花这个钱,特别是个人开发者,没有企业资料去做认证. 既然没法做企业认证,那我们 ...

【微信扫码登录】以及【微信扫码支付】解决方案

【微信扫码登录】以及【微信扫码支付】解决方案相关推荐

最新文章

热门文章