微信服务号网页授权的制作

jiezi

5 年前

网页授权的目的是获取微信用户的 openid，有两种授权方式：snsapi_base 和 snsapi_userinfo，微信用户无论是否关注了服务号前者都是静默授权，其只能获取到 openid，而对于后者的方式，关注了服务号的用户是静默授权，没有关注的话则需要用户手动添加授权按钮。授权的过程是：

请求 oauth
发送请求 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 其中 APPID 填写开发者的 appid，REDIRECT_URI 填写最终要跳转到的 url，注意要将该 url 使用 encoder 编码，SCOPE 填写上面的两种方式其一，STATE 可以随意填写，一般填写 1 或者 123 等。
获取回调的 code
上面步骤 1 发送请求后浏览器中会跳转到回调的 url 中，并且携带 code 在 url 中作为参数，如：redirect_uri/?code=CODE&state=STATE，这里的 STATE 没有用。
使用步骤 2 中的 CODE 再次发送请求获取 ACCESS_TOKEN
发送请求 https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 获取 ACCESS_TOKEN，将步骤 2 中获取到的 CODE 填充到该 URL 中，如果使用的是第一种授权方式，那么获取到 ACCESS_TOKEN 的同时也拿到了 openid，返回的结果模型是：
```
{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}
```

前端使用了 Angular，并且使用的是哈希路由，导致 url 中带有 #，在上面第一步请求返回回调的地址中，其拼接 code 时候拼到了中间，然后瞬间被 angular 跳转到默认路径中，导致后面获取不到 code，也就无法执行第三步来获取 ACCESS_TOKEN，如下图：

上面一个地址是服务器返回的回调地址瞬间值，很快被重置为下面的地址，导致前端获取不到 code，自然无法获取到 ACCESS_TOKEN。那么要解决这个问题需要将 angular 路由修改为非哈希模式。

微信服务号网页授权的制作

服务号中的网页授权

坑