从 Angular 访问受 Google IAP 保护的 API

Posted 2023-02-27

技术标签:

【中文标题】从 Angular 访问受 Google IAP 保护的 API【英文标题】：Access Google IAP protected API from Angular 【发布时间】：2020-05-22 04:42:21 【问题描述】：

我的应用程序有 2 个模块

Spring Boot 后端 API Angular 前端（SPA 应用程序）

两者都部署在 Google 应用引擎 (GAE) 中。

我使用 Google IAP 进行身份验证。启用 IAP 后，是否有任何方法可以为组织内的不同用户生成 IAP JWT 令牌，以对来自 Web 客户端的 API 进行身份验证。

我尝试了使用服务帐户的令牌生成机制。但对于我的场景，我只想验证和授权用户而不是服务帐户。我找到了this 引用来为用户启用 Web 资源访问，但它使用的是基于 cookie 的授权。而且对于 angular 等应用来说，这不是推荐的方式。

【问题讨论】：

应该可以对用户进行身份验证，但他们需要有一个 Google 帐户。阅读本文以了解如何创建 OAuth 令牌。这显示了使用 curl 的步骤。 jhanley.com/google-oauth-2-0-testing-with-curl-version-2 您需要使用 OAuth 身份令牌 (OIDC) 进行 IAP 授权。 【参考方案1】：

如果您使用 IAP 保护您的后端 api，这意味着您的用户拥有 Google 帐号或在 Cloud Identity 中管理的帐号。

在您的 Angular 前端应用程序中，您可以使用 Google Sign-In for Websites 检索用户的 JWT 令牌。

为了轻松将Google Sign-in 与Angular 集成，我建议您使用Ruben 中的ng-gapi。

工作流程的主线：

Angular 在幕后使用 ng-gapi 和 Google Sign-in 用户通过其 Google 帐户进行身份验证您可以检索 GoogleUser idToken，这是一个 JWT 令牌。每个 HttpRequest 都可以用Authorization: Bearer JWT 执行 IAP 将接受请求。

为了更好地了解如何使用ng-gapi，请查看这个由lib 的创建者制作的stackblitz Demo。

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

My answer on *** 关于 Angular 无状态身份验证工作流程。如果您使用 IAP，请跳过 Spring Boot JWT 部分。

Google Sign-In for Websites官方文档。

请注意，您需要为您的应用使用Identity-Aware Proxy 配置的OAuth 2.0 Client ID，并添加正确的Authorized JavaScript origins。

【讨论】：

【参考方案2】：

是的，您可以使用 angular-oauth2-oidc 生成 JWT 令牌。

获取默认的 IAP Web App 客户端 ID 和客户端密码。输入凭据后，使用 AuthConfig 并重定向到您的链接；您可以在重定向后捕获令牌。

此链接包含所有详细信息：

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

您告诉过您尝试从服务帐户进行身份验证。您是否能够为服务帐户生成 JWT？我能够为个人帐户捕获 JWT 令牌并使用它。