1、概述
在web開發中，咱們常常會讓網站接入微信登陸功能，這樣用戶免於註冊帳號，網站開發人員也能夠更爲方便地獲取到用戶信息。html
微信登陸能夠分爲兩種狀況，一種是網站的掃碼登陸，另外一種是在微信瀏覽器中直接登陸，本節咱們就講解如何在本身的網站上接入微信登陸功能。web
1、網站掃碼登陸置流程
開發文檔數據庫
具體的開發流程官方文檔已經給出了詳細的說明，可是文檔更關注的是嚴謹和全面，本節的內容更傾向於簡單易懂。下面介紹一下掃碼登陸的開發流程。api
首先咱們要有一個註冊並認證的微信開放平臺帳號（認證要300元人民幣）。註冊和認證成功以後，以下圖所示進入【網站應用】。首次進入以後下方是空白，須要點擊【建立網站應用】。而後根據提示加入本身的網站，下圖爲加入完成後的效果。瀏覽器
點擊【查看】能夠看到詳細內容，【接口信息】須要申請，申請經過以後才能夠開通。安全
開通以後，就能夠調用開放平臺的接口實現微信登陸功能了。服務器
2、調用接口實現掃碼登陸。
網站微信掃碼登陸流程微信
- 網站跳轉到如下連接：注意鏈接中的兩個參數
- appid：微信開發平臺提供的appid
- redirect_url：用戶掃碼登錄後跳轉的地址
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
- 在上面地址的頁面，用戶會看到一個二維碼，用戶掃碼後會跳轉到redirect_url指定的地址。
- 在redirect_url對應的頁面渲染以前，咱們已經拿到了微信服務器發來的code參數。若是須要獲取用戶信息，則要利用code、appid、secret三個參數來獲取access_token和用戶的openid。接口以下所示：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
- 獲取到access_token以後，在根據access_tokn和openid獲取用戶信息，接口以下
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
至此，咱們的服務器就成功獲取到了微信用戶的信息，而後，若是用戶是第一次登錄，能夠將用戶信息記錄在數據庫中，若是非第一次登錄，則能夠經過openid獲取用戶在本身網站的信息。微信開發
3、微信瀏覽器登陸
上面已經介紹了網站的掃碼登陸，主要針對的是PC端的用戶。本節咱們講解微信內的受權登陸，也就是說，若是用戶使用的是微信瀏覽器，那麼用戶不用使用掃碼功能，只要點擊一個受權登陸的按鈕，就能實現微信登陸了，對用戶來講操做簡單了不少。app
在【公衆號】設置中，添加本身網站的【業務域名】【JS接口安全域名】【網頁受權域名】。
4、接口調用實現微信登陸
在微信瀏覽器內登陸與掃碼登陸的惟一區別就是第一步不一樣，掃碼登陸須要用戶跳轉到一個微信服務器提供的有二維碼的頁面以便獲取code參數，而微信瀏覽器登陸，能夠直接讓用戶訪問下面的地址，即可以獲取到code參數。
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=123#wechat_redirect
這裏一樣須要提供appid和redirect_url兩個值。其他的操做，與掃碼登陸獲取用戶信息相同。
5、總結
簡化的微信掃碼登陸流程：
- 用戶訪問網站
- 用戶跳轉至微信登陸連接
- 經過連接跳轉，獲取用戶的code參數
- 經過code參數獲取access_token和openid
- 經過access_token和openid獲取用戶信息
- 完成微信掃碼登陸
本文同步分享在 博客"lmonkey_01"（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。