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

来源：互联网发布：php时间运算编辑：程序博客网时间：2024/05/01 23:10

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

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.

0 0