MrStahlfelge/gdx-gamesvcs

GPGS HTML: provide implementation

MrStahlfelge opened this issue · 8 comments

This is a sample web page for accessing GPGS (only works when served on a webserver).
Sign in and out working.

<html>
  <head></head>
  <body>
    <script type="text/javascript">
      function handleClientLoad() {
        // Loads the client library and the auth2 library together for efficiency.
        // Loading the auth2 library is optional here since `gapi.client.init` function will load
        // it if not already loaded. Loading it upfront can save one network request.
        gapi.load('client:auth2', initClient);
      }

      function initClient() {
        // Initialize the client with API key and People API, and initialize OAuth with an
        // OAuth 2.0 client ID and scopes (space delimited string) to request access.
        gapi.client.init({
            clientId: 'xxx',
            scope: 'https://www.googleapis.com/auth/games'
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
      }

      function updateSigninStatus(isSignedIn) {
        // When signin status changes, this function is called.
        // If the signin status is changed to signedIn, we make an API call.
        if (isSignedIn) {
		  document.getElementById('signin-button').style.visibility = 'hidden';
		  document.getElementById('signout-button').style.visibility = 'visible';
          makeApiCall();
        } else {
		  document.getElementById('signin-button').style.visibility = 'visible';
		  document.getElementById('signout-button').style.visibility = 'hidden';
		}
      }

      function handleSignInClick(event) {
        // Ideally the button should only show up after gapi.client.init finishes, so that this
        // handler won't be called before OAuth is initialized.
        gapi.auth2.getAuthInstance().signIn();
      }

      function handleSignOutClick(event) {
	  // einfach geschlossen -> Fehler!
        gapi.auth2.getAuthInstance().signOut();
      }

      function makeApiCall() {
        // Make an API call to the People API, and print the user's given name.
gapi.client.request({
      path: 'games/v1/players/me',
      //params: {maxResults: 5},
      callback: function(response) {
        // Do something interesting with the response
		console.log(response.displayName);
		document.getElementById('signout-button').textContent = "Sign out " + response.displayName;
      }
    });
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
    <button id="signin-button" onclick="handleSignInClick()">Sign In</button>
    <button id="signout-button" onclick="handleSignOutClick()">Sign Out</button>
  </body>
</html>

Note: User is automatically signed in when was signed in before without signing out.

Sign in and out is working, mostof the further implementation is more or less routine piece of work.

https://developers.google.com/games/services/web/api/applications/played must be called for statistics

A tricky part could be cloud save, as Google's documentation is just for reading and writing existing game saves.

Google confirmed that Snapshots can't be created via JS, so the Drive AppDataFolder must be used like the Desktop implementation does: https://developers.google.com/drive/v3/web/appdata

This code is working so far:

Scope for Authentication:
scope: 'https://www.googleapis.com/auth/games https://www.googleapis.com/auth/drive.appdata'

Listing files in appDataFolder:

gapi.client.request({
      path: 'drive/v3/files',
      params: {spaces: 'appDataFolder'},
      callback: function(response) {
        // Do something interesting with the response
		response.files.forEach(function (file) {
           console.log('Found file:', file.name, file.id, file.mimeType);
getAppDataFileContent(file.id);
		   
        });
      }
    });

Downloading file:

gapi.client.request({
      path: 'drive/v3/files/' + fileId,
      params: {alt: 'media'},
      callback: function(response) {
        // Do something interesting with the response
		console.log(response);
		   
        }
    });
};```

Listing and loading gamestates works now.

On Firefox, loading gamestate does not work. Firefox does not follow the redirect given back from the Google API, while Chrome does it automatically.

Possible solution: do not use alt=media, but get the file information and then perform the download via downloadUrl that is given back (example https://gist.github.com/pizzapanther/8241364)

Fixed by using v2 API

Closing this because implementation is in a useable state. All found bugs and the (needed) enhancement for fetching achievements and leaderboards will be done on another issue.