Vue与Java集成实现微信授权登录的完整指南

一、准备工作

1.1 申请测试公众号

  1. 注册并登录微信开放平台。
  2. 进入“管理中心” -> “公众号” -> “添加公众号”。
  3. 选择“测试账号”，填写相关信息并提交。

申请成功后，你会获得AppID和AppSecret，这两个参数将在后续开发中使用。

1.2 创建项目

1.2.1 后端项目（Spring Boot）

使用Spring Initializr（ Boot项目，选择以下依赖：

  • Spring Web
  • Spring Data JPA（如果需要存储用户信息）
  • Thymeleaf（可选，用于生成二维码页面）

1.2.2 前端项目（Vue.js）

使用Vue CLI创建一个Vue项目：

vue create wechat-login-demo

二、后端开发

2.1 配置OAuth2认证

wechat.appid=你的AppID
wechat.secret=你的AppSecret
wechat.redirectUri=http://你的域名/callback

2.2 创建登录接口

@RestController
@RequestMapping("/api")
public class WeChatController {

    @Value("${wechat.appid}")
    private String appId;

    @Value("${wechat.secret}")
    private String secret;

    @Value("${wechat.redirectUri}")
    private String redirectUri;

    @GetMapping("/login")
    public void weChatLogin(HttpServletResponse response) throws IOException {
        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId
                + "&redirect_uri=" + URLEncoder.encode(redirectUri, "UTF-8")
                + "&response_type=code"
                + "&scope=snsapi_userinfo"
                + "&state=STATE#wechat_redirect";
        response.sendRedirect(url);
    }

    @GetMapping("/callback")
    public ResponseEntity<String> weChatCallback(@RequestParam("code") String code) {
        // 使用code换取access_token
        String tokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appId
                + "&secret=" + secret
                + "&code=" + code
                + "&grant_type=authorization_code";

        // 发送HTTP请求获取access_token
        RestTemplate restTemplate = new RestTemplate();
        String tokenResponse = restTemplate.getForObject(tokenUrl, String.class);
        JSONObject tokenJson = JSONObject.parseObject(tokenResponse);

        // 使用access_token获取用户信息
        String accessToken = tokenJson.getString("access_token");
        String openId = tokenJson.getString("openid");
        String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken
                + "&openid=" + openId
                + "&lang=zh_CN";

        String userInfoResponse = restTemplate.getForObject(userInfoUrl, String.class);
        return ResponseEntity.ok(userInfoResponse);
    }
}

2.3 存储用户信息

如果需要将用户信息存储到数据库中，可以创建一个User实体类和对应的Repository：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String openId;
    private String nickname;
    private String headimgurl;
    // 省略getter和setter
}

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByOpenId(String openId);
}

在weChatCallback方法中，解析用户信息并存储到数据库：

User user = new User();
user.setOpenId(openId);
user.setNickname(userInfoJson.getString("nickname"));
user.setHeadimgurl(userInfoJson.getString("headimgurl"));
userRepository.save(user);

三、前端开发

3.1 创建登录页面

<template>
  <div>
    <button @click="loginWithWeChat">微信登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithWeChat() {
      window.location.href = 'http://你的域名/api/login';
    }
  }
}
</script>

3.2 处理回调

const router = new VueRouter({
  routes: [
    { path: '/callback', component: CallbackComponent }
  ]
});

const CallbackComponent = {
  mounted() {
    const code = this.$route.query.code;
    axios.get(`http://你的域名/api/callback?code=${code}`)
      .then(response => {
        const userInfo = response.data;
        // 处理用户信息，例如存储到Vuex或localStorage
      })
      .catch(error => {
        console.error('登录失败', error);
      });
  }
};

四、调试与部署

4.1 本地调试

  1. 下载并安装Ngrok。
  2. 运行ngrok http 8080（假设你的Spring Boot项目运行在8080端口）。
  3. 将Ngrok生成的域名配置到微信开放平台的回调URL中。

4.2 部署上线

将后端和前端项目分别部署到服务器上，确保域名和回调URL配置正确。

五、常见问题与解决方案

5.1 回调URL配置错误

5.2 access_token获取失败

检查AppID和AppSecret是否正确，确保请求参数无误。

5.3 用户信息获取失败

确保access_token有效，且scope设置为snsapi_userinfo。

六、总结