- 完成微信掃碼登錄web頁面，實(shí)現(xiàn)用戶自動登錄的流程
準(zhǔn)備工作
- 微信相關(guān)
微信公眾平臺測試賬號系統(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
微信開放平臺文檔https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
微信公眾平臺接口調(diào)試工具https://mp.weixin.qq.com/debug/cgi-bin/apiinfo
- 內(nèi)網(wǎng)穿透
https://ngrok.com/
由于服務(wù)器在國外，訪問較慢，并且最近由于無法完成注冊，所以不能自定義自有域名，每次啟動生成隨機(jī)域名，會導(dǎo)致配置麻煩
建議采用http://www.ngrok.cc，使用方便教程說明
整體流程說明
1、完成服務(wù)器登錄獲取access_token(存在有效期，需要定時刷新)，在公眾平臺測試賬號系統(tǒng) 可以獲得 appid/secret信息
2、瀏覽器打開登錄頁面
3、服務(wù)器接收到請求，生成隨機(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ā)后，會有APP發(fā)送消息到微信后臺
10、微信后臺接收到消息，將轉(zhuǎn)發(fā)到服務(wù)端，通過平臺配置的接口配置信息 返回?cái)?shù)據(jù)
由于微信配置接口，只能是 http：80/https：443 硬性規(guī)定，所以該步驟最方便的是采用 ngrok 內(nèi)網(wǎng)穿透，實(shí)現(xiàn)對內(nèi)網(wǎng)端口的映射，達(dá)到微信配置接口的要求
11、在微信后臺返回?cái)?shù)據(jù)會包含用戶的openid
EventKey: session id,對應(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、向微信平臺發(fā)送文本消息，通知掃碼情況
<xml>
<ToUserName><![CDATA[oy8r5xxxxxxxxxU]]></ToUserName>
<FromUserName><![CDATA[gh_d1xxxxcfbc]]></FromUserName>
<CreateTime><![CDATA[1558686914059]]></CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[掃描二維碼測試: test1558686904986]]></Content>
</xml>
16、微信平臺收到消息，將轉(zhuǎn)發(fā)到用戶微信上
