Web SDK

AccelByte Web SDK (opens new window) is a JavaScript library enabling the building of web applications using AccelByte API services. The library is platform-agnostic and can be consumed in a browser or in a server environment.

Type-safety

Built with TypeScript and strict by design, the SDK goes above and beyond and enforces runtime type-checking validations. This allows trusting the AccelByte service type definitions.

Below is the list of the AccelByte service APIs the library supports:

1. IAM (opens new window)
2. Monetization (opens new window)
3. Basic (opens new window)
4. Build Info (opens new window)
5. GDPR (opens new window)
6. Event (opens new window)
7. Legal (opens new window)

Getting started

Installation

To install the library execute the following command.

yarn add @accelbyte/sdk

Prerequisites

• ES Modules - The SDK currently supports ES Modules format only, please set type property in Package.json to module (opens new window)
• Yarn - We like yarn. While npm may work, it is not supported and may be unstable.
• TypeScript - The SDK has full TypeScript support, and it should be preferred over vanilla JavaScript.

Usage

To instantiate the Web SDK, a prerequisite is having an IAM Client ID. The example below creates an instance of the SDK that have access to all APIs.

import { Accelbyte } from '@accelbyte/sdk';

const sdk = await Accelbyte.SDK({
  options: {
    baseURL: "<Publisher Base URL, e.g. https://demo.accelbyte.io>",
    clientId: "<Publisher Client ID>, e.g. 32_char_guid",
    redirectURI: "<Publisher Redirect URL, e.g. https://demo.accelbyte.io>",
    namespace: "<Publisher namespace>, e.g. 'accelbyte'"
  },

  config: {
    withCredentials: true // default true. If true it will send the Cookie automatically
  },

  onEvents: {
    // a callback function invoked on session expiry
    onSessionExpired: () => {},
    // a callback function invoked on session retrieval
    onGetUserSession: (accessToken: string, refreshToken: string) => {},
    // a callback function invoked on UserEligibilityChange
    onUserEligibilityChange: () => {},
    // a callback function fired on error
    onError: (error: SDKError) => {}
  }
})

Sample usage of the AccelByte services using the Web SDK:

console.log('Accelbyte SDK', sdk, '\n')

// Login to IAM
const token = await sdk.IAM.UserAuthorization().loginWithAuthorizationCode({code, codeVerifier})

// And retrieve the user object
const user = await sdk.IAM.User().getCurrentUser()

// Retrieve store items
const items = await sdk.Platform.Item().fetchItemsByCriteria({ queryParams: { appType: 'GAME' } })
console.log('Items:', items, items?.response?.data, '\n')

// Retrieve store currencies
const currencies = await sdk.Platform.Currency().getCurrencyMap()
console.log('Currencies:', currencies, '\n')

// Retrieve legal policies
const policies = await sdk.Legal.Policies().fetchAllPoliciesByCountry({countryCode: 'Germany'})
console.log('Policies:', policies, '\n')

AccelByte Web Widgets

In addition to the Accelbyte Web SDK, the library provides an extension called Web Widgets (opens new window) allowing the creation of SDK UI components. AccelByte Web Widgets is a UI library consisting of a set of JavaScript React components that can be embedded inside a browser. These components have the same appearance and business functionality as the AccelByte Player Portal.

NOTE

The Web Widgets are currently undergoing Alpha testing. If you would like to participate in the Alpha test, we encourage you to reach out to your assigned DPM resource before making use of these solutions.

Installation

To npm install the Web Widgets execute

yarn add @accelbyte/widgets

Web SDK Playground

In addition, there is a Playground web application (opens new window) allowing to live test the Web SDK.