概述与资源

本文是H5端 无感本机认证的部署文档,用于指导H5无感本机认证校验的集成。

安装

准备工作:服务端部署完成(服务端部署文档

H5一键登录 (OneLogin API)

OneLogin API 推荐逻辑

1 页面引用 oneloginh5.js

2 请在head中添加代码(生产上有https访问的,会导致上报的referer为空,移动运营商会去校验请求referer是否进行备案)

<meta content="always" name="referrer">

3 初始化OneLogin API对象

为了避免影响认证的响应时间,可以先判断当前网络环境(可参考demo中的方法)再进行相对初始化;建议开发者在页面加载的时候判断网络环境后再初始化。

字段说明:
以下为必需配置的参数

字段 说明
app_id 客户在客户后台申请的。审核成功后生效
logo 授权页面logo展示(绝对路径地址)float默认尺寸80*80 ; popup: 60*60
app app名称 您app名称 少于6位中文字符

以上是必需配置的参数,可选配置参数参考配置参数

var olInstance = new GOL({            
app_id: '您的app_id', // 在后台获取,生成app_id后等待审核成功后生效
timeout: 10000, // 超时设置 默认30000,
// 授权页面UI 自定义参数
app: '极验验证' // 参数说明请查看参数配置列表
});

4 调用 gateway方法 获取脱敏手机号拉起授权页面
初始化后在需要使用H5一键登录时调用gateway方法,去获取脱敏手机号,并拉起授权页面。待用户填写手机号中间4位并点击登录后获取运营商token。 成功/失败将在onTokenSuccess、onTokenFail中返回

olInstance.gateway()

5 onTokenSuccessonTokenFail 为调用gateway方法回调。返回是否成功获取token结果, 获取成功后即可请求服务端校验是否为本机号码。

olInstance.onTokenSuccess(function(data){
// data 参数包含 token、phone、流水号等其他参数 接入方可直接加上其他参数一起提交给服务端
// 调用服务端校验接口, 以下是伪代码示例
axios({
method: 'POST',
url: '您API地址',// 您的服务端校验接口
data: data // 校验参数
}).then(res=>{
if(res.data && res.data.status === 200){
// success 获取返回结果
} else {
// fail, 可以调用短信等其他验证形式
}
});

}).onTokenFail(function(){
// 网关失败,可以调用短信等其他验证形式
// 结合用户业务逻辑,判断是否需要移除实例
olInstance.destroy();
})


demo中是一个示例代码演示,详细演示了各个部署步骤和失败后降级处理方法。
您可以将它导入到您的工程,按照demo中的步骤进行把参数填入后即可运行起来。

方法说明

gateway() 获取脱敏手机号拉起授权页面

fn 获取脱敏手机号拉起授权页面

onTokenSuccess(fn) 运营商取号token成功返回

fn 成功返回函数,返回函数参数是Object

onTokenFail (fn) 运营商取号token失败返回

fn 失败返回函数,返回函数参数是Object, 结构:{ code: 10010 },返回码参考说明

destroy () 销毁实例

销毁实例, 相关UI以及注册的事件监听器都会被移除

授权页面设计规范

OneLogin H5 样式规范

配置参数说明

电信授权页面暂不支持以下授权页面自定义参数

字段 说明 默认值 可选值
timeout 超时时长 30000(ms) 大于0的整数
product 授权页面弹出模式 float float、popup
logoWidth 宽度可自定义 float:80px popup:60px 单位px
backText 在float模式下生效 返回文案 返回 可自定义文字内容
appfontSize 授权文字描述大小 float: 16px popup: 14px 单位px
buttonWidth 登录按钮的宽度 90% 单位可以是 px,%
buttonHeight 登录按钮高度 42px 单位px
buttonFontSize 按钮文字大小 16px 单位px
fontColor 按钮文字颜色 white 支持关键字、rgba、hsl等
fontColorActive 按钮active 时颜色 white 支持关键字、rgba、hsl等
buttonPosition 按钮位置 取值 center left、center、right
buttonBackgroundNormal 按钮disabled背景颜色 #D5D9E1 支持关键字、rgba、hsl等
buttonBackgroundActive 按钮active时背景颜色 #3973FF 支持关键字、rgba、hsl等

H5本机校验(OnePass API)

OnePass API 推荐逻辑

1.页面引用onepass.js

2.请在head中添加代码

<meta content="always" name="referrer">

3.初始化OnePass API对象

为了避免影响认证的响应时间,可以先判断当前网络环境(可参考demo中的方法)再进行相对初始化;建议开发者在页面加载的时候判断网络环境并初始化。

字段说明: app_id 为客户在极验后台申请的。审核成功后生效

var opInstance = new GOP({            
app_id: '您的app_id', // 在极验后台获取,生成app_id后等待极验审核成功后生效
timeout: 10000, // 超时时长,默认30000
pre_init: true // 是否初始化时获取运营商参数,默认为true。 建议开启避免影响认证的响应时间
});

4 网络状态判断方法(非必选)

说明:该方法可提升非纯4G网络环境下用户的使用体验,为可选方法,不使用该方法不影响正常接入使用。

// 调用网关接口前,用户可先调用checkNetInfo 方法获取用户的网络状态; 可选方法
// 该判断方法在iOS系统上所有网络情况均会返回unknown状态
var net = opInstance.checkNetInfo();
if (net !== 'wifi'){
// 调用网关验证
}else{
// 调用原有认证方式不调用网关验证
}

5.调用网关接口

opInstance.gateway({phone: '13333333333'})

6.调用onGatewaySuccess、onGatewayFail 获取校验结果

opInstance.onGatewaySuccess(function(data){
// data 结构: { process_id:'abcd', phone:'13333333333', accesscode: 'abc' }。
// 网关成功,获取校验结果
// 调用 result 接口, 以下是伪代码示例
axios({
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
url: '您API地址',// 您的服务端校验接口
data: `app_id=${this.app_id}&phone=${data.phone}&process_id=${data.process_id}`
}).then(res=>{
if(res.data && res.data.status === 200 && res.data.data.result === '0'){
// success
} else {
// fail, 可以调用短信等其他验证形式
}
});

}).onGatewayFail(function(){
// 网关失败,可以调用短信等其他验证形式
})

代码示例 demo
链接中是一个示例代码演示,详细演示了各个部署步骤和失败后降级处理方法。您可以将它导入到您的工程,按照demo中的步骤进行操作即可运行起来。

方法说明

gateway(options) 调用网关

参数options结构: { phone: ‘13333333333’ },传入需要校验的号码。

onGatewaySuccess(fn)网关成功返回

fn 成功返回函数,返回函数参数是Object, { process_id: ‘xxxx’, phone:’13333333333’, accesscode: ‘abc’ }。

onGatewayFail(fn) 网关失败返回

fn 失败返回函数,返回函数参数是Object, 结构:{ code: 100 },错误码参考说明

checkNetInfo() 返回当前网络状态

返回cellular、wifi、unknown 三种状态。建议网络状态为cellular和unknown情况时调用网关接口,网络状态为wifi时不调用网关接口。该判断方法在iOS系统上所有网络情况均会返回unknown状态

引用

常见问题
返回码