Skip to main content

接入概览

使用 LIPassUI 轻松完成 Web 登录流程

LIPassUI 组件支持帐号登录、三方渠道登录、注册，及多种流程如绑定及预约功能，并支持同一业务（即 GAME_ID）下多套配置，可以满足您在各种网页场景的 LI PASS 以及第三方渠道的账号需求，与游戏客户端内账号互通。

只需几行代码就可完成接入，让您的网页无须再逐一接入 API，告别自行搭建交互和 UI。

note

推荐使用 Player Network 控制台 配置 Web 组件 功能，配置更简单、更新更灵活。

已通过代码形式配置的业务，可前往 Player Network 控制台新增 Web 端配置，从控制台下发的配置将覆盖网页的代码配置。

如有疑问，请联系 Player Network 助手。

步骤1：引入 SDK​

从 CDN 安装 Web SDK。

// SDK 联调版本包
<script src="https://test-common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.umd.js"></script>
<link rel="stylesheet" href="https://test-common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.css" />


// SDK 正式版本包
<script src="https://common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.umd.js"></script>
<link rel="stylesheet" href="https://common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.css" />

步骤2：在 Player Network 控制台配置 LI PASS​

详细配置步骤，请参见 LI PASS 配置。 配置 Web 类型的登录配置后，可在发布后获得 WEB_ID。

note

您可在 Player Network 控制台创建多个 LI PASS Web 配置，在不同的 Web 场景使用不同的配置。

步骤3：实例化 JavaScript SDK​

引入 JS、CSS 资源

<script src="https://test-common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.umd.js"></script>
<link rel="stylesheet" href="https://test-common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.css" />
{/* 项目上线时，请使用正式版本 SDK 正式版本包 */}

{/* 挂载节点 */}
<div id="infinite-pass-component"></div>

实例化 SDK

const pass = new PassFactory.Pass({
  env: "test", // environment, 正式环境参数请联系 Player Network 助手
  gameID: xxxxx, // Player Network 控制台中配置的 GAME_ID
  appID: "", // Player Network 控制台中配置的 APP_ID
  webID: "", // Player Network 控制台中配置的 WEB_ID

  config: {}, // 如果不使用 webID，可配置 config
});

初始化参数详情，请参见 组件配置。

note

如果您已在 Player Network 控制台创建好 LI PASS Web 的配置，只需要复制 WEB_ID 在代码初始化传入即可，并且能够实时修改配置。
如果您未在 Player Network 控制台完成 Web 配置，则需参考 详细配置 在代码里手动配置 config。

步骤4：实现 LI PASS 登录／注册​

LEVEL INFINITE PASS Web 组件支持玩家通过 LEVEL INFINITE PASS 和第三方渠道登录游戏。

初始化 pass 组件后，调用 start 方法，将 LI PASS Web 组件挂载到指定的 DOM 节点。 登录成功后，登录结果会在 intlSignResp 中返回。

登录/注册成功完成后，组件的 UI 不会变更，需要自行处理后续逻辑。如将登录信息存储到 cookie 或者 localStorage，并将 UI 导航到登录成功的页面。

要自定义登录交互，请参见 配置 LI PASS Web。

<div id="infinite-pass-component"></div>
const pass = new PassFactory.Pass({
  env: "test", // Environment
  gameID: xxxxx, // Player Network 控制台中配置的 GAME_ID
  appID: "", // Player Network 控制台中配置的 APP_ID
  webID: "", // Player Network 控制台中配置的 WEB_ID
});

// 调用 `start` 将 Web 组件挂载到指定的 DOM 节点
// 登录成功后 登录结果在 `onLogin`、`onRegister` 事件返回
pass.start("#infinite-pass-component");

// 您可以监听事件列表，当用户完成登录或注册时获取用户的鉴权信息
pass.on("onLogin", (userInfo) => {
  // After the user fails to log in, the 'onLoginError event' will be triggered, and the game logic after the user successfully logs in, can be processed in the event callback
  // For example, redirect to a specific page
  console.log(userInfo);
});

