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.
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.
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.
<!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>