一键登录

简介/价格/文档

天翼云一键登录使用教程 - H5接入

文档简介：

本文为您介绍了H5客户端如何接入一键登录、本机号码校验功能。 1.准备工作。 1.1 概述。本文是H5一键登录、本机号码校验的接入文档，用于指导H5一键登录的接入，并详细描述集成步骤和使用方法。

*产品来源：中国电信天翼云。免费试用咨询热线：400-826-7010，为您提供专业的售前咨询，让您快速了解云产品，助您轻松上云！微信咨询

免费试用、价格特惠

文档详情

1.准备工作

1.1 概述

本文是H5一键登录、本机号码校验的接入文档，用于指导H5一键登录的接入，并详细描述集成步骤和使用方法。

1.2 交互流程说明

一键登录

本机号码校验

1.3 账号申请及报备

在天翼云一键登录产品控制台申请应用，使用接入所需的Appid信息， 申请应用信息时需要报备集成网页地址 。

2.一键登录集成说明

2.1 流程说明

客户方页面集成一键登录H5取号tyy-yjdl-h5.js。
客户方H5调用tyy-yjdl-h5提供的方法获取token，tyy-yjdl-h5完成取号流程和获取token流程。

tyy-yjdl-h5取号流程：

tyy-yjdl-h5进行取号，若取号成功，则进入授权页，用户在授权页补充正确的号码授权后，tyy-yjdl-h5进行获取token流程；若取号失败则返回报错。

2.2引用tyy-yjdl-h5.js（支持本地引入）

<script type="text/javascript" src=" ./tyy-yjdl-h5.js "></script>复制

2.3使用方法

LXintegrateInit.appInit(        {

            data: {

                appId: '20220920141753644', // **用户传入**appId
authPageType: '0' , //若值为“2”时展示自定义弹窗版，若值为“3”时展示自定义全屏版，            },

            style: {}, // **弹窗样式修改**

            SUCCESS: (res) => {

                // alert("token**：**" + JSON.stringify(res.token))

                // alert("**成功信息指纹**: " + res.userInformation)

            },

            ERROR: (err) => {

                alert("**失败信息**1**：**" + JSON.stringify(err))

            }

        }

    )
**//**取号失败    {

        msgId:'',

        YDData:{code:' **错误码**', message:'**移动取号失败描述，详见表格**'},

        CTData:{ code:' **错误码**', message:'**电信取号失败描述，详见表格**'},

        CUData:{ code:' **错误码**', message:'**联通取号失败描述，详见表格**'}

    }复制

2.4自定义全屏配置项

2.4.1 使用方式

