如果您的项目是一个HTML5网站，期望能够实现“一键登录”功能帮助客户简化注册、登录步骤及提升转化率，可参考本文了解如何在H5页面中集成号码认证功能。
步骤一：下载SDK
登录号码认证产品控制台，在概览页面右侧API&SDK区域，单击立即下载，进入API&SDK页面，根据页面提示下载并解压对应SDK。
步骤二：创建认证方案
登录号码认证服务控制台，新增号码认证方案，具体请参见创建认证方案。
-
H5接入端地址格式要求如下：
-
页面地址格式为
协议+//+域名+/，如：https://www.aliyun.com/（注意：后面有一个斜杠/）。 -
源地址格式为
协议+//+域名，如：https: //www.aliyun.com。
-
-
接入端为 H5 时，因运营商管控要求，中国移动方向的号码认证能力，运营商标准审核时效为 2 个工作日，具体生效时间以运营商审核通过为准。实际测试中，移动手机号可能无需等待完整审批周期即可唤起 H5 一键登录页面（视运营商加急处理情况而定）。
新方案号在移动侧未生效期间，调用
api-getConnection获取网络类型可能返回unknown。建议优先使用联通、电信号码测试以排除配置问题，再确认移动号码的生效状态。
一键登录示例
由于在开启数据网络＋WiFi的情况下，JS无法强制浏览器调度使用数据网络取号。如果设备连接他人的共享热点，此时使用WiFi通道取号有概率获取到他人的手机号码。因此H5一键登录时用户需输入手机号中间4位以避免安全风险。
浏览器兼容性说明
-
Android 手机在微信、IE、Edge 等非自带浏览器中打开 H5 页面存在兼容性问题，可能导致取号失败，建议使用 Android 自带浏览器进行测试和体验（iPhone 不受影响）。
-
联通运营商网关在 Android WebView/H5 环境下存在兼容性问题，在联通网关升级改造期间，可能出现
getLoginToken返回-30408（预授权失败）。建议优先使用自带浏览器测试以排除非 SDK 因素干扰。 -
SDK 调用逻辑本身并非导致特定运营商失败的主要原因，失败情况主要受限于运营商侧网关兼容性或升级改造状态。
请扫描下方二维码，体验在H5页面中实现一键登录功能。
|
|
演示成功后，页面底部依次显示获取jwtToken成功、鉴权成功、获取运营商token成功三条提示，并展示获取到的 token 值。 |
Demo主要作用为展示及体验一键登录流程，不含实际登录（服务端校验）过程。H5端成功获取运营商token后流程结束。 |
更多SDK接入详情，请参见H5一键登录客户端接入。下方为示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>一键登录</title>
<script src="./js/numberAuth-web-sdk.2.0.5.js"></script>
</head>
<body>
<div class="number-auth-demo">
<h3 class="title">一键登录</h3>
<a id="J_loginPhone" class="submit-btn">点击按钮一键登录</a>
</div>
</body>
<script>
window.onload = function () {
var loginPhoneEle = document.getElementById("J_loginPhone");
var phoneNumberServer = new window.PhoneNumberServer();
function getToken() {
phoneNumberServer.getLoginToken({
// 成功回调
success: function (res) {
// 一键登录: 可发请求到服务端调用 GetPhoneWithToken API, 获取用户手机号, 完成登录
},
// 失败回调
error: function (res) {},
// 授权页状态监听函数
watch: function (status, data) {},
// 配置选项
authPageOption: {
navText: "一键登录",
subtitle: "", // 副标题
btnText: "立即登录",
agreeSymbol: "、",
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: "我已阅读并同意",
isDialog: true, // 是否是弹窗样式
manualClose: true, // 是否手动关闭弹窗/授权页
},
});
}
function checkLogin(jwtToken, accessToken) {
phoneNumberServer.checkLoginAvailable({
accessToken: accessToken,
jwtToken: jwtToken,
success: function (res) {
console.log("身份鉴权成功, 可唤起登录界面", res);
getToken();
},
error: function (res) {
console.log("身份鉴权失败", res);
},
});
}
loginPhoneEle.onclick = function () {
// 调用之前先去用户服务端获取AccessToken和jwtToken
var tokenInfo = {
JwtToken: "OhT****************dw",
AccessToken: "qaxz*******************0qazx",
};
checkLogin(tokenInfo.JwtToken, tokenInfo.AccessToken);
};
};
</script>
</html>
用户在授权页点击切换其他登录方式（即“使用其他手机号码”）按钮时，触发的是短信认证流程而非一键登录，交互流程如下：
-
调用
phoneNumberServer.closeLoginPage()手动关闭授权页弹窗。 -
前端逻辑跳转至开发者自定义的短信验证码输入页面。
-
由用户手动输入手机号并接收短信验证码，完成认证。
本机号码校验示例
请扫描下方二维码，体验在H5页面中实现本机号码校验功能。
|
|
|
Demo主要作用为展示及体验本机号码校验流程，不含实际登录（服务端校验）过程。H5端成功获取运营商token后流程结束。 |
更多SDK接入详情，请参见H5本机号码检验客户端接入。下方为示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>本机号码校验</title>
<script src="./js/numberAuth-web-sdk.2.0.5.js"></script>
</head>
<body>
<div class="number-auth-demo">
<h3 class="title">本机号码校验</h3>
<a id="J_verifyPhone">认证</a>
</div>
</body>
<script>
window.onload = function () {
var verifyPhoneEle = document.getElementById("J_verifyPhone");
var phoneNumberServer = new window.PhoneNumberServer();
function getAuthToken() {
phoneNumberServer.getVerifyToken({
// 成功回调
success: function (res) {
console.log("获取本机号码校验token成功", res);
// 本机号码校验. 可带上返回的spToken，用户输入的手机号，请求服务端，服务端调用VerifyPhoneWithToken API 进行本机号码校验；
},
// 失败回调
error: function (res) {
console.log("获取本机号码校验token失败", res);
},
});
}
function checkAuth(jwtToken, accessToken) {
phoneNumberServer.checkAuthAvailable({
accessToken: accessToken,
jwtToken: jwtToken,
success: function (res) {
console.log("鉴权成功", res);
getAuthToken();
},
error: function (res) {
console.log("鉴权失败", res);
},
});
}
verifyPhoneEle.onclick = function () {
// 调用之前先去用户服务端获取AccessToken和jwtToken
var tokenInfo = {
JwtToken: "eyUIr***********************g7w",
AccessToken: "iBDdh********************1cQ==",
};
checkAuth(tokenInfo.JwtToken, tokenInfo.AccessToken);
};
};
</script>
</html>
常见问题（FAQ）
H5 接入时报 CORS 跨域错误（Access-Control-Allow-Origin 缺失）如何排查？
请按以下步骤排查：
-
确认页面是否在 iframe 中嵌入——移动运营商不支持 iframe 场景。
-
检查号码认证控制台是否配置了域名白名单限制。
-
检查页面 HTML 头信息中是否配置了 Content-Security-Policy（CSP）meta 标签，拦截了 SDK 资源请求。
-
若上述配置均无误但仍报错，需检查后端 OSS 资源的 CORS 策略配置。
H5 方案与 Android/iOS 原生 SDK 方案的配置能否混用？
不能混用。H5 接入端与 Android/iOS 原生 SDK 是两种独立的接入方式，各自对应不同的 AppID 和 AppKey。若在 Android App 中使用 H5 方案的配置通过原生 SDK 接入，会导致验证失败或无法正常初始化。请根据实际接入终端选择对应的认证方案配置，确保 AppID 和 AppKey 匹配。
H5 一键登录报 WAP 网关 IP 错误（code: 103111）如何解决？
该错误通常由授权页 UI 配置不符合运营商合规要求导致。运营商规定授权页的返回按钮、关闭按钮、导航栏、运营商协议、标题栏及登录按钮均不得隐藏（即 display 不能为 none，宽高不能为 0px）。
解决方法：先注释掉所有针对授权页的自定义 CSS 代码进行测试，若流程可以跑通，则确认为样式违规；随后逐步恢复并调整 UI 属性，确保上述关键元素可见。
H5 授权页遮罩层下拉后出现空白或未完全覆盖如何处理？
请按以下方式处理：
-
增加自定义 CSS 样式的权重，或使用
!important提升优先级，以覆盖 SDK 原有样式。 -
通过手机投屏同步到电脑浏览器（例如 Chrome 的
chrome://inspect/#devices）调试 UI，检查底部蒙层样式。 -
建议参考官方 Demo 在不同环境（微信、手机浏览器）下测试，以区分是配置问题还是环境限制。
号码认证 H5 页面是否支持短信验证码功能？
不支持。号码认证 H5 端仅支持一键登录和本机号码校验能力，不包含短信验证码功能。H5 页面地址与主站地址的区别在于功能支持范围不同，如需短信验证码功能，请在主站或其他服务端实现。