pass.on("onRegister", (userInfo) => {
  // Logic added after successful registration
  // For example, redirect to a specific page
  console.log(userInfo);
});

返回参数​

参数类型描述
retnumber返回代码
0：请求成功
!=0：请求失败，查看 msg 详细结果说明
msgstring结果说明
tokenstringPlayer Network SDK 生成的用户 token
长度：40字节，详见 Token
openidstringPlayer Network SDK 用户唯⼀标识
默认为 64-bit 无符号整数的字符串，也可以支持 32-bit
token_expire_timeint64令牌过期时间
Unix 时间
user_namestring用于登录的用户名
channel_infoobject当前渠道的渠道信息。
更多信息，请参见 渠道信息。
del_account_statusnumber账号注销状态
-1：查询失败
0：没有记录撤销 Player Network 账号注销请求 (包括邮件账号和电话账号)
1：删除的静默期
2：账号注销完成
3：注销账号
4：账号注销失败
seqstring数据流消息序号
first_loginnumber是否首次登录
未知: -1
否: 0
是: 1

返回示例​

{
    channel_info:{
        account:"wuqinghao@outlook.com",
        account_plat_type: 131,
        account_type: 1,
        channelId: 131
    },
    del_account_status: 0,
    first_login: 0,
    msg: "success",
    openid: "xxx",
    ret: 0,
    seq: "1638194026-0180225310-032531-0000292460",
    token: "xxx",
    token_expire_time: 1638494026,
    user_name: "user",
}

步骤5：实现身份验证状态保留​

使用 LI PASS Web 组件时，您可以根据信息的存入方式自行开发身份验证状态如何持久保留：

  • 已登录的用户在显式退出登录前，无限期地保留身份验证状态（存储 cookie 或者 localStorage）
  • 在窗口关闭时清除身份验证状态（存入 sessionStorage）
  • 在页面重新加载时清除身份验证状态（不做存储）

下列为表格为存储的用户凭证信息，可通过监听 onLogin、onRegister 事件获取。

参数类型读取方式
openidstringuserInfo.openid
tokenstringuserInfo.token
channelIdstringuserInfo.channel_info.channelId

禁用默认行为​

使用 LI PASS Web 组件登录后，会自动将身份验证状态存储到 logined_account_cache_key cookie 中。请不要依赖此 cookie，如果需要保留登录态请选择将用户凭证信息自行存入 localStorage 或 sessionStorage 或 cookie。

如果需要禁用该默认行为，可以在初始化 widget 的时候进行设置：

const pass = new PassFactory.Pass({
  env: "", // Environment
  gameID: "", // Game ID
  appID: "", // LI PASS App ID

  config: {
    disableCookie: true
  }
});

步骤6：设置 UI 交互方式​

方法1：通过 Player Network 控制台配置（推荐）​

推荐使用 Player Network 控制台设置 Web 端的 交互方式：

  • 嵌入内容页面 - 普通形态，将组件嵌入到网页任意的 DOM 节点
  • 以弹框形式在页面展示 - 模态框形态，和普通形态类似，并支持使用 show 和 hide 控制模态框的显示／隐藏

方法2：通过代码配置​

将 config.renderMode 设置为 inline（普通形态）或 modal（模态框形态），优先级低于 Player Network 控制台下发的配置。

初始化：调用 start 方法，会进行自动渲染

const pass = new PassFactory.Pass({
  env: "test", // Environment
  gameID: xxxxx, // Player Network 控制台中配置的 GAME_ID
  appID: "", // Player Network 控制台中配置的 APP_ID
  webID: "", // Player Network 控制台中配置的 WEB_ID
});

// 调用 `start` 将 Web 组件挂载到指定的 DOM 节点
pass.start("#infinite-pass-component");

主动关闭模态框：

pass.hide()

关闭后，再次打开模态框（不保留用户输入）：每次都重新重新初始化模态框

