网页授权-前后端分离(springboot+vue)

#1.官方文档
微信网页授权步骤  --> [传送门](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842) 
```
1 第一步:用户同意授权,获取code
2 第二步:通过code换取网页授权access_token
3 第三步:刷新access_token(如果需要)
4 第四步:拉取用户信息(需scope为 snsapi_userinfo)
5 附:检验授权凭证(access_token)是否有效
```
#1.第一步:用户同意授权,获取code
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面(直接把url贴到微信,打开链接即可):
```
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
```
 若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。
首先做一个你内网穿透:
https://ray.ngrok.xiaomiqiu.cn 是我本地做的一个内网穿透([小米球](http://ngrok.ciqiuwl.cn/)),映射到本地6001服务。
![image.png](https://upload-images.jianshu.io/upload_images/8709707-36f39c9d56d4201c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我的:
```
https://open.weixin.qq.com/connect/oauth2/authorize?appid="+ appid + "&redirect_uri=https%3a%2f%2fray.ngrok.xiaomiqiu.cn%2fwechat%2fgetCode&response_type=code&scope=snsapi_userinfo&state=xxx#wechat_redirect
注意:回调redirect_uri的值需要encode-->
https://ray.ngrok.xiaomiqiu.cn/wechat/getCode  -->utf8-encode--> https%3a%2f%2fray.ngrok.xiaomiqiu.cn%2fwechat%2fgetCode
```
用户点击该url--->微信跳转回调我们设置的redirect_uri(https://ray.ngrok.xiaomiqiu.cn/wechat/getCode).
那么我们在
![image.png](https://upload-images.jianshu.io/upload_images/8709707-06db7989de61754d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


 

猜你喜欢

转载自blog.csdn.net/YAREI/article/details/90106284