neteaseLoginKit

概述

网易云信 LoginKit 登录组件封装了云信短信能力,提供发送短信验证码、验证短信验证码以及验证结果抄送功能。通过该组件您可以将短信验证能力快速集成至自身应用中,实现短信验证登录的场景。

Demo 效果图:

限时优惠活动

如果您在用友平台下载了该组件,通过用友云信控制台注册账号并开通服务,云信将提供特别的渠道价格,验证码短信前 1000 条免费,可在开通账号后联系云信销售或技术支持。

点击 立即注册 前往云信控制台开通服务。

推荐有礼

推荐好友使用云信产品,返佣奖励高至 20%,上不封顶!

点击 网易云信 8 周年庆 即可参与,合法致富机会,赶紧牢牢抓住!

技术支持

网易云信提供多种服务,包括客服、技术支持、热线服务、全流程数据监控等,建议扫码添加我们的技术支持,协助接入、测试以及定制需求。

微信咨询 在线咨询 电话咨询
点击在线咨询 4009-000-123

准备工作

在接入前请提前获取云信应用 AppKey 和短信模版 ID。

  1. 创建云信账号。

    如果您还没有网易云信账号,请访问注册。如果您已经有网易云信账号,请直接登录。具体请参考云信控制台的注册与登录文档

  2. 创建应用。

    创建应用是体验或使用网易云信各款产品和服务的首要前提,您可以参考创建应用文档在网易云信控制台创建一个应用,并查看该应用的 App Key。

  3. 开通短信并购买资源包。

    由于短信为资源型产品,开通功能后还需要购买相应的资源包短信条数才可正常使用,否则短信将会由于无资源包而无法正常使用,具体请参考开通短信并购买资源包

  4. 申请短信签名并创建短信模板。

    申请和创建后等待云信审核,审核通过后获取短信模版 ID,具体请参考申请签名创建模板

快速接入

步骤1 配置 AppKey

您可以通过以下两种方式,将在网易云信控制台获取的 AppKey 配置到您的应用中。

  • 方式一:在config文件中配置

    名称:neteaseLoginKit

    参数:appKey

    配置示例:

    <feature name="neteaseLoginKit">
        <param name="appKey" value="appkey123456" />
    </feature>
    

    字段描述:

    appKey:云信 IM 应用的唯一标识,通过云信控制台创建应用时获取。

  • 方式二:通过API接口传入

    调用 initConfig 接口配置初始化参数时,配置 appKey, 该方式会覆盖方式一配置的值。

步骤2 配置登录页面

调用 configLoginPage 接口配置登录页面。

步骤3 弹出登录页面

调用 toLoginPage 接口弹出登录页面。

步骤4 销毁登录页面

调用 dismissLoginPage 接口销毁登录页面。

完整步骤

initConfig() -> configLoginPage() -> toLoginPage() -> dismissLoginPage()

完整逻辑需要实现 回调方法

插件接口

插件接口是指可供 js 直接调用的接口。

initConfig

配置初始化参数。

initConfig({params})

params

appKey:

  • 类型:String
  • 描述:云信 IM 应用的唯一标识,通过云信控制台创建应用时获取。

smsTemplateId:

  • 类型:Int
  • 描述:短信模版 ID,通过云信控制台创建模板时获取。

timeCountdown:

  • 类型:Int
  • 描述:再次发送短信倒计时,单位秒。
  • 默认值:60

needUp:

  • 类型:Bool
  • 描述:如果开通了短信上行抄送功能,该参数需要设置为 true。
  • 默认值:false

host:

  • 类型:String, 选填
  • 描述:自定义服务器域名,非自私有化用户或者有特殊业务需求不建议使用。

isNeedAgree:

  • 类型:Bool
  • 描述:是否需要同意用户协议。
  • 默认值:true

agreementList:

  • 类型:JSON 数组
  • 描述:底部隐私协议查看链接列表。
  • 内部字段:
{
    agreementTitle:'',                   // String 类型;隐私协议标题
    agreementLink:''                     // String 类型;隐私协议链接
}

agreementTitle:

  • 类型:String
  • 描述:用户协议弹框标题。
  • 默认值:用户协议

userAgreement:

  • 类型:String
  • 描述:用户协议内容。
  • 默认值:感谢您信任并使用本产品。在您登录前,需通过点击同意的形式,仔细阅读并签署《用户服务协议》

agreeButtonText:

  • 类型:String
  • 描述:用户协议弹框同意按钮文案。
  • 默认值:同意

