在前段時間有個第三方登陸的功能,要求PC和WAP都支持微信和支付寶登陸,但是微信和支付寶都不支持H5登陸(微信只支持自帶瀏覽器可用,支付寶的接口已經關閉,需要自己去申請)。後來產品就把需求改了,使用微信公衆號授權登陸。
首先,獲取測試並配置
登陸微信公衆號
直接打開http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index點擊登陸,通過掃描二維碼登陸
登錄完即可獲取到一個測試公衆賬號的信息。主要有appId和appsecret兩個參數,這將唯一標示一個公衆號,並且需要將他們作爲參數獲取用戶的信息。
關注公衆號
微信公衆號登陸需要用戶關注這個公衆號,只有用戶關注了公衆號,才能在公衆號內授權第三方登陸。把剛剛點開的那個頁面往下拉
掃描二維碼關注公衆號
配置回調域名
繼續往下滑動,會看到在功能服務這一欄,有個網頁賬號,點擊右面的修改
點擊修改,彈出一個框
這裏就需要填一個外網可以訪問的域名(測試的貌似支持外網IP訪問,但是由於公司網絡限制,沒有試成功,只選擇了外網可以訪問的域名)
這裏是個域名,不能添加協議
配置完成之後,就可以微信授權登陸,獲取用戶信息
用戶授權並返回code
參數說明
參數 |
必須 |
說明 |
appid |
是 |
公衆號的唯一標識(這個就是我們前面申請的) |
redirect_uri |
是 |
授權後重定向的回調鏈接地址(我們前面申請的) |
response_type |
是 |
返回類型,請填寫code |
scope |
是 |
應用授權作用域,snsapi_base (不彈出授權頁面,直接跳轉,只能獲取用戶openid),snsapi_userinfo (彈出授權頁面,可通過openid拿到暱稱、性別、所在地。並且,即使在未關注的情況下,只要用戶授權,也能獲取其信息) |
state |
否 |
重定向後會帶上state參數,開發者可以填寫a-zA-Z0-9的參數值,最多128字節,該值會被微信原樣返回,我們可以將其進行比對,防止別人的攻擊。 |
#wechat_redirect |
否 |
直接在微信打開鏈接,可以不填此參數。做頁面302重定向時候,必須帶此參數 |
這裏的scope我們使用snsapi_userinfo可以獲取到所有的用戶信息,如果使用了snsapi_base 就只能獲取openid,沒有多大意義
獲取access_token,用access_token獲取用戶信息
參數說明
參數 |
是否必須 |
說明 |
appid |
是 |
公衆號的唯一標識 |
secret |
是 |
公衆號的appsecret |
code |
是 |
填寫第一步獲取的code參數 |
grant_type |
是 |
填寫爲authorization_code |
到這裏,微信授權登陸和微信對接部分就已經完成了。在這個後面就可以操作登陸邏輯了