Access Google IAP protected API from Angular

1
votes

My application has 2 modules

  • Spring boot back-end API
  • Angular front-end (SPA application)

Both were deployed in Google app engine (GAE).

I used Google IAP for authentication. After enabling the IAP is there any way to generate the IAP JWT token for the different users within the organization to authenticate the APIs from the web client.

I tried token generating mechanism using the Service account. But for my scenario, I just want to authenticate and authorize users not service account. I found this reference to enable the web resource access for users, but it is using cookie based authorization. And it is not the recommended way for the application such as angular.

2
google-app-engineauthenticationgoogle-cloud-platformjwtgoogle-iap
It should be possible to authenticate users, but they need to have a Google Account. – guillaume blaquiere
Read this article to see how OAuth Tokens are created. This shows the steps using curl. jhanley.com/google-oauth-2-0-testing-with-curl-version-2 You will want to use OAuth Identity Tokens (OIDC) for IAP authorization. – John Hanley

2 Answers

3
votes

If you're using IAP to protect your backend api, it means your users have a Google Account or an account managed in Cloud Identity.

In your Angular front-end app, you can retrieve JWT token of your user, with Google Sign-In for Websites.

To easily integrate Google Sign-in with Angular, I recommend you to use ng-gapi from Ruben.

Main lines of the workflow :

  • Angular uses ng-gapi with Google Sign-in behind the scene
  • Users are authenticated with their Google Account
  • You're able to retrieve GoogleUser idToken which is a JWT token.
  • Each HttpRequest could be executed with Authorization: Bearer JWT
  • IAP will accept request.

To better understand how to use ng-gapi, check this stackblitz Demo made by creator of lib.

I also suggest you theses resources :

Note that you need to use the OAuth 2.0 Client ID configured by Identity-Aware Proxy for your app, and add the correct Authorized JavaScript origins.

0
votes

Yes, You can generate a JWT token using angular-oauth2-oidc.

Get the default IAP Web App client ID and client secret. Use AuthConfig and redirect to your link after credentials are entered; you can capture the token after they are redirected.

This link has all the details:

https://medium.com/@ishmeetsingh/google-auth-integration-with-angular-5-and-angular-oauth2-oidc-ed01b997e1df

You have told that you tried authenticating from service account. Were you able to generate JWT for service account? I am able to capture the JWT token for individual accounts and use it.

Please give more information on how you authenticated from service account.

Thanks, Bharath