Vue JS+Flask+AWS Cognito：认证后API调用及令牌验证问询

一、Vue.js 端实现AWS Cognito认证与API调用 #

1. 依赖安装与初始化 #

使用AWS官方Amplify库快速集成Cognito：

npm install aws-amplify @aws-amplify/ui-vue

在main.js中配置Amplify（替换为你的Cognito实际信息）：

import { createApp } from 'vue'
import App from './App.vue'
import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue/styles.css'
import { AmplifyAuthUI } from '@aws-amplify/ui-vue'

Amplify.configure({
  Auth: {
    region: '你的AWS区域',
    userPoolId: '你的Cognito用户池ID',
    userPoolWebClientId: '你的Cognito应用客户端ID',
    authenticationFlowType: 'USER_PASSWORD_AUTH'
  }
})

const app = createApp(App)
app.use(AmplifyAuthUI)
app.mount('#app')

2. 快速实现认证UI #

在Vue组件中直接使用Amplify封装的认证组件，一键生成登录/注册界面：

<template>
  <amplify-authenticator>
    <template v-slot:authenticated="{ user, signOut }">
      <div>
        <p>欢迎, {{ user.username }}</p>
        <button @click="callProtectedAPI">调用受保护API</button>
        <button @click="signOut">退出登录</button>
      </div>
    </template>
  </amplify-authenticator>
</template>

3. 携带JWT调用Flask API #

封装API调用逻辑，自动从Amplify获取会话Token并注入请求头：

import { Auth } from 'aws-amplify'
import axios from 'axios'

const apiClient = axios.create({
  baseURL: '你的Flask后端地址',
})

// 请求拦截器：自动添加Authorization头
apiClient.interceptors.request.use(async (config) => {
  const session = await Auth.currentSession()
  const idToken = session.getIdToken().getJwtToken()
  config.headers.Authorization = `Bearer ${idToken}`
  return config
})

// API调用示例
async function callProtectedAPI() {
  try {
    const response = await apiClient.get('/protected-endpoint')
    console.log('API响应:', response.data)
  } catch (error) {
    console.error('API调用失败:', error)
  }
}

二、Flask后端验证AWS Cognito JWT令牌 #

1. 依赖安装 #

pip install flask flask-jwt-extended requests

2. 实现JWT验证逻辑 #

Cognito的JWT采用RSA签名，需从AWS获取公钥完成验证，以下是完整Flask配置代码：

from flask import Flask, jsonify
from flask_jwt_extended import (
    JWTManager, jwt_required, get_jwt_identity, get_jwt
)
import requests
from jose import jwk, jwt
from jose.utils import base64url_decode

app = Flask(__name__)
# 配置Cognito信息
app.config['COGNITO_USER_POOL_ID'] = '你的Cognito用户池ID'
app.config['COGNITO_APP_CLIENT_ID'] = '你的Cognito应用客户端ID'
app.config['AWS_REGION'] = '你的AWS区域'
app.config['JWT_ALGORITHM'] = 'RS256'

jwt_manager = JWTManager(app)

# 缓存Cognito公钥，避免重复请求
cognito_keys = requests.get(
    f"https://cognito-idp.{app.config['AWS_REGION']}.amazonaws.com/{app.config['COGNITO_USER_POOL_ID']}/.well-known/jwks.json"
).json()['keys']

# 根据JWT的kid匹配对应公钥
@jwt_manager.decode_key_loader
def decode_key_callback(jwt_header, jwt_payload):
    kid = jwt_header['kid']
    key_index = next(i for i, key in enumerate(cognito_keys) if key['kid'] == kid)
    return jwk.construct(cognito_keys[key_index])

# 验证令牌的发行者与受众
@jwt_manager.additional_claims_loader
def validate_token_claims(jwt_payload):
    expected_iss = f"https://cognito-idp.{app.config['AWS_REGION']}.amazonaws.com/{app.config['COGNITO_USER_POOL_ID']}"
    if jwt_payload['iss'] != expected_iss or jwt_payload['aud'] != app.config['COGNITO_APP_CLIENT_ID']:
        raise ValueError('无效的令牌发行者或受众')
    return {}

# 提取JWT中的用户身份
@jwt_manager.user_lookup_loader
def get_user_from_token(_jwt_header, jwt_data):
    return jwt_data['cognito:username']

# 受保护API路由示例
@app.route('/protected-endpoint', methods=['GET'])
@jwt_required()
def protected_endpoint():
    current_user = get_jwt_identity()
    return jsonify(message=f"Hello, {current_user}! 这是受保护的API响应")

if __name__ == '__main__':
    app.run(ssl_context='adhoc')  # 开发环境临时启用HTTPS，生产环境需配置正式证书

三、核心安全注意事项 #

• 强制HTTPS：生产环境必须通过HTTPS传输所有请求，防止JWT令牌被窃听或篡改。
• 令牌存储：前端优先使用sessionStorage存储令牌（关闭页面即失效），降低XSS攻击风险；如需持久化登录，可配合后端实现HttpOnly Cookie+刷新令牌机制。
• 最小权限原则：Cognito应用客户端仅配置必要的OAuth范围（如openid、email），避免过度授权。
• 令牌过期策略：设置合理的令牌过期时间（Cognito默认1小时），并实现刷新令牌逻辑，减少用户重复登录操作。

简易高层系统设计说明 #

Vue.js 前端 ←→ AWS Cognito ←→ Flask 后端
1. 用户在Vue前端通过Amplify组件发起登录/注册请求
2. AWS Cognito完成身份验证，返回JWT令牌（ID Token/Access Token）
3. Vue前端在API请求中携带JWT令牌，通过HTTPS发送至Flask后端
4. Flask后端验证JWT的签名、有效期、发行者及受众，验证通过后返回API响应

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