您的当前位置:首页正文

springboot 微信小程序 实现获取手机号登录

2024-11-30 来源:个人技术集锦

要在 Spring Boot 应用中实现与微信小程序的手机号登录功能,首先需要了解微信小程序的登录机制以及如何将其与 Spring Boot 后端整合。

1. 微信小程序的手机号登录机制

微信小程序的手机号登录通常涉及以下几个步骤:

2. 整合过程

2.1 配置微信开发者账号

在开始之前,你需要在微信公众平台注册并配置小程序,获取到 AppIDAppSecret。这两个参数在微信开发者控制台中可以找到。

2.2 设置 Spring Boot 项目
  1. 创建 Spring Boot 项目:使用 Spring Initializr 创建一个新的 Spring Boot 项目,选择必要的依赖,比如 Spring WebSpring Data JPA

添加依赖

pom.xml 文件中添加微信相关的依赖,例如:

<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-java-sdk</artifactId>
    <version>1.0.0</version>
</dependency>
2.3 配置微信小程序相关参数

application.ymlapplication.properties 文件中配置微信小程序的 AppIDAppSecret

wechat:
  appid: your_app_id
  secret: your_app_secret
2.4 实现微信登录 API

创建微信服务类:负责与微信服务器的通信,获取 session_keyopenid

@Service
public class WeChatService {

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

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

    private static final String LOGIN_URL = "https://api.weixin.qq.com/sns/jscode2session";

    public String getSessionKey(String code) throws IOException {
        String url = LOGIN_URL + "?appid=" + appId + "&secret=" + appSecret + "&js_code=" + code + "&grant_type=authorization_code";
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<String> response = restTemplate.getForEntity(url, String.class);
        return response.getBody();
    }
}

实现登录控制器:处理小程序发送的登录请求,并返回 session_keyopenid

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

    @Autowired
    private WeChatService weChatService;

    @PostMapping("/login")
    public ResponseEntity<String> login(@RequestParam String code) {
        try {
            String response = weChatService.getSessionKey(code);
            return ResponseEntity.ok(response);
        } catch (IOException e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to get session key");
        }
    }
}
2.5 实现手机号绑定功能

创建手机号绑定服务

@Service
public class PhoneNumberService {

    // 这里假设你已经有一个用户实体 User 和用户服务 UserService
    @Autowired
    private UserService userService;

    public void bindPhoneNumber(String openId, String phoneNumber) {
        User user = userService.findByOpenId(openId);
        if (user != null) {
            user.setPhoneNumber(phoneNumber);
            userService.save(user);
        }
    }
}

创建手机号绑定控制器

@RestController
@RequestMapping("/api/phone")
public class PhoneNumberController {

    @Autowired
    private PhoneNumberService phoneNumberService;

    @PostMapping("/bind")
    public ResponseEntity<String> bindPhoneNumber(@RequestParam String openId, @RequestParam String phoneNumber) {
        phoneNumberService.bindPhoneNumber(openId, phoneNumber);
        return ResponseEntity.ok("Phone number bound successfully");
    }
}

3. 微信小程序端代码

获取 code 和手机号

wx.login({
    success: function (res) {
        if (res.code) {
            // 发起网络请求获取 session_key 和 openid
            wx.request({
                url: 'https://yourdomain.com/api/wechat/login',
                method: 'POST',
                data: {
                    code: res.code
                },
                success: function (response) {
                    const sessionData = response.data;
                    // 获取手机号
                    wx.getPhoneNumber({
                        success: function (res) {
                            // 将手机号发送到服务器进行绑定
                            wx.request({
                                url: 'https://yourdomain.com/api/phone/bind',
                                method: 'POST',
                                data: {
                                    openId: sessionData.openid,
                                    phoneNumber: res.phoneNumber
                                },
                                success: function (res) {
                                    console.log('Phone number bound successfully');
                                }
                            });
                        }
                    });
                }
            });
        }
    }
});

4. 完整示例代码

假设你的 Spring Boot 项目已经包含了所有必需的依赖和配置,以下是整合后的关键代码:

微信服务类 (WeChatService.java):

@Service
public class WeChatService {
   
    @Value("${wechat.appid}")
    private String appId;
   
    @Value("${wechat.secret}")
    private String appSecret;
   
    private static final String LOGIN_URL = "https://api.weixin.qq.com/sns/jscode2session";
   
    public String getSessionKey(String code) throws IOException {
        String url = LOGIN_URL + "?appid=" + appId + "&secret=" + appSecret + "&js_code=" + code + "&grant_type=authorization_code";
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<String> response = restTemplate.getForEntity(url, String.class);
        return response.getBody();
    }
}

微信控制器 (WeChatController.java):

@RestController
@RequestMapping("/api/wechat")
public class WeChatController {
   
    @Autowired
    private WeChatService weChatService;
   
    @PostMapping("/login")
    public ResponseEntity<String> login(@RequestParam String code) {
        try {
            String response = weChatService.getSessionKey(code);
            return ResponseEntity.ok(response);
        } catch (IOException e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to get session key");
        }
    }
}

手机号绑定服务类 (PhoneNumberService.java):

@Service
public class PhoneNumberService {
   
    @Autowired
    private UserService userService;
   
    public void bindPhoneNumber(String openId, String phoneNumber) {
        User user = userService.findByOpenId(openId);
        if (user != null) {
            user.setPhoneNumber(phoneNumber);
            userService.save(user);
        }
    }
}

微信小程序端代码 (app.js):

wx.login({
    success: function (res) {
        if (res.code) {
            wx.request({
                url: 'https://yourdomain.com/api/wechat/login',
                method: 'POST',
                data: {
                    code: res.code
                },
                success: function (response) {
                    const sessionData = response.data;
                    wx.getPhoneNumber({
                        success: function (res) {
                            wx.request({
                                url: 'https://yourdomain.com/api/phone/bind',
                                method: 'POST',
                                data: {
                                    openId: sessionData.openid,
                                    phoneNumber: res.phoneNumber
                                },
                                success: function (res) {
                                    console.log('Phone number bound successfully');
                                }
                            });
                        }
                    });
                }
            });
        }
    }
});

以上代码提供了一个微信小程序手机号登录功能的基本实现过程。实际开发中可能还需要处理异常情况、数据验证和安全性问题。希望这些代码和步骤对你有所帮助!

显示全文