请在关闭Wifi的时候测试，否则不容易成功
流程：
申请号码认证服务
后端：传入域名后端获取授权accessToken和jwtToken 【getAuthToken】
前端：身份鉴权获传入accessToken和jwtToken【checkAuthAvailable】成功
前端：再获取根据【getVerifyToken】获取spToken
后端：传入手机号和spToken请求【verifyPhoneWithToken】接口校验是否本机流量卡号码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
<title>手机号一键获取</title>
<script src="numberAuth-web-sdk.js"></script>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
const vConsole = new VConsole()
</script>
</head>
<body>
<style>
*{ margin:0px; padding:0px; box-sizing: border-box;}
*:focus{ outline: none;}
body{ padding:20px; font-family: Microsoft Yahei;}
</style>
<input type="text" id="PhoneNumber" style="border:1px solid #eee; padding:10px; width:100%;" placeholder="请输入手机号" >
<button type="button" onclick="getphone(1)" style="border:0; padding:12px 20px; background:#f60; display:block; width:100%; color:#fff; display:block; margin:20px 0; border-radius:5px;">本机号码验证</button>
<!-- <button type="button" onclick="getphone(2)" style="border:0; padding:12px 20px; background:#f60; display:block; width:100%; color:#fff; display:block; margin:20px 0; border-radius:5px;">一键取号</button>
-->
<textarea id="prePage" style="height:500px; width:100%; padding:12px; border:1px solid #eee; margin-top:12px;"></textarea>
<script>
var phoneNumberServer = new PhoneNumberServer();
let phone = ''
function getphone(type){
$("#prePage").append("开始获取TOKEN")
$.ajax({
url:"/getAuthToken",
data:JSON.stringify({origin:'https://www.xxx.com',url:'https://www.xxx.com/'}),
dataType:'json',
type:'post',
headers: {"Content-Type": "application/json;charset=utf-8"},
success:function(res){
if(res.status){
//$("#prePage").append("[getAuthToken]获取accessToken和jwtToken请求后端接口返回："+JSON.stringify(res))
if(type==1){
checkAuthAvailable(res.data.tokenInfo.accessToken, res.data.tokenInfo.jwtToken) //如果是校验手机号
}else{
checkLoginAvailable(res.data.tokenInfo.accessToken, res.data.tokenInfo.jwtToken) //如果是登录
}
}else{
console.log(r.data)
}
}
})
}
//本机号码检验
function checkAuthAvailable(accessToken, jwtToken){
let phoneNumber = $("#PhoneNumber").val()
if(!phoneNumber){ alert("请输入手机号"); return;}
phoneNumberServer.checkAuthAvailable({
accessToken,
jwtToken,
success:function(res){
console.log(res)
$("#prePage").append("身份鉴权成功")
if(res.code == 600000) {
phoneNumberServer.getVerifyToken({
success:function(res2){
console.log(res2)
$("#prePage").append("开始获取spToken")
if(res2.code == 600000){
let spToken = res2.spToken
$.ajax({
url:"/verifyPhoneWithToken",
data:JSON.stringify({spToken, phoneNumber}),
dataType:'json',
type:'post',
headers: {"Content-Type": "application/json;charset=utf-8"},
success:function(res3){
console.log(res3)
$("#prePage").append("根据SpToken和手机号码返回校验结果返回："+JSON.stringify(res3))
}
})
}
},
error:function(err){
console.log('getVerifyToken:'+err)
}
})
}
},
error:function(err){
console.log('checkAuthAvailable:'+err)
}
});
}
//授权登录
function checkLoginAvailable(accessToken,jwtToken){
//鉴权接口
let spToken = ""
phoneNumberServer.checkLoginAvailable({
accessToken: accessToken,
jwtToken: jwtToken,
success:function(res){
console.log("鉴权结果",res)
if(res.code===600000){
phoneNumberServer.getLoginToken({
authPageOption: {
navText: '是否为本机号码充值？', //标题
mount: '', //挂载DIV 默认body
navBackImg: '',
subtitle: '', // 副标题
isHideLogo: true, // logo显示隐藏
logoImg: '', //LOGO图片
btnText: '是的，我要充值',
agreeSymbol: '', //协议间隔
privacyOne: ['',''], //协议1
privacyTwo: ['',''], //协议2
showCustomView: true,
customView:{
element: '<div class="other-phone" onclick="clickEvent()">不是，更换手机号</div>',
style: '.other-phone{ background: #fff; color: #999; text-align:center; font-size:13px; }',
js: 'function clickEvent(){ alert(666666) }'
},
isDialog: true, // 是否是弹窗样式
manualClose: true, // 是否手动关闭弹窗/授权页
isPrePageType: false, //协议是否前置
isShowProtocolDesc: false,
prePageTypeOption: {
// mount: 'prePage',
//privacyOne: ['条款1', 'https://wap.cmpassport.com/resources/html/contract.html'],
// privacyTwo: ['条款2', 'https://wap.cmpassport.com/resources/html/contract.html'],
// showCustomView: true,
// agreeSymbol: '及',
// tips: '<div>tips</div>',
// btnText: '',
}
},
success: res => {
console.log("获取TOKEN结果",res);
if(code===60000){
phoneNumberServer.closeLoginPage(); // 手动关闭授权页时调用关闭页面
res.clearInput(); // 清空输入框并将光标置于第一个输入框
res.focusOn(2); // 将光标置于第1-4个输入框
// 拿到spToken去服务端发起token验证
if(res.spToken){ spToken = res.spToken }
}
},error: res => {
console.log(res)
// 提示用户关闭wifi或者尝试其他登录方案
},watch: function(status, data){
// console.log('-----------------status', status, data);
// 当status为2时整个流程结束，比如如果按钮有loading状态此处置为false
//1：授权页拉起。
//2：点击返回按钮。
//3：点击协议。
//5：点击登录按钮。
//6：获取掩码成功。获取此状态时，需了解当前使用的是哪个运营商网络，在预授权模式中，协议和登录按钮需此时展示。
if(status==5){
if(spToken){
$.ajax({
url:"/getPhoneWithToke",
data:JSON.stringify({spToken}),
dataType:'json',
type:'post',
headers: {"Content-Type": "application/json;charset=utf-8"},
success:function(r2){
alert(r2)
if(r2.status){
phone = r2.data.Data.Mobile
}else{
console.log(r.data)
}
}
})
}
}
},
});
}
},
error: function(res){
console.log(res,'err:checkLoginAvailable')
}
});
}
</script>
<style>
*{ margin:0px; padding:0px;}
body{ font-size:12px;}
.dialog-type-container .dialog-type-inner-content{ width: 280px !important; border-radius:10px !important; }
.dialog-type-container .nav .nav-title { }
.dialog-type-container .number-con-wrap{ padding-top:20px !important;}
.dialog-type-container .submit-btn{ margin-bottom:15px; width:90% !important; background:#f60}
</style>
</body>
</html>
4051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
