AWS cognito를 사용하여 React SPA에서 인증 기능 가져오기

현재 인증🧐

이제는 스스로 인증 기능을 실현하는 시대가 아니다.
이 AWS 센스는 "어떤 앱이든 보편적으로 사용되지만 실질적 가치는 없다"는 식의 작업을 "부가가치가 생기지 않는 중노동"이라고 정의했다.
이를 최소화해 엔지니어들이 본질적인 고객 가치와 연결된 업무에 전념할 수 있도록 하는 것이 트렌드다.
어렵게 리액트에서 첫 스파를 했는데, 그전부터 신경 쓰던 AWS 코그니토를 겸해 인증 기능을 덧붙여봤다.
대략적인 도입이지만 기본적인 사용법이라면 아주 간단하고 안전하게 이루어졌을 거예요!!
예전에 했던 스파에 대해서 기사에서여기. . Rails API에 백엔드가 설치된 React SPA와 관련해서는 내용이 인상적일 수 있다고 생각합니다. 잘 부탁드립니다.🙏
이번에 우리는 이 응용 프로그램에 대해 인증을 진행하였다.
창고 공개🙌
https://github.com/tatsuro-m/react_rails_api_frontend_add_auth
생각지도 못한 부분도 많으니 지적해 주십시오🏄‍♂️

실천하다

디테일한 부분여기 기사.에 관해서는 참고 가치가 있어서 이해하기 쉽다고 생각합니다.
기본 프로세스로

서명, 로그인, 로그아웃 등 필요한 구성 요소 만들기

루트 구성 요소 가져오기(이번이라면 App.js 괜찮은 것 같아

이런 느낌이야.
AWS에서 제공하는 SDK를 사용하면 코그니토의 API를 간단하게 두드릴 수 있다.
여기서 두드리는 API는 로그인, 로그아웃, 서명 등의 종류가 있다.
API에 의해 결정된 형식으로 사용자가 화면에서 입력한 이메일과password 등을 보내면 OK!!
사용하는 SDK는 Amplify에서 사용합니다.그중에 코그니토가 쓰는 부분을 이용한 느낌이에요.
https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js
이것을 사용하면 코그니토의 API에 쉽게 접근할 수 있습니다.
자세한 상황은 창고를 참조하시고 먼저 AWS 화면부터 사용자 수영장, 응용 클라이언트 및 ID 수영장을 설정하십시오.
그럼 다음 3가지 인증 정보가 지급됩니다.

애플리케이션 클라이언트 ID

사용자 수영장 ID

ID 풀 ID

세 가지 정보를 사용합니다.
React 애플리케이션src 아래에 이러한 인증 정보를 기록할 파일을 준비했습니다.
awsConfiguration.js

const awsConfiguration = {
  region: "ap-northeast-1",
  IdentityPoolId: "********",
  UserPoolId: "˜*******",
  ClientId: "*********",
};

export default awsConfiguration;

인증 정보이기 때문에git관리는필수!!
.gitignore

src/awsConfiguration.js

나중에 API를 쳐서 결과에 따라 state를 변경하면 OK입니다.😁
인상이 쉽게 떠오르도록 사인 부분만 쓰게 해주세요.
SignUp.js

//省略

  signUp() {
    const attributeList = [
      new CognitoUserAttribute({
        Name: "email",
        Value: this.state.email,
      }),
    ];
    this.userPool.signUp(
      this.state.email,
      this.state.password,
      attributeList,
      [],
      (err) => {
        if (err) {
          console.log(err);
          this.setState({ error: true });
          return;
        }
        this.setState({
          email: "",
          password: "",
          success: true,
        });
      }
    );
  }

//省略

이 함수는 서명 구성 요소에서 발췌한 것이다.
사용자가 등록하고 싶은 인증 정보 (이번에는 이메일 &pass) 를 입력하고 서명 단추를 눌렀을 때 시작하는 함수를 입력하십시오.

알았어. this.userPool.signUp 이 함수를 사용했어.
이것은 SDK에서 제공한 것이다.이름과 같이 서명 API를 두드리는 함수입니다.userPool는 방금 설정한 인증 정보를 사용하여 만든 사용자 수영장의 실례이다.

  get userPool() {
    return new CognitoUserPool({
      UserPoolId: awsConfiguration.UserPoolId,
      ClientId: awsConfiguration.ClientId,
    });
  }

CognitoUserPool(SDK 제공)는 사용자 수영장 ID와 클라이언트 ID를 통해 실례를 만든다.
그 사용자의 수영장에 서명하고 있습니다.
로그인에 성공하면 저장된 로그인 상태의state를 업데이트합니다.
구성 요소의 렌더링은 로그인 없이 로그인 구성 요소를 표시하는 조건부 렌더링기입니다.

  render() {
    if (this.state.currentUser) {
// ログイン時に表示したい画面
      } else {
        return (
          <div className="App">
            <SignIn onSuccess={this.handleSignInSuccess} />
          </div>
        );
// 略

App.js는 현재 인증 사용자의 함수를 획득하여 초기화한 것이다.

currentUser: this.userPool.getCurrentUser()

이것도 SDK에서 제공합니다.
이렇게 하면 화면을 다시 불러와도 로그인할 때의 화면이 표시됩니다.
이러한 느낌은 로그인의 유무에 따라 나타나는 구성 요소를 바꾸었다🙌

덤

이런 느낌으로 state 관리에 로그인한 코드가 있는지 없는지를 실시했지만 나중에 어리석은 행동으로 판명되었다😅
AWS씨의 생각에 따라 이렇게 더 좋은 사용 방법은 더욱 간단하게 실현되었다.
여기.의 보도를 참고하였다.
정식 창고에도 써있어요.
React용 확장 라이브러리state.currentUser도 사용할 수 있습니다.
UI를 사용하는 프로그램 라이브러리도 넣으면 행복할 거예요.

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

이 기능을 사용하는 경우 로그인할 때만 애플리케이션 경로를 표시하는 필수 조건은 다음과 같습니다.

import { withAuthenticator } from '@aws-amplify/ui-react';
export default withAuthenticator(App);

이것만 완료🧐aws-amplify-react에 랩 앱 경로만 있으면 된다.
로그아웃 버튼도 준비되어 있습니다.
이번에 API를 혼자 찍었는데 필요 없을 것 같아요.withAuthenticator() 구성 요소만 사용합니다.

import { AmplifySignOut } from '@aws-amplify/ui-react';
<AmplifySignOut />

끝.
안녕히 가세요.
그나저나 이런 기능은 리액트뿐 아니라 뷰에서도 사용할 수 있다.
프레임에 맞는 라이브러리를 삽입하면 됩니다.
안녕히 가세요.
이런 느낌으로 한마디로'부가가치가 생기지 않는 중노동'을 배제하겠다는 결심이 스며들었다.
점점 편해지네요!!

끝맺다

인증 기능이 요즘 유행하는 건 아닌 것 같은데 코그니토를 사용해 본 적이 없는 분들이 많죠?
어떤 프로그램이든 정답은 아니지만, 강력한 선택은 옳은 것 같다.
누군가의 참고가 된다면 정말 기쁠 거예요!!
참고 자료

https://qiita.com/y4u0t2a1r0/items/afe7a807604a1358492a

https://qiita.com/saki-engineering/items/b327f93fe7f027913bd

https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js

https://github.com/aws-amplify/amplify-js