1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html+js手机号获取验证码功能实现

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

时间:2022-01-04 06:48:00

相关推荐

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

1.找可靠的平台获得接口,我选择的是网易易盾(以下基于该平台实现),有100次的验证码发送机会。

2.找到平台,/

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./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次啦啦啦。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。