最初是在Tower.im的公眾號里見到了WebApp自動登錄,想做一個同樣效果的。那時候對公眾號開發不熟悉,問了一些人也說的稀里糊涂的,文檔又亂,最后花了好長時間才實現。這個功能需要的接口是「網頁授權獲取用戶基本信息」,需要認證企業號才能使用。如果沒有權限的話可以試一下微信之門,我也只是知道這個東西,從來沒試過。
基本的思路是通過公眾號OAuth API獲取用戶微信的openid。第一次使用的時候讓用戶登錄,然后在數據庫里把openid和自己應用的userid對應起來。以后獲得用戶的openid之后就可以自動登錄到對應的用戶上。
我的Web App是用AngularJS實現的SPA,登錄之后獲取一個token放在localStorage,給后端發請求的時候,把token寫在Header的Authorization里。
這個過程中不需要使用Cookie,但是為了減少跳轉次數,還是用了Cookie。我把和微信登錄相關的功能寫在了幾個PHP單頁里,用一個redirect.php做入口,把要跳轉的頁面放在參數里,由redirect.php檢查用戶是否已經獲得了token,在獲取到token之后跳轉到目標頁面。
登錄流程圖如下:
其中和微信有關的操作就是第二行和第三行。
微信的OAuth認證方式是,讓用戶在微信客戶端里打開這樣一個地址https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect,微信認證服務器會引導用戶跳轉到你指定的REDIRECT_URI,并且在該URL后面加上一個CODE參數。
例如,想在http://example.com/redirect.php?type=post頁面獲得用戶的信息,就在頁面內使用isset($_GET['code'])判斷是否存在code參數。
如果不存在,就讓用戶訪問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作為參數時要經過UrlEncode)
微信服務器會把用戶重定向到http://example.com/redirect.php?type=post&code=CODE。開發者就可以從url參數中獲得CODE了。
然后開發者就可以拿著這個CODE,去https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code換取用戶的openid。
拿到openid之后就可以判斷用戶是否綁定過,并進行下一步操作了。
如果需要用戶的昵稱、頭像等更多信息,需要將第一個url中的scope參數改為snsapi_userinfo,詳細信息可以看微信的開發文檔。