最初是在Tower.im的公眾號(hào)里見到了WebApp自動(dòng)登錄，想做一個(gè)同樣效果的。那時(shí)候?qū)娞?hào)開發(fā)不熟悉，問了一些人也說的稀里糊涂的，文檔又亂，最后花了好長(zhǎng)時(shí)間才實(shí)現(xiàn)。這個(gè)功能需要的接口是「網(wǎng)頁(yè)授權(quán)獲取用戶基本信息」，需要認(rèn)證企業(yè)號(hào)才能使用。如果沒有權(quán)限的話可以試一下微信之門，我也只是知道這個(gè)東西，從來沒試過。

基本的思路是通過公眾號(hào)OAuth API獲取用戶微信的openid。第一次使用的時(shí)候讓用戶登錄，然后在數(shù)據(jù)庫(kù)里把openid和自己應(yīng)用的userid對(duì)應(yīng)起來。以后獲得用戶的openid之后就可以自動(dòng)登錄到對(duì)應(yīng)的用戶上。

我的Web App是用AngularJS實(shí)現(xiàn)的SPA，登錄之后獲取一個(gè)token放在localStorage，給后端發(fā)請(qǐng)求的時(shí)候，把token寫在Header的Authorization里。

這個(gè)過程中不需要使用Cookie，但是為了減少跳轉(zhuǎn)次數(shù)，還是用了Cookie。我把和微信登錄相關(guān)的功能寫在了幾個(gè)PHP單頁(yè)里，用一個(gè)redirect.php做入口，把要跳轉(zhuǎn)的頁(yè)面放在參數(shù)里，由redirect.php檢查用戶是否已經(jīng)獲得了token，在獲取到token之后跳轉(zhuǎn)到目標(biāo)頁(yè)面。

登錄流程圖如下：

　　其中和微信有關(guān)的操作就是第二行和第三行。

微信的OAuth認(rèn)證方式是，讓用戶在微信客戶端里打開這樣一個(gè)地址https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect，微信認(rèn)證服務(wù)器會(huì)引導(dǎo)用戶跳轉(zhuǎn)到你指定的REDIRECT_URI，并且在該URL后面加上一個(gè)CODE參數(shù)。

例如，想在http://example.com/redirect.php?type=post頁(yè)面獲得用戶的信息，就在頁(yè)面內(nèi)使用isset($_GET['code'])判斷是否存在code參數(shù)。

如果不存在，就讓用戶訪問https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3a%2f%2fexample.com%2fredirect.php%3ftype%3dpost&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect。（注意把url作為參數(shù)時(shí)要經(jīng)過UrlEncode）

微信服務(wù)器會(huì)把用戶重定向到http://example.com/redirect.php?type=post&code=CODE。開發(fā)者就可以從url參數(shù)中獲得CODE了。

然后開發(fā)者就可以拿著這個(gè)CODE，去https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code換取用戶的openid。

拿到openid之后就可以判斷用戶是否綁定過，并進(jìn)行下一步操作了。

如果需要用戶的昵稱、頭像等更多信息，需要將第一個(gè)url中的scope參數(shù)改為snsapi_userinfo，詳細(xì)信息可以看微信的開發(fā)文檔。