Documentation

Did you find this helpful?

Getting Started with Google & HTML5

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

Requirements:

Server and Domain

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

Registering Google API Project

Start by navigating to Google API Console. Navigate to "Credentials" (1), locate API Manager panel and click "Create" (2):

Fill in the project name (1) and click "Create" (2):

It is normal for API Manager to take 10-20 seconds to generate the project:

Once project is created, first navigate to "OAuth consent screen" (1). Make sure the correct email is selected (2). Add name for your application (3) and click "Save" (4):

Next, navigate to "Credentials" (1), click "Create credentials" (2) and select "OAuth client ID" (3):

Select "Web Application" (1) as your application type. Give your application a name (2). Add your domain to Authorized JavaScript Origins (3) ("http://playfab.example" in our case). Finally, click "Create" (4) to commit:

API Manager will reveal 2 important units of information: Client ID (1) and Secret (2). Copy them, as they will be used in throughout the guide.

Go to your title Game Manager page. Navigate to "Add-ons" (1) and locate and click Google Add-on (2):

Fill in the Client ID (1) and Client Secret (2) and click "Install Google" (3):

Note: As of July 2017 Google API Manager has a bad habit of not hooking the Allowed JS origin domain properly. If you face with an error that is looking like this: 

"idpiframe_initialization_failed", details: "Not a valid origin for the client: somedomain.com...

Please, just remove the Credentials and recreate them over again. No need to delete the entire project, just the credentials.

Testing using Access Token

This example shows testing using classic Access Token approach. Use the following HTML file for testing. Please, make sure to replace "YOUR_CLIENT_ID" and "YOUR_PLAYFAB_TITLE" with your own: 

<!DOCTYPE html>
<html>
<head>
    <!-- Special meta tag allows you to pass Google Client ID. Replace the content attribute value with your own Client Id -->
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID"><!-- // TODO: PUT YOUR GOOGLE CLIENT_ID HERE! -->
    <!-- Load Google platform SDK-->
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <!-- Load PlayFab Client JavaScript SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Google Access Token Auth Example</p>
    <!-- Neat Google button gets styled automatically when Google platform SDK is loaded -->
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
    <script>
        // Invoked when user has signed in with Google
        function onSignIn() {
            // Retrieve access token
            var accessToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse(true).access_token;
            
            // Execute LoginWithGoogleAccount API call using the access token. Please replace TitleID with your own.
            logLine("Attempting PlayFab Sign-in");
            PlayFabClientSDK.LoginWithGoogleAccount({
                AccessToken: accessToken,
                CreateAccount : true,            
                TitleId: "YOUR_PLAYFAB_TITLE", // TODO: PUT YOUR TITLE ID HERE!
            }, 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) {
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>

Make sure to serve this page using using your web server. Make sure access this page using the URL you specified while configuring Google Project (`http://playfab.example` in our case). Once the page opens, click "G Sign In" (1) and follow the general Google authentication flow. Once this is done, the script will try to authenticate on PlayFab side and output the result (2):

Note that, if you already have an running Google auth session, you will not have to press the "Sign In". Everything will happen automatically.



Did you find this helpful?