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拿到暱称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

 

以上纯属个人记录!谢谢查阅!

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