国产成人无码情景AV,免费中文字幕乱码在线,国产视频一区二区

本文詳細介紹H5頁面接入網頁端SDK的方式及一鍵登錄相關方法的說明。

說明

在使用過程中如有疑問，可以提交工單聯系阿里云技術工程師處理。

接入步驟

創建認證方案

您導入項目或調用API接口時，會用到方案Code等參數信息，請先在號碼認證產品控制臺，創建認證方案，獲取方案Code等參數信息。

資源引入

npm包引入

下載npm資源，并將aliyun_numberauthsdk_web包添加依賴到package.json：

npm i aliyun_numberauthsdk_web -S

在腳本中引入：

import { PhoneNumberServer } from 'aliyun_numberauthsdk_web';

靜態資源引入

登錄號碼認證產品控制臺，在概覽頁面右側API&SDK區域，單擊立即下載，進入API&SDK頁面，根據頁面提示下載并解壓對應SDK。

將網頁端SDK上傳到您的靜態資源服務器上，獲取能夠訪問到網頁端SDK的URL，通過script標簽的方式引入。

<script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/numberAuth-web-sdk.js"></script>

重要

不可在業務代碼中覆蓋window.PhoneNumberServer變量。
未開啟移動數據網絡的用戶無法通過一鍵登錄完成認證：認證之前確保您的終端設備已關閉Wi-Fi連接且開啟了SIM卡的4G移動數據網絡（支持中國聯通、中國移動的3G網絡，但接口耗時會增加）。

交互流程

image..png

初始化并鑒權
1. 用戶訪問H5頁面。
2. 服務端：調用GetAuthToken接口獲取業務鑒權accessToken、API鑒權jwtToken。
3. 網頁端：調用checkLoginAvailable方法發起身份鑒權。
4. 鑒權成功后展示登錄界面。
喚起授權頁面
1. 用戶點擊H5頁面的“登錄”按鈕。
2. 網頁端：調用getLoginToken方法進行預取號。
3. 獲取到帶有掩碼的手機號后，喚起二次彈窗授權頁，授權頁會展示待補充完整的號碼及運營商協議。
  重要
  - 網頁端SDK或注冊需用戶確認授權方可使用，且登錄按鈕文字描述必須包含“登錄”、注冊按鈕文字描述必須包含“注冊”等文字，不可誘導用戶授權以及通過任何技術手段跳過或模擬此步驟，否則我方有權停止服務并追究相關法律責任。
  - 阿里云將對接入移動認證SDK并上線的應用授權頁面進行審查，若出現未按要求彈出或設計授權頁面的，將停止應用的網頁端SDK或注冊服務。
用戶同意授權并登錄
1. 用戶輸入手機號中間四位數字并同意相關協議。
2. 單擊授權頁面的登錄或注冊按鈕，SDK會根據用戶輸入的掩碼返回一鍵登錄spToken。
服務端取號
1. 服務端：調用GetPhoneWithToken接口，換取用戶完整手機號。
2. 獲取到用戶完整手機號后，您可自行實現登錄或注冊業務邏輯，并將結果返回給H5頁面。
3. H5頁面獲取到登錄狀態，關閉授權彈窗。

偽代碼示例

var loginBtn = document.getElementById("loginBtn");
var phoneNumberServer = new PhoneNumberServer();

function getAuth() {
  // 向后端發起請求，獲取accessToken, jwtToken, 后端調用 getAuthToken 接口
  return accessToken, jwtToken;
}

function checkLogin(accessToken, jwtToken) {
  phoneNumberServer.checkLoginAvailable({
    accessToken: accessToken,
    jwtToken: jwtToken,
    success: function (res) {
      // 身份鑒權成功,調用 getLoginToken 接口
      getToken();
    },

    // 身份鑒權失敗,提示用戶關閉Wi-Fi或者嘗試其他登錄方案
    error: function (res) {},
  });
}

function getToken() {
  phoneNumberServer.getLoginToken({
    success: function (res) {
      // 成功回調，獲取spToken
      getPhone(res.spToken);
    },

    // 失敗回調
    error: function (res) {},
    
    // 授權頁狀態監聽函數
    watch: function (status, data) {},
    
    // 頁面配置選項
    authPageOption: {},
  });
}

function getPhone(spToken) {
  // 向后端發起請求,后端調用 GetPhoneWithToken接口,獲取用戶手機號, 完成登錄
}


