第一條手機驗證碼

時間 2019-11-09

標籤一條手機驗證碼简体版

原文原文鏈接

目前，許多應用都須要進行身份驗證，其中經過手機驗證碼驗證身份比較常見。javascript

本篇文章將會讓你知道應用如何發送手機驗證碼到手機中，固然不是我發給你啦！html

咱們經過電腦是不能發送短信到手機中去的，所以須要第三方平臺來提供服務！前端

我試過了好幾個雲短信平臺，發現仍是榛子云短信平臺比較好，由於他不須要提供營業執照。java

不過缺點是該平臺只提供一條免費短信，其餘平臺提供100 多條免費短信。jquery

好啦，咱們開始正式項目了。web

首先咱們建立一個 Spring Boot 項目，因爲以前文章談到過，這裏就很少說了。ajax

爲了簡單起見，全部的代碼都最簡化：spring

前端頁面 index：apache

<!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">&nbsp;&nbsp;&nbsp;<button type="button" id="sendcode">獲取驗證碼</button><br>
        <input type="submit" value="SIGN UP">
    </form>
</body>
</html>

jquery 腳本是目前最新版的，custom 腳本的做用是爲了向後臺提交手機號碼：app

$(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>