Web

This article guides you through setting up Xbox Series X|S as an identity provider, enabling your website to access Player Network authentication services.

note

Xbox Series X|S developer access is not open to individual developers. Users have to be a legal entity such as a corporation or a company to request for developer access from Microsoft.

Prerequisites

1. Set up your app on the Azure Portal

Register your app on Microsoft using the Azure Active Directory’s App Registration interface.

1. Log in to the Azure Portal using an account with developer permissions to register apps within the Azure Active Directory.

2. Select App Registration > + New Registration.

3. Enter a name for your application, and select Personal Microsoft accounts only as the Supported account types.

4. Under Redirect URI, choose Web and enter https://test-common-web.intlgame.com/jssdk/xboxlogincallback.html to set the redirect URI after a successful authentication.

5. Click Register to complete the registration.

6. From Authentication under Manage, click Add URI under Web.

7. Enter https://common-web.intlgame.com/jssdk/xboxlogincallback.html as the URI, then click Save.

8. From Certificates & secrets under Manage, click + New client secret under Client secrets.

9. Complete the required fields, then click Add to add a new client secret.
   

   • Description: Enter a description for the client secret.
   • Expires: Select the amount of time before the secret expires, with a maximum validity period of two years. Before the secret expires, a new secret has to be created in the Azure Portal, then configured again in the Player Network Console.

10. Note down the client secret Value. The client secret value can only be viewed immediately after creation.

note

The client ID and client secret value are required information when configuring the Player Network Console. The client ID can be found in the Overview page of your app, from the Application (client) ID field under the Essentials section.

2. Create an account for Player Network Console.
3. Create a new project for your game, or join an existing one.
4. Add Xbox Series X|S 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 Microsoft.

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

With the Microsoft 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: 'xbox',
    channel_info: {
        auth_token: "XBL3.0 x: xxxx",
        xuid: "xxxx"
    }
}).then(
(res) => {
    console.log(res);
});

Call the intlLogout method to log out from your website.

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