最近工作遇到了和微信合作的需求，【微信掃碼支付】和【微信掃碼登錄】，下面已現有網站為例解讀一下針對這兩種需求的解決方案。僅供參考。

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

? ?實際上微信的速度還是很不錯。代碼：

? ?<script type="text/javascript">
? ? var timeer;
? ? $(document).ready(function () {
? ? ? ? timeer = ?setInterval("GetStatus()",3000);
? ? });
? ? function GetStatus(){
? ? ? ? $.ajax({
? ? ? ? ? ? ? ? url: "查詢url",
? ? ? ? ? ? async:true,
? ? ? ? ? ? type:"GET",
? ? ? ? ? ? timeout:4000,
? ? ? ? ? ? success:function(result){
? ? ? ? ? ? ? ? if (成功) {
? ? ? ? ? ? ? ? ?//處理自己的業務邏輯
? ? ? ? ? ? ? ?}esle{
?//處理自己的業務邏輯
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? });
? ? }
? ? </script>?

? ? ? ?

說到底，微信文檔給出的API已經很完善了。好好研究就行。

End.

總結

以上是生活随笔為你收集整理的【微信扫码登录】以及【微信扫码支付】解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。