loginBtn.onclick = function () {
  const {accessToken, jwtToken} = getAuth();
  checkLogin(accessToken, jwtToken);
};

H5接入Demo，請參見H5頁面Demo體驗。

SDK方法說明

初始化實例

var phoneNumberServer = new PhoneNumberServer();

checkLoginAvailable（一鍵登錄鑒權接口）

// 先在服務端調用getAuthToken接口, 獲取accessToken, jwtToken
phoneNumberServer.checkLoginAvailable();

checkLoginAvailable 方法參數

phoneNumberServer.checkLoginAvailable({
  accessToken: "******",
  jwtToken: "******",
  success: function (res) {
    console.log(res);
    if (res.code === 600000) {
      console.log("鑒權成功", res);
      // 在此調用getLoginToken方法
    }
  },

  error: function (res) {
    console.log("鑒權失敗", res);
    // 可提示用戶關閉Wi-Fi或者嘗試其他登錄方案
  }
});

參數名稱	參數類型	是否必填	參數說明
accessToken	string	是	業務鑒權Token，由服務端調用GetAuthToken接口獲取。過期時間是10分鐘，有效期內可以重復使用。
jwtToken	string	是	API鑒權Token，由服務端調用GetAuthToken接口獲取。過期時間是1小時，有效期內可以重復使用。
timeout	number	否	接口請求超時時間，默認值為10s。
success	function	是	成功回調。入參請參見success/error 回調函數入參。
error	function	是	失敗回調。入參請參見success/error 回調函數入參。

success/error 回調函數入參

參數示例	參數名稱	參數說明
`{ code: "6000xx", content: [ { vender: "CU", result: "100001", resultCode: "101", msgId: "xxxxx" } ], msg: "", requestId: "" }`	code	返回的狀態碼。返回600000代表請求成功。其他錯誤碼，請參見錯誤碼。
	content	運營商SDK的返回結果，方便客戶定位問題。說明不同運營商返回的內容消息體存在一些差異，可根據`vender`字段進行區分處理。
	msg	返回結果的描述。
	requestId	請求ID，根據此ID可查詢相關日志。

getLoginToken（獲取一鍵登錄Token接口）

// 在checkLoginAvailable方法的success回調中調用本方法
phoneNumberServer.getLoginToken();

getLoginToken 方法參數

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
  },
});

參數名稱	參數類型	是否必填	參數說明
authPageOption	object	是	配置選項。配置詳情請參見authPageOption 字段說明。
timeout	number	否	超時時間，單位：秒。建議不低于2秒，默認為3秒。
success	function	是	成功回調。入參請參見success/error 回調函數入參。
error	function	是	失敗回調。入參請參見success/error 回調函數入參。
watch	function	否	授權頁狀態監聽函數。入參請參見watch/protocolPageWatch/previewPrivacyWatch 回調函數入參。
protocolPageWatch	function	否	預授權頁狀態監聽函數，isPrePageType參數為true時需填入。入參請參見watch/protocolPageWatch/previewPrivacyWatch 回調函數入參。
previewPrivacyWatch	function	否	協議預覽彈窗狀態監聽函數。入參請參見watch/protocolPageWatch/previewPrivacyWatch 回調函數入參。
privacyAlertWatch	function	否	二次彈窗頁面狀態監聽函數。

success/error 回調函數入參

參數名稱	參數類型	參數說明
code	string	返回的狀態碼。返回600000代表請求成功。其他錯誤碼，請參見錯誤碼。
spToken	string	運營商一鍵登錄Token，可在服務端調用GetPhoneWithToken接口進行取號。
clearInput	function	調用清空當前所有輸入框，將光標置于第一個輸入框。
focusOn	function	入參為：1-4，將光標置于入參對應下標的輸入框內。
setMessage	function	設置彈出Toast提示框（有默認樣式）。入參格式： `{ showMessage: boolean, // 是否彈出Toast提示框 messageContent: string, // 彈出內容 messageStyle: object, // 自定義彈窗樣式 time: number // 彈出時間ms }`
vender	string	運營商信息： CM 中國移動　 CU 中國聯通 CT 中國電信

watch/protocolPageWatch/previewPrivacyWatch 回調函數入參

參數名稱

參數說明

status

授權頁狀態。

