H5客户端接入
本文详细介绍H5页面接入网页端SDK的方式及一键登录相关方法的说明。
SDK接入方式
下载SDK
登录号码认证产品控制台,在概览页面或号码认证服务 > 了解号码认证页面的右侧API&SDK区域,单击立即下载,进入API&SDK页面,根据页面提示下载并解压对应SDK。
创建认证方案
您导入项目或调用API接口时,会用到方案Code等参数信息,请先在号码认证产品控制台,创建认证方案,获取方案Code等参数信息。
开始集成
支持两种集成网页端SDK的方法,您可任选其中一种:
静态资源引入。
将网页端SDK上传到您的静态资源服务器上,获取能够访问到网页端SDK的URL,通过
script
标签的方式引入。<script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/numberAuth-web-sdk.js"></script>
npm包引入。下载npm资源,将
aliyun_numberauthsdk_web
包添加为项目依赖。// 下载npm资源并添加依赖到package.json npm i aliyun_numberauthsdk_web -S
注意事项
在调用SDK之前,务必确保对应的SDK依赖文件已经提前引入。
不可在业务代码中覆盖
window.PhoneNumberServer
变量。认证之前确保您的终端设备已关闭Wi-Fi连接且开启了SIM卡的4G移动数据网络(支持中国联通、中国移动的3G网络,但接口耗时会增加)。
交互流程详解
一键登录交互流程主要分为四个步骤:SDK初始化、唤起授权页面、用户同意授权并登录、服务端取号。

