To simplify user sign-up and login and increase conversion rates on your H5 page, you can implement one-click login. This topic describes how to integrate phone number verification into your H5 page.
Step 1: Download the SDK
Log on to the Phone Number Verification Service console. On the Overview page, find the API & SDK section on the right and click Download Now. Follow the on-screen instructions to download the required SDK.
Step 2: Create a verification solution
Log in to the Phone Number Verification Service console and create a new authentication scheme. For details, see Create an authentication scheme.
The H5 integration endpoint address must meet the following format requirements:
Page URL format:
protocol+//+domain+/. For example,https://www.aliyun.com/. Note the trailing slash (/).Origin address format:
protocol+//+domain. For example,https://www.aliyun.com.
For H5 integration, due to carrier restrictions, the phone number verification capability for China Mobile numbers can be invoked only starting from the second business day after you create the verification solution. The carrier determines the exact activation time. In practice, based on test results, China Mobile numbers may be able to launch the authorization page before this full review period ends, depending on whether the carrier expedites the review.
While the China Mobile capability has not yet taken effect for a new verification solution, calling
api-getConnectionto obtain the network type may returnunknown. If you encounter this, test with China Unicom or China Telecom numbers first to rule out configuration issues on your side.
One-click login example
When both a cellular network and Wi-Fi are enabled, JavaScript cannot force the browser to use the cellular network to retrieve the phone number. If a user's device is connected to a shared hotspot, the Wi-Fi channel might retrieve the hotspot owner's phone number instead of the user's. To mitigate this security risk, users must enter the middle four digits of their phone number during the H5 one-click login process.
Browser compatibility notes
On Android devices, using non-default browsers such as
WeChat, IE, or Edge to open the H5 page may cause number retrieval to fail due to compatibility limitations. We recommend testing with the Android device's default browser. iPhone devices are not affected by this limitation.The China Unicom carrier gateway currently has compatibility issues in Android WebView/H5 environments. During carrier-side gateway upgrades, calling
getLoginTokenmay return-30408(pre-authorization failed). If you encounter this error, test with the device's default browser first to rule out browser-side interference.The SDK call logic itself is not the main cause of carrier-specific failures. Such failures are mainly caused by carrier-side gateway compatibility or an ongoing carrier-side upgrade, not by an issue in your integration code.
Scan the QR code below to try the one-click login feature on an H5 page.
|
| This demo showcases the user flow but omits the final server-side verification step required to complete the process. The demonstrated flow concludes when the H5 page successfully receives the token from the carrier. |
For more information about SDK integration, see H5 one-click login client-side integration. The following code provides an example.
When a user clicks Switch to other login methods in the sample code, the SDK does not continue the one-click login flow. Instead, it starts the SMS verification flow:
Your page calls
phoneNumberServer.closeLoginPage()to manually close the authorization page pop-up.Your frontend code then navigates to your own custom SMS verification code page.
The user manually enters their phone number on that custom page and completes authentication by entering the SMS verification code they receive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>One-click Login</title>
<script src="./js/numberAuth-web-sdk.2.0.5.js"></script>
</head>
<body>
<div class="number-auth-demo">
<h3 class="title">One-click Login</h3>
<a id="J_loginPhone" class="submit-btn">Click for One-click Login</a>
</div>
</body>
<script>
window.onload = function () {
var loginPhoneEle = document.getElementById("J_loginPhone");
var phoneNumberServer = new window.PhoneNumberServer();
function getToken() {
phoneNumberServer.getLoginToken({
// Success callback
success: function (res) {
// One-click login: Send a request to your server. Your server then calls the GetPhoneWithToken API to retrieve the phone number and complete the login.
},
// Error callback
error: function (res) {},
// Listener for authorization page status
watch: function (status, data) {},
// Configuration options
authPageOption: {
navText: "One-click Login",
subtitle: "", // Subtitle
btnText: "Log In Now",
agreeSymbol: ", ",
showCustomView: true,
customView: {
element:
'<div class="btn_box other" onclick="clickEvent()">Switch to other login methods</div>',
style: ".btn_box.other{background: #fff; color: #f00}",
js: "function clickEvent(){alert(666666)}",
},
privacyBefore: "I have read and agree to",
isDialog: true, // Specifies whether to display the page as a pop-up dialog.
manualClose: true, // Specifies whether to manually close the pop-up dialog or authorization page.
},
});
}
function checkLogin(jwtToken, accessToken) {
phoneNumberServer.checkLoginAvailable({
accessToken: accessToken,
jwtToken: jwtToken,
success: function (res) {
console.log("Authentication successful. The login page can be displayed.", res);
getToken();
},
error: function (res) {
console.log("Authentication failed.", res);
},
});
}
loginPhoneEle.onclick = function () {
// Before making the call, obtain the AccessToken and jwtToken from your server.
var tokenInfo = {
JwtToken: "OhT****************dw",
AccessToken: "qaxz*******************0qazx",
};
checkLogin(tokenInfo.JwtToken, tokenInfo.AccessToken);
};
};
</script>
</html>
Local phone number verification example
Scan the QR code below to try the local phone number verification feature on an H5 page.
|
| This demo showcases the user flow but omits the final server-side verification step required to complete the process. The demonstrated flow concludes when the H5 page successfully receives the token from the carrier. |
For more information about SDK integration, see H5 local phone number verification client-side integration. The following code provides an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Local Phone Number Verification</title>
<script src="./js/numberAuth-web-sdk.2.0.5.js"></script>
</head>
<body>
<div class="number-auth-demo">
<h3 class="title">Local Phone Number Verification</h3>
<a id="J_verifyPhone">Verify</a>
</div>
</body>
<script>
window.onload = function () {
var verifyPhoneEle = document.getElementById("J_verifyPhone");
var phoneNumberServer = new window.PhoneNumberServer();
function getAuthToken() {
phoneNumberServer.getVerifyToken({
// Success callback
success: function (res) {
console.log("Successfully obtained the token for local phone number verification.", res);
// Local phone number verification: Send the returned spToken and the user-entered phone number to your server. Your server then calls the VerifyPhoneWithToken API to complete the verification.
},
// Error callback
error: function (res) {
console.log("Failed to obtain the token for local phone number verification.", res);
},
});
}
function checkAuth(jwtToken, accessToken) {
phoneNumberServer.checkAuthAvailable({
accessToken: accessToken,
jwtToken: jwtToken,
success: function (res) {
console.log("Authentication successful.", res);
getAuthToken();
},
error: function (res) {
console.log("Authentication failed.", res);
},
});
}
verifyPhoneEle.onclick = function () {
// Before making the call, obtain the AccessToken and jwtToken from your server.
var tokenInfo = {
JwtToken: "eyUIr***********************g7w",
AccessToken: "iBDdh********************1cQ==",
};
checkAuth(tokenInfo.JwtToken, tokenInfo.AccessToken);
};
};
</script>
</html>
FAQ
How do I troubleshoot a CORS error (Access-Control-Allow-Origin missing) when integrating H5?
Check the following in order:
Confirm whether the page is embedded in an
iframe. Some carriers do not support theiframescenario for H5 one-click login.Check whether your console configuration restricts requests with a domain whitelist, and confirm your current domain is included.
Check whether a Content-Security-Policy (CSP)
metatag in the page's HTML head is blocking the SDK's resource requests.If the preceding configurations are all correct and the error persists, check the CORS policy configuration of the backend OSS resources used by the page.
Can I mix the configuration of the H5 solution with the Android/iOS native SDK solution?
No. The H5 integration endpoint and the Android/iOS native SDK are two independent integration methods, each with its own AppID and AppKey. If you use the H5 solution's configuration in a native SDK integration inside an Android app, authentication will fail or the SDK will fail to initialize correctly. Always select the verification solution configuration that matches your actual integration endpoint, and make sure the AppID and AppKey you use match that endpoint.
How do I resolve a WAP gateway IP error in H5 one-click login (code: 103111)?
This error is usually caused by an authorization page UI configuration that does not comply with carrier requirements. Carriers require that the back button, close button, navigation bar, carrier agreement, title bar, and login button are never hidden — that is, none of these elements can have display: none, and none can have a width or height of 0px.
To resolve this:
Comment out all of your custom CSS for the authorization page and test again.
If the flow works correctly after removing your custom CSS, this confirms the error is caused by a UI compliance violation in your styles.
Restore your custom styles incrementally, checking after each change that all of the required elements listed above remain visible, until you identify and fix the offending style.
The H5 authorization page overlay shows a blank area or does not fully cover the page after it is pulled down. How do I fix this?
Increase the CSS specificity of your custom styles, or use
!important, so that your styles take priority over the SDK's default styles.Mirror your phone screen to your computer's browser (for example, using Chrome's
chrome://inspect/#devices) so that you can inspect the bottom overlay styles with browser developer tools.If the blank area corresponds to the device's own browser navigation bar, this is a limitation of the browser environment and cannot be fixed with CSS.
We recommend testing the official demo across different environments (for example,
WeChatand the device's default mobile browser) to determine whether the issue is caused by your configuration or by an environment limitation.
Does the H5 phone number verification page support SMS verification codes?
No. The H5 endpoint only supports the one-click login and local phone number verification capabilities. It does not include SMS verification code capability. This is a difference in supported capabilities between the H5 page address and the main site address. If you need SMS verification code capability, implement it on the main site or on another server-side integration.