1：渲染成功（watch，protocolPageWatch，previewPrivacyWatch）
2：主動點擊返回/關閉按鈕（watch，previewPrivacyWatch）
3：點擊協議（watch，protocolPageWatch，previewPrivacyWatch）
5：點擊登錄按鈕（watch，protocolPageWatch，previewPrivacyWatch）
6：獲取掩碼成功（僅protocolPageWatch回調返回此狀態，獲取此狀態時，需確認當前使用的運營商網絡，在預授權模式中，協議和登錄按鈕此時展示。）
8：點擊協議按鈕（返回的data中會包含當前的協議勾選狀態isChecked，為true時為已勾選， false為未勾選）（watch， protocolPageWatch，previewPrivacyWatch）
9：輸入手機號四位掩碼的監聽（watch）（返回的data中會返回當前的四位掩碼maskPhone，maskPhone為數組，按順序掩碼數字。）

data

監聽返回的額外數據，包含以下：

requestId: string類型，本地調用的唯一ID，根據此ID可查詢相關日志。
netType：string類型，運營商類型，CT（電信）、CU（聯通）、CM（移動）。
maskPhone：array類型，手機號四位掩碼（status為9和5時出現）。
isChecked：boolean類型，當前的協議勾選狀態（status為8和5時出現）。

authPageOption 字段說明

參數名稱	參數類型	是否必填	參數說明
mount	string	否	指定掛載節點的ID，默認掛載到body標簽。
navText	string	否	導航欄標題文案，默認值：本機號碼登錄。
navBackImg	string	否	導航欄返回按鈕圖片的src鏈接。
subtitle	string	否	副標題導航欄下面的說明文案，不傳則不顯示。
isHideLogo	boolean	否	是否隱藏Logo。取值： false（默認值）：表示顯示。 true：表示隱藏。
logoImg	string	否	Logo圖片設置，默認值：阿里云Logo。
numberLabel	string	否	手機號碼前面的文案或圖片，不傳則不展示。
btnText	string	否	按鈕文案，默認值：登錄。
isFocus	boolean	否	進入授權頁面，是否聚焦光標。取值： true：聚焦光標。 false（默認值）：不聚焦光標。說明由于系統限制，iOS系統瀏覽器不支持該功能。
agreeSymbol	string	否	協議和協議之間的連接符號，默認用“和”連接。
privacyVenderIndex	number	否	運營商協議的位置，默認為2。 0：最前面。 1：中間位置。 2：最后面。
vendorPrivacyPrefix	string	否	設置運營商協議前綴符號，僅支持設置如下字符中的任意一個，如<>、()、《》、【】、『』、[]、（）
vendorPrivacySuffix	string	否	設置運營商協議后綴符號，僅支持設置如下字符中的任意一個，如<>、()、《》、【】、『』、[]、（）
privacyBefore	string	否	設置開發者隱私條款前置自定義文案。默認：我已閱讀并同意。
privacyEnd	string	否	設置開發者隱私條款后置自定義文案。
privacyCheckedImg	string	否	默認為圓形勾選，如需自定義可傳入需要的圖片。
privacyOne	string	否	自定義協議1，格式：['name',url]。
privacyTwo	string	否	自定義協議2，格式：['name',url]。
showCustomView	boolean	否	是否展示自定義控件。取值： true：表示展示自定義控件。 false（默認值）：表示不展示自定義控件。
customView	object	否	添加此屬性必須設置showCustomView為true，對象形式 `{ "element": "自定義節點", "style": "自定義樣式", "js": "自定義交互" }`
isDialog	boolean	否	是否彈窗樣式。取值： true：表示登錄頁為彈窗。 false（默認值）：表示登錄頁為全屏頁面。
manualClose	boolean	否	是否手動關閉彈窗/授權頁。取值： true：表示登錄時需要手動關閉授權頁。 false（默認值）：表示登錄時自動關閉授權頁。
isPrePageType	boolean	否	協議是否前置。取值： true：協議展示在預授權頁面，用戶同意協議，點擊確認按鈕后，跳轉至授權頁。 false（默認值）：協議不前置。
isShowProtocolDesc	boolean	否	預授權模式下，授權頁彈窗是否展示協議。取值： true：表示展示協議。 false（默認值）：表示不展示協議。
prePageTypeOption	object	否	isPrePageType參數為true時，需傳入mount。配置詳情請參見配置對象詳情請參見prePageTypeOption 預授權頁面配置。
privacyAlertIsNeedShow	boolean	否	設置二次隱私協議彈窗是否顯示，點擊協議鏈接跳轉至新tab。取值： true：表示展示。 false（默認值）：表示不展示。
privacyAlertConfig	object	否	二次彈窗相關配置。配置對象詳情請參見privacyAlertConfig 二次彈窗相關配置。
privacyCheckedUrl	string	否	協議勾選時的圖片地址。
privacyUnCheckedUrl	string	否	協議未勾選時的圖片地址。
isShowPreviewPrivacy	boolean	否	是否顯示協議預覽彈窗。取值： true：表示顯示。 false（默認值）：表示不顯示。
previewPrivacyOption	object	否	協議預覽彈窗相關配置。

