获取登录 Token
拉起一键登录授权页面,用户确认授权后返回 token 请将此 token 提交到您的服务器,调用阿里云服务器端 GetMobile 接口获取此设备的手机号码
未配置的字段使用内置默认皮肤(品牌蓝 #1890ff 主题 + 默认布局),传入字段逐个覆盖; 二次弹窗内协议自动与授权页同文同色;复选框默认不勾选(需用户手动勾选)。
参数(全部字段可选,未配置使用内置默认皮肤)
结果
const pns = ymx.requirePlugin('ymx-aliyun-pns') as YmxAliyunPns;
try {
const result = await pns.getLoginToken({
// ── 基础 ──
timeout: 10, // 取号超时时间(秒),默认 10
// ── page:页面配置(方向 / 弹窗模式)──
page: {
orientation: 'portrait', // 授权页方向:'portrait' 竖屏 | 'landscape' 横屏,默认竖屏
dialogMode: false, // 是否弹窗模式(true 居中弹窗),默认 false 全屏
dialogWidth: '80%', // 弹窗模式宽度,默认 '80%'
dialogHeight: '60%', // 弹窗模式高度,默认 '60%'
dialogAutoCancel: false, // 点击弹窗外部是否自动关闭,默认 false
dialogMaskColor: '#33000000', // 弹窗遮罩颜色
dialogCornerRadius: 12, // 弹窗圆角
dialogPosition: { x: 0, y: 0 }, // 弹窗位置(相对屏幕,支持百分比字符串)
webAuthDialogWidth: '80%', // 协议 Web 页弹窗宽度(弹窗模式)
webAuthDialogHeight: '60%', // 协议 Web 页弹窗高度(弹窗模式)
webCloseImage: 'https://x.com/close.png', // 协议页关闭按钮图片(URL / rawfile)
webCloseImageWidth: 24, // 协议页关闭按钮宽
webCloseImageHeight: 24, // 协议页关闭按钮高
webCloseImageMargin: { top: 20, right: 20 } // 协议页关闭按钮边距
},
// ── statusBar:状态栏 / 系统栏 ──
statusBar: {
color: '#1890ff', // 状态栏背景色
contentColor: '#FFFFFF', // 状态栏内容(图标 / 文字)颜色
navigationBarColor: '#FFFFFF', // 底部导航栏背景色
navigationBarContentColor: '#000000' // 底部导航栏内容颜色
},
// ── number:手机掩码(手机号)──
number: {
margin: { top: 360 }, // 手机号外边距(top 控制纵向位置)
fontSize: 28, // 字号
color: '#000000', // 颜色
bold: true, // 是否加粗
height: 40, // 栏高度
width: 200 // 栏宽度
},
// ── button:登录按钮(只需配 backgroundColor,状态色自动派生)──
button: {
text: '一键绑定', // 按钮文字
margin: { left: 35, right: 35, top: 420 }, // 外边距(位置)
padding: { left: 10, right: 10 }, // 内边距
width: 200, // 宽度(不设则按 SDK 默认)
height: 40, // 高度
fontSize: 16, // 字号
color: '#FFFFFF', // 文字颜色
backgroundColor: '#1890ff', // 背景色(主色)
backgroundImage: 'https://x.com/bg.png', // 背景图(URL,覆盖背景色)
disableBackgroundColor: '#4D1890FF', // 未勾选协议时背景色(不配自动派生)
disableBackgroundImage: '', // 未勾选时背景图
disableFontColor: '#80FFFFFF', // 未勾选时文字颜色(不配自动派生)
borderRadius: 25, // 圆角(数值 / 字符串 / 四角对象)
borderWidth: 0, // 边框宽度
borderColor: '#1890ff', // 边框颜色
disableBorderColor: '#AAD4FF', // 未勾选时边框颜色
disableBorderWidth: 0 // 未勾选时边框宽度
},
// ── checkbox:协议复选框 ──
checkbox: {
checked: false, // 是否默认勾选协议(默认不勾选,需手动勾选)
width: 18, // 复选框宽
height: 18, // 复选框高
margin: { bottom: 50, left: 20 }, // 复选框边距(与协议栏相对位置)
selectColor: '#1890ff', // 选中颜色
shape: 'circle', // 形状:'square' 方形 | 'circle' 圆形
checkedImage: '', // 选中图标(URL,覆盖默认样式)
uncheckedImage: '', // 未选中图标(URL)
tipText: '请先勾选同意协议', // 未勾选点击登录时的提示
hidden: false // 隐藏复选框(视为始终同意,谨慎)
},
// ── privacy:协议栏(颜色分普通文字与协议链接,互不继承)──
privacy: {
margin: { left: 38, right: 38, top: 5 }, // 协议栏整体边距
prefixText: '我已阅读并同意 ', // 前置文本
prefixFontSize: 12, // 前置字号(不配继承 fontSize)
prefixFontColor: '#666666', // 前置颜色(不配继承 color)
prefixFontWeight: 'normal', // 前置字重
suffixText: '', // 后置文本
suffixFontSize: 12, // 后置字号
suffixFontColor: '#666666', // 后置颜色
suffixFontWeight: 'normal', // 后置字重
vendorPrefix: '《', // 运营商协议前缀符号
vendorSuffix: '》', // 运营商协议后缀符号
operatorIndex: 'begin', // 运营商协议位置:'begin' | 'end'
fontSize: 12, // 区域基准字号(前后缀 / 链接未配时继承)
color: '#666666', // 普通文字颜色(前置 / 后置 / 运营商协议名)
protocolColor: '#1890ff', // 协议链接颜色(自定义协议 + 运营商协议)
fontWeight: 'normal', // 区域基准字重
clauses: [ // 自定义协议(最多 3 项)
{ text: '用户协议', url: 'https://example.com/terms', fontSize: 12, color: '#1890ff', fontWeight: 'normal' },
{ text: '隐私政策', url: 'https://example.com/privacy' }
]
},
// ── alert:二次确认弹窗(未勾选协议点登录时弹出;协议内容自动与授权页同文同色)──
alert: {
visible: true, // 未勾选时是否弹二次确认,默认 true
title: '温馨提示', // 弹窗标题
titleFontSize: 16, // 标题字号
titleFontColor: '#111111', // 标题颜色
titleFontWeight: 'bold', // 标题字重
width: '82%', // 弹窗宽度
height: '50%', // 弹窗高度
backgroundColor: '#FFFFFF', // 弹窗背景色
borderRadius: 16, // 弹窗圆角
maskColor: '#33000000', // 遮罩颜色
autoCancel: false, // 点击弹窗外是否关闭
position: { x: 0, y: 0 }, // 弹窗位置(相对屏幕)
operatorFontSize: 12, // 弹窗内运营商协议字号
operatorFontColor: '#1890ff', // 弹窗内运营商协议颜色(链接色)
operatorFontWeight: 'normal', // 弹窗内运营商协议字重
content: { // 弹窗内容区(缺省自动复用授权页协议)
visibility: true, // 内容区是否显示
lineHeight: 18, // 内容行高
margin: { left: 20, top: 30 }, // 内容区边距
prefixText: '我已阅读并同意 ', // 弹窗内容前置文本(缺省同授权页)
prefixFontSize: 12,
prefixFontColor: '#666666',
suffixText: '',
suffixFontSize: 12,
suffixFontColor: '#666666',
clauses: [ // 弹窗内自定义协议(缺省同授权页)
{ text: '用户协议', url: 'https://example.com/terms' },
{ text: '隐私政策', url: 'https://example.com/privacy' }
]
},
confirm: { // 确认按钮
text: '同意', // 按钮文字
fontSize: 16, // 字号
fontColor: '#FFFFFF', // 文字颜色
backgroundColor: '#1890ff', // 背景色(主色,状态色自动派生)
borderRadius: 4, // 圆角
borderWidth: 0, borderColor: '', // 边框
width: '50%', // 宽度
height: 34, // 高度
margin: { left: 0 }, // 外边距
padding: { left: 0 }, // 内边距
visibility: true // 是否可见
},
cancel: { // 取消按钮(字段同 confirm)
text: '取消',
fontSize: 16,
fontColor: '#FFFFFF',
backgroundColor: '#ff7799',
width: '50%',
height: 34,
margin: { left: 0 },
visibility: true
},
confirmText: '', // 兼容:等价 confirm.text
confirmBackgroundColor: '', // 兼容:等价 confirm.backgroundColor
confirmFontColor: '', // 兼容:等价 confirm.fontColor
cancelText: '' // 兼容:等价 cancel.text
},
// ── nav:协议详情页导航栏 ──
nav: {
marginTop: 0, // 导航栏顶部边距
fontColor: '#111827', // 标题颜色
fontSize: 16, // 标题字号
backgroundColor: '#FFFFFF' // 导航栏背景色
},
// ── custom:授权页自定义元素(绝对定位,支持层级)──
custom: {
widgets: [ // 图片 / 文字元素数组,可多个
{ type: 'image', // 元素类型:'image' | 'text'
src: 'https://cdn.myapp.ltd/logo.png', // image:图片 URL
width: 68, // image:宽度(默认 48)
height: 68, // image:高度(默认 48)
borderRadius: 34, // image:圆角
top: 40 }, // 距授权页顶部(绝对定位)
{ type: 'text', // text 元素
text: 'XX 应用 · 安全登录', // text:文案
fontSize: 13, // text:字号(默认 13)
color: '#999999', // text:颜色(默认 #999999)
fontWeight: 'normal', // text:字重
top: 130, // 距顶部(绝对定位)
left: 24, // 距左偏移(不设则水平居中)
right: 20, // 距右偏移(不设则水平居中)
bottom: 50, // 距底部(与 top 同给时 bottom 优先)
zIndex: 1 // 层级,越大越靠上
}
]
}
});
if (result.token) {
console.log("Token:", result.token); // 成功:提交服务端 GetMobile 换手机号
}
} catch (err) {
// err.errCode:700000/700010/700011 取消,600012 返回键,700001 切换登录,其余为 SDK 错误码
console.log("未获取到 Token:", err.errCode, err.errMsg);
}
移除监听器
设置监听器,接收 eventName 事件名称,data 事件数据
注意: 此接口为覆盖操作,仅保留最后一个监听器,最后的 listener 才能收到事件通知。
阿里云号码认证服务,支持一键登录功能
一键登录服务必须打开蜂窝数据流量并且手机系统给予应用蜂窝数据权限才能使用
示例