如何在部署于GCP App Engine的静态页面中获取用户信息？

嘿，既然你已经启用了IAP来保护你的App Engine静态站点，那获取登录用户的姓名、邮箱等信息完全可行，而且不用搞太复杂的架构～下面给你两种实用的方案：

因为静态页面的前端JS没法直接拿到IAP注入的服务器请求头，所以我们可以在App Engine里加一个极简的后端脚本，用来读取这些头并返回给前端：

1. 创建后端端点脚本
   比如用Node.js写一个简单的服务（Python/Go都可以，选你熟悉的）：

   const express = require('express');
   const app = express();
   // 托管静态文件（和你的原静态站点整合）
   app.use(express.static('public'));
   
   // 处理用户信息请求的端点
   app.get('/get-user-info', (req, res) => {
     // 从IAP注入的请求头里拿核心信息
     const userEmail = req.headers['x-goog-authenticated-user-email'];
     const userId = req.headers['x-goog-authenticated-user-id'];
     // 处理邮箱格式，去掉IAP添加的前缀
     const cleanEmail = userEmail?.replace('accounts.google.com:', '') || '未获取到';
     res.json({
       email: cleanEmail,
       userId: userId
     });
   });
   
   app.listen(process.env.PORT || 8080);
   

2. 更新app.yaml配置
   确保你的app.yaml里配置了这个后端服务，同时保留静态文件的托管：

   runtime: nodejs18
   handlers:
     # 先处理静态文件请求
     - url: /(.*\.(html|css|js|png|jpg))$
       static_files: public/\1
       upload: public/(.*\.(html|css|js|png|jpg))$
     # 剩下的请求交给后端脚本处理
     - url: /.*
       script: auto
   

3. 前端调用获取信息
   在你的静态页面JS里，通过fetch调用这个端点：

   async function loadUserInfo() {
     try {
       const response = await fetch('/get-user-info');
       const user = await response.json();
       console.log('当前用户信息：', user);
       // 把信息渲染到页面上，比如显示欢迎语
       document.getElementById('welcome').textContent = `欢迎回来，${user.email.split('@')[0]}！`;
     } catch (err) {
       console.error('获取用户信息失败：', err);
     }
   }
   
   // 页面加载时调用
   window.onload = loadUserInfo;
   

如果不想在App Engine里加后端代码，也可以用Cloud Functions来做同样的事：

1. 创建Cloud Function
   写一个HTTP触发的函数，读取IAP的请求头：

   import json
   
   def get_user_info(request):
       # 添加CORS头，允许你的静态站点域名访问
       headers = {
           'Access-Control-Allow-Origin': 'https://your-domain.com',
           'Access-Control-Allow-Methods': 'GET'
       }
       
       # 处理OPTIONS预请求
       if request.method == 'OPTIONS':
           return ('', 204, headers)
       
       # 从请求头获取IAP注入的用户信息
       user_email = request.headers.get('X-Goog-Authenticated-User-Email')
       user_id = request.headers.get('X-Goog-Authenticated-User-ID')
       
       if not user_email:
           return json.dumps({'error': '未通过IAP验证'}), 401, headers
       
       # 处理邮箱格式，去掉前缀
       clean_email = user_email.replace('accounts.google.com:', '')
       return json.dumps({'email': clean_email, 'userId': user_id}), 200, headers
   

2. 配置函数的访问权限
   在Cloud Functions的权限设置里，只允许allAuthenticatedUsers或者你的域内用户访问，确保只有经过IAP验证的请求能调用。

3. 前端调用
   在静态页面的JS里直接调用函数的URL即可：

   async function loadUserInfo() {
     try {
       const response = await fetch('https://your-cloud-function-url');
       const user = await response.json();
       console.log('当前用户信息：', user);
     } catch (err) {
       console.error('获取用户信息失败：', err);
     }
   }
   

如果需要用户的姓名、头像等信息，可以用IAP提供的X-Goog-IAP-JWT-Assertion令牌，调用Google People API的people.get接口：

• 从请求头里拿到这个JWT令牌
• 用这个令牌作为身份凭证，调用https://people.googleapis.com/v1/people/me?personFields=names,emailAddresses
• 解析返回的JSON，提取姓名等信息

注意：需要给你的App Engine服务或者Cloud Functions配置peopleapi.googleapis.com的调用权限。

内容的提问来源于stack exchange，提问作者Janine Rawnsley