prePageTypeOption 預授權頁面配置

參數名稱	參數類型	是否必填	參數說明
mount	string	是	指定掛載節點的ID，此參數不傳或者找不到會直接報錯。
btnText	string	否	按鈕文案，默認值：點擊登錄。
privacyOne	string	否	自定義協議1，格式['name',url]。
privacyTwo	string	否	自定義協議2，格式['name',url]。
tips	string	否	在預授權頁面的登錄按鈕模塊，可以加自己的小設計，提高可擴展性。
privacyVenderIndex	number	否	運營商協議的位置，默認為2。 0：最前面。 1：中間位置。 2：最后面。
vendorPrivacyPrefix	string	否	設置運營商協議前綴符號，僅支持設置如下字符中的任意一個，如<>、()、《》、【】、『』、[]、（）
vendorPrivacySuffix	string	否	設置運營商協議后綴符號，僅支持設置如下字符中的任意一個，如<>、()、《》、【】、『』、[]、（）
privacyBefore	string	否	設置開發者隱私條款前置自定義文案。默認：我已閱讀并同意。
privacyEnd	string	否	設置開發者隱私條款前置自定義文案。
privacyCheckedImg	HTMLImageElement	否	默認為圓形勾選，如需自定義可傳入需要的圖片。

privacyAlertConfig 二次彈窗相關配置

參數名稱	參數類型	是否必填	參數說明
title	string	否	二次彈窗標題文案。默認值：請閱讀并同意用戶注冊協議。
btnText	string	否	二次彈窗按鈕文案。默認值：我已閱讀并同意以上協議。說明 privacyAlertIsNeedAutoLogin為true時，btnText不可配置，默認：同意協議并登錄
privacyAlertIsNeedAutoLogin	boolean	否	點擊二次彈窗同意按鈕是否自動登錄。取值： true：表示自動登錄。 false：表示不自動登錄。說明當掩碼未輸入時，自動聚焦第一個輸入框，并彈出軟鍵盤。當四位掩碼已輸入時，自動觸發授權頁點擊按鈕，獲取到spToken。
privacyAlertIsDialog	boolean	否	是否彈窗模式。取值： true（默認值）：表示是彈窗模式。 false：表示不是彈窗模式。
privacyAlertMaskIsNeedShow	boolean	否	是否展示蒙層。取值： true：表示展示。 false（默認值）：表示不展示。說明僅privacyAlertIsDialog為true時該參數生效。
isLoginShowPrivacyAlert	boolean	否	點擊授權頁（預授權）登錄按鈕時是否自動彈出二次彈窗。取值： true：表示自動彈出。 false（默認值）：表示不自動彈出。
closeUrl	string	否	URL圖片地址，二次彈窗關閉按鈕會替換成傳入的圖片地址。

previewPrivacyOption 二次彈窗相關配置

參數名稱	參數類型	是否必填	參數說明
title	string	否	協議預覽彈窗標題文案。默認值：請閱讀并同意以下協議。
IsNeedAutoLogin	boolean	否	點擊協議預覽彈窗是否自動進行下一步：當掩碼未輸入時，自動聚焦第一個輸入框，并彈出軟鍵盤。當四位掩碼已輸入時，自動觸發授權頁點擊按鈕，獲取到spToken。
MaskIsNeedShow	boolean	否	是否展示蒙層。取值： true：表示展示。 false（默認值）：表示不展示。
closeUrl	string	否	URL圖片地址，預覽彈窗關閉按鈕會替換成傳入的圖片地址。

