Ionic 3 및 AWS Amplify를 사용해 봅니다(2: Cognito Userpool을 사용한 인증)

(승전) Ionic 3과 AWS Amplify를 사용해보십시오 (1: S3에 배포)

Cognito 설정

이번에는 Amplify를 사용하여 AWS Cognito의 Userpool을 설정하고 Cognito를 사용하여 Ionic 앱에서 Sign Up/Sign In을 수행하는 부분을 실험해 보겠습니다. 마지막으로 만든 앱을 확장합니다.

amplify add auth
 Do you want to use the default authentication and security configuration? (Use arrow keys)
❯ Yes, use the default configuration.
  No, I will set up my own configuration.

여기에서는 기본 설정 사용을 선택합니다. 디폴트란 Cognito Userpool을 사용한 인증에 "email/password를 사용""본인 확인을 위한 난수 코드는 등록한 메일 주소에 송부된다"입니다. 이것 이외의 조합을 하고 싶은 경우는, 「No, I will set up my own configuration」을 선택하면 좋은 것 같습니다만, 아직 시도하고 있지 않습니다.

amplify push

그런 다음 amplify push 명령을 실행하면 AWS 측 설정이 자동으로 실행됩니다. 즐거운.

Ionic 앱 구현

Ionic 측에서는 Amplify 서비스 라이브러리를 로드하고 인증 양식과 인증 후 콜백을 구현하기만 하면 됩니다.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      I'm on S3
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    Logged In={{signedIn}}
  </ion-item> 
  <ion-item *ngIf="signedIn">
    {{user.username}}
  </ion-item> 
  <ion-item *ngIf="signedIn">
    <button ion-button button-full (click)="logout()">Logout</button>
  </ion-item> 
  <ion-item *ngIf="!signedIn">
    <amplify-authenticator></amplify-authenticator>
  </ion-item>
</ion-content>

인증 양식은 Amplify가 제공하는 dialect가 있으므로 그것을 사용해 보겠습니다.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AmplifyService }  from 'aws-amplify-angular';
import { Auth } from 'aws-amplify';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private amplifyService: AmplifyService;
  private signedIn: boolean = false;
  private user: any;

  constructor(public navCtrl: NavController, public amplify: AmplifyService,) {
    this.amplifyService = amplify;

    this.amplifyService.authStateChange$
    .subscribe(authState => {
      this.signedIn = authState.state === 'signedIn';
      if (!authState.user) {
        this.user = null;
      } else {
        this.user = authState.user;
        console.log(this.user);
      }
    })
  }

  logout() {
    Auth.signOut()
    .then(data => {
      console.log(data);
    })
    .catch(err => {
      console.log(err);
    })
  }
}

로직측입니다만, AmplifyService를 읽어 놓고, 인증 후의 콜백을 수신할 수 있도록 해 두는 것과, Logut의 로직을 만드는 것 정도입니까.

실행

amplify push
ionic serve

이제 Ionic 앱을 실행해 보면 ...



당연합니다만 CSS 지정하고 있지 않기 때문에 배치가 이치치입니다. 그런 CSS 파일은 node_modules/@aws-amplify/ui/src/아래에 있으므로 @import

실행해보기

Create Account 링크를 클릭하고 사용자 이름, 이메일 주소 및 비밀번호, 전화번호를 입력하고 Signup 버튼을 클릭하면 등록한 이메일 주소에 확인 코드가 도착하므로 확인 양식에 입력하면 계정 등록이 완료됩니다. 합니다. 그리고는 사용자명과 패스워드를 사용해 로그인이 가능하게 됩니다.

AWS 콘솔에서 Cognito Userpool을 살펴보면 사용자가 등록되었음을 알 수 있습니다.

AWS 주위의 설정이 자동화된 것으로, 서버리스 모바일 앱 개발이 확실히 편해질 것 같은 느낌은 해 왔습니다.

다음 번에는 S3에 대한 액세스 당을 만져 보겠습니다.