Integration Overview

Easily complete Web login flow using LIPassUI

The LIPassUI component supports account login, third-party login, registration, and various processes such as binding and reservation functions. It supports multiple configurations under the same business (i.e., GAME_ID), meeting your account needs for LI PASS and third-party channels across different web scenarios, interoperating with accounts in the game client.

You can complete the integration with just a few lines of code, allowing your webpage to forgo individually connecting to APIs, eliminating the need to build interactions and UI yourself.

note

We recommend using the Player Network Console Configure Web Component feature for easier configuration and more flexible updates.

For businesses configured through code, you can go to the Player Network console to add new Web configuration, and the configuration distributed from the console will override the webpage's code configuration.

If you have any questions, please contact Player Network Assistant.

Step 1: Import the SDK

Install the Web SDK from CDN.

// SDK Debug version
<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 Release version
<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" />

Step 2: Configure LI PASS in the Player Network Console

For detailed configuration steps, see LI PASS Configuration. After configuring Web type login configuration, you may receive the WEB_ID upon release.

note

You can create multiple LI PASS Web configurations in the Player Network console to use different configurations in different web scenarios.

Step 3: Instantiate the JavaScript SDK

Import JS and CSS resources

<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" />
{/* Please use the official version SDK package when the project is online */}

{/* Mount node */}
<div id="infinite-pass-component"></div>

Instantiate SDK

const pass = new PassFactory.Pass({
  env: "test", // environment, please contact Player Network Assistant for official environment parameters
  gameID: xxxxx, // GAME_ID configured in the Player Network console
  appID: "", // APP_ID configured in the Player Network console
  webID: "", // WEB_ID configured in the Player Network console

  config: {}, // If webID is not used, config can be configured
});

For details on the initialization parameters, please refer to Component Configuration.

note

If you have already created a LI PASS Web configuration in the Player Network console, you only need to copy the WEB_ID and input it into the code initialization, and you'll be able to modify configurations in real time.
If Web configuration is not completed in the Player Network Console, refer to Detailed Configuration for manual configuration of config in the code.

LEVEL INFINITE PASS Web component supports players logging into games through LEVEL INFINITE PASS and third-party channels.

The component supports two display modes. You can enable them in the Player Network Console, The Default is Inline (Embedded) mode.

Modal mode — The login UI appears as a popup dialog. Your website provides a login button; clicking it triggers pass.start() to render the modal.
Inline (Embedded) mode — The login UI is permanently embedded in a page element.

After the login/registration is successfully completed, the component's UI does not change, and subsequent logic needs to be handled independently. For example, storing login information in cookies or localStorage and navigating the UI to the login success page.

To customize the login interaction, see Configure LI PASS Web.

In Modal mode, the Login UI is displayed as a popup. Add a login button on your page; clicking it calls pass.start() to show the login dialog.

<div id="infinite-pass-component"></div>
<button id="login-btn">Login</button>

document.getElementById("login-btn").addEventListener("click", () => {
  const pass = new PassFactory.Pass({
    env: "test", // Environment
    gameID: xxxxx, // GAME_ID configured in the Player Network Console
    appID: "", // APP_ID configured in the Player Network Console
    webID: "", // WEB_ID configured in the Player Network Console (Modal mode must be enabled in the console)
  });

  // Call `start` to mount the Web component onto the designated DOM node and display the modal
  pass.start("#infinite-pass-component");

  function handleLoginAndRegisterSuccess(userInfo) {
    // Get login status
    const { openid, token, token_expire_time, channelId } = userInfo;
    const userAuth = { openid, token, token_expire_time, channelId };

    // Based on your project's technology stack, record the user's login state.
    setUserAuth(userAuth);
    // Store the user's login state in localStorage for later use. 
    localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
  }

  pass.on("onLogin", (userInfo) => {
    handleLoginAndRegisterSuccess(userInfo)

    // Handle the business logic after successful login, such as redirecting to a specified page.
    // do something....
  });

  pass.on("onRegister", (userInfo) => {
    handleLoginAndRegisterSuccess(userInfo)

    // Handle the business logic after successful login, such as redirecting to a specified page.
    // do something....
  });
});

Inline (Embedded) Mode

In Inline mode, the login UI is always visible and embedded directly in the page.Call pass.start() once on page load to render it.

<div id="infinite-pass-component"></div>