var Options = {"bgColor":"#FFFFFF","titleStyle":{"name":"本机号码登录","fontFamily":"PingFangSC-Medium,

 PingFang SC","fontSize":"1.33rem","fontColor":"#444444","width":"70%","height":"1.83rem",

"left":"center","high":"1rem","textAlign":"center"},"logoStyle":{"url":"https://www.cmpassport.

com/h5/js/jssdk_auth/image/logo.png","width":"6.96rem","height":"7.32rem","high":"7.9rem",

"left":"center"},"authTextStyle":{"fontFamily":"PingFangSC-Medium, PingFang SC","fontSize":"

1.08rem","fontColor":"#444444","appNameColor":"#444444","width":"100%","textAlign":"center",

"high":"22.75rem","left":"center","fontWeight":"500"},"phoneNumStyle":{"fontFamily":"PingFangSC-Semibold,

 PingFang SC","fontSize":"2.08rem","fontColor":"#444444","bgColor":"#FFFFFF","fontWeight":"600","width":"

15.42rem","left":"center","high":"19.58rem","inputStyle":{"width":"1.83rem","height":"2.17rem"}},

"agreeStyle":{"fontFamily":"PingFangSC-Regular, PingFang SC","fontSize":"1rem","fontColor":"#999999",

high":"30.58rem","left":"center","checkedButton":{"width":"1.33rem","height":"1.33rem","uncheckColor"

:"#cccccc","checkedColor":"#1E82EB","uncheckUrl":"","checkedUrl":""},"hrefStyle":{"fontColor":"#1E82EB",

"agreeArr":[]}},"tipStyle":{"fontFamily":"PingFangSC-Regular, PingFang SC","fontSize":"0.92rem",

"fontColor":"#999999","high":"27rem","left":"center"},"returnBtnStyle":{"width":"0.65rem","height"

:"1.1rem","left":"1rem","high":"1rem","url":"https://www.cmpassport.com/h5/js/jssdk_auth/image

/returnIcon.png"},"customControlStyle":{"ifShow":"ture","width":"120px","height":"24px","high":

"450px","left":"center","bgColor":"#fff","border":"0","borderRadius":"","url":"https://www.baidu.

com","name":"其他登录方式","fontSize":"16px","fontColor":"#392211","textAlign":"center","textDecoration":""}}复制

2.4.2 配置项详细说明

页面元素	配置项	字段	字段含义	值	说明
背景	bgColor		背景颜色	十六进制颜色码，如“#FFFFFF”	可选
页面标题	titleStyle	name	页面标题的文案，默认“本机号码登录”	string	可选，标题支持为空，为空传“”
		fontFamily	文案的字体	string	可选
		fontSize	文案的字体大小	支持数值，如“200px”	可选
		fontColor	文案的字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		high	文案距离页面上边框高度	支持数值，如“20px”	可选
		left	文案距离页面左边框距离	支持数值；居中可传入“center”	可选
		width	标题宽度	支持数值；	可选
		height	标题高度	支持数值；	可选
		textAlign	标题文案位置	left/right/center	可选
Logo	logoStyle	url	logo链接		可选
		high	logo距离页面上边框高度	支持数值，如“20px”	可选
		left	logo距离页面左边框距离	支持数值，如“20px”	可选
授权栏	authTextStyle	fontFamily	文案的字体	string	可选
		fontSize	文案的字体大小	支持数值，如“200px”	可选
		fontColor	文案的字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		appNameColor	APP名称文案的字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		high	文案距离页面上边框高度	支持数值，如“20px”	可选
		left	文案距离页面左边框距离	支持数值，如“20px”；居中可传入“center”	可选
号码栏	phoneNumStyle	fontFamily	文案的字体	string	可选
		fontSize	文案的字体大小	支持数值，如“200px”	可选
		fontColor	文案的字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		bgColor	配置号码栏的底色	十六进制颜色码，如“#FFFFFF”	可选
		high	文案距离页面上边框高度	支持数值，如“20px”	可选
		left	文案距离页面左边框距离	支持数值，如“20px”；居中可传入“center”	可选
		width	配置号码栏的宽度	支持数值，如“20px”	可选
		inputStyle	号码栏输入框配置	Object，详细见下表	可选
提示栏	tipStyle	fontFamily	文案的字体	string	可选
		fontSize	文案的字体大小	支持数值，如“200px”	可选
		fontColor	文案的字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		high	文案距离页面上边框高度	支持数值，如“20px”	可选
		left	文案距离页面左边框距离	支持数值，如“20px”；居中可传入“center”	可选
协议栏	agreeStyle	fontFamily	文案的字体	string	可选
		fontSize	文案的字体大小	支持数值，如“200px”	可选
		fontColor	文案的字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		checkedButton	协议勾选按钮配置项	Object，详细见下表
		hrefStyle	协议名称配置项	Object，详细见下表
		left	文案距离页面左边框距离	支持数值，如“20px”；居中可传入“center”	可选
		high	文案距离页面上边框高度	支持数值，如“20px”	可选
自定义按钮控件	customControlStyle	ifShow	是否展示自定义控件	Boolean值，默认值为FALSE	如要展示自定义控件，则为必选
		width	自定义控件宽度	支持百分比或者数值，如“200px	可选
		height	自定义控件高度	支持百分比或者数值，如“200px	可选
		high	自定义控件距离弹窗上边框高度	支持百分比或者数值，如“200px	必选
		left	自定义控件距离弹窗左边框边距	支持百分比或者数值，如“20px”；居中可传入“center”	必选
		bgColor	自定义控件背景颜色	十六进制颜色码，如“#FFFFFF”	可选
		border	自定义控件边框	可以设置边框粗细，样式，颜色，如”1px solid #FFFFF”	可选
		borderRadius	自定义控件圆角	支持百分比或者数值，如“20px”	可选
		url	自定义控件跳转URL	Url链接	必选
		name	自定义控件显示文案	字符串	必选
		fontSize	自定义控件字体大小	支持数值，比如“20px”	可选
		fontColor	自定义控件字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		textAlign	自定义控件文本对齐选项	“center/left/right”	可选
		textDecoration	自定义控件下划线	“none/underline”	可选
		fontFamily	文案的字体	string	可选
返回键	returnBtnStyle	width	返回键图片宽度	支持百分比或者数值，如“200px	可选
		height	返回键图片高度	支持百分比或者数值，如“200px	可选
		url	配置返回键图片地址	url	可选
		high	控件距离弹窗上边框高度	数值，如“200px	可选
		left	控件距离弹窗左边框边距	数值，如“20px”；居中可传入“center”	可选
登录按钮	submitBtnStyle	ifShow	是否展示登录按钮	Boolean值，默认值为FALSE，	如要展示登录按钮，则为必选
		name	按钮文案	String	可选
		fontSize	按钮文案字体大小	支持数值，比如“20px”	可选
		fontColor	按钮文案字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		fontFamily	按钮文案的字体	string	可选
		bgColor	按钮的底色	十六进制颜色码，如“#FFFFFF”	可选
		high	控件距离弹窗上边框高度	数值，如“200px	可选
		left	控件距离弹窗左边框边距	数值，如“20px”；居中可传入“center”	可选
		textAlign	按钮文案位置	left/right/center	可选
		borderRadius	按钮圆角	数值，如“20px	可选
		width	按钮宽度	数值，如“20px	可选
		height	按钮高度	数值，如“20px	可选

号码栏输入框配置项如下：

页面元素	配置项	字段	字段含义	值	说明
号码栏输入框	inputStyle	width	宽度	支持百分比或者数值，如“200px”	可选
号码栏输入框	inputStyle	height	高度	支持百分比或者数值，如“200px”	可选

协议勾选按钮配置项如下：

页面元素	配置项	字段	字段含义	值	说明
协议勾选按钮	checkedButton	width	宽度	支持百分比或者数值，如“200px”	可选
		fheight	高度	支持百分比或者数值，如“200px”	可选
		uncheckColor	未勾选状态颜色	十六进制颜色码如“#FFFFFF”	可选
		checkedColor	勾选状态颜色	十六进制颜色码如“#FFFFFF”	可选
		checkedUrl	勾选状态图片	URL链接	可选，必须同时配置 checkedUrl 和uncheckUrl 才生效
		uncheckUrl	未勾选状态图片	URL链接	可选，必须同时配置 checkedUrl 和uncheckUrl 才生效

协议名称配置项如下：

页面元素	配置项	字段	字段含义	值	说明
协议名称	hrefStyle	fontFamily	文案的字体	string	可选
		fontSize	文案的字体大小	支持数值，如“200px”	可选
		fontColor	文案的字体颜色	十六进制颜色码如“#FFFFFF”	可选
		agreeArr	自定义协议数组	如：[{name:" 协议名称",url:"协议链接"}]	可选

2.5自定义弹窗配置项

2.5.1 使用方式

var Options = {layerStyle: {width:"",

height:"240px",

bgColor:"#236",

borderRadius:"23px"
},maskStyle: {ifShowMask:true,

bgColor:"",

opacity:""
},phoneStyle:{fontSize:"",

fontColor:"#F829FF",

high:"",

left:"20px",
},agreeStyle: {fontSize:"",

textalign:"",

fontColor:"",

hrefColor:"",

high:"",

left:"",

agreeArr:[

  {name:"**《一键登录产品服务协议》**",url:"**协议链接**"}

],
},closeBtnStyle:{ifShowBtn:true,btnImage:"",

top:"",

right:"",

width:"",

height:""
},customControlStyle:{ifShow:true,

width:"",

height:"24px",

high:"center",

left:"center",

bgColor:"#fff",

border:"0",

borderRadius:"",

url:"**控件链接**",

name:"**其他登录方式**",

fontSize:"16px",

fontColor:"#392211",

textAlign:"center",

textDecoration:''
},}复制

2.5.2 配置项详细说明

页面元素	配置项	字段	字段含义	值	说明
弹窗	layerStyle	width	弹窗宽度	支持百分比或者数值，如“200px”	可选
		height	弹窗高度	支持百分比或者数值，如“200px”	可选
		bgColor	弹窗背景颜色	十六进制颜色码，如“#FFFFFF”	可选
		borderRadius	弹窗圆角	支持百分比或者数值，如“20px”	可选
Logo	LogoStyle	width	Logo宽度	支持百分比或者数值，如“200px”	必选
		height	Logo高度	支持百分比或者数值，如“200px”	必选
		high	Logo距离弹窗上边高度	支持“center”，支持百分比或者数值，如“200px”	可选
		left	logo距离弹窗左边框边距	支持“center”，支持百分比或者数值，如“200px”	可选
		url	logo地址	Url链接	必选
页面标题	titleStyle	ifShow	是否显示标题栏	Boolean值，默认值为FALSE	如果要展示标题栏，则必选
		name	标题内容	字符串	可选
		fontColor	字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		fontSize	字体大小	支持数值，比如“20px”	可选
		left	距离弹窗左边框边距	支持百分比或者数值，如“200px”	可选
		high	距离弹窗上边框高度	支持百分比或者数值，如“20px”	可选
蒙层	maskStyle	ifShowMask	是否显示蒙层	Boolean值，默认值为FALSE	如果要展示蒙层，则必选
		bgColor	蒙层颜色	十六进制颜色码，如“#FFFFFF”	可选
		opacity	透明度	从 0.0 （完全透明）到 1.0（完全不透明）	可选
号码栏	phoneStyle	fontSize	字体大小	支持数值，比如“20px”	可选
		fontColor	字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		high	距离弹窗上边框高度	支持百分比或者数值，如“20px”	可选
		left	距离弹窗左边框边距	支持百分比或者数值，如“200px”	可选
协议栏	agreeStyle	fontSize	字体大小	支持数值，比如“20px”	可选
		textalign	文本对齐选项	“center/left/right”	可选
		fontColor	字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		hrefColor	协议链接颜色	十六进制颜色码，如“#FFFFFF”	可选
		high	协议文案距离弹窗上边框高度	支持百分比或者数值，如“200px”	可选
		left	协议文案距离弹窗左边框边距	支持百分比或者数值，如“200px”	可选
		agreeArr	自定义协议数组	如：[{name:"协议名称",url:"协议链接"}]	可选
关闭按钮	closeBtnStyle	ifShowBtn	是否展示关闭按钮	Boolean值，默认值为TRUE	可选
		btnImage	关闭按钮图片	Url链接	可选
		top	关闭按钮距离弹窗上边框高度	支持百分比或者数值，如“12px”	可选
		right	关闭按钮距离弹窗左边框边距	支持百分比或者数值，如“12px”	可选
		width	关闭按钮宽度	支持数值，比如“20px”	可选
		height	关闭按钮高度	支持数值，比如“20px”	可选
自定义按钮控件	customControlStyle	ifShow	是否展示自定义控件	Boolean值，默认值为FALSE	如要展示自定义控件，则为必选
		width	自定义控件宽度	支持百分比或者数值，如“200px	必选
		height	自定义控件高度	支持百分比或者数值，如“200px	必选
		high	自定义控件距离弹窗上边框高度	支持百分比或者数值，如“200px	必选
		left	自定义控件距离弹窗左边框边距	支持百分比或者数值，如“20px	必选
		bgColor	自定义控件背景颜色	十六进制颜色码，如“#FFFFFF”	必选
		border	自定义控件边框	可以设置边框粗细，样式，颜色，如”1px solid #FFFFF”	必选
		borderRadius	自定义控件圆角	支持百分比或者数值，如“20px”	必选
		url	自定义控件跳转URL	Url链接	必选
		name	自定义控件显示文案	字符串	必选
		fontSize	自定义控件字体大小	支持数值，比如“20px”	必选
		fontColor	自定义控件字体颜色	十六进制颜色码，如“#FFFFFF”	必选
		textAlign	自定义控件文本对齐选项	“center/left/right”	必选
		textDecoration	自定义控件下划线	“none/underline”	必选
登录按钮	submitBtnStyle	ifShow	是否展示登录按钮	Boolean值，默认值为FALSE，	如要展示登录按钮，则为必选
		name	确认按钮显示文案	字符串	可选
		fontColor	确认按钮字体颜色	十六进制颜色码，如“#FFFFFF”	可选
		fontSize	确认按钮字体大小	支持数值，比如“20px”	可选
		textAlign	确认按钮文本对齐选项	“center/left/right”	可选
		bgColor	确认按钮背景颜色	十六进制颜色码，如“#FFFFFF”	可选
		width	确认按钮宽度	支持百分比或者数值，如“200px”	可选
		height	确认按钮高度	支持者数值，如“200px”	可选
		borderRadius	确认按钮圆角	支持数值，比如“20px”	可选
		high	确认按钮距离弹窗上边框高度	支持百分比或者数值，如“200px”	可选
		left	确认按钮距离弹窗左边框高度	支持百分比或者数值，如“200px”	可选

2.6 返回码及描述

2.6.1 中国电信

返回码	说明
103000	成功
301	参数错误
500	网络异常，请检查网络设置
502	电信/联通取号能力关闭
503	参数缺失
103101	错误的请求签名
105113	APPID非法或为空
301	参数错误
130030	参数为空
105117	TRACEID为空
108001	businessType is null（电信预取号接口）
104001	businessType config error
110025	权益已失效
105113	APPID非法或为空
108001	businessType is null（电信回调接口）
105003	电信网关取号失败
110023	应用没有权益
170001	referer校验失败
110026	Origin校验失败
130035	其他错误
0	处理结果正常
-10000	取号异常
-10001	取号失败
-10002	参数错误
-10003	解密失败
-10004	无效的IP
-10005	异网授权回调参数异常
-10006	授权失败，且属于电信网络
-10007	重定向到异网取号
-10008	超过预设取号阀值
-10009	时间超期
-10010	号码识别异常
-10011	运营商不匹配
-10012	区域不匹配
-10013	业务类型不支持该运营商
-10014	AES解密失败
-10015	Ipv6取号失败
-10016	安全校验失败
-10017	redirect方式需要https的callback地址
-20005	签名非法
-20006	应用不存在
-20007	公钥数据不存在
-20100	内部解析错误
-20102	加密参数解析失败
-30001	时间戳非法
-30003	topClass失效
-99999	服务内部错误
51002	参数为空
51114	无法获取手机号数据
51207	获取accessCode使用的appid与本次操作的appid不一致
51208	无效的accessCode,该accessCode无法在该业务中使用

2.6.2 中国移动

返回码	描述
103000	成功
500	网络异常，请检查网络设置
503	获取token结束
130010	参数为空
105002	移动网关取号失败
105112	时间戳非法
105113	APPID非法或为空
103101	错误的请求签名
103134	WAP取号为空
110024	businessType配置错误
110023	应用没有权益
110025	权益已失效
110026	Origin校验失败
103111	WAP网关IP错误
111002	黑名单号码用户
103609	物联网IP不允许取号
105002	移动网关取号失败
170001	referer校验失败
103211	其他错误

2.6.3 中国联通

返回码	说明
103000	成功
500	网络异常，请检查网络设置
502	电信/联通取号能力关闭
503	参数缺失
103101	错误的请求签名
105113	APPID非法或为空
301	参数错误
130030	参数为空
105117	TRACEID为空
108001	businessType is null（电信预取号接口）
104001	businessType config error
110025	权益已失效
105001	联通网关取号失败
105113	APPID非法或为空
108001	businessType is null（电信回调接口）
105003	联通网关取号失败
110023	应用没有权益
110025	权益已失效
170001	referer校验失败
110026	Origin校验失败
130035	其他错误

2.6.4 获取token

返回码	说明
501	用户取消授权
507	用户未补齐4位号码
508	用户未勾选协议
103002	没有填写必传参数
104000	app不存在
104001	businessType校验失败
104003	应用没有权益
104004	权益已失效
104005	referer校验失败
104006	origin校验失败
104007	accessToken不存在
104008	accessToken校验失败
104009	超过失败次数限制获取Token
104010	配置错误
104011	手机号不能为空
104012	本机号码校验失败
104014	busineseTYpe校验失败
104015	运管配置错误
104016	开放配置错误
104018	正在处理，请稍后
104020	电信取号异常
104021	联通取号异常

2.7 服务端H5获取手机号

详见《一键登录服务端接入文档》

3.本机号码校验集成说明

3.1 流程说明

客户方页面集成本机号码校验H5校验tyy-bjhmjy-h5.js；
客户方H5调用tyy-bjhmjy-h5提供的方法获取token，tyy-bjhmjy-h5完成本机校验接口和获取token流程

tyy-bjhmjy-h5本机校验流程：

tyy-bjhmjy-h5通过输入手机号方式，调用本机校验接口，若校验成功，

tyy-bjhmjy-h5进行获取token流程；若校验失败则返回报错。

3.2 引用tyy-bjhmjy-h5.js（支持本地引入）

<script type="text/javascript" src=" ./ tyy-bjhmjy-h5.js "></script>复制

3.3 使用方法

VerificationNumberInit.appInit(
            {
                data: {
                    appId: '20220920141753644', // 用户传入appId
			appSecret: 'bbe8ce3fb7bf49b6615f0a1d1f26e853', // 用户传入appSecret
                    phome: 15288888888, // 用户填入手机号
                },
                SUCCESS: (res) => {
                    // alert("token：" + JSON.stringify(res.token))
                    // alert("成功信息指纹: " + res.userInformation)
                },
                ERROR: (err) => {
                    alert("失败信息1：" + JSON.stringify(err))
                }
            }
        )
	//取号失败
{
code:"103000"，message:"token 获取成功",token:"",userInformation:‘浏览器指纹’ code:"500"，message:

"接口异常，获取 token 失败", code:"501"，message:"接口异常，电信预取号接口失败", code:"502"，

message:"接口异常，电信取号接口失败", code:"503"，message:"接口异常，获取异网 token 接口失败",

code:"504"，message:"联通 sdk 文件加载失败", 
}复制

3.4 返回码

3.4.1 中国移动

返回码	描述语
103000	成功
130010	参数为空
105112	时间戳非法
103101	错误的请求签名
110024	businessType配置错误
110025	businessType错误
110023	应用没有权益
110025	权益已失效
103111	WAP网关IP错误
111002	黑名单号码用户
103609	物联网IP不允许取号
105002	移动网关取号失败
103211	其他错误

3.4.2 中国联通

错误码	错误描述语
100001	应用鉴权错误(clientID或clientSecret错误)
200001	初始化失败
102	客户端类型错误
104	clientId错误
106	请求时间超时
107	鉴权信息错误
108	应用签名错误
110	Referer未报备
111	网络环境错误
113	客户端无权限
1002	网关错误
1003	预取号错误
1004	AccessCode错误
1011	数据解析错误
1012	网络环境错误
1013	网络环境错误

3.4.3 中国电信

错误码	错误描述
130032	解析参数错误
130010	参数为空
121016	电信取号功能已关闭
130018	验证签名失败
110022	应用ID不存在
110023	应用没有权益
110025	权益已失效
170001	无效的请求
999999	系统异常

3.5 服务端H5本机号码校验