使用 .NET Core Api - Cognito 进行反应

Question

我创建了一个 React 前端，它将调用一组 .NET Core API。 该应用程序使用 AWS Cognito 作为其身份提供商。 我想登录用户，获取访问令牌，然后在 Auth 标头中传递该访问令牌作为每个 .NET Core Api 调用的一部分。

在 Azure 世界中，有一个 MSAL 库，它有助于使整个登录和获取令牌过程变得更加容易。 AWS 有与之对应的吗？

我曾尝试在 AWS 上研究正确的方法，但它似乎并不简单，而且我真的找不到很多这样的例子。

Answer 1

所以 AWS Amplify 是您的一站式解决方案。

1. 首先，安装

   @aws-amplify/ui-react library

   以及

   aws-amplify

   （如果尚未安装）：

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

2. 接下来，打开 src/App.js 并添加身份验证器。

   import React from 'react';
   import { Amplify } from 'aws-amplify';
   
   import { Authenticator } from '@aws-amplify/ui-react';
   import '@aws-amplify/ui-react/styles.css';
   
   import awsExports from './aws-exports';
   Amplify.configure(awsExports);
   
   export default function App() {
     return (
       <Authenticator>
         {({ signOut, user }) => (
           <main>
             <h1>Hello {user.username}</h1>
             <button onClick={signOut}>Sign out</button>
           </main>
         )}
       </Authenticator>
     );
   }
   

3. 现在，为您的应用程序提供 Amplify 配置。在应用程序的入口点（特别是 App.js、index.js、_app.js 或 main.js）中，编写以下代码。

   import { Amplify } from 'aws-amplify';
   
   Amplify.configure({
     Auth: {
       Cognito: {
         //  Amazon Cognito User Pool ID
         userPoolId: 'XX-XXXX-X_abcd1234',
         // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
         userPoolClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
       }
     }
   });
   

4. 接下来参考此answer了解如何使用Amplify库检索AccessToken和IDToken。

参考文献

• https://ui.docs.amplify.aws/react/connected-components/authenticator
• https://docs.amplify.aws/gen1/react/build-a-backend/auth/set-up-auth/

我在这里为 Angular 创建了一个关于类似主题的视频。如果需要，请参阅使用 AWS Amplify 在 Angular 中实施 Amazon Cognito 身份验证