vue配置網頁授權登錄第一步,配置授權地址

微信網頁授權文檔:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

微信網頁授權分4步:

這裏只講第一步,就是如何配置授權地址

第一步:用戶同意授權,獲取code

 

在確保微信公衆賬號擁有授權作用域(scope參數)的權限的前提下(服務號獲得高級接口後,默認擁有scope參數中的snsapi_base和snsapi_userinfo),引導關注者打開如下頁面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“該鏈接無法訪問”,請檢查參數是否填寫錯誤,是否擁有scope參數對應的授權作用域權限。

尤其注意:由於授權操作安全等級較高,所以在發起授權請求時,微信會對授權鏈接做正則強匹配校驗,如果鏈接的參數順序不對,授權頁面將無法正常訪問

參考鏈接(請在微信客戶端中打開此鏈接體驗):
scope爲snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
scope爲snsapi_userinfo
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

尤其注意:跳轉回調redirect_uri,應當使用https鏈接來確保授權code的安全性。

APPID直接打開公衆號網頁既可以看到:https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev&token=506223097&lang=zh_CN

redirect_uri :授權後重定向的回調鏈接地址, 請使用 urlEncode 對鏈接進行處理   (一定要注意轉碼)

這個參數還需要登錄微信公衆號在設置中配置回調地址,否者會報redirect_uri 參數錯誤

登錄:https://mp.weixin.qq.com/cgi-bin/settingpage?t=setting/function&action=function&token=951359816&lang=zh_CN

公衆號設置——功能設置—網頁授權域名 

配置授權後回調域名直接按照文檔的鏈接在微信開發者工具打開測試是否成功

scope爲snsapi_base

https://open.weixin.qq.com/connect/oauth2/authorize?appid=改成自己的Appid&redirect_uri=改成自己的回調網頁地址&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

scope爲snsapi_userinfo

https://open.weixin.qq.com/connect/oauth2/authorize?appid=改成自己的Appid&redirect_uri=改成自己的回調網頁地址&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

二者區別:

snsapi_base (不彈出授權頁面,直接跳轉,只能獲取用戶openid),snsapi_userinfo (彈出授權頁面,可通過openid拿到暱稱、性別、所在地。並且, 即使在未關注的情況下,只要用戶授權,也能獲取其信息 )

 

以上純屬個人記錄!謝謝查閱!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章