[AWS] React 에서 Cognito OAuth2 사용하기
- AWS Cognito 활용하기
Amplify 라이브러리 설치
특정 버전을 설치하는 이유는 최선 버전에서 ui 이슈가 있기 때문이다.
1
2
3
npm install @aws-amplify/ui-react^1.2.5 --save
npm install aws-amplify --save
npm install aws-amplify-react@^2.5.4 --save
Amplify 설정 파일 생성
🛠 src/assets/js/amplifyConfig.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const CognitoRegion = 'ap-northeast-2';
const CognitoUserPool = 'ap-northeast-2_xxxxxx';
const CognitoUserPoolClient = 'xxxxxxxx';
const CognitoDomainPrefix = 'toyseven-domain';
const AmplifyConfig = {
Auth: {
region: CognitoRegion,
userPoolId: CognitoUserPool,
userPoolWebClientId : CognitoUserPoolClient,
oauth: {
domain: `${CognitoDomainPrefix}.auth.${CognitoRegion}.amazoncognito.com`,
// scope: ['openid'],
redirectSignIn: `http://localhost:3000`,
redirectSignOut: `http://localhost:3000`,
responseType: `code`
}
}
};
export default AmplifyConfig;
회원가입 페이지 생성
🛠 src/pages/SignUp.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import Amplify, {Auth} from "aws-amplify";
import { AmplifyAuthenticator, withAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";
import amplifyConfig from '../assets/js/amplifyConfig';
Amplify.configure(amplifyConfig);
const currentConfig = Auth.configure();
function SignUp() {
Auth.currentSession().then(session => {
console.log('session : '+JSON.stringify(session));
}).catch(e => {
console.log(e);
});
return (<>
<AmplifyAuthenticator>
<div>
ONLY LOGGED IN USERS CAN SEE THIS
</div>
</AmplifyAuthenticator>
<AmplifySignOut/>
</>);
}
export default SignUp;
라우트 설정
🛠 App.js
1
2
3
import SignUp from'./pages/SignUp';
<Route path='/sign-up' element={<SignUp />} />
OAuth2 로그인 테스트
자세한 Response 값은 브라우저 콘솔에 남기도록 했으니 확인하면 된다.
이메일 인증 테스트
자세한 Response 값은 브라우저 콘솔에 남기도록 했으니 확인하면 된다.
회원가입
정보입력
인증번호 확인
인증번호 입력
회원가입과 동시에 로그인 완료
Leave a comment