公众号h5授权与实际中遇到的问题 - 前端

首先放上官方文档

获取公众号授权可以获取到用户的openId，可以通过openId获取到用户的昵称、性别、所在地等信息

获取授权的流程：

1. 首先需要用户打开或者跳转到授权页，用户点击统一后跳转到我们设置的回调页面（比如项目首页）
2. 授权后跳转回来的页面，url上会有code，我们把code传到后端，换取openId
3. 完成…

1、首先是配置网页授权域名

在微信公众平台中左侧菜单拉到底，选择公众号设置，然后下边有个网页授权域名，输入需要授权的域名后，不要忘了把设置页面中的文件扔给后端

2、跳转授权页

配置好域名后，通过https://open.weixin.qq.com/connect/oauth2/authorize…链接跳转到授权页面，获取授权后在url中拿到code传给后端就可以了

授权链接的详细配置：

var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?' + 
    'appid=你的公众号appId' +   // #1
    '&redirect_uri=获取授权成功后重定向的url' +     // #2
    '&response_type=code' +     // #3
    '&scope=snsapi_base或snsapi_userinfo' +     // #4
    '&state=跳转回redirect_uri后带的参数' +     // #5
    '#wechat_redirect'

解释：

• #1 appid：直接传入你得公众号AppId就可以，AppId的保密等级不高，所以不用担心直接暴露在URL中
• #2 redirect_uri：打开授权页面后，用户点击后，会回调到redirect_uri页面，需要使用encodeURIComponent方法对url进行处理
• #3 response_type：固定填写字符’code’
• #4 scope：scope有两个可选值 1、snsapi_base：不弹出授权页面，直接跳转，只能获取用户openId 2、snsapi_userinfo：出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息（如果用户关注了公众号，snsapi_userinfo也不会弹出授权页面）
• #5 state：跳转回来以后url中所带的参数，只能填写a-zA-Z0-9的参数值，最多128字节 例：redirect_url填写的是百度，回调后地址http://www.baidu.com/?state=aaaaaaaaa
• #6 #wechat_redirect： 必填

问题

1、传参问题

因为微信接口中只提供了state传参，所以导致我们跳转到redirect_uri对应的url后，需要的传参很多没办法传或者需要传的名字必须是某个值而不是state

解决办法 其实我们可以直接把参数拼接在redirect_uri地址的后边，比如我需要统计网页的进入渠道，需要在url上传参utm_source=xxxx,我们可以直接拼到redirect_uri后

• 比如CSDN的网站后边要拼接utm_source=baidu、userName=xuanxing
• 那么网站地址就是https://www.csdn.net/?utm_source=baidu&userName=xuanxing
• 不要忘了对地址进行转码encodeURIComponent('https://www.csdn.net/?utm_source=baidu&userName=xuanxing') // https%3A%2F%2Fwww.csdn.net%2F%3Futm_source%3Dbaidu%26userName%3Dxuanxing
• redirect_uri=https%3A%2F%2Fwww.csdn.net%2F%3Futm_source%3Dbaidu%26userName%3Dxuanxing

2、跳转问题

因为微信的授权是跳转到他的授权页面然后再跳转回来，虽然微信授权页的跳转是用的replace，但是在整个跳转过程（我们的页面 -> 微信授权页面 -> 我们的页面）中，还是会产生一次路由，即使我们跳转用的都是replace。这个问题会导致用户在首页后退时体验不太友好

这个问题我目前还没有找到最优的解决办法，各位大佬们如果有好的办法麻烦帮帮小弟，不过暂时有两个不太完美的解决方法

以放在公众号底部自定义菜单作为例子

1. 不经过我们的页面，直接把页面地址配置成微信授权页面的地址，这样会直接进入微信授权的页面，微信授权页面 -> 我们的页面 这个过程中不会产生路由，可以解决跳转问题，缺点是需要配置的url过长，而且只适用与每次进入必须需要授权的页面
   

2. 第一次获取到code并且和后端交互拿到token/openId后，存在localStorage中，在请求数据时，如果token过期，再跳转到微信授权页面，这样虽然还是会有两次跳转的问题，但是会极大的减少了用户不良体验的次数

------end------