React对接.NET Core API：AWS Cognito认证及MSAL替代工具咨询

AWS 有直接对标 MSAL 的工具，AWS Amplify Auth 是最推荐的选择——它封装了 Cognito 的登录、令牌获取、自动刷新、令牌存储等全套逻辑，和 MSAL 的定位一致，无需自己处理底层认证流程。如果不想引入完整 Amplify 库，也可以用AWS SDK for JavaScript v3直接调用 Cognito API（但需手动管理令牌生命周期）。

下面是基于 React 前端 + .NET Core API 的完整实现步骤：

一、React 前端集成 Amplify Auth #

1. 安装依赖 #

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

2. 配置 Amplify #

在项目入口文件（如 App.js 或 index.js）中配置 Cognito 信息：

import { Amplify } from 'aws-amplify';

// 手动配置（无需 Amplify CLI）
Amplify.configure({
  Auth: {
    region: '你的Cognito区域（如us-east-1）',
    userPoolId: '你的用户池ID',
    userPoolWebClientId: '你的用户池应用客户端ID',
    mandatorySignIn: true,
    authenticationFlowType: 'USER_PASSWORD_AUTH' // 匹配你的Cognito认证流程
  }
});

3. 实现登录功能 #

快速用预构建组件

Amplify 提供开箱即用的登录/注册UI，几行代码搞定：

import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return <div>你的应用内容</div>;
}

export default withAuthenticator(App);

自定义登录逻辑

如果需要自定义UI，直接调用 Amplify Auth API：

import { Auth } from 'aws-amplify';
import { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      await Auth.signIn(username, password);
      // 登录成功后自动存储令牌，后续可通过Auth API获取
      const session = await Auth.currentSession();
      const accessToken = session.getAccessToken().getJwtToken();
      localStorage.setItem('accessToken', accessToken); // 可选：手动存到本地
    } catch (err) {
      console.error('登录失败:', err.message);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="用户名"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

export default LoginForm;

4. API 调用自动携带令牌 #

封装请求工具，自动在请求头加入 Authorization：

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

const apiClient = axios.create({ baseURL: '你的.NET Core API地址' });

// 请求拦截器：自动添加令牌
apiClient.interceptors.request.use(
  async (config) => {
    const session = await Auth.currentSession();
    config.headers.Authorization = `Bearer ${session.getAccessToken().getJwtToken()}`;
    return config;
  },
  (err) => Promise.reject(err)
);

// 调用示例
apiClient.get('/api/protected-data')
  .then(res => console.log(res.data))
  .catch(err => console.error('API调用失败:', err));

Amplify 会自动处理令牌过期刷新，无需手动干预。

二、.NET Core API 验证 Cognito 令牌 #

1. 安装依赖 #

dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer

2. 配置认证中间件 #

在 Program.cs 中添加 JWT 验证配置：

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;

var builder = WebApplication.CreateBuilder(args);

// 添加Cognito JWT认证
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddJwtBearer(options => {
    options.Authority = "https://cognito-idp.{你的区域}.amazonaws.com/{你的用户池ID}";
    options.TokenValidationParameters = new TokenValidationParameters {
      ValidateIssuer = true,
      ValidIssuer = "https://cognito-idp.{你的区域}.amazonaws.com/{你的用户池ID}",
      ValidateAudience = true,
      ValidAudience = "你的用户池应用客户端ID", // 匹配前端使用的客户端ID
      ValidateLifetime = true
    };
  });

builder.Services.AddAuthorization();

var app = builder.Build();

// 启用认证和授权
app.UseAuthentication();
app.UseAuthorization();

// 保护API端点
app.MapGet("/api/protected-data", () => "仅登录用户可见的数据")
  .RequireAuthorization();

app.Run();

三、轻量替代方案：AWS SDK for JavaScript v3 #

如果不想引入 Amplify，可直接用 AWS SDK 调用 Cognito API，但需手动管理令牌刷新：

1. 安装依赖 #

npm install @aws-sdk/client-cognito-identity-provider

2. 登录获取令牌 #

import { CognitoIdentityProviderClient, InitiateAuthCommand } from "@aws-sdk/client-cognito-identity-provider";

const client = new CognitoIdentityProviderClient({ region: '你的区域' });

const login = async (username, password) => {
  const command = new InitiateAuthCommand({
    AuthFlow: "USER_PASSWORD_AUTH",
    ClientId: "你的用户池应用客户端ID",
    AuthParameters: { USERNAME: username, PASSWORD: password }
  });

  try {
    const res = await client.send(command);
    const { AccessToken, RefreshToken } = res.AuthenticationResult;
    localStorage.setItem('accessToken', AccessToken);
    localStorage.setItem('refreshToken', RefreshToken);
    return res;
  } catch (err) {
    console.error('登录失败:', err);
  }
};

令牌过期时，需调用 InitiateAuthCommand 并使用 REFRESH_TOKEN_AUTH 流程刷新令牌。

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