微信网页授权

简介: 微信网页授权步骤差不多有三步

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


image.png

微信授权流程图


以下为代码实战


第一步:用户同意授权,获取 code



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


请求方式:GET


  • url 为回调地址


  • scope 有两个可选参数


  • snsapi_base 只能获取进入页面用户的 openid,用户无感知,叫静默授权


  • snsapi_userinfo 能获取用户的基本信息,但需要用户接受,叫手动授权,如下图


image.png

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,所以请求成功后会有授权页面


image.png

授权示意图


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


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 网页授权的回调页面域名,类似这种


image.png

授权回调页面域名


总结



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


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


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


相关文章
|
6天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
3月前
|
存储 JavaScript 开发工具
uniapp-实现微信授权登录
uniapp-实现微信授权登录
658 0
|
3月前
|
小程序
内网环境中ruoyi若依实现微信小程序授权登录解决办法
内网环境中ruoyi若依实现微信小程序授权登录解决办法
165 0
|
5月前
|
存储 小程序 数据库
【微信小程序开发】之微信授权登陆
【微信小程序开发】之微信授权登陆
312 0
|
4月前
|
小程序 API 开发者
微信小程序授权登录流程以及应用到的API
微信小程序授权登录流程以及应用到的API
191 0
|
24天前
|
JSON 小程序 C#
微信网页授权之使用完整服务解决方案
微信网页授权之使用完整服务解决方案
|
5月前
|
存储 小程序 安全
【微信小程序】实现授权登入---超详细讲解
【微信小程序】实现授权登入---超详细讲解
425 1
|
2月前
|
小程序 JavaScript
微信小程序授权登录?
微信小程序授权登录?
|
3月前
|
JSON 小程序 前端开发
史上最详细微信小程序授权登录与后端SprIngBoot交互操作说明!!!附源代码
史上最详细微信小程序授权登录与后端SprIngBoot交互操作说明!!!附源代码
339 2
|
3月前
|
小程序 前端开发 安全
Ruoyi-vue前后端不分离集成微信小程序授权登录思路
Ruoyi-vue前后端不分离集成微信小程序授权登录思路
133 0

热门文章

最新文章