用戶環(huán)境預(yù)期

• 微信內(nèi)置瀏覽器
• PC端瀏覽器
• 手機(jī)端瀏覽器

對于第一種情況：微信內(nèi)置瀏覽器，點(diǎn)擊微信登錄按鈕后，直接跳轉(zhuǎn)到微信授權(quán)頁面，會自動向用戶彈出是否同意xx公眾號獲取個人信息的彈窗，如果允許，則會完成用戶授權(quán)，繼續(xù)進(jìn)行接下來的操作。

對于第二種情況：PC端瀏覽器，點(diǎn)擊微信登錄按鈕后，將會跳轉(zhuǎn)到微信授權(quán)的二維碼頁面，等待用戶使用手機(jī)微信掃碼完成授權(quán)。

對于第三種情況：非微信環(huán)境的手機(jī)端瀏覽器，用戶體驗就不太好了，沒辦法像微信內(nèi)置瀏覽器那樣直接跳轉(zhuǎn)到授權(quán)頁面來喚起彈窗，除非支持長按二維碼識別，否則只能望碼興嘆。

實現(xiàn)邏輯

根據(jù)用戶環(huán)境的預(yù)期，主要針對前兩種情況進(jìn)行分析。
一種是直接跳轉(zhuǎn)到授權(quán)頁面，另一種是跳轉(zhuǎn)到二維碼頁面。

兩種模式的技術(shù)實現(xiàn)幾乎是相同的：

1、跳轉(zhuǎn)到授權(quán)頁面（直接授權(quán)鏈接或者二維碼）
2、用戶完成授權(quán)后跳轉(zhuǎn)到回調(diào)頁面，同時攜帶code
3、利用code獲取access_token
4、利用access_token和openid來獲取用戶的詳細(xì)信息

下面來說一下不同的地方：

1、跳轉(zhuǎn)到授權(quán)頁面的地址

微信環(huán)境：https://open.weixin.qq.com/connect/oauth2/authorize?appid=%s&redirect_uri=%s&response_type=code&scope=snsapi_userinfo&state=%s#wechat_redirect

PC環(huán)境：https://open.weixin.qq.com/connect/qrconnect?appid=%s&redirect_uri=%s&response_type=code&scope=snsapi_login&state=%s#wechat_redirect

除了資源地址不一樣，參數(shù)看起來差不多，除了 scope 看起來明顯不同。

很重要的區(qū)別：微信環(huán)境的 appid 是微信公眾號的 appid；而PC環(huán)境的 appid 是微信開放平臺上網(wǎng)站應(yīng)用的 appid

還有幾個注意的地方：redirect_url要提前進(jìn)行urlencode編碼；redirect_url要提前設(shè)置到授權(quán)回調(diào)域名里，并且要分別在微信公眾平臺和微信開放平臺進(jìn)行設(shè)置。

2、利用code獲取access_token

這個環(huán)節(jié)兩個環(huán)境基本相同，只有一點(diǎn)，微信環(huán)境的 appid 和 secret 是公眾號的，而PC環(huán)境的 appid 和 secret 則是開放平臺中網(wǎng)站應(yīng)用的。

注意：微信授權(quán)的 access_token 和其他的微信API所用的 access_token 并不是一回事，前者是用戶級別的，不同的授權(quán)用戶返回的 access_token 并不相同，所以沒辦法重用；后者是應(yīng)用級別的，跟用戶無關(guān)，因此可以緩存起來進(jìn)行重用。

用戶環(huán)境檢測

可以從請求的 user-agent 中判斷是否包含 micromessenger 字樣，如果包含的話就是微信環(huán)境，否則視為PC環(huán)境。

官方文檔

• 微信環(huán)境：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

• PC環(huán)境：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html