const pass = new PassFactory.Pass({
  env: "test", // Environment
  gameID: xxxxx, // GAME_ID configured in the Player Network Console
  appID: "", // APP_ID configured in the Player Network Console
  webID: "", // WEB_ID configured in the Player Network Console
});

// Call `start` to mount the Web component onto the designated DOM node
// After successful login, the login result is returned in `onLogin` or `onRegister` events
pass.start("#infinite-pass-component");

function handleLoginAndRegisterSuccess(userInfo) {
  // Get login status
  const { openid, token, token_expire_time, channelId } = userInfo;
  const userAuth = { openid, token, token_expire_time, channelId };

  // Based on your project's technology stack, record the user's login state.
  setUserAuth(userAuth);
  // Store the user's login state in localStorage for later use.
  localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
}

pass.on("onLogin", (userInfo) => {
  handleLoginAndRegisterSuccess(userInfo)

  // Handle the business logic after successful login, such as redirecting to a specified page.
  // do something....
});

pass.on("onRegister", (userInfo) => {
  handleLoginAndRegisterSuccess(userInfo)

  // Handle the business logic after successful login, such as redirecting to a specified page.
  // do something....
});

Return Parameters

Parameter	Type	Description
ret	number	Return code 0: Request successful !=0: Request failed, see `msg` for detailed result description.
msg	string	Result Description
token	string	User token generated by Player Network SDK Length: 40 bytes, see Token
openid	string	Player Network SDK Unique User Identification Defaults to 64-bit unsigned integer string, supports 32-bit as well
token_expire_time	int64	Token expiration time, Unix time
user_name	string	Username used for login
channel_info	object	Channel information of the current channel. For more information, see Channel Information.
del_account_status	number	Account deletion status -1: Query failed 0: No record revoking Player Network account deletion request (including email and phone accounts) 1: Deleted silent period 2: Account deletion complete 3: Account deletion 4: Account deletion failed
seq	string	Data stream message serial number
first_login	number	Is it the first login? Unknown: -1 No: 0 Yes: 1

Return Sample

{
    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",
}

Step 5: Implement Authentication Status Persistence

When using the LI PASS Web component, you can develop your approach to how the authentication status is persistently maintained based on how information is stored:

Authenticated users indefinitely maintain authentication status (store in cookies or localStorage) until explicitly logging out.
Clear authentication status on window close (store in sessionStorage)
Clear authentication status on page reload (no storage)

Table below lists stored user credentials information, accessible via onLogin and onRegister events.

Parameter	Type	Access Method
openid	string	`userInfo.openid`
token	string	`userInfo.token`
token_expire_time	int	Token expiration time, Unix time (seconds)
channelId	string	`userInfo.channel_info.channelId`

Disable Default Behavior

After logging in with the LI PASS Web component, the authentication status is automatically stored in the logined_account_cache_key cookie.Do not rely on this cookie. If you need to maintain the login state, please store the user credential information in localStorage, sessionStorage, or cookie by yourself.

If you need to disable this default behavior, you can set it during the widget's initialization:

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

  config: {
    disableCookie: true
  }
});

Step 6: Set UI Interaction Modes

Configure Method 1: Configure through the Player Network Console (recommended)

Recommended: use Player Network Console to configure UI interaction for the web side:

Embedded Content Page - Normal mode, embeds the component into any DOM node of the webpage
Display as a Popup on the Page - Modal mode, similar to normal mode, and supports using show and hide to control the display/hiding of the modal

Configure Method 2: Configure through Code

Set config.renderMode to inline (Normal mode) or modal (Modal mode), with a lower priority than the configuration distributed by the Player Network console.

Initialization: Call the start method, automatic rendering will occur.You need to develop a login button/icon on your website, and call the start method on the button's click event.Also, you can call it when a user triggers the login scenario.

const pass = new PassFactory.Pass({
  env: "test", // Environment
  gameID: xxxxx, // GAME_ID configured in the Player Network console
  appID: "", // APP_ID configured in the Player Network console
  webID: "", // WEB_ID configured in the Player Network console
});

// Call `start` to mount the Web component to the specified DOM node
pass.start("#infinite-pass-component");

Manually Close Modal:

pass.hide()

After closing, reopen the modal (without retaining user input): re-initialize the modal each time

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

