第一条手机验证码
目前,许多应用都需要进行身份验证,其中通过手机验证码验证身份比较常见。
本篇文章将会让你知道应用如何发送手机验证码到手机中,当然不是我发给你啦!
我们通过电脑是不能发送短信到手机中去的,因此需要第三方平台来提供服务!
我试过了好几个云短信平台,发现还是 榛子云 短信平台比较好,因为他不需要提供营业执照。
不过缺点是该平台只提供一条免费短信,其他平台提供100 多条免费短信。
好啦,我们开始正式项目了。
首先我们创建一个 Spring Boot 项目,由于之前文章谈到过,这里就不多说了。
为了简单起见,所有的代码都最简化:
前端页面 index:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="/js/custom.js"></script> <title>Sign Up</title> </head> <body> <form action="#" method="post"> <input name="phone" type="text" placeholder="Phone"><br> <input name="verifycode" type="text"> <button type="button" id="sendcode">获取验证码</button><br> <input type="submit" value="SIGN UP"> </form> </body> </html>
jquery 脚本是目前最新版的,custom 脚本的作用是为了向后台提交手机号码:
$(function(){ $("#sendcode").on("click", function(){ var phone = $("input[name=phone]").val(); $.ajax({ url: "/sendsms", type: "post", data: {"phone":phone}, }) }); });
从该脚本可以看到以 post 的方式发送了 "/sendsms" 请求,请求中包含了输入的手机号。
现在来看一下控制器:
package note.controller; import java.util.Random; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.zhenzi.sms.ZhenziSmsClient; @Controller public class NoteController { @GetMapping("/index") public String index() { return "index"; } @PostMapping("/sendsms") @ResponseBody public void sendsms(String phone) { try { String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000); ZhenziSmsClient client = new ZhenziSmsClient("https://sms_developer.zhenzikj.com", "#", "#"); client.send(phone, "您的验证码是:"+verifyCode+",如非本人操作,请忽略本信息!"); } catch (Exception e) { e.printStackTrace(); } } }
该控制器中打 # 的地方是在自己注册账号后,应用中的 AppId、AppSecret。
最后 pom.xml 文件如下:
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.0.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.manning</groupId> <artifactId>Note</artifactId> <version>0.0.1-SNAPSHOT</version> <name>Note</name> <description>Demo project for Note</description> <properties> <java.version>11</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.zhenzikj</groupId> <artifactId>zhenzisms</artifactId> <version>1.0.2</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>