乐趣区

关于后端:微信网页授权SpringBootuniapp实现网页授权获取用户基本信息

jiezi

前言

🍊原因

起因于本狗上一个我的项目本打算采纳 微信公众号网页受权登录 做用户鉴权，但最终因公众号是 未认证的订阅号 ， 无权限获取用户信息 ，所以扭转思路，采纳登录注册形式实现用户辨别。但在开发中，学习了 微信网页受权登录 流程，特此分享，带你手把手操作，让咱们一起捋清受权的逻辑。

⏲️倡议浏览时长

约 20 分钟

🎯次要指标

  1. 测试公众号 实现 网页受权 并获取 用户根本信息
  2. 灵便把握微信接口文档，纯熟对接相干接口

  3. 整顿受权逻辑，前后端对接相熟流程

👨‍🎓试用人群

  1. 对于 微信公众号网页受权 流程含糊或首次接触

  2. 做过相干流程但想回顾相熟复盘

    🎁疾速链接

    公众号：JavaDog 程序狗
    在公众号，发送【wx】，无任何套路即可取得

🍯猜你喜爱

序号 分类 文章形容
1 我的项目实战 SpringBoot+uniapp+uview2 打造一个企业黑红名单吐槽小程序

🍩水图

注释

📝筹备

1. 服务号 / 订阅号(已认证)

网页受权接口权限只有 服务号 或者 已认证的订阅号 有权限，也就是须要每年缴纳 300 块钱费用认证过才会有权限，否则无奈在正式公众号调用此接口。
🚨 切记无权限时调用会提醒【微信公众号受权 scope 参数谬误或没有 scope 权限】，只可在 测试公众号进行调试！！！

2. 开发工具

序号 分类 工具
1 后端 IDEA
2 前端 uniapp
3 前端 微信开发者工具

3. 接口文档

微信官网公众号文档

4. 网页受权获取用户根本信息配置

以测试号进行展现操作步骤

在公众号左侧菜单【开发工具】=》【公众平台测试帐号】
在网页服务 - 网页账号 - 批改
批改 OAuth2.0 网页受权【受权回调页面域名】

切记不要带 http，此处地址填写本地 ip 即可。可在键盘通过【win+R】，输出【cmd】，确定后输出 ipconfig，复制出 IPv4 地址即可。或者启动 uniapp 后，控制台打印的地址，以上办法仅限本地调试。

🔛问题分析

1. 什么是网页受权？

官网解释

如果用户在 微信客户端 中拜访 第三方网页 ，公众号能够通过微信 网页受权机制，来获取用户根本信息，进而实现业务逻辑。

简略了解

艰深来说，就是咱们通过 微信内置浏览器 去拜访其余网站时，能够通过 微信受权策略，在指标网站能够获取微信用户的根本信息，如昵称，头像等

举个栗子 🌰

通过 微信内关上 csdn 分享链接 ，当跳转到 csdn 网页时，csdn 就能够通过 网页受权 ，间接拿到咱们微信的昵称，头像信息等，实现 自主受权注册

2. 网页受权流程步骤？

1. 用户批准受权，获取 code

前端疏导用户进入受权页面批准受权，获取 code

2. 通过 code 换取网页受权 access_token

通过前端获取的 code，调用咱们本人服务器接口 ，通过 后盾应用 code 调取微信接口，换取access_token(网页受权接口调用凭证)，access_token 是调用用户信息及其他接口所必须的参数

3. 刷新 access_token（如果须要）

因为 access_token 领有较短的 有效期 ，当access_token 超时 后，能够应用 refresh_token 进行刷新，refresh_token 有效期为 30 天，当 refresh_token 生效之后，须要 用户从新受权

4. 拉取用户信息

开发者能够通过 access_token 和 openid 拉取用户信息

🎯 如果看不懂不要划走，上面才是重点解说
🎯 如果看不懂不要划走，上面才是重点解说
🎯 如果看不懂不要划走，上面才是重点解说

👼开始

繁难流程图

为了不便了解，画了一个繁难流程图，有纳闷别急，上面还有事实列子解释版

举个理论购买 苹果手机 例子，可能不太贴合，但有助与了解

步骤

依据下图进行步骤剖析

1. 步骤一

前端 uniapp 中 新建受权页

页面进入后，onLoad 间接跳转微信接口地址，微信方通过 appId 获取 code，并 携带 code依据 redirect_uri 返回到以后页面，此刻 地址栏中就蕴含着 code 信息

跳转前

跳转后

要害代码

// 通过微信官网接口获取 code 之后，会从新刷新设置的回调地址【redirect_uri】, 之后会持续进入到 onload()办法
location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" +
local + "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect""

appid：公众号对应的 appId
redirect_uri：页面回跳地址，也就是以后页面的地址，此地址也就是在上方 筹备 4 中 OAuth2.0 网页受权【受权回调页面域名】填入的值。微信依据这个回调地址进行携带 code 回跳。

其余参数可看官网参数阐明

2. 步骤二

1. 后端提供接口，入参 为上一步的 code， 通过 code调取微信接口 换取 access_token。此处后端应用了 weixin-java-mp 组件，不便对接微信接口。

@Api(tags = "网页受权控制器")
@RestController
@RequestMapping("/login")
public class AuthController {

    @Resource
    private UserService userService;

    @ApiOperation(value = "网页受权获取用户根本信息", notes = "网页受权获取用户根本信息")
    @GetMapping
    public ResponseData login(@RequestParam String code) throws WxErrorException {return userService.auth(code);
    }
}

2. 前端带着 code，调用 1 中的 /login 接口

const res = await this.$api.login({code})
    if (!res.success) {uni.$u.toast(res.message)
        return
    }
    // 用户信息
    this.userInfo = res.data;
}
3. 步骤三

将步骤二后端拿到的 access_token，调用微信 获取用户信息，将用户信息返回给前端

 WxOAuth2AccessToken accessToken;
        WxMpUser wxMpUser;
        try {
            // 获取 accessToken 
            accessToken = wxMpService.getOAuth2Service().getAccessToken(code);
            log.info("AccessToken={}" + accessToken);
            // 获取用户信息
            wxMpUser = wxMpService.getUserService().userInfo(accessToken.getOpenId());
            log.info("wxMpUser={}", JSONUtil.toJsonStr(wxMpUser));
        } catch (WxErrorException e) {return ResponseData.error(e.getMessage());
        }
        return ResponseData.success(wxMpUser);

❌常见谬误

谬误 1：redirect_uri 参数谬误

微信中【OAuth2.0 网页受权】-受权回调页面域名配置谬误

谬误 2：oauth_code 已应用

code 每次应用换取 access_token 后便生效 ，再次调用则会报错，请 依据本人业务 ，进行缓存比拟， 避免反复调用

总结

本文尽管篇幅长，然而实现性能简略，次要目标是展现 网页受权 的流程与思路，对于微信对接，自己倡议多查看 微信官网文档，写的很具体，通读过几遍后就会对疑难点有些许领悟，心愿能对大家有所帮忙。

退出移动版