Web

This article guides you through setting up Discord as an identity provider, enabling your website to access Player Network authentication services.

note

As authentication through the Discord App has been deprecated in the Discord SDK, using Discord App for authentication may encounter problems in the future. To ensure that Discord authentication remains reliable, we recommend using WebView instead for web authentication for Discord. For more details, see the configuration DISCORD_LOGIN_USING_WEB.

Prerequisites

1. Set up the Discord app on the Discord Developer Platform

1. Create a Discord app

Before creating the Discord app, register an account on the Discord official website and complete the account authentication (by email) according to the prompts.

1. Go to the Discord Developer Platform.
   On the first login, users might have to verify that they are not bots. You may complete it after the email verification.

2. On the top right corner of the Applications page, click New Application.

   

3. In the app creation popup, enter the application name and click Create.

4. On the General Information page, view the APPLICATION ID.
   Users must configure the app ID in the INTLConfig.ini file.

   

2. Configure the app

caution

The authentication feature on Player Network for Discord requires the identify scope from Discord. The social feature on Player Network requires the relationships.read and activities.write scope from Discord. The For more information, see OAuth2 Scopes.

1. Go to the Discord Developer Platform.

2. On the Applications page, click the app to configure.

3. Click OAuth2 in the left side navigation bar and go to OAuth2 > General.

4. Under Redirects, fill in the below redirect URLs, which is used to receive callbacks after Discord authorization. Click Add Another to add more empty fields if required:

   • https://common-web.intlgame.com/jssdk/discordlogincallback.html
   • https://test-common-web.intlgame.com/jssdk/discordlogincallback.html

   

5. Click Rich Presence in the left side navigation bar and go to the Rich Presence Art Assets page.

6. Click Add Image(s) to configure the image resources of the app.

   

   info

   All image resources used in the app shall be configured on this page, including cover photos for friend invitations.

2. Create an account for Player Network Console.
3. Create a new project for your game, or join an existing one.
4. Add Discord as an authentication method for your project on Player Network Console.

note

For more details about integrating the SDK for other third-party channels, see JavaScript SDK.

Step 1: Install the JavaScript SDK

caution

Install the SDK package from the production environment when launching the game. The SDK package from the test environment is only used for integration testing.

Install the JavaScript SDK from npm or CDN.

$ npm install @intlsdk/account-api

// SDK package from the test environment
<script src="https://test-common-web.intlgame.com/sdk-cdn/account-api/latest/index.umd.js"></script>
// SDK package from the production environment
<script src="https://common-web.intlgame.com/sdk-cdn/account-api/latest/index.umd.js"></script>

Step 2: Instantiate the SDK

caution

Set env to the test environment during the integration testing and env to the corresponding production environment when launching the game.

const accountApi = new IntlgameAccountApi({
  env: "test", // SDK environment 
  gameID: 11,
});

Parameter	Type	Description	Remark
env	string	SDK environment For more information, see Retrieve cluster information.	Required
gameID	number	Unique game ID assigned by Player Network	Required

Step 3: Implement web login

After instantiating the accountApi component, call the thirdAuthorize method to request the access token from Discord.

accountApi.thirdAuthorize({
    third_type: 'discord',
}).then(
(res) => {
    console.log(res);
});

With the Discord token returned, call the intlAuthorize method to get the Player Network SDK OpenID and token to log in to your website.

accountApi.intlAuthorize({
    third_type: 'discord',
    channel_info: {
        access_token: "EAAI2lTrXAZBwBAC"
        refresh_token: "EAAI2lTrXAZBwBAC"
        expires_in: "EAAI2lTrXAZBwBAC"
        redirect_uri: "EAAI2lTrXAZBwBAC"
    }
}).then(
(res) => {
    console.log(res);
});

Call the intlLogout method to log out from your website.

accountApi.intlLogout({
    token: '4567xsdfsd',
    openid: 'xxxxxxxx',
    channel_id: 26,
}).then(
(res) => {
    console.log(res);
});