Set Up Play Games Services for Web on the Client

If you are building a game where you only need to communicate to the Google Play games services APIs on the client, follow these steps:

Step 1. Set up your game in the Google Play Console

Remember to use the Google Play Console to enable Google Play games services for your game, not the Google API Console.

  1. Enable Google Play games services for your web game by following all of the steps described in Setting Up Game Services.
  2. Record the following credential information for later.
  3. (Optional) Add achievements and leaderboads to your game by following the steps described in Configuring Achievements and Leaderboards.
  4. Add test accounts for your game by following the steps described in Publishing Your Game Changes.

Step 2. Add page-level configurations to your page

Page-level configuration options allow you to define the parameters of your sign-in button or JavaScript call from <meta> tags in your page. These parameters can be shared by your sign-in and interactive posts methods, which can simplify your code.

A typical set of meta tags for a game using Play Games services might look like this:

<meta name="google-signin-client_id" content="xxxxxxxxxxxxxx.apps.googleusercontent.com" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-callback" content="signinCallback" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/games" />

The value you supply in the "google-signin-client_id" should be your game's OAuth 2.0 client ID mentioned in the previous step.

Please refer to the Google Sign-In client reference for a more complete description of page-level configuration options.

Step 3. Load the client.js library

Load the Google APIs Client Libarary for JavaScript. This library makes it easy for you to communicate with and receive responses from the Games service.

To load the client library, add the following script tag to your page:

<script src="https://apis.google.com/js/client.js"></script>

This loads a script that creates several helpful functions and puts them into a global gapi (short for Google API) object that you can use later.

Alternately, you can load this script asynchronously for better performance.

Step 4. Consider using the Google Sign-In button

The simplest way to add a sign-in button to your page is to implement the HTML-based sign-in button. For implementation details, see Integrating Google Sign-In into your web app on the Google Sign-In documentation.

For many games, however, rendering a button inside its own <div> on top of your game engine can be problematic. In a Flash game, for instance, you probably want to render the sign-in button inside Flash, and then make an externalInterface call to the JavaScript loaded with your page, so that you can sign the user in using Google's JavaScript library.

The remaining instructions on this page show you how to sign in your user and make calls to Google Play games services without relying on the Google Sign-In button.

Step 5. Sign the user in

The gapi client uses OAuth 2.0 to authorize the library to make API calls on behalf of the user.

Once the gapi library has loaded, it first attempts to sign the user in "silently". This call succeeds if the user has already authorized your game in the past and you haven't added any additional scopes.

If this call succeeds, the callback method defined in your google-signin-callback is invoked and an auth object is passed in as the parameter. At this point, you're ready to use the library to make calls against Google's RESTful APIs.

If this call fails, the callback method is invoked and passed an auth object containing an error value of immediate_failed. At this point, your callback method should display a button or link (or object inside your Flash or Unity application) that prompts the user to sign in.

Clicking that button or link should then call gapi.auth.signin(), which will ask the user to sign in to your game in a separate window. The results of this dialog will then be passed to the callback method defined in your google-signin-callback meta-tag.

You might ask why you should go through the trouble of displaying a sign-in link instead of calling gapi.auth.signin() directly. The reason is that the resulting dialog appears in a pop-up window, and if that doesn't happen in response to a user click, it will be blocked by the browser's pop-up blocker.

A typical google-signin-callback method might look like this:

handleAuthResult = function(auth) {
  if (auth && auth.error == null) {
    // Hooray! The user is logged int!
    // If we got here from a sign-in button, we should probably hide it
    hideMyGamesSignInButton();
    loadLeaderboardsAndAchievements();
  } else {
    // Common reasons are immediate_failed and user_signed_out
    if (auth && auth.hasOwnProperty('error')) {
      console.log('Sign in failed because: ', auth.error);
    }
    showMyGamesSignInButton();
  }
};

Note that this callback method is called by the library whether the user signed in silently, or through a pop-up dialog, so this callback should be your single point of entry to start using Google Play games services, no matter how the user signed in.

Step 6. Make calls to the RESTful service

Once the user is signed in, there are two ways you can make RESTful calls using the gapi library:

Option 1: Use the Discovery Service

You can simplify how your client libraries call the Google Play games services by using the Google APIs Discovery Service. To use the Discovery Service for Google Play games services in JavaScript, first load up the Discovery document by making a gapi.client.load call:

      gapi.client.load('games','v1',function(response) {
        // Ready to make calls!
      });

This loads up the Google Play games services Discovery document and inserts Google Play games services-specific objects into gapi.client.games, which you can then use to generate requests to the Google Play games services. Create these requests by calling the appropriate methods within the gapi.client.games object, and then run them by calling execute.

    var request = gapi.client.games.leaderboards.list(
      {maxResults: 5}
    );
    request.execute(function(response) {
      // Do something interesting with the response
    });

A POST call looks similar.

    var request = gapi.client.games.scores.submit(
        {leaderboardId: "abcdegfghijkl",
        score: playerScore}
    );
    request.execute(function(response) {
      // Check to see if this is a new high score
    })

A nice feature of using the Discovery Service is that you can explore the various Games API calls by examining the gapi.client.games object in your JavaScript console:

The GAPI class in the JavaScript console

Option 2: Request the endpoints directly

If you don't want to use the Discovery Service and want to call the endpoints directly, you can create a request using the gapi.client.request method. If you specify a callback in the argument, the request is sent immediately.

A GET call might look like this:

    gapi.client.request({
      path: '/games/v1/leaderboards',
      params: {maxResults: 5},
      callback: function(response) {
        // Do something interesting with the response
      }
    });

A POST call looks like this:

    gapi.client.request({
      path: '/games/v1/leaderboards/abcdefghijkl/scores',
      params: {leaderboardId: 'abcdefghijkl', score: 101},
      method: 'post',
      // You would add a body: {} argument if the method required a request body
      callback: function(response) {
        // Do something interesting with the response
      }
    });

While both options are seen frequently in practice, the first method tends to be slightly more convenient and is generally recommended.

Please see the JavaScript client library reference docs for more information on making calls using the gapi library.

Send feedback about...

Play Games Services for Web
Play Games Services for Web