关于javascript:微信网页授权

33次阅读

共计 2197 个字符,预计需要花费 6 分钟才能阅读完成。

微信网页受权步骤差不多有三步,具体文档可查看这里,我画了下流程图:

以下为代码实战

第一步:用户批准受权,获取 code

需先调用 /auth 接口,传入必传参数 url 以及 scope(此为参数名)

申请形式:GET

  • url 为回调地址
  • scope 有两个可选参数

    • snsapi_base 只能获取进入页面用户的 openid,用户无感知,叫静默受权
    • snsapi_userinfo 能获取用户的根本信息,但须要用户承受,叫手动受权,如下图

具体区别可返回 微信文档 查看

第二步:通过 code 换取网页受权 access_token

这里以手动受权为例

获取到微信的 code 后,再申请 /getUserInfo

申请形式:GET

申请参数:code,需申请 /auth 获取到 code 先,如果你在申请 /auth 时传入的 scopesnsapi_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"
}

但如果 scopesnsapi_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,所以申请胜利后会有受权页面

点击”批准“会跳转至页面

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(以及微信个人信息)而弄的一个服务就好了

正文完
 0