npm i @aws-amplify/ui-react aws-amplify| 앱 개발자 | | 사용자 풀을 구성합니다. | 다음 예에 따라 `aws-exports.js` 파일을 생성하고 `src` 폴더에 저장합니다. 이 파일은 다음 정보를 포함해야 합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)
// replace the user pool region, id, and app client id details| 앱 개발자 | | Amplify 서비스를 가져오고 구성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | 앱 개발자 | | 인증자 UI 구성 요소를 추가합니다. | `Authenticator` UI 구성 요소를 표시하려면 애플리케이션의 진입점 파일(`App.js`)에 다음 코드 줄을 추가합니다.
const awsmobile = {
"aws_project_region": "put_your_region_here",
"aws_cognito_region": "put_your_region_here",
"aws_user_pools_id": "put_your_user_pool_id_here",
"aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}
export default awsmobile;
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';예시 코드 스니펫은 구성 요소의 사전 구축된 테마를 사용할 때 필요한 `Authenticator` UI 구성 요소와 Amplify UI styles.css 파일를 가져옵니다.function App() {
return (
{({ signOut, user }) => (
Welcome {user.username}
)}
);
}예시 `App.js` 파일은 이 패턴의 [추가 정보](#authenticate-react-app-users-cognito-amplify-ui-additional) 섹션을 참조하세요. | 앱 개발자 |
| (선택 사항) 세션 정보를 검색합니다. | 사용자가 인증되면 Amplify 클라이언트에서 해당 세션에 대한 데이터를 검색할 수 있습니다. 예를 들어, 사용자 세션에서 JSON 웹 토큰(JWT)을 검색하여 해당 세션의 요청을 백엔드 API로 인증할 수 있습니다.import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString(); | 앱 개발자 |
## 문제 해결
| 문제 | Solution |
| --- | --- |
| 신규 사용자는 애플리케이션에 가입할 수 없습니다. | 다음과 같이 사용자가 사용자 풀에 등록할 수 있도록 Amazon Cognito 사용자 풀이 구성되어 있는지 확인하세요.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| v5에서 v6로 업그레이드한 후 인증 구성 요소 작동이 중지되었습니다. | `Auth` 범주는 Amplify v6에서 기능적 접근 방식 및 명명된 파라미터로 이동했습니다. 이제 `aws-amplify/auth` 경로에서 직접 기능 API를 가져와야 합니다. 자세한 내용은 Amplify 설명서의 [v5에서 v6로 마이그레이션](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/)을 참조하세요. |
## 관련 리소스
+ [Amazon Cognito 시작하기](https://aws.amazon.com/cognito/getting-started/)(AWS 웹 사이트)
+ [새로운 React 앱 생성](https://reactjs.org/docs/create-a-new-react-app.html)(React 문서)
+ [Amazon Cognito란 무엇입니까?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (Amazon Cognito 설명서)
+ [Amplify UI 라이브러리](https://ui.docs.amplify.aws/)(Amplify 설명서)
## 추가 정보
`App.js` 파일에 다음 코드를 포함해야 합니다.
```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
return (
Welcome {user.username}
Your token is: {token}