本文详细介绍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;
}- 本页导读 （1）