# SpringBoot扫码

**Repository Path**: wei-zhou-abc/spring-boot-wechat-scan-code

## Basic Information

- **Project Name**: SpringBoot扫码
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-11-27
- **Last Updated**: 2024-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 扫码登录（SpringBoot 2.6.13）
## Java生成二维码
> Hutool 是一个Java工具包类库，对文件、流、加密解密、
> 压缩、网络、图片、邮件、线程、定时、
> 等常用类做了封装，使开发更加便捷。

#### 1. 导入 maven依赖
```xml
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.0</version>
</dependency>
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.4.1</version>
</dependency>
```
#### 2. 创建二维码
```java
QrCodeUtil.generate("http://www.baidu.com", 300, 300, FileUtil.file("d:/qrcode.jpg"));
```

#### 3. 扫码登录微信的两种实现方式
1. 基于微信公众平台的扫码登录（主要用在第三方中，需要认证微信服务号）
2. 基于微信开发平台的扫码登录（需要开通企业认证）
> 测试公众号申请：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
> 
> 在打开网址登录后，需要填写`接口配置信息`，URL部分需要填写一个公网地址(这里可以使用内网穿透)，Token部分可以随便填写。
> 
> 同时在页面底部，【体验接口权限表】 - 【网页服务】-【网页帐号】-【网页授权获取用户基本信息】中点击修改，并传入授权回调地址(公网)，请勿加 **http://** 等协议头，然后点击保存。
```java 
@Slf4j
@RestController
@CrossOrigin
public class WeChatController {

    @GetMapping("wxCheck")
    public String wxSignatureCheck(
            @RequestParam(value = "signature") String signature,
            @RequestParam(value = "timestamp") String timestamp,
            @RequestParam(value = "nonce") String nonce,
            @RequestParam(value = "echostr") String echostr
    ) {
        log.info("收到微信校验请求，echostr：{}", echostr);
        // TODO 这里可以验证请求是否来自微信...
        return echostr;
    }

}

```

### 实现细节 - 第一步：用户同意授权，获取code
> scope 参数值：snsapi_base（不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo（弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
> 
> 具体解释：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

```java
    @GetMapping("/wxLogin")
    public void wxLoginPage(HttpServletResponse response) throws IOException {
        // redirectUrl是回调的地址，注意要转成 URLEncode 格式
        String redirectUrl = URLEncoder.encode("https://66edbac2.r6.cpolar.cn/wxCallback", "UTF-8");
        /*
         * https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
         * */
        // 构建二维码链接地址
        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="
                + redirectUrl + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

        // 输出二维码，扫描后跳转到上面的地址
        response.setContentType("image/png");

        QrCodeUtil.generate(url, 300, 300, "jpg", response.getOutputStream());
    }
```

### 实现细节 - 第二步：通过code换取网页授权access_token
> 获取code后，请求以下链接获取 access_token
> 
> https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

### 实现细节 - 第三步：拉取用户信息(需scope为 snsapi_userinfo)
> 如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。
>
> 请求方法 
http：GET（请使用https协议）：

> https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
> 

### 在页面中使用的是 setupin
> setupin 允许你在 HTML 中使用 Vue SFC 语法。
> 
> 利用sfc2esm，在运行时编译为esm格式的vue代码，并动态执行。
> 
> 详细地址：[https://gitee.com/Tofu_Xx/setupin/tree/main/](https://gitee.com/Tofu_Xx/setupin/tree/main/)