上图为完整的交互流程时序图。
初始化
用户访问H5页面,H5页面调用服务端集成的GetAuthToken - 获取 H5 认证授权 Token接口获取Token(包括业务鉴权accessToken和API鉴权jwtToken两个参数)。
H5页面调用SDK的
checkLoginAvailable
方法发起身份鉴权。鉴权成功后展示登录界面。
唤起授权页面
用户点击H5页面的“登录”按钮,调用SDK的
getLoginToken
方法进行预取号。获取到带有掩码的手机号后,唤起二次弹窗授权页,授权页会展示待补充完整的号码及运营商协议。
重要网页端SDK或注册需用户确认授权方可使用,且登录按钮文字描述必须包含“登录”、注册按钮文字描述必须包含“注册”等文字,不可诱导用户授权以及通过任何技术手段跳过或模拟此步骤,否则我方有权停止服务并追究相关法律责任。
对于接入移动认证SDK并上线的应用,阿里云对上线的应用授权页面做审查,若出现未按要求弹出或设计授权页面的,将停止应用的网页端SDK或注册服务。
用户同意授权并登录
用户输入手机号中间四位数字并同意相关协议。
单击授权页面的登录或注册按钮,SDK会根据用户输入的掩码返回换号spToken。
服务端取号
H5页面调用服务端集成的GetPhoneWithToken - 一键登录取号(H5能力专用)接口,换取用户完整手机号。
服务端获取到用户完整手机号,可自行实现登录或注册业务逻辑,并返回结果给H5页面。
H5页面获取到登录状态,关闭授权弹窗。
方法说明
初始化实例
const phoneNumberServer = new PhoneNumberServer();
checkLoginAvailable(一键登录鉴权接口)
调用示例
// 调用之前先去用户服务端获取accessToken和jwtToken
phoneNumberServer.checkLoginAvailable({
accessToken: "XXXXXXXX",
jwtToken: "******",
success: function (res) {
console.log(res);
if (res.code === 600000) {
// 在此调用getLoginToken方法
}
},
error: function (res) {
// 提示用户关闭Wi-Fi或者尝试其他登录方案
},
});
getLoginToken(获取一键登录Token接口)
在checkLoginAvailable的success回调中调用此接口。
调用示例
// 调用之前先去用户服务端获取AccessToken和JwtToken
phoneNumberServer.getLoginToken({
authPageOption: {
navText: "测试",
subtitle: "", // 副标题
isHideLogo: false, // logo显示隐藏
logoImg: "XXX",
btnText: "立即登录",
agreeSymbol: "、",
privacyOne: ["《中国移动认证服务条款》", ""],
privacyTwo: ["《中国移动认证服务条款》", ""],
showCustomView: true,
customView: {
element:
'<div class="btn_box other" onclick="clickEvent()">切换其他登录方式</div>',
style: ".btn_box.other{background: #fff; color: #f00}",
js: "function clickEvent(){alert(666666)}",
},
privacyBefore: "我已阅读并同意",
privacyEnd: "",
vendorPrivacyPrefix: "《",
vendorPrivacySuffix: "》",
privacyVenderIndex: 2,
isDialog: true, // 是否是弹窗样式
manualClose: true, // 是否手动关闭弹窗/授权页
isPrePageType: false,
isShowProtocolDesc: false,
// prePageTypeOption: {
// // mount: '',
// 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 style={{ position: 'absolute', top: '10px', right: '10px', borderRadius: '30%', fontSize: '12px', color: '#fff'}}>tips</div>,
// btnText: '',
// }
},
success: (res) => {
console.log(res);
if (res.code === 600000) {
// 拿到spToken去服务端发起Token验证
phoneNumberServer.closeLoginPage(); // 手动关闭授权页时调用关闭页面
res.clearInput(); // 清空输入框并将光标置于第一个输入框
res.focusOn(2); // 将光标置于第1-4个输入框
res.setMessage({
// 设置弹出Toast提示框(有默认样式)
showMessage: true, // 是否弹出Toast提示框
messageContent: "test content", // 弹出内容
messageStyle: {
// 自定义弹窗样式,写入css样式即可
color: "#fff",
borderRadius: "8px",
},
time: 3000, // 弹出时间/ms,默认3000毫秒
});
}
},
error: (res) => {
// 提示用户关闭Wi-Fi或者尝试其他登录方案
},
watch: function (status, data) {
// console.log('-----------------status', status, data);
// 当status为2时整个流程结束,比如如果按钮有loading状态此处置为false
},
});
getVersion(获取SDK版本号)
const phoneNumberServer = new PhoneNumberServer();
const sdkVersion = phoneNumberServer.getVersion(); // 返回SDK版本号 eg: '1.0.0'
getConnection(网络类型检查接口)
网络类型检查接口,您可自行选择是否调用,对认证流程无阻碍。
此接口会判断当前用户的网络类型: Wi-Fi、移动数据网络(cellular)、unknown。
重要未开启移动数据网络的用户无法通过一键登录完成认证。
提前获取用户的网络类型,拦截使用Wi-Fi网络的用户,及时终止认证流程,节约资源并提升用户的认证体验。
建议认证前调用此接口,对netType为Wi-Fi的用户提醒关闭W-iFi或者提供其他认证方式,对于netType为unknown和cellular的用户继续一键登录流程。
const phoneNumberServer = new PhoneNumberServer();
const netType = phoneNumberServer.getConnection();
// console.log(netType);
// netType的值为Wi-Fi、cellular(流量)、unknown(未知)
sendLoggerEnable(设置开启日志)
isEnable:是否开启,true为开启,false为不开启。
const phoneNumberServer = new PhoneNumberServer();
phoneNumberServer.setLoggerEnable(true);
样式说明
以下为原始样式的层级,需增加样式权重才能对原有的样式进行覆盖。
一键登录授权页上的返回按钮、关闭按钮、导航栏、运营商协议、标题栏和登录按钮,请不要配置为隐藏。
授权页全屏样式
// 此处可修改导航栏整体样式:字体大小,字体颜色,背景颜色等
.page-type-container .nav {
}
// 此处可修改导航栏返回按钮的样式: 高度、宽度等
.page-type-container .nav .nav-back-icon-img {
}
// 此处可修改导航栏标题样式: 字体大小,颜色等
.page-type-container .nav .nav-title {
}
// 此处可修改logo容器的样式: 宽度 高度,圆角等
.page-type-container .logo {
}
// 此处修改电话号码的样式: 颜色、字体大小等
.page-type-container .number-con {
}
// 此处修改电话号码掩码的样式:宽度、高度、字体颜、色间距等
.page-type-container .number-con input {
}
// 此处修改协议勾选、选中时的颜色
.page-type-container .agreement .checke-1 svg g {
fill: blue;
}
// 此处修改协议区域的样式: 字体颜色,大小等
.page-type-container .agreement .agree-content {
}
// 此处修改协议名称的样式:颜色大小等
.page-type-container .agreement a {
}
// 此处修改登录按钮的样式:颜色大小背景色等
.page-type-container .submit-btn{
}
授权弹窗样式
// 此处可修改标题栏整体样式:字体大小,字体颜色,背景颜色等
.dialog-type-container .nav {
}
// 此处可修改标题样式: 字体大小,颜色等
.dialog-type-container .nav .nav-title {
}
// 关闭按钮
div.dialog-type-container .close-btn::before, .dialog-type-container .close-btn::after{
}
// 此处可修改logo容器的样式: 宽度、高度、圆角等
.dialog-type-container .logo {
}
// 此处修改电话号码的样式: 颜色、字体大小等
.dialog-type-container .number-con {
}
// 此处修改电话号码掩码的样式:宽度、高度、字体颜、色间距等
.dialog-type-container .number-con input {
}
// 此处修改协议勾选、选中时的颜色
.dialog-type-container .agreement .checke-1 svg g {
fill: blue;
}
// 此处修改协议区域的样式: 字体颜色,大小等
.dialog-type-container .agreement .agree-content {
}
// 此处修改协议名称的样式:颜色大小等
.dialog-type-container .agreement a {
}
// 此处修改登录按钮的样式:颜色大小背景色等
.dialog-type-container .submit-btn{
}
预授权模式
// 按钮样式
div.number-auth-demo .protocol-front-page-container .number-auth-btn-wrap {
// border-radius: 30px;
// width: 300px;
// height: 80px;
// color: #666;
}
二次弹窗样式
/**蒙层样式**/
.privacy-alert-container .privacy-alert-mask {
background: rgba(0, 0, 0, 0.75);
}
/**标题样式**/
.privacy-alert-container .page-type-tabs .page-type-list-nav span {
}
/**协议头标题样式**/
.privacy-alert-container .page-type-tabs .page-type-list-nav span {
}
/**协议内容 (弹窗模式) 如果按钮遮盖了协议内容建议减小协议内容的高度进行调整 **/
.privacy-alert-container .privacy-alert-modal.dialog .page-type-tabs iframe {
width: 100%;
height: 75vh; // 默认高度
}
/**二次弹窗按钮默认样式**/
.privacy-alert-container .privacy-alert-modal .privacy-alert-btn {
position: fixed;
bottom: 10px;
left: 0;
padding: 10px 0;
width: 92vw;
background: linear-gradient(90deg, #FF8101 3%, #FF6B01 100%);
border: none;
border-radius: 2px;
color: #fff;
font-size: 4.8vmin;
font-weight: 200;
margin: 4vw;
}