从Angular访问受Google IAP保护的API [英] Access Google IAP protected API from Angular

问题描述

我的应用程序有2个模块

My application has 2 modules

• Spring boot后端API
• 有角前端(SPA应用程序)

两者均部署在 Google应用引擎(GAE)中.

我使用 Google IAP 进行身份验证.启用 IAP 后，可以为组织内的不同用户生成 IAP JWT令牌，以从Web客户端对API进行身份验证.

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.

我尝试使用服务帐户生成令牌.但是对于我的情况，我只想认证和授权用户，而不是服务帐户.我找到了此参考，以为用户启用网络资源访问，但是它使用基于cookie的授权.这不是推荐的应用方式，例如角度.

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.

推荐答案

如果您使用的是 IAP 保护您的后端api，这意味着您的用户拥有Google帐户或通过Cloud Identity管理的帐户.

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.

在Angular前端应用中，您可以使用网站的Google登录.

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

为了轻松将 Google登录与Angular集成，我建议您使用 Ruben 中的> ng-gapi .

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

工作流程的主要内容:

• Angular在后台使用 ng-gapi 和 Google登录
• 用户已通过其Google帐户进行身份验证
• 您可以检索作为JWT令牌的GoogleUser idToken .
• 每个HttpRequest都可以通过 Authorization:Bearer JWT
执行
• IAP将接受请求.

要更好地了解如何使用 ng-gapi ，请检查此由lib的创建者制作的stackblitz演示.

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

我还建议您使用这些资源:

I also suggest you theses resources :

• 我在Stackoverflow上的答案关于无状态身份验证工作流的答案.如果您使用的是IAP，只需跳过Spring Boot JWT部分.

• My answer on Stackoverflow about Angular stateless authentication workflow. Just skip the Spring Boot JWT part if you're using IAP.

网站的Google登录官方文档.

请注意，您需要为应用程序使用由 Identity-Aware Proxy 配置的 OAuth 2.0客户端ID ，并添加正确的授权JavaScript来源.

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.

这篇关于从Angular访问受Google IAP保护的API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！