rejectButtonText:

  • 类型:String
  • 描述:用户协议弹框拒绝按钮文案。
  • 默认值:不同意

isShowCloseButton:

  • 类型:Bool
  • 描述:是否显示关闭页面按钮, 默认显示。
  • 默认值:true

示例代码

var demo = api.require('neteaseLoginKit');
demo.initConfig({
    appKey:"123456",
    smsTemplateId:123456,
    agreementList:[
        {
            agreementTitle: "用户服务协议",
            agreementLink: "https://yunxin.163.com/m/clauses/user"
        },
        {
            agreementTitle: "用户隐私协议",
            agreementLink: "https://yx-web-nosdn.netease.im/quickhtml/assets/yunxin/protocol/clauses.html"
        }
    ],
    agreementTitle:"用友用户协议",
    userAgreement:"用友协议内容",
    agreeButtonText:"确定",
    rejectButtonText:"拒绝",
    timeCountdown:10
});

可用性

iOS系统

可提供的1.0.0及更高版本

configLoginPage

配置登录页面。

configLoginPage({params})

params

darkTextColor:

  • 类型:String
  • 描述:深色字体的颜色。
  • 默认值:#222222

grayTextColor:

  • 类型:String
  • 描述:灰色字体的颜色。
  • 默认值:#666666

lightTextColor:

  • 类型:String
  • 描述:浅色字体的颜色。
  • 默认值:#999999

themeColor:

  • 类型:String
  • 描述:主题色。
  • 默认值:#2155EE

disableThemeColor:

  • 类型:String
  • 描述:按钮不可点击颜色。
  • 默认值:#2155EE (alpha: 0.6)

errorColor:

  • 类型:String
  • 描述:错误提示字体颜色。
  • 默认值:#E74646

inputDividerLineColor:

  • 类型:String
  • 描述:输入框未编辑状态的颜色。
  • 默认值:#DCDFE5

示例代码

var demo = api.require('neteaseLoginKit');
demo.configLoginPage({
    themeColor:"#808000",
    disableThemeColor:"#D3D3D3"
});

可用性

iOS系统

可提供的1.0.0及更高版本

toLoginPage

跳转登录页面。

toLoginPage()

示例代码

var demo = api.require('neteaseLoginKit');
demo.toLoginPage();

可用性

iOS系统

可提供的1.0.0及更高版本

dismissLoginPage

销毁登录页面。

dismissLoginPage()

示例代码

var demo = api.require('neteaseLoginKit');
demo.dismissLoginPage();

可用性

iOS系统

可提供的1.0.0及更高版本

getLocalToken

本地生成动态 token(同步接口)。

该接口将基于 appKey、appSecret、accid 以及时间戳自动生成动态 Token。该接口仅用于调试回调方法 tokenCompletionHandler,实际 token 计算逻辑应存放在服务端,token 计算规则具体请参考服务端动态 Token 鉴权,也可参考登录组件源码中 getLocalToken 方法的实现逻辑。

getLocalToken()

params

appKey:

  • 类型:String
  • 描述:云信 IM 应用的唯一标识,通过云信控制台创建应用时获取。

appSecret:

  • 类型:String
  • 描述:appKey 对应的密钥 secret,通过云信控制台创建应用时获取,请妥善保管。

mobile:

  • 类型:String
  • 描述:手机号,请传入正确的手机号。

示例代码

var demo = api.require('neteaseLoginKit');
var token = demo.getLocalToken({
    appKey:'appkey12456',
    appSecret:'appsecret123456',
    mobile: '12312341234'
});

可用性

iOS系统

可提供的1.0.0及更高版本

回调方法

回调方法是指需要 js 定义实现、与原生进行通信的方法。

实现原理:

原生自动监听回调事件,回调事件触发后,原生主动调用 js 同名方法,将回调参数透传给 js,js 需要自行处理该回调事件。

didClickLogin

账号密码登录回调。

方法原型

- ///  账号密码登录回调
- ///  completion 回调是否登录成功,如果登录失败,需要传入失败原因
- @objc optional func didClickLogin(info: NELoginInfo?, completion: @escaping (Bool, String?) -> Void)

示例代码

