五年前端三年面试

微信网页授权

微信网页授权步骤差不多有四步，具体文档可查看这里open in new window，我画了下流程图：

微信授权流程图

以下为代码实战

第一步：用户同意授权，获取 code

需先调用 /auth 接口，传入必传参数 url 以及 scope（此为参数名）

请求方式：GET

  • url 为回调地址

  • scope 有两个可选参数

    • snsapi_base 只能获取进入页面用户的 openid，用户无感知，叫静默授权
    • snsapi_userinfo 能获取用户的基本信息，但需要用户接受，叫手动授权，如下图

1599707513545

具体区别可前往 微信文档open in new window 查看

第二步：通过 code 换取网页授权 access_token

这里以手动授权为例

获取到微信的 code 后，再请求 /getUserInfo

请求方式： GET

请求参数：code，需请求 /auth 获取到 code 先，如果你在请求 /auth 时传入的 scope 为 snsapi_userinfo , 那么返回微信个人信息，包括微信名，性别，所在地区，国籍，头像等等，如下

{
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",        "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

但如果 scope 为 snsapi_base ，请求成功时只返回用户的 openid

PS: 请求/getOpenId、 /getUserInfo 成功时会返回 access_token，但此 access_token 和 微信服务端开发中的 access_token 不同，一个是微信与服务器打交道（微信票据服务），另一个是微信网页的 OAuth2.0 服务（网页授权）

第三步：请求 userInfo

拿着 access_token 和 openid，去请求微信官方接口

http：GET（请使用 https 协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

返回 openid、nickname、sex、province、city、country、headimgurl 等信息，拿着 openid 和 你想要的数据返回值原来 /auth 参数中的 url 上

实战

先调用 /auth 接口，传入参数 url 和 scope

请求接口：http://192.168.230.209/auth?url=http://192.168.230.209/home&scope=snsapi_userinfo

redis 存 url=http://192.168.230.209/home，即最后授权完成拿到数据后返回的前端地址

判断参数 scope，如果是 snsapi_userinfo，用户点击授权后跳转至 /getWxUserInfo 接口；

如果是 snsapi_base，静默授权后跳转至 getOpenId 接口

这里我们传的 scope 为 snsapi_userinfo，所以请求成功后会有授权页面

1599707513545

点击”同意“会跳转至页面

http://192.168.230.209:8888/api/wechat/getWxUserInfo?code=081UcAFa1s1OAz0o7wGa1wb8vG1UcAFX&state=123

PS：http://192.168.230.209:8888/api/wechat 为该后端服务地址，getWxUserInfo 为路由（即请求接口）

从ctx.request.query 中拿到 code，拿着 code 请求 access_token 服务，access_token 服务也是微信官方提供的一个方法

获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

请求成功的话，拿着这个返回值中的 access_token 和 openid，请求 userinfo 接口，在上文已经介绍过，这里不做重复

这里要说明的一点是，如果请求 access_token 的返回 code 为 40029，说明 access_token 已经失效，我们需要重新刷新 access_token

拿到 userinfo 的返回值后，在最开始存在 redis 中的 url 上拼接 openid、headimgurl 等即可

这里需要说明一点

需要先配置 OAuth2.0 网页授权的回调页面域名，类似这种

授权回调页面域名

总结

一直要知道一定，微信网页开发和调用微信的 JS-SDK 不一样，也和微信服务端开发不一样

它可以当初拎出来说，坑也比较少，不会遇到像 JS-SDK 那样的各种报错

只要知道，它为为了获取 openid （以及微信个人信息）而弄的一个服务就好了

Last Updated:
Contributors: johan