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

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

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

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

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


用户在小程序中点击“手机号登录”按钮,获取用户手机号。

小程序向微信服务器请求手机号,通过 wx.login 获取用户的登录凭证(code)。

通过 code 请求微信服务器,获得用户的 session_key 和 openid。

通过 session_key 和用户提供的手机号,进行手机号绑定或验证。

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');
                                }
                            });
                        }
                    });
                }
            });
        }
    }
});

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


相关文章
|
2月前
|
移动开发 安全 JavaScript
SpringBoot接入微信JSSDK,看这篇妥妥的
这篇教程详细介绍了如何在Spring Boot项目中接入微信JSSDK,实现H5页面的自定义分享和调用相册选取图片等功能。文章首先通过对比理想与现实的分享效果,引出了接入微信JSSDK的必要性。接着,作者提供了GitHub和Gitee上的项目源码链接,并逐步讲解了整个接入过程的关键步骤,包括配置文件、主要类和方法的实现细节,以及必要的微信公众号设置。此外,还特别强调了几个常见问题及其解决方案,如域名绑定、IP白名单设置和签名验证等。最后,通过实际测试验证了功能的正确性。适合初学者快速上手微信JSSDK接入。
39 8
SpringBoot接入微信JSSDK,看这篇妥妥的
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
62 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
61 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
2月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
2月前
|
存储 前端开发 安全
|
2月前
|
存储 小程序 JavaScript
|
2月前
|
开发工具 Android开发
|
2月前
【Azure 环境】中国区Azure B2C 是否支持手机验证码登录呢?
【Azure 环境】中国区Azure B2C 是否支持手机验证码登录呢?
|
2月前
|
存储 前端开发 算法
|
2月前
|
存储 小程序 JavaScript

热门文章

最新文章

下一篇
无影云桌面