本文作者:IMWeb leinue
未经同意,禁止转载
一行代码生成登录表单是 Authing.cn 提供的工具,以下是其使用文档
一行代码生成表单仅适用于 JavaScript 客户端应用,该功能简称 Login-Form。
该表单拥有以下基本功能:
邮箱/密码登录注册
忘记密码以及重置密码
记住账号功能(加密存储到浏览器本地)
第三方 OAuth 登录(需先在后台配置)
小程序扫码登录(需先在后台配置)
响应式特性
使用步骤
1. 引入代码
目前只支持 script 引入,暂不支持 NPM 安装,使用了本功能的开发者可以不必再安装 authing-js-sdk,因为通过 script标签引入的代码中包含了 authing-js-sdk。
2. 显示表单
初始化 AuthingForm 即可。
new AuthingForm({
clientId: '填入_Authing_的_client_ID',
secret: '填入_Authing_client_ID_的_secret'
});
完成这两步后就可以使用表单了。
3. 完整代码
clientId: '填入_Authing_的_client_ID',
secret: '填入_Authing_client_ID_的_secret'
});
为了应用的安全起见,建议参数中的 secret 以加密方式存储在客户端代码中。
高级功能
方法
Login-Form 提供了两个方法用以操作界面的显示和隐藏,方法名见下表:
方法名称
方法参数
功能
show
mountId
指定 Authing form 将在何处显示,接受一个 html 元素 id,不含#号。不指定则默认全屏弹出 Modal 登录框
hide
无
隐藏表单
在初始化完构造函数后会自动执行 show 方法。
完整参数
Login-Form 的构造函数 AuthingForm 提供了一些高级功能。
以下是完整的参数列表:
参数名称
是否必填
默认值
类型
参数说明
回调参数
clientId
是
无
String
Authing Client ID
-
secret
是
无
String
Authing Client Secret
-
mountId
否
无
String
指定 Authing form 将在何处显示,接受一个 html 元素 id,不含#号。不指定则默认全屏弹出 Modal 登录框
-
title
否
Authing
String
产品名称
-
logo
否
[Authing LOGO]
String
产品logo,默认为 Authing 的官方 Logo
-
forceLogin
否
false
Boolean
是否将注册和登录合并,合并后如果用户不存在将自动注册
-
hideQRCode
否
false
Boolean
是否隐藏小程序扫码登录,在开发者在 Authing 控制台开启小程序扫码登录后,若此项为 true 将不显示小程序扫码登录
-
hideUP
否
false
Boolean
是否隐藏用户名-密码登陆,隐藏后将不显示用户名-密码登录框
-
hideUsename
否
false
Boolean
是否隐藏注册时的用户名填写,隐藏后将不显示用户名输入框
-
hideOAuth
否
false
Boolean
是否隐藏第三方 OAuth 登录,在开发者在 Authing 控制台开启 OAuth 登录后,若此项为 true 将隐藏全部 OAuth 登录
-
hideClose
否
false
Boolean
是否隐藏登录框右上角的关闭按钮,如果隐藏,用户将不能通过点击按钮或按 ESC 关闭登录框
-
placeholder
否
false
Object
定制输入框的 paceholder
-
placeholder.username
否
请输入用户名
String
定制输入框的 paceholder
-
placeholder.email
否
请输入邮箱
String
用户名输入框的 paceholder
-
placeholder.password
否
请输入密码
String
邮箱输入框的 paceholder
-
placeholder.confirmPassword
否
请确认密码
String
密码输入框的 paceholder
-
placeholder.verfiyCode
否
请输入验证码
String
验证码输入框的 paceholder
-
placeholder.newPassword
否
请输入新密码
String
新密码输入框的 paceholder
-
qrcodeScanning
否
false
Object
小程序扫码登录的配置项
-
qrcodeScanning.redirect
否
true
Boolean
是否执行跳转(在用户后台配置的URL),若值为false,用户数据会通过 onSuccess 回调函数返回
-
qrcodeScanning.onSuccess
否
null
Function
登录成功后回调函数,redirect为true时不回调此函数
user
qrcodeScanning.onError
否
null
Function
登录失败后回调函数,一般为网络问题
error
qrcodeScanning.onIntervalStarting
否
null
Function
轮询时的回调函数,intervalNum 为 setInterval 返回的数值,可使用 clearInterval 停止轮询
intervalNum
qrcodeScanning.interval
否
1500
Number
每隔多少秒检查一次是否扫码,默认1500
-
qrcodeScanning.tips
否
使用 微信 或小程序 身份管家 扫码登录
String
提示信息,可写HTML
-
完整代码:
var form = new AuthingForm({
// 必选,client ID
clientId: '5b7f79f519915500015f18ac',
// 必选,secret
secret: '82f36cba243e13f81f06675193732af7',
title: 'Authing',
logo: 'https://cdn.authing.cn/authing-logo.png',
forceLogin: false,
hideQRCode: false,
hideUP: false,
hideOAuth: false,
hideUsername: false,
hideClose: true,
mountId: 'app',
// 输入框的placeholder
placeholder: {
username: '',
email: '',
password: '',
confirmPassword: '',
verfiyCode: '',
newPassword: ''
},
qrcodeScanning: {
redirect: true, // 可选,是否执行跳转(在用户后台配置的URL),默认为true,相关用户信息回传至url上
onSuccess: function (res){
}, // 可选,登录成功后回调函数,redirect为true时不回调此函数
onError: function (error){
}, // 可选,登录失败后回调函数,一般为网络问题
onIntervalStarting: function (intervalNum){
}, // 可选,轮询时的回调函数,intervalNum 为 setInterval 返回的数值,可使用 clearInterval 停止轮询
interval: 1500, // 可选,每隔多少秒检查一次是否扫码,默认1500
tips: '使用 微信 或小程序 身份管家 扫码登录', // 可选,提示信息,可写HTML
}
});
事件响应
Login-Form 还提供了 十五 个事件,开发者可根据需要定制操作。
在初始化 AuthingForm 后,可使用 on方法,如:
var form = new AuthingForm({ clientId: 'xxxx', secret: 'xxxxx'});
form.on('login', function(user){
// 成功登录后的回调事件,参数 user 为用户数据
});
完整的事件列表如下:
事件名称
事件说明
事件参数
事件参数说明
authingLoad
Authing Client ID 和 Secret验证通过,加载完成
authing
authing 对象,可直接操作 login,register等方法
authingUnload
Authing Client ID 和 Secret验证失败
error
错误信息
oauthLoad
OAuth列表加载完成
oauthList
完整的 OAuth 列表,若用户未在后台配置过则为空
oauthUnload
OAuth列表加载失败
error
错误信息
login
用户登录成功
user
用户数据
loginError
用户登录失败
error
错误信息,包含字段缺失/非法或服务器错误等信息
register
用户注册成功
user
用户数据
registerError
用户注册失败
error
错误信息,包含字段缺失/非法或服务器错误等信息
emailSent
忘记密码邮件发送成功
data
发送的结果
emailSentError
忘记密码邮件发送失败
error
错误信息
resetPassword
重置密码成功
data
重置密码结果
resetPasswordError
重置密码失败
error
错误信息
scanning
扫码登录成功
user
用户数据
scanningError
扫码登录失败
error
错误信息
scanningIntervalStarting
开始监听扫码事件
interval
用户可使用 clearInterval 停止监听
formClosed
Login Form 关闭事件
null
用户按下 ESC 或点击右上方的关闭按钮后会触发此事件
完整代码如下:
form.on('authingLoad', function (authing){
console.log('on authing load', authing);
});
form.on('authingUnload', function (error){
console.log('on authing load error', error);
});
form.on('oauthLoad', function (oauthList){
console.log('on oauth load', oauthList);
});
form.on('oauthUnload', function (error){
console.log('on oauth unload', error);
});
form.on('login', function (user){
console.log('on login', user);
});
form.on('loginError', function (error){
console.log('on login error', error);
});
form.on('register', function (user){
console.log('on register', user);
});
form.on('registerError', function (error){
console.log('on register error', error);
});
form.on('emailSent', function (data){
console.log('on email sent', data);
});
form.on('emailSentError', function (error){
console.log('on email sent error');
});
form.on('resetPassword', function (result){
console.log('on reset password');
});
form.on('resetPasswordError', function (error){
console.log('on reset password error', error);
});
form.on('scanning', function (data){
console.log('on scanning success', data);
});
form.on('scanningError', function (error){
console.log('on scanning error', error);
});
form.on('scanningIntervalStarting', function (interval){
console.log('on scanning interval starting', interval);
});
form.on('formClosed', function (){
console.log('on form closed');
});