H5端JSSDK集成

集成JSSDK

您需要在H5页面中集成号码认证服务的JSSDK，并在服务端完成API对接。有以下两种集成JSSDK的方法，您可任选一种。

静态资源引入

<script type="text/javascript" charset="utf-8" src="./xxx/numberAuth-web-sdk.2.0.5.js"></script>

npm引入

//加载npm资源
npm i aliyun_numberauthsdk_web

功能示例及参数说明

网络类型检查接口（getConnection）

• 此接口会判断当前用户的网络类型： Wi-Fi、移动数据网络（cellular）、unknown。
  重要 未开启移动数据网络的用户无法通过一键登录完成认证。
• 提前获取用户的网络类型，拦截使用Wi-Fi网络的用户，及时终止认证流程，节约资源并提升用户的认证体验。
• 建议认证前调用此接口，对netType为Wi-Fi的用户-提醒关闭W-iFi或者提供其他认证方式，对于netType为unknown和cellular的用户继续一键登录流程。

调用示例

var netType =  phoneNumberServer.getConnection();
// console.log(netType);
// netType的值为 wifi cellular（移动数据网络）unknown（未知）
            

鉴权接口（checkLoginAvailable）

请求参数

返回参数

调用示例

var phoneNumberServer = new PhoneNumberServer();

// 调用之前先去用户服务端获取accessToken和jwtToken
phoneNumberServer.checkLoginAvailable({
    accessToken: 'XXXXXXXXxx',
    jwtToken:'******',
    success:function(res){
        console.log(res);
            if(res.code===600000){
                // 在此调用getLoginToken接口
            }
    },

    error: function(res){
        // 提示用户关闭Wi-Fi或者尝试其他登录方案
    }

});

获取登录Token接口（getLoginToken）

在checkLoginAvailable成功的回调中调用此接口。

请求参数

authPageOption字段说明

prePageTypeOption预授权页面配置

返回参数

{  
showMessage: boolean, // 是否弹出Toast提示框  
messageContent: string, // 弹出内容  
messageStyle: object, // 自定义弹窗样式  
time: number // 弹出时间ms
}

监听回调说明（watch）

监听回调说明（protocolPageWatch）

data（watch， protocolPageWatch）参数说明

调用示例

// 调用之前先去用户服务端获取accessToken和jwtToken
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 => {
    // 提示用户关闭wifi或者尝试其他登录方案
},

    watch: function(status, data){
    // console.log('-----------------status', status, data);
    // 当status为2时整个流程结束，比如如果按钮有loading状态此处置为false
},

});

authPageOption传入manualClose控制是否手动关闭弹窗，弹窗/授权页状态下调用phoneNumberServer.closeLoginPage关闭授权页面。

var phoneNumberServer = new PhoneNumberServer();

（弹窗/授权页已弹出后）
phoneNumberServer.closeLoginPage(); // 关闭授权页

样式说明

移动授权页样式说明

// 此处可修改导航栏整体样式：字体大小，字体颜色，背景颜色等
.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 {

}

// 此处可修改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;
}

返回码说明