403 error at Google Pay for Passes Integration with a React application

Question

I am actually doing this question because the google documentation does not work for me. I am doing this integration in a React JS app with NextJS. My question is about an error while a request is made to get the wallet object, I will explain my steps.

Firstly I put the <script src="https://apis.google.com/js/platform.js" type="text/javascript"></script> on the page _document.js
I followed the steps in this google developer page to connect my app to rest API and put the code in _app.js to initialize the requests at the same time the app was loading

P.S. I choose to get the token manually because there is no kind of lib that helps me to reach this connection

At that point my _app.js page looked like this:

componentDidMount() {
  ...
  gapi.load('client', this.start);
}

start() {
  const payload = {
    iss: "my_service_account.iam.gserviceaccount.com", 
    aud: 'google',
    typ: 'savetoandroidpay',
    iat: 1368029586,
    payload: {
      webserviceResponse: {
        result: 'approved',
        message: 'Success.'
      },
      eventTicketClasses: [{}],
      eventTicketObjects: [{}],
    },
    origins : ['http://localhost:3000']
  }



  var GoogleAuth
  gapi.client.init({
    'apiKey': "my_api_key",
    'clientId': 'my_client_id.apps.googleusercontent.com',
    'scope': 'https://www.googleapis.com/auth/wallet_object.issuer'
  }).then(function () {
    gapi.client.request({
      'path': 'https://walletobjects.googleapis.com/walletobjects/v1/jwt/',
      'method': 'POST',
      'body': payload
    }).then(function(resp) {
      console.log('result', resp )
    });
  });
};

P.S. "my_variables were caught on console credentials""

My first auth request to https://www.googleapis.com/auth/wallet_object.issuer was returning with status 200 and an object response looked like:

Response Object
My second request https://walletobjects.googleapis.com/walletobjects/v1/loyaltyClass to get the JWT to put in the Google Pay for Passes Button returned 403and the message Request had insufficient authentication scopes.

P.S. At this point, I don’t know what to do, because all that I’ve done I haven’t found anywhere, I mean about forums. I spent a lot of time doing these few things, I’m very frustrated because it’s supposed to be easy. Anyway

When I got stuck in that part, I tried to put the `Google Pay for Passes Button 'on the screen to see if any JWT would be able to plot the button on the screen.
I created a simple page to test called test.js
I used this code to try and I made it!

P.S. I am just an Intern so at this point I was very happy to have done this, I felt like a Senior Engineer

P.S. At this point that I am writing, all that I know is that I need the token that comes from https://walletobjects.googleapis.com/walletobjects/v1/jwt/ to put it on the button for authentication, I mean, I plot the button on the screen but when I click on it this happens:

[My return][5]

This is all I know. If I am very wrong so please tell me
English is not my native language, sorry for my mistakes

Thanks for your attention. Regards

Angel Angel · Accepted Answer · 2020-07-13T20:08:03

To create a JWT, you must take the payload-

Your payload should look like

{
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetoandroidpay",
  "iat": 1368029586,
  "payload": {
    "eventTicketClasses": [{
      ... //Event ticket Class JSON
    }],
    "eventTicketObjects": [{
      ... //Event ticket Object JSON
    }],
    "flightClasses": [{
      ... //Flight Class JSON
    }],
    "flightObjects": [{
      ... //Flight Object JSON
    }],
    "giftCardClasses": [{
      ... //Gift card Class JSON
    }],
    "giftCardObjects": [{
      ... //Gift card Object JSON
    }],
    "loyaltyClasses": [{
      ... //Loyalty Class JSON
    }],
    "loyaltyObjects": [{
      ... //Loyalty Object JSON
    }],
    "offerClasses": [{
      ... //Offer Class JSON
    }],
    "offerObjects": [{
      ... //Offer Object JSON
    }],
    "transitClasses": [{
      ... //Transit Class JSON
    }],
    "transitObjects": [{
      ... //Transit Object JSON
    }]
  },
  "origins": ["http://baconrista.com", "https://baconrista.com"]
}

and create a signed jwt with it.

For example with Python:

jwt = {
  'iss': config.SERVICE_ACCOUNT_EMAIL_ADDRESS,
  'aud': 'google',
  'typ': 'savetoandroidpay',
  'iat':  int(time.time()),
  'payload': {
    'webserviceResponse': {
      'result': 'approved',
      'message': 'Success.'
    },
    'eventTicketClasses': [], # Event ticket classes
    'eventTicketObjects': [], # Event ticket objects
    'flightClasses': [],      # Flight classes
    'flightObjects': [],      # Flight objects
    'giftCardClasses': [],    # Gift card classes
    'giftCardObjects': [],    # Gift card objects
    'loyaltyClasses': [],     # Loyalty classes
    'loyaltyObjects': [],     # Loyalty objects
    'offerClasses': [],       # Offer classes
    'offerObjects': [],       # Offer objects
    'transitClasses': [],     # Transit classes
    'transitObjects': []      # Transit objects
  },
  'origins' : ['http://baconrista.com', 'https://baconrista.com']
}

// Generate the Save to Android Pay Jwt
signer = crypt.Signer.from_string(app_key)
signed_jwt = crypt.make_signed_jwt(signer, jwt)
response = webapp2.Response(signed_jwt)

Then you can insert it to the API and open the url that API returns.

403 error at Google Pay for Passes Integration with a React application

1 Answers