微信公众号网页授权流程

在微信开发中,微信公众号可以配置自己的页面,当用户进入我们的公众号跳转进入我们第三方页面的时候,需要一个用户标记,也就是微信授权用户信息给我们,我们可以拿到用户的 open_id 对用户进行标记

流程

1 用户点跳转页面(跳转url在微信开放平台中配置, 如: https://www.baidu.com/index.html)

用户跳转的时候是什么都没有携带的,页面加载完成后会触发js事件, 这时候 index.html 中js 会有相应的判断, 如果 url中什么没有code参数,就代表这个用户是刚跳转进来, 需要让用户跳转到用户授权页面(这个授权页面接收让用户同意获取用户open_id 之类的信息, 用户授权页面可以是有gan)

![在这里插入图片描述]( https://img-blog.csdnimg.cn/117181f3497f431d94fe5c768d082fc6.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdG5hbjI1MjI=,size_20,color_FFFFFF,t_70,g_se,x_16)
当用户进入我们的页面的时候js判断是否授权,如果没有授权就获取授权地址重定向到授权页面上进行授权,

授权地址中的参数有 公众号的appid, scope 是否需要用户手动授权,redirect_url 授权回调地址, response_type=code 用户授权信息,回调的时候放在回调地址参数中,参数名称是code
![在这里插入图片描述]( https://img-blog.csdnimg.cn/7bb72d647ffa45daa16778ae6b0e1647.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdG5hbjI1MjI=,size_20,color_FFFFFF,t_70,g_se,x_16)

微信内置浏览器会将当前的用户信息添加到授权url中,授权url多了几个用户测试: uin (用户对于公众号唯一id,base64转码结果), key(公众号和uin绑定的token,过期时间大概半小时), pass_ticket (另一个验证码, 与uin绑定),

![在这里插入图片描述]( https://img-blog.csdnimg.cn/bc1294b40f804e9ba089879ddbfccf0a.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdG5hbjI1MjI=,size_20,color_FFFFFF,t_70,g_se,x_16)

当我们点击同意后,就会向微信的授权接口发送授权参数,
![在这里插入图片描述]( https://img-blog.csdnimg.cn/5b6f7026eca14ceabf0df3f7548d40f5.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdG5hbjI1MjI=,size_20,color_FFFFFF,t_70,g_se,x_16)
授权参数如下
![在这里插入图片描述]( https://img-blog.csdnimg.cn/6ccd863affde429ca1e2e6612130629a.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdG5hbjI1MjI=,size_20,color_FFFFFF,t_70,g_se,x_16)
uuid(授权页面中带上的) , snsapi_base 或 snsap_userinfo (是否用户手动同意), allow(同意或on,无感授权的时候就是on),uin, key, pass_ticket, version

当授权完后会自动302重定向到我们配置的回调地址, 回调地址中携带 用户授权参数 code
![在这里插入图片描述]( https://img-blog.csdnimg.cn/1dabdbefc7934059b910e5493cb555a0.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdG5hbjI1MjI=,size_20,color_FFFFFF,t_70,g_se,x_16)
这时候我们的js就可以到用户授权信息了,js获取到用户授权code 请求给后端,后端通过 微信公众号 appid 和 密钥 和 这个code 获取用户的open_id 和 access_token , 然后通过open_id 和 access_token 获取真正的用户信息

posted @ 2021-09-03 14:35  tnan  阅读(2105)  评论(0)    收藏  举报