<div id="infinite-pass-component"></div>
<button onclick="login">登录</button>

function login() {
    const pass = new PassFactory.Pass({
        env: "test", // Environment
        gameID: xxxxx, // Player Network 控制台中配置的 GAME_ID
        appID: "", // Player Network 控制台中配置的 APP_ID
        webID: "", // Player Network 控制台中配置的 WEB_ID
    });

    // 调用 `start` 将 Web 组件挂载到指定的 DOM 节点
    pass.start("#infinite-pass-component");
}

关闭后，再次打开模态框（保留用户输入）：在第一次初始化时，保存实例，后续调用 pass.show 重新展示模态框

<div id="infinite-pass-component"></div>
<button onclick="login">登录</button>

function login() {
    // 您需要自行保存 pass 实例的引用
    if (!pass) {
        const pass = new PassFactory.Pass({
            env: "test", // Environment
            gameID: xxxxx, // Player Network 控制台中配置的 GAME_ID
            appID: "", // Player Network 控制台中配置的 APP_ID
            webID: "", // Player Network 控制台中配置的 WEB_ID
        });

        // 调用 `start` 将 Web 组件挂载到指定的 DOM 节点
        pass.start("#infinite-pass-component");
    } else {
        pass.show()
    }
}

步骤7：监听事件​

调用 pass 组件提供的 on 方法可以注册回调事件处理器。用户在 LI PASS Web 组件进行操作时，组件会在相应的时机回调事件。

note

需要在用户触发相应事件前注册事件。

示例​

pass.on("onLogin", (userInfo) => {
  // 用户登录失败后会触发 'onLoginError 事件'，可以在该事件回调里处理用户成功登录后的业务逻辑
  // 例如跳转到特定的某个页面
  console.log(userInfo);
});

pass.on("onLoginError", (userInfo) => {
  // 用户成功登录后会触发 'onLogin 事件'，可以在该事件回调里处理用户登录失败后的业务逻辑
  console.log(userInfo);
});

pass.on("onRegister", (userInfo) => {
  // 注册成功后加入的逻辑
  // 例如跳转到特定的某个页面
  console.log(userInfo);
});

事件列表​

方法名描述回调参数
onLoad加载渲染的组件accountApi
onClose模态框模式下点击关闭按钮关闭组件userInfo，accountApi
onLogin登录成功userInfo，accountApi
onLoginError登录失败error
onLoginTabChangeWeb 组件上的 Tab 开关activeTab
onRegister注册成功userInfo，accountApi
onRegisterError注册失败error
onPwdReset密码重置成功accountApi
onPwdResetError密码重置失败error，accountApi
onBind绑定成功result
onBindError绑定失败result

步骤8：配置网站域名​

为了确保您的 Web 应用程序能够安全地调用我们的登录服务并接收回调信息，您必须在我们的 Player Network Console 中配置您的网站域名。

填写规则：

  • 请填写您的网站的完整的域名，包括协议头 （https://）
  • 不要在 URL 末尾添加斜杠 /

请参考 域名配置

API 列表​

请参见 API 文档

推荐使用​

您已完成 LI PASS Web 组件的接入，并可开始搭建您的网页。

我们建议使用以下 Web 组件功能：

  • 查看 Web 组件注册/登录配置，了解如何配置您的登录/注册流程，以便继续接入更多功能。
  • 若您想在网页开展渠道账号绑定活动，请参见 Web 绑定。
  • 无论哪种登录方式，我们都提供完整的合规流程，请参见 合规。
  • 简单一个配置即可调整出更适合游戏风格的个性化网页组件，请参见 自定义外观。
  • 应用场景示例，请参见 Web 场景，给您更多灵感。

Web 组件接入快速、功能灵活，还有更多应用场景等您一起探索。

更多详情，请联系 Player Network 助手进行咨询。

隐私政策用户协议数据处理协议开源许可协议
©2025 Proxima Beta Pte. Ltd. All rights reserved.