微信網頁受權登陸實踐總結

前兩年作過一些微信公衆號相關的開發。最近這兩年自從微信小程序問世以後，公衆號開發慢慢的淡出了視野。這段時間作了一個活動頁，用到了微信網頁受權登陸的相關接口，坑點仍是蠻多的，正好整理總結一下如何經過微信網頁受權獲取用戶的基本信息。

註冊微信公衆平臺/測試號

首先咱們須要註冊登陸微信公衆平臺，若是手頭上沒有微信公衆號能夠試試 微信公衆平臺接口測試賬號。接口測試號具有公衆平臺的所有接口的。正式帳戶擁有的全部高級功能，在測試號中也是所有都有的，這點不用擔憂。

配置微信公衆平臺/測試號

若是是作微信網頁受權登陸，須要配置兩個域名回調。第一個是 JS接口安全域名 第二個是 受權回調頁面域名。這兩個域名都必須是公網上能夠訪問的域名地址，而且不能夠加端口號。好比個人域名是 wwww.baidu.com ，那麼須要在這兩個地方填入 www.baidu.com 。協議頭 http:// https:// 不要填進去。

獲取用戶受權

用戶在訪問前端頁面時，前端須要發起一個請求 https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri=用戶確認受權以後重定向的頁面&response_type=code&scope=SCOPE&state=一些自定義參數#wechat_redirect。 用戶贊成受權以後微信會作一次重定向，重定向的地址就是咱們填寫的 redirect_uri。同時會帶上一個 code 參數，好比：https://www.xxx.com/login?code=001jPCah2IHlBB0vBGah2Tcwah2jPCad

服務端獲取受權數據

前端在重定向以後經過 window.location.search 獲取到 URL 中的 code 參數而且將 code 的值發送給後端。須要注意的是 code 是一次性的，僅能使用一次。後端接拿到 code 以後發送請求去交換用戶的 access token 注意這裏的 access token 不是微信公衆號的 access token。

$ curl https://api.weixin.qq.com/sns/oauth2/access_token?grant_type=authorization_code?appid=你的APPID&secret=你的SECRET
{
  "access_token": "24_C_G4z0dJmKmdr_aXy-YnBNOSRBEMZzgSi8eDQ203McjmAbnBuhkq1Y-EI_rFIiYU-GMRM-lHDeIdDTCBZVed4VstZJsXaVoWbV0pwMsz0ZE",
  "expires_in": 7200,
  "refresh_token": "24_FXWHriQzFUzQ7IsJXNgCEycLJEex_m4EwLODafl54Awzm368bcn8c3IP0z9BOVCMqzyr8BK3GdELm0IGmPleqieQc0eKzQQyhIG5UJ1rMvA",
  "openid": "oHelauDl2s4jED3RdkWgAKNkp8g8",
  "scope": "snsapi_userinfo"
}
複製代碼

經過獲取到的 access token 去獲取用戶的信息

https://api.weixin.qq.com/sns/userinfo?lang=zh_CN\
	&access_token=24_C_G4z0dJmKmdr_aXy-YnBNOSRBEMZzgSi8eDQ203McjmAbnBuhkq1Y-EI_rFIiYU-GMRM-lHDeIdDTCBZVed4VstZJsXaVoWbV0pwMsz0ZE\
	&openid=oHelauDl2s4jED3RdkWgAKNkp8g8
{
  "openid": "oHelauDl2s4jED3RdkWxxKNkp8g8",
  "nickname": "xxx",
  "sex": 1,
  "language": "zh_CN",
  "city": "浦東新區",
  "province": "上海",
  "country": "中國",
  "headimgurl": "http://thirdwx.qlogo.cn/mmopen/vi_32/ucdjsK0uwmb55dIB27H9FcSh6icHvXBVVH0jyvTALlFI2WXHtFic2MOb7jE5C70KibWZ9WicsGNqsmFTkFbaaKoI9Q/132",
  "privilege": [
    
  ]
}
複製代碼