LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

從微信掃碼授權到登錄網頁,中間究竟發生了什么?

admin
2025年1月14日 16:43 本文熱度 186

導讀

這篇文章是關于微信掃碼授權登錄第三方網頁的學習筆記。先在微信開放平臺申請配置,獲取相關參數生成二維碼,微信 SDK 輪詢檢測不同掃碼狀態有不同狀態碼,根據狀態和 code 重定向到后臺,后臺獲取用戶信息,如 Gitee 存 Cookie 重定向主頁完成登錄。

?? 背景

關于我昨天突然接到神秘“面試”:微信掃碼授權登錄的實現邏輯是神魔?在這個掃碼授權的過程中客戶端、服務端、微信平臺都做了些神魔?二維碼里面又有哪些信息?

從手機微信掃一掃二維碼到登錄個人的知乎賬戶,中間究竟發生了什么,是怎么做到的呢?

在了解它底層具體怎么實現之前,我們可以先去了解怎么去實現這個微信授權登錄,如何給自己的網站加上微信授權登錄?

?? 微信開放平臺申請

  1. 登錄微信開放平臺,申請開發的賬號

  2. 來到網站應用頁面創建網站應用:

  3. 在此處填好信息以及回調的域名,具體回調域名要寫什么在后面會有講解,在通過申請后可以拿到APPIDAPPSECRET

  4. 進行開發者的資質認證,需要繳納300元:

?? 獲取網頁的二維碼

做完上面的事情之后,我們就拿到了三個屬性:APPID、APPSECRET、回調域名,接下來我們就可以獲取網頁的二維碼了

這個二維碼是微信生成的,我們只需要按下面的格式鍵入正確的地址和參數就可以獲取:

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

該請求所需要配置的參數列表為:

參數是否必須說明
appid應用的唯一表示,在上面的申請中拿到了
redirect_uri回調的域名,也就是上面填的哪個域名
response_typecode,此處就是一個占位符,后續會使用它進行授權獲取access_tokenopenId
scope網頁授權填寫:snsapi_login,表示應用授權的作用域
state用于防止CSRF攻擊(跨站請求偽造攻擊)

我們以知乎的舉例,可以拿到知乎的登陸的二維碼的URL為:

https://open.weixin.qq.com/connect/qrconnect?appid=wx268fcfe924dcb171&redirect_uri=https://www.zhihu.com/oauth/callback/wechat?action=login&from=&&response_type=code&scope=snsapi_login#wechat

看上面的URL我們可以得出它的參數列表為:

  • APPID:wx268fcfe924dcb171

  • Redirect_uri:https://www.zhihu.com/oauth/callback/wechat?action=login&from=&

  • response_type:code

  • scope:snsapi_login

  • state:由于是不一定要填寫的,此處并沒有state這個參數

?? 輪詢請求檢查狀態

通過上面那個地址我們可以來到知乎的微信二維碼授權登錄頁面,打開控制臺,我們就可以發現有一個請求一直在進行輪詢,每15s進行一次輪詢:

我們具體來分析一下這個輪詢的方法,可以看到這個輪詢的方法里面有兩個參數:

  1. uuid:我認為是進行標識機器的一個ID,每一個二維碼都對應一個唯一的UUID,因為每一次的二維碼都是不一樣的,這樣我們就可以在微信掃描之后,知道微信與哪一臺機器進行綁定,進而在授權之后進行一個重定向

  2. -:計數器,上述的十來個請求,它的計數器會依次加一

如果我們長期不掃碼,它就會一直輪詢請求,在過去一定時間后會刷新二維碼,如果不掃碼,它返回的結果就一直為:window.wx_errcode = 408;window.wx_code = ''

?? 微信掃一掃

?? 1.掃碼成功

在我們進行掃碼之后,頁面會變為:

此時進行輪詢的接口的查看響應,可以發現是window.ex_errcode = 404; window.wx_code = '',也就是說由最開始的狀態碼408轉為404

? 2.授權失敗

手機上的頁面為,在掃碼成功后,就會調起微信OAuth2.0,請求微信授權登錄

如果拒絕授權,返回的狀態碼就為:window.ex_errcode = 403; window.wx_code = '',頁面跳轉到

?

? 3.授權成功

而我們如果授權,此時返回回來的數據就是:window.wx_errcode=405;window.wx_code='061xgj000c2DHP1dpk400y062z2xgj00';

  1. 此時微信SDK判斷到返回的code405,并且code不為空

  2. 就會拿到code然后重定向我們之前配置的回調的域名

  3. 重定向的好處就是,請求是瀏覽器發出的,而不是遠程調用的,這樣我們就知道這個code是對應的哪一個瀏覽器,也就是有了微信授權信息和瀏覽器的對應,如果要進行cookie的設置也可以:

  4. 帶上我們的code,此時就可以在后臺的程序中通過代碼,完成以下步驟:

  • 通過APPID APPSECRET CODE 獲取用戶的 access_token openid

  • 通過access_token openid 獲取用戶的個人信息

3.1 Gitee實現方案

這里我看Gitee的方案是,在請求到這個接口后,在cookie中存入個人信息,并重定向回網頁(后臺進行重定向):

重定向回了https://gitee.com/dashboard,因為cookie中有了個人信息了,所以就能登錄成功

3.2 知乎實現方案

而知乎的做法是返回一段前端代碼,然后調用了一個登錄的接口,進而重定向到主頁:


?? 總結

至此,從微信掃碼授權登錄到網頁獲得授權信息成功登陸的具體流程就講完了,大概的過程就是:

  1. 在微信開放平臺進行配置和申請,獲得APPID APPSECRET,配置好自己的回調URI

  2. 根據拿到的數據,配上指定的參數得到二維碼的URL

  3. 微信SDK在二維碼頁面進行15s一次輪詢檢測,對于不同的狀態有不同的狀態碼:

    • 如果沒有掃碼:狀態碼為408,且code為空

    • 如果掃碼既不接受也不拒絕授權:狀態碼為404,且code為空

    • 如果掃碼但是拒絕授權:狀態碼為403,且code為空

    • 如果掃碼并且同意授權:狀態碼為405,返回一個code

  4. 微信SDK檢測到狀態碼和code后,進行對之前配置的回調URI的重定向,帶上code

  5. 這個時候就來到了服務端,也就是后臺,后臺根據code依次獲取access_token openid個人信息

  6. 如果參照Gitee的做法,就可以直接把身份信息存入Cookie,然后重定向到主頁,至此,登錄結束

??友鏈


作者:派大金
鏈接:https://juejin.cn/post/7216293600484409403
來源:稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

該文章在 2025/1/15 13:05:05 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved

黄频国产免费高清视频,久久不卡精品中文字幕一区,激情五月天AV电影在线观看,欧美国产韩国日本一区二区
日本中文一区二区三区亚洲 | 日本韩国床震无遮挡高潮hd | 免费人成在线观看69式 | 亚洲欧美在线综合色影视 | 亚洲产精品一区二区 | 欧美伊久线香蕉观新在线 |