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

服务号中的网页授权

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

  1. 请求 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 填写开发者的 appidREDIRECT_URI 填写最终要跳转到的 url,注意要将该 url 使用 encoder 编码,SCOPE 填写上面的两种方式其一,STATE 可以随意填写,一般填写 1 或者 123 等。
  2. 获取回调的 code
    上面步骤1发送请求后浏览器中会跳转到回调的 url 中,并且携带 codeurl 中作为参数,如:redirect_uri/?code=CODE&state=STATE ,这里的 STATE 没有用。
  3. 使用步骤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.png

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

阅读 826

推荐阅读