Search code examples
phpgoogle-identity-toolkitoauth-2.0

Google Identity Toolkit API for PHP returns INVALID_CLIENT


I'm trying to get the Google Identity Toolkit API working for a PHP based application.

I've been following the Quick-start Guide from Google available here: https://developers.google.com/identity/toolkit/web/quickstart/php

I've followed the steps exactly (and checked and double checked).

The sign-in button appears on the index.php page. Clicking this redirects to the widget.php page. I can select which account I want to sign in with, and then when returned to the successful sign in page (index.php again) I receive the following error message:

Fatal error: Uncaught exception 'Google_Auth_Exception' with message 'Error refreshing the OAuth2 token, message: '{ "error" : "invalid_client", "error_description" : "The OAuth client was invalid." }'

I've tried recreating the OAuth client within the Google Developer Console. Some search results mentioned to check Email and Project Name fields were completed on the OAuth Consent screen, all of which I've done.

Any help & advise would be greatly appreciated. Note: I'm only using "Google" out of the available providers under the Identity Toolkit API settings.

My index.php page:

<!DOCTYPE html>
<html>
<head>

<!-- 1: Load the Google Identity Toolkit helpers -->
<?php
  set_include_path(get_include_path() . PATH_SEPARATOR . __DIR__ .'/vendor/google/apiclient/src');
  require_once __DIR__ . '/vendor/autoload.php';

  $gitkitClient = Gitkit_Client::createFromFile(dirname(__FILE__) . '/gitkit-server-config.json');
  $gitkitUser = $gitkitClient->getUserInRequest();
?>
<!-- End modification 1 -->

<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<link type=text/css rel=stylesheet href="//www.gstatic.com/authtoolkit/css/gitkit.css" />

<script type=text/javascript>
  window.google.identitytoolkit.signInButton(
    '#navbar',
    {
      widgetUrl: "/gitkit",
      signOutUrl: "/index"
    }
  );
</script>
</head>
<body>
<div id="navbar"></div>

<!-- 2: Print the user information if a signed in user is present -->
<p>
  <?php if ($gitkitUser) { ?>
    Welcome back!<br><br>
    Email: <?= $gitkitUser->getEmail() ?><br>
    Id: <?= $gitkitUser->getUserId() ?><br>
    Name: <?= $gitkitUser->getDisplayName() ?><br>
    Identity provider: <?= $gitkitUser->getProviderId() ?><br>
  <?php } else { ?>
    You are not logged in yet.
  <?php } ?>
</p>
<!-- End modification 2 -->

</body>
</html>

My gitkit.php page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Copy and paste here the client configuration from Developer Console into the config variable -->
<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<link type="text/css" rel="stylesheet" href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
<script type="text/javascript">
  var config =
    {
  "widgetUrl": "http://local.myfakedomain.com/gitkit",
  "signInSuccessUrl": "/",
  "signOutUrl": "/",
  "oobActionUrl": "/",
  "apiKey": "<my-api-key-here>",
  "siteName": "this site",
  "signInOptions": ["password","google"]
}
  ;
  // The HTTP POST body should be escaped by the server to prevent XSS
  window.google.identitytoolkit.start(
      '#gitkitWidgetDiv', // accepts any CSS selector
      config,
      JSON.parse('<?php echo json_encode(file_get_contents("php://input")); ?>')
  );
</script>
<!-- End modification -->

</head>
<body>

<!-- Include the sign in page widget with the matching 'gitkitWidgetDiv' id -->
<div id="gitkitWidgetDiv"></div>
<!-- End identity toolkit widget -->

</body>
</html>

my gitkit-server-config.json file:

{
  "clientId": "<my-client-id-here>",
  "projectId": "<my-project-id-here>",
  "serviceAccountEmail": "<my-serviceAccountEmail-here>",
  "serviceAccountPrivateKeyFile": "<my-p12-KeyFile-location-here>",
  "widgetUrl": "http://local.myfakedomain.com/gitkit",
  "cookieName": "gtoken"
}

Solution

  • I had same problem I solved it by inserting "correct" Service Account Email in the server config code:

    {
      "clientId": "<my-client-id-here>",
      "projectId": "<my-project-id-here>",
      "serviceAccountEmail": "<Correct-serviceAccountEmail-here>",
      "serviceAccountPrivateKeyFile": "<my-p12-KeyFile-location-here>",
      "widgetUrl": "http://local.myfakedomain.com/gitkit",
      "cookieName": "gtoken"
    }
    

    The trick is that serviceAccountEmail is not your google email, to find the correct email go to Credentials then under Service account keys click Manage service accounts link to the right, go to the service in use and note the email field. The email is long and the format will be something like [email protected]