Documentation

Did you find this helpful?

Getting Started with Twitch & HTML5

This guide shows example of PlayFab authentication using Twitch and HTML5/JavaScript.

Requirements:

Server and Domain

This guide requires a web server to follow. If you do not have a registered remote web server yet, please follow our Running Test HTTP Server guide to run a local web server. Throughout this guide, we will assume your domain is 'http://localhost/'. 

Registering Twitch Application

Start by navigating to Twitch website and make sure you are logged in. Navigate to Account drop-down (1) and select "Settings" (2):

When on Settings page, select "Connections" (1):

At the very bottom of the page locate and click "Register your application" button (1):

A page will open letting you to configure a new app. Fill the name of the application (1), Redirect URL (2), application category (3). Then agree to the Twitch Terms and click "Register" (4).

Important: when testing using local web server, twitch allows you to use 'http://localhost/' as a redirect URL. Make sure to include leading slash ('/'). Without leading slash, twitch will fail to recognize localhost URL.

Once the application is registered, a page will be updated and reveal the Client ID for your application. Save this Client ID, it will be used later to configure PlayFab title:

Configuring PlayFab Title

Once you acquire Twitch Client ID, you may enable and configure Twitch Add-on for your PlayFab Title. On your PlayFab Title page navigate to "Add-ons" tab (1), then locate and select Twitch Add-on (2):

On the add-on page, click "Install" button. Settings will open. Enter your Twitch Client ID (1) and click "Install Twitch" button (2):

Ensure the add-on was installed and no errors pop up. This concludes configuring PlayFab Title.

Testing

Use the following HTML file to test PlayFab + Facebook authentication. Please, make sure to replace TWITCH_CLIENT_ID_GOES_HERE and PLAYFAB_TITLE_ID_GOES_HERE with your own:

<!DOCTYPE html>
<html>
<head>
    <!-- Include JQuery - dependency of Twitch JS SDK -->
    <script src="//code.jquery.com/jquery.min.js"></script>
    <!-- Include Twitch SDK -->
    <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
    <!-- Include PlayFab SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Twitch Auth Example</p>
    <button onclick="login()">Login With Twitch</button>
    <script>
        // Establish Twitch Auth Callback (invoked when logged in with Twitch)
        Twitch.events.addListener('auth.login', function() {
            logLine("Logged in with Twitch!");
            // Invoke login with PlayFab code and pass the token
            loginWithPlayFab(Twitch.getToken());
        });

        // Run Twitch SDK initialization
        Twitch.init({clientId: 'TWITCH_CLIENT_ID_GOES_HERE'}, function(error, status) {
            logLine("Twitch SDK Initialized");
        });

        // This method is invoked when you press the button

        function login() {
            logLine("Logging in via Twitch...");
            Twitch.login({
                scope: ['user_read', 'channel_read']
            });
        }

        function loginWithPlayFab(accessToken){
            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithTwitch API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithTwitch({
                AccessToken: accessToken,
                TitleId: "PLAYFAB_TITLE_ID_GOES_HERE",
                CreateAccount: true
            }, onPlayFabResponse);
        }

        // Handles response from playfab.
        function onPlayFabResponse(response, error) {
            if (response)
                logLine("Response: " + JSON.stringify(response));
            if (error)
                logLine("Error: " + JSON.stringify(error));
        }

        function logLine(message) {
        console.log(message);
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>

Request the following file from your server using the domain you set up during Twitch Application configuration ( `http://localhost' in our case) (1). Once the page opens, wait for the message indicating that Twitch SDK was initialized (2). Then click "Log In with Twitch" button (3). Follow any Twitch instructions in the pop up window. Watch the output (4).

Important: If you already have a Twitch auth session going when reaching the page, it is possible for callbacks to fire in different, unexpected order. This case is shown on the screenshot below. However, you should only make sure that "Logging in via PlayFab" follows after "Logged in with Twitch". This means that token was received or restored from the local storage and we do not have to wait for Twitch SDK to start signing in to PlayFab.

If PlayFab manages to acquire SessionTicket, you have successfully integrated Twitch authentication with your PlayFab app.



Did you find this helpful?