Part1前言

微信掃碼登錄，微信掃碼獲取排隊信息這些場景很常見，但是大家知道里面的原理是怎么實現的呢？今天我就來給大家解惑！

Part2總體流程

1瀏覽器請求服務器獲取到二維碼圖片

瀏覽器生成唯一值uuid

通過uuid獲取到帶參數的二維碼，將uuid作為key存進redis緩存服務器里面

服務端生成uuid返回給瀏覽器

通過uuid獲取到帶參數的二維碼，將uuid作為key存進redis緩存服務器里面

2用戶掃碼

手機進行掃描二維碼，然后手機攜帶uuid和用戶信息向手機的服務器發送請求，手機服務器收到之后攜帶uuid去redis服務器查詢用戶。

• 掃碼登錄：

查詢用戶成功之后返回一個Token給網頁服務器，通過解析這個Token可以拿出用戶的信息，然后瀏覽器就成功登錄微信了。

• 推送排隊信息 查詢用戶成功之后調用模板消息，然后排隊信息推送就成功了。

Part3開發

以微信掃碼獲取排隊信息為例

第一步，獲取uuid

為了簡化流程，且由前端生成uuid。

第二步，獲取Access token

public?async?Task<string>?GetAccessToken(){var?accesstoken?=?await?"https://api.weixin.qq.com/cgi-bin/token".SetQueryParams(new{grant_type?=?"client_credential",appid?=?WeixinSetting.Appid,secret?=?WeixinSetting.Appsecret}).GetJsonAsync<AccessToken>();return?accesstoken.Access_Token;}

第三步，使用uuid創建二維碼ticket

public?async?Task<string>?GetTicket(string?uuid,?string?token){var?accesstoken?=?await?"https://api.weixin.qq.com/cgi-bin/qrcode/create".SetQueryParams(new{access_token?=?token}).PostJsonAsync(new{expire_seconds?=?604800,action_name?=?"QR_STR_SCENE",action_info?=?new{scene?=?new{scene_str?=?uuid}}}).ReceiveJson<TicketUrl>();return?accesstoken.Ticket;}

第四步，通過 ticket 換取二維碼

如果自己有通過ticket生成二維碼的需求，可自行處理， 如果沒有可以直接調取微信公眾號接口

public?async?Task<byte[]>?GetQrCode(string?ticket){return?await?"https://mp.weixin.qq.com/cgi-bin/showqrcode".SetQueryParams(new{ticket?=?ticket}).GetBytesAsync();}

完整代碼如下

[HttpGet("GetQrCode")]public?async?Task<IActionResult>?GetQrCode(string?uuid){return?new?FileContentResult(?await?_qrCodeServices.ShowQrCode(uuid),?"image/jpeg");}

public?async?Task<byte[]>?ShowQrCode(string?uuid){string?token?=?await?GetAccessToken();string?ticket?=?await?GetTicket(uuid,?token);return?await?GetQrCode(ticket);}

這樣我們就生成了帶參數的二維碼圖片了

第六步，微信掃碼進行回調

在回調方法處理消息模板推送邏輯

[HttpPost]public?async?Task<string>?post(){IHttpBodyControlFeature?httpBodyControlFeature?=?Request.HttpContext.Features.Get<IHttpBodyControlFeature>();if?(httpBodyControlFeature?!=?null?){httpBodyControlFeature.AllowSynchronousIO?=?true;}string?content?=?new?StreamReader(Request.Body).ReadToEnd();await?qrCodeServices.PushTemplateMessage(content);return?"success";}

public?async?Task?PushTemplateMessage(string?content){XmlDocument?doc?=?new?XmlDocument();doc.LoadXml(content);if?(doc.DocumentElement["MsgType"].InnerText?!=?"Event")?return;if?(doc.DocumentElement["Event"].InnerText?!=?"SCAN")?return;string?value?=?doc.DocumentElement["FromUserName"].InnerText;string?token?=?await?GetAccessToken();var?accesstoken?=?await?"https://api.weixin.qq.com/cgi-bin/message/template/send".SetQueryParams(new{access_token?=?token}).PostJsonAsync(new{touser?=?value,template_id?=?"i4h4yHvgMgIoJ8-Mr49XcpbhMxmRXFJ5EF5DoOTGOMc",data?=?new{first?=?new{value?=?"當前排隊位置",color?=?"#173177"},keyword1?=?new{value?=?"70",color?=?"#173177"},keyword2?=?new{value?=?"40分鐘",color?=?"#173177"}}});}

這樣以微信掃碼獲取排隊信息就成功了

Part4總結

文章來源于生活中的點點滴滴，這也是我的即興使用，大家要是有更好的使用技巧，歡迎交流，獨樂樂不如眾樂樂，本篇就說到這里啦，希望對您有幫助。