日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

AI 助理
備案控制臺
文檔
輸入文檔關(guān)鍵字查找
首頁 號碼認(rèn)證服務(wù) 快速入門 號碼認(rèn)證Demo體驗 H5頁面Demo體驗

H5頁面Demo體驗

更新時間：
產(chǎn)品詳情
我的收藏

如果您的項目是一個HTML5網(wǎng)站，期望能夠?qū)崿F(xiàn)“一鍵登錄”功能幫助客戶簡化注冊、登錄步驟及提升轉(zhuǎn)化率，可參考本文了解如何在H5頁面中集成號碼認(rèn)證功能。

步驟一：下載SDK

登錄號碼認(rèn)證產(chǎn)品控制臺，在概覽頁面右側(cè)API&SDK區(qū)域，單擊立即下載，進入API&SDK頁面，根據(jù)頁面提示下載并解壓對應(yīng)SDK。

步驟二：創(chuàng)建認(rèn)證方案

登錄號碼認(rèn)證服務(wù)控制臺，新增號碼認(rèn)證方案，具體請參見創(chuàng)建認(rèn)證方案。

說明

  • H5接入端地址格式要求如下：

    • 頁面地址格式為協(xié)議+//+域名+/，如：https://www.aliyun.com/（注意：后面有一個斜杠/）。

    • 源地址格式為協(xié)議+//+域名，如：https: //www.aliyun.com。

  • 接入端為H5時，因運營商管控要求，中國移動方向的號碼認(rèn)證能力，需要創(chuàng)建方案后的第2個工作日才可以發(fā)起調(diào)用。具體生效時間以運營商審核通過為準(zhǔn)。

一鍵登錄示例

請掃描下方二維碼，體驗在H5頁面中實現(xiàn)一鍵登錄功能。

image..png

更多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({
          // 成功回調(diào)
          success: function (res) {
            // 一鍵登錄: 可發(fā)請求到服務(wù)端調(diào)用 GetPhoneWithToken API, 獲取用戶手機號, 完成登錄
          },
          // 失敗回調(diào)
          error: function (res) {},
          // 授權(quán)頁狀態(tài)監(jiān)聽函數(shù)
          watch: function (status, data) {},
          // 配置選項
          authPageOption: {
            navText: "一鍵登錄",
            subtitle: "", // 副標(biāo)題
            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, // 是否手動關(guān)閉彈窗/授權(quán)頁
          },
        });
      }

      function checkLogin(jwtToken, accessToken) {
        phoneNumberServer.checkLoginAvailable({
          accessToken: accessToken,
          jwtToken: jwtToken,
          success: function (res) {
            console.log("身份鑒權(quán)成功, 可喚起登錄界面", res);
            getToken();
          },

          error: function (res) {
            console.log("身份鑒權(quán)失敗", res);
          },
        });
      }

      loginPhoneEle.onclick = function () {
        // 調(diào)用之前先去用戶服務(wù)端獲取AccessToken和jwtToken
        var tokenInfo = {
          JwtToken: "OhT****************dw",
          AccessToken: "qaxz*******************0qazx",
        };

        checkLogin(tokenInfo.JwtToken, tokenInfo.AccessToken);
      };
    };
  </script>
</html>

本機號碼校驗示例

請掃描下方二維碼，體驗在H5頁面中實現(xiàn)本機號碼校驗功能。image..png

更多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">認(rèn)證</a>
    </div>
  </body>
  <script>
    window.onload = function () {
      var verifyPhoneEle = document.getElementById("J_verifyPhone");
      var phoneNumberServer = new window.PhoneNumberServer();

      function getAuthToken() {
        phoneNumberServer.getVerifyToken({
          // 成功回調(diào)
          success: function (res) {
            console.log("獲取本機號碼校驗token成功", res);
            // 本機號碼校驗. 可帶上返回的spToken，用戶輸入的手機號，請求服務(wù)端，服務(wù)端調(diào)用VerifyPhoneWithToken API 進行本機號碼校驗；
          },
          // 失敗回調(diào)
          error: function (res) {
            console.log("獲取本機號碼校驗token失敗", res);
          },
        });
      }

      function checkAuth(jwtToken, accessToken) {
        phoneNumberServer.checkAuthAvailable({
          accessToken: accessToken,
          jwtToken: jwtToken,
          success: function (res) {
            console.log("鑒權(quán)成功", res);
            getAuthToken();
          },
          error: function (res) {
            console.log("鑒權(quán)失敗", res);
          },
        });
      }
      verifyPhoneEle.onclick = function () {
        // 調(diào)用之前先去用戶服務(wù)端獲取AccessToken和jwtToken
        var tokenInfo = {
          JwtToken: "eyUIr***********************g7w",
          AccessToken: "iBDdh********************1cQ==",
        };

        checkAuth(tokenInfo.JwtToken, tokenInfo.AccessToken);
      };
    };
  </script>
</html>