使用 FirebaseUI 创建登录页面

要将外部身份与 Identity-Aware Proxy (IAP) 搭配使用，您的应用需要登录页面。IAP 会将用户重定向到此页面进行身份验证，然后用户才能访问安全资源。

本文介绍如何使用 FirebaseUI（一个开源 JavaScript 库）来构建身份验证页面。FirebaseUI 提供了可自定义的元素来帮助减少样板代码，并处理用户登录流程，这些用户使用各种身份提供者登录。

为了更快开始使用，请让 IAP 为您托管界面。这可让您尝试使用外部身份，而无需编写任何其他代码。对于更高级的场景，您还可以从头开始构建您自己的登录页面。此选项较为复杂，但可让您完全控制身份验证流程和用户体验。

准备工作

启用外部身份，并在设置期间选择我将提供自己的界面选项。

安装库

安装 gcip-iap、firebase 和 firebaseui 库。gcip-iap 模块抽象了应用、IAP 和 Identity Platform 之间的通信。firebase 和 firebaseui 库提供了身份验证界面的基础组件。

npm install firebase --save
npm install firebaseui --save
npm install gcip-iap --save

请注意，gcip-iap 模块不适用于 CDN。

然后，您可以在源文件中 import 这些模块。为您的 SDK 版本使用正确的导入：

// Import firebase modules.
import * as firebase from "firebase/app";
import "firebase/auth";
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.
import * as ciap from 'gcip-iap';