- 完成微信掃碼登錄web頁面，實(shí)現(xiàn)用戶自動(dòng)登錄的流程
準(zhǔn)備工作
- 微信相關(guān)
微信公眾平臺(tái)測(cè)試賬號(hào)系統(tǒng)https://open.weixin.qq.com/connect/qrconnect?appid=wx39c379788eb1286a&scope=snsapi_login&redirect_uri=http%3A%2F%2Fmp.weixin.qq.com%2Fdebug%2Fcgi-bin%2Fsandbox%3Ft%3Dsandbox%2Flogin
微信開放平臺(tái)文檔https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
微信公眾平臺(tái)接口調(diào)試工具https://mp.weixin.qq.com/debug/cgi-bin/apiinfo
- 內(nèi)網(wǎng)穿透
https://ngrok.com/
由于服務(wù)器在國外，訪問較慢，并且最近由于無法完成注冊(cè)，所以不能自定義自有域名，每次啟動(dòng)生成隨機(jī)域名，會(huì)導(dǎo)致配置麻煩
建議采用http://www.ngrok.cc，使用方便教程說明
整體流程說明
1、完成服務(wù)器登錄獲取access_token(存在有效期，需要定時(shí)刷新)，在公眾平臺(tái)測(cè)試賬號(hào)系統(tǒng) 可以獲得 appid/secret信息
2、瀏覽器打開登錄頁面
3、服務(wù)器接收到請(qǐng)求，生成隨機(jī)sessionId用于后面用戶登錄校驗(yàn)
4、生成二維碼參數(shù)信息，具體組裝例子：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1443433542
{"expire_seconds": 604800, "action_name": "QR_STR_SCENE", "action_info": {"scene": {"scene_str": "session id"}}}
5、獲取ticket，用戶拼接二維碼圖片訪問地址
6、https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET 二維碼地址
7、內(nèi)嵌 img標(biāo)簽，<img src=二維碼 /> 并展示在瀏覽器中
8、微信APP打開掃一掃
9、掃碼觸發(fā)后，會(huì)有APP發(fā)送消息到微信后臺(tái)
10、微信后臺(tái)接收到消息，將轉(zhuǎn)發(fā)到服務(wù)端，通過平臺(tái)配置的接口配置信息 返回?cái)?shù)據(jù)
由于微信配置接口，只能是 http：80/https：443 硬性規(guī)定，所以該步驟最方便的是采用 ngrok 內(nèi)網(wǎng)穿透，實(shí)現(xiàn)對(duì)內(nèi)網(wǎng)端口的映射，達(dá)到微信配置接口的要求
11、在微信后臺(tái)返回?cái)?shù)據(jù)會(huì)包含用戶的openid
EventKey: session id,對(duì)應(yīng) 步驟4中 scene_str 參數(shù)信息
FromUserName：掃碼的用戶openid
12、根據(jù)openid可以獲取用戶基本信息
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839
13、根據(jù) sessionId和用戶基本信息完成服務(wù)端登錄邏輯的認(rèn)證流程
14、返回前端業(yè)務(wù)頁面
15、向微信平臺(tái)發(fā)送文本消息，通知掃碼情況
<xml>
<ToUserName><![CDATA[oy8r5xxxxxxxxxU]]></ToUserName>
<FromUserName><![CDATA[gh_d1xxxxcfbc]]></FromUserName>
<CreateTime><![CDATA[1558686914059]]></CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[掃描二維碼測(cè)試: test1558686904986]]></Content>
</xml>
16、微信平臺(tái)收到消息，將轉(zhuǎn)發(fā)到用戶微信上
