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.

After initializing the pass component, call the start method to mount the LI PASS Web component to a specified DOM node. Upon successful login, the login result will be returned in intlSignResp.

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.

<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");

// You can listen to the event list to retrieve the user's authentication info upon login or registration completion
pass.on("onLogin", (userInfo) => {
  // After failing to log in, 'onLoginError event' will be triggered, and game logic post-successful login 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);
});

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`
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

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

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

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​

Return Parameters​

Return Sample​

Step 5: Implement Authentication Status Persistence​

Disable Default Behavior​

Step 6: Set UI Interaction Modes​

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

Method 2: Configure through Code​

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

Return Parameters

Return Sample

Step 5: Implement Authentication Status Persistence

Disable Default Behavior

Step 6: Set UI Interaction Modes

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

Method 2: Configure through Code

Step 7: Listen for events

Example

Event List

Step 8: Configure Website Domain Name

API List

Recommended