function login() {
  const pass = new PassFactory.Pass({
    env: "test", // Environment
    gameID: xxxxx, // GAME_ID configured in the Player Network Console
    appID: "", // APP_ID configured in the Player Network Console
    webID: "", // WEB_ID configured in the Player Network Console
  });

  // Call `start` to mount the Web component to a specified DOM node
  pass.start("#infinite-pass-component");
}

After closing, reopen the modal (retain user input): save the instance during the initial setup, and use pass.show to redisplay the modal later

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

function login() {
  // You need to manually save the pass instance reference
  if (!pass) {
    const pass = new PassFactory.Pass({
      env: "test", // Environment
      gameID: xxxxx, // GAME_ID configured in the Player Network Console
      appID: "", // APP_ID configured in the Player Network Console
      webID: "", // WEB_ID configured in the Player Network Console
    });

    // Call `start` to mount the Web component to a specified DOM node
    pass.start("#infinite-pass-component");
  } else {
    pass.show();
  }
}

Step 7: Listen for events

Invoke the on method provided by the pass component to register callback event handlers.When users perform operations in the LI PASS Web component, the component will callback events at the corresponding times.

note

It is required to register the event before the user triggers the corresponding event.

Example

pass.on("onLogin", (userInfo) => {
  // After the user login fails, the 'onLoginError event' will be triggered. You can handle business logic for successful user login in this event callback.
  // For example, redirect to a specific page.
  console.log(userInfo);
});

pass.on("onLoginError", (userInfo) => {
  // After the user successfully logs in, the 'onLogin event' will be triggered. You can handle business logic for failed user login in this event callback.
  console.log(userInfo);
});

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

Event List

Method Name	Description	Callback Parameters
onLoad	Load and render component	accountApi
onClose	Close the component by clicking the close button in modal mode	userInfo, accountApi
onLogin	Login successful	userInfo, accountApi
onLoginError	Login failed	error
onLoginTabChange	Tab switch on the Web component	activeTab
onRegister	Registration successful	userInfo, accountApi
onRegisterError	Registration failed	error
onPwdReset	Password reset successful	accountApi
onPwdResetError	Password reset failed	error, accountApi
onBind	Bind successful	result
onBindError	Bind failed	result

Step 8: Configure Website Domain Name

To ensure your Web application can safely call our login service and receive callback information, you must configure your website domain in our Player Network Console.

Filling rules:

Please enter the complete domain name of your website, including the protocol prefix (https://)
Do not add a trailing slash / at the end of the URL

Please refer to Domain Configuration

API List

Please refer to API Documentation

See Web Component Registration/Login Configuration to learn how to configure your login/registration flow and continue to integrate more features.
If you wish to conduct channel account binding activities on the web, see Web Binding.
No matter which login method you use, we provide a complete compliance process. See Compliance.
With a simple configuration, you can customize web components for a style that better suits your game. See Customize Appearance.
For use case examples, see Web Scenarios for more inspiration.

Web component integration is fast and flexible, with more application scenarios to explore together.

For more details, please contact Player Network Assistant for consultation.

Step 1: Import the SDK​

Step 2: Configure LI PASS in the Player Network Console​

Step 3: Instantiate the JavaScript SDK​

Step 4: Implement LI PASS Login/Register​

Modal Mode​

Inline (Embedded) Mode​

Return Parameters​

Return Sample​

Step 5: Implement Authentication Status Persistence​

Disable Default Behavior​

Step 6: Set UI Interaction Modes​

Configure Method 1: Configure through the Player Network Console (recommended)​

Configure Method 2: Configure through Code​

Render the login component using a modal dialog.​

Step 7: Listen for events​

Example​

Event List​

Step 8: Configure Website Domain Name​

API List​

Recommended​

Step 1: Import the SDK

Step 2: Configure LI PASS in the Player Network Console

Step 3: Instantiate the JavaScript SDK

Step 4: Implement LI PASS Login/Register

Modal Mode

Inline (Embedded) Mode

Return Parameters

Return Sample

Step 5: Implement Authentication Status Persistence

Disable Default Behavior

Step 6: Set UI Interaction Modes

Configure Method 1: Configure through the Player Network Console (recommended)

Configure Method 2: Configure through Code

Render the login component using a modal dialog.

Step 7: Listen for events

Example

Event List

Step 8: Configure Website Domain Name

API List

Recommended