其他方法說明

getConnection（網絡類型檢查接口）

本接口會判斷當前用戶的網絡類型并返回netType：

wifi：Wi-Fi網絡，建議對該類用戶提醒關閉Wi-Fi或提供其他認證方式。
cellular：移動數據網絡。
unknown：未知網絡類型。

本接口與認證流程不相關聯，您可自行選擇是否調用。建議認證前調用此接口，攔截使用Wi-Fi網絡的用戶，節約資源并提升用戶的認證體驗。

const netType = phoneNumberServer.getConnection(); // 返回netType: wifi, cellular, unknown

getVersion（獲取SDK版本號）

const sdkVersion = phoneNumberServer.getVersion();  // 返回SDK版本號，如'1.0.0'

sendLoggerEnable（設置開啟日志）

phoneNumberServer.setLoggerEnable(true); // true為開啟，false為不開啟。

樣式說明

以下為原始樣式的層級，需增加樣式權重才能對原有的樣式進行覆蓋。

重要

一鍵登錄授權頁上的返回按鈕、關閉按鈕、導航欄、運營商協議、標題欄和登錄按鈕，請不要配置為隱藏。

授權頁全屏樣式

// 此處可修改導航欄整體樣式：字體大小，字體顏色，背景顏色等
.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 {
   
}

// 關閉按鈕位置設置
.dialog-type-container .close-btn, 
.dialog-type-container .close-img {
 
}

// 關閉按鈕
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;
}

// 二次彈窗關閉按鈕位置樣式設置
.privacy-alert-container .privacy-alert-modal .close-btn,
.privacy-alert-container .privacy-alert-modal .close-img {
  position: absolute;
  top: 15px;
  right: 0;
  z-index: 20000;
  width: 20px;
  height: 20px;
}

協議預覽彈窗樣式修改

/**彈窗樣式 彈窗大小 位置等**/
.dialog-review-container .privacy-alert-modal{
  
}
  

/**蒙層樣式**/
.dialog-review-container .privacy-alert-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 18000;
}

/**標題樣式**/
.dialog-review-container .privacy-alert-modal .privacy-alert-modal-title {
  margin-top: 8vw;
  font-size: 6vmin;
  text-align: center;
  line-height: 1.2;
  width: 90%;
  margin: 30px auto auto auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**協議式**/
.dialog-review-container .protocol-front-page-agree-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8vw;
  height: auto;
  font-size: 4vmin;
  color: #969494;
  letter-spacing: 0;
  line-height: 1.5;
  vertical-align: middle;
  text-align: center;
}

/**協議式**/
.dialog-review-container .protocol-front-page-agree-content a{
  color: #1890FF;
}

/**協議議式**/
.dialog-review-container .privacy-alert-modal .privacy-alert-btn {
  display: block;
  padding: 10px 0;
  width: 60%;
  margin-top: 8vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  background: linear-gradient(90deg, #FF8101 3%, #FF6B01 100%);
  border: none;
  border-radius: 2px;
  color: #fff;
  font-size: 4.8vmin;
  font-weight: 200;
}


/**關閉按鈕位置樣式設置**/ 
.dialog-review-container .privacy-alert-modal .close-btn, 
.dialog-review-container .privacy-alert-modal .close-img {
  position: fixed;
  top: 15px;
  right: 0;
  z-index: 10000;
  width: 20px;
  height: 20px;
}

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

H5客戶端接入

接入步驟

創建認證方案

資源引入

npm包引入

靜態資源引入

交互流程

偽代碼示例

SDK方法說明

初始化實例

checkLoginAvailable（一鍵登錄鑒權接口）

checkLoginAvailable 方法參數

success/error 回調函數入參

getLoginToken（獲取一鍵登錄Token接口）

getLoginToken 方法參數

success/error 回調函數入參

watch/protocolPageWatch/previewPrivacyWatch 回調函數入參

authPageOption 字段說明

prePageTypeOption 預授權頁面配置

privacyAlertConfig 二次彈窗相關配置

previewPrivacyOption 二次彈窗相關配置

其他方法說明

getConnection（網絡類型檢查接口）

getVersion（獲取SDK版本號）

sendLoggerEnable（設置開啟日志）

樣式說明

授權頁全屏樣式

授權彈窗樣式

預授權模式

二次彈窗樣式

協議預覽彈窗樣式修改