html+js手机号获取验证码功能实现

1.找可靠的平台获得接口，我选择的是网易易盾（以下基于该平台实现），有100次的验证码发送机会。
2.找到平台，https://dun.163.com/

3.根据官方的示例代码，调试运行通过之后，更改代码。因为示例代码是用纯java或者python或者php写的，而我们往往需要把发送验证码作为一个接口，前端需要html传入数据。另外还要根据示例代码下载好相关的依赖，示例代码里面都有，直接放在自己的相关文件夹下面就行。还要改一下插入依赖的路径。包里面有一个依赖（gson-2.5.jar）的存在会导致我的系统运行出错，所以我把它删除了，目前暂时没有发现有什么不妥的地方，也不知道它是用在哪儿的，反正删了验证码也能发送。
4.相关代码

自己写的接口
package com.main.activity.contract.lxr;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import org.apache.http.Consts;
import org.apache.http.client.HttpClient;

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.*;

@RestController
public class lxrDemo1 {
/**
* 业务ID，易盾根据产品业务特点分配
/
private final static String BUSINESSID = "BUSINESSID ";
/*
* 产品密钥ID，产品标识
/
private final static String SECRETID = "SECRETID ";
/*
* 产品私有密钥，服务端生成签名信息使用，请严格保管，避免泄露
*/
private final static String SECRETKEY = "SECRETKEY ";

/*** 接口地址*/
private final static String API_URL = "https://sms.dun.163yun.com/v2/sendsms";
/*** 实例化HttpClient，发送http请求使用，可根据需要自行调参*/
private static HttpClient httpClient = HttpClient4Utils.createHttpClient(100, 20, 10000, 2000, 2000);@PostMapping("/sendVerifyCode")
public String sendVerifyCode(String user_phone) throws Exception{

// 此处用申请通过的模板id
System.out.println(“发送验证码”);
String templateId = “xxx”;
// 模板参数对应的json格式数据,例如模板为您的验证码为p1,请于{p1},请于p1,请于{p2}时间登陆到我们的服务器
JSONObject jsonObject = new JSONObject();
int newNum = (int)((Math.random()*9+1)*100000);
String verifyCode=String.valueOf(newNum);
jsonObject.put(“code”, verifyCode);
String params = jsonObject.toJSONString();
Map<String, String> datas = buildParam(user_phone, templateId, params);
String result = HttpClient4Utils.sendPost(httpClient, API_URL, datas, Consts.UTF_8);
System.out.println(“result = [” + result + “]”);
return verifyCode;
}
private static Map<String, String> buildParam(String mobile, String templateId, String params) throws IOException {
Map map = new HashMap<String, String>();
map.put(“businessId”, BUSINESSID);
map.put(“timestamp”, String.valueOf(System.currentTimeMillis()));
map.put(“version”, “v2”);
map.put(“templateId”, templateId);
map.put(“mobile”, mobile);
// 国际短信对应的国际编码(非国际短信接入请注释掉该行代码)
// map.put(“internationalCode”, “对应的国家编码”);
map.put(“paramType”, “json”);
map.put(“params”, params);
map.put(“nonce”, UUID.randomUUID().toString().replace("-", “”));
map.put(“secretId”, SECRETID);
String sign = SignatureUtils.genSignature(SECRETKEY, map);
map.put(“signature”, sign);
return map;
}

// /**
// * @param args
// * @throws Exception
// */
// public static void main(String[] args) throws Exception {
// // 此处用申请通过的模板id
// String templateId = “xxx”;
// // 模板参数对应的json格式数据,例如模板为您的验证码为p1,请于{p1},请于p1,请于{p2}时间登陆到我们的服务器
// JSONObject jsonObject = new JSONObject();
// jsonObject.put(“code”, “666999”);
// String params = jsonObject.toJSONString();
// String mobile = “phone”;
// Map<String, String> datas = buildParam(mobile, templateId, params);
// String result = HttpClient4Utils.sendPost(httpClient, API_URL, datas, Consts.UTF_8);
// System.out.println(“result = [” + result + “]”);
// }

}
前端js（html自己领会）
$("#sendCode").click(function (ev) {
var postData1 = {};
postData1.user_phone=oldPhone;
$.post(“http://localhost:8099/sendVerifyCode”, postData1,function (data) {
verifyCode2=data;
alert(verifyCode2+“验证码发送成功！”);
})
})

这是给自己提个醒，以后要写手机验证码就不用想很久啦
ps：因为使用次数只有100次（穷人不敢买，没人报销），我每次逻辑都要写的很好了以后才敢发送验证码，目前为止也就用了4次啦啦啦。

html+js手机号获取验证码功能实现相关推荐

vue+vant 实现手机号获取验证码页面
vue+vant 实现手机号获取验证码页面 html <van-field label="手机号"v-model="phone"centerrequir ...
手机号获取验证码：django版本2.2/ js
(venv)虚拟环境安装django版本2.2.12 pip install django==2.2.12 -i https://pypi.tuna.tsinghua.edu.cn/simple/ ( ...
发送手机短信获取验证码功能
因为移动端的方便,现在网络上很多的网站与应用都有与实现用户手机绑定的功能.这样做的好处很多,例如账号登陆.修改密码.在线支付--等功能模块都可以与手机实时获取验证码短信结合,来确保用户的安全性操作. ...
最完整手机号获取验证码登陆注册逻辑
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_37523448/article/ ...
手机号获取验证码、验证验证码是否正确
html: <div class="left_box lf"> <div class="menu"> <span style=&q ...
输入手机号获取验证码的注册页面，说出测试过程
考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...
短信验证（手机号注册，绑定手机号获取验证码）
今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮 ...
Android短信验证（手机号注册，绑定手机号获取验证码）实例
今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册 ...
js实现滑动验证码功能
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

html+js手机号获取验证码功能实现

html+js手机号获取验证码功能实现相关推荐

最新文章

热门文章