// info 登录信息
// - 类型:JSON 字符串
// - 内部字段:
//  {
//     phoneNumber:'',                 // String 类型;用户手机号(账号)
//     password:'',                    // String 类型;用户密码
//     token:''                        // String 类型;用于服务端验证
//  }
//
//  return 登录结果
//  - 类型:JSON
//  - 描述:回调是否登录成功,如果登录成功可不传;如果登录失败,需要传入失败原因
//  - 内部字段:
// {
//     isSuccess:false,                   // String 类型;是否登录成功
//     message:'密码错误'                  // String 类型;登录失败原因,传入后会在【登录】按钮上方显示
// }
function didClickLogin(info) {
    api.alert({
        msg: info
    });
    
    // 登录逻辑
    
    return JSON.stringify({isSuccess:false, message:'密码错误'});
}

可用性

iOS系统

可提供的1.0.0及更高版本

loginVerifyCodeSuccess

手机号验证码验证成功回调。

loginVerifyCodeSuccess(info)

方法原型

- /// 手机号验证码验证成功回调(验证码校验成功,其他逻辑需要外部处理)
- @objc optional func loginVerifyCodeSuccess(info: NELoginInfo?)

示例代码

// info 登录信息
// - 类型:JSON 字符串
// - 内部字段:
//  {
//     phoneNumber:'',                 // String 类型;用户手机号(账号)
//     password:'',                    // String 类型;用户密码
//     token:''                        // String 类型;用于服务端验证
//  }
function loginVerifyCodeSuccess(info) {
    api.alert({
        msg: info
    });

    // 其他逻辑
}

可用性

iOS系统

可提供的1.0.0及更高版本

registerVerifyCodeSuccess

手机号验证码注册成功回调。

registerVerifyCodeSuccess(info)

方法原型

- /// 手机号验证码注册成功回调(验证码校验成功,其他逻辑需要外部处理)
- @objc optional func registerVerifyCodeSuccess(info: NELoginInfo?, completion: @escaping (Bool) -> Void)

示例代码

// info 登录信息
// - 类型:JSON 字符串
// - 内部字段:
//  {
//     phoneNumber:'',                 // String 类型;用户手机号(账号)
//     password:'',                    // String 类型;用户密码
//     token:''                        // String 类型;用于服务端验证
//  }
//
//  return 手机号验证码注册结果
//  - 类型:Bool
//  - 描述:手机号验证码注册是否登录成功,返回 true 则回退到上一页
function registerVerifyCodeSuccess(info) {
    api.alert({
        msg: info
    });
    
    // 手机号验证码验证成功后的逻辑
    
    return true;
}

可用性

iOS系统

可提供的1.0.0及更高版本

resetPasswordSuccess

密码重置成功回调。

resetPasswordSuccess(info)

方法原型

- /// 密码重置成功回调(验证码校验成功,其他逻辑需要外部处理)
- @objc optional func resetPasswordSuccess(info: NELoginInfo?, completion: @escaping (Bool) -> Void)

示例代码

// info 登录信息
// - 类型:JSON 字符串
// - 内部字段:
//  {
//     phoneNumber:'',                 // String 类型;用户手机号(账号)
//     password:'',                    // String 类型;用户密码
//     token:''                        // String 类型;用于服务端验证
//  }
//
//  return 密码重置成功结果
//  - 类型:Bool
//  - 描述:密码重置成功是否成功,如果返回 true 则回退到上一页
function resetPasswordSuccess(info) {
    api.alert({
        msg: info
    });
    
    // 密码重置成功后的逻辑
    
    return true;
}

可用性

iOS系统

可提供的1.0.0及更高版本

tokenCompletionHandler

用户回填 token 回调。

tokenCompletionHandler(mobile)

方法原型

- /// 用户回填 token 数据, 每次请求的时候向外部请求使用
- /// completion 回调token值
- @objc optional func tokenCompletionHandler(mobile: String, completion: @escaping (String) -> Void)

示例代码

// mobile 
// - 类型:String
// - 描述:用户手机号(账号)
//
//  return
//  - 类型:String
//  - 描述:回调 token,token 计算规则参考原生代码
function tokenCompletionHandler(mobile) {
    api.alert({
        msg: mobile
    });
    
    // 生成 token 逻辑(该逻辑应放在服务端,此处调用本地接口仅为了调试,不建议采取该种方式)
    var demo = api.require('neteaseLoginKit');
    var token = demo.getLocalToken({
        appKey:'123456',
        appSecret:'456789',
        mobile: mobile
    });
    
    return token;
}

注意:

该接口回调获取的 token 计算规则请参考服务端动态 Token 鉴权

若需要快速调通组件,可使用本地接口 getLocalToken 当做临时方案,但从安全的角度考虑, token 的计算逻辑应放在服务端,以免 appSecret 泄露。

可用性

iOS系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10