Amazon Cognito 인증 서비스 만들기

Amazon Cognito 도전기

Cognito는 아마존의 신규 기능으로 빠른 시간 안에 회원 가입 데이터베이스를 만들 수 있도록 해준다. 로그인과 로그아웃을 위한 인증 서버를 몇 번의 클릭으로 구성할 수 있고 가입할 때 필요한 속성과 비밀번호 입력 방식 등 여러가지 설정이 가능하다. 처음이니까 이 참고자료를 자꾸 읽어보면서 진행했다. 사실 아직 신규 프로젝트로 어떤 서버를 사용하게 될지 몰라 이것저것 살펴보던 중 이러한 부분이 있다고 해서 일단 테스트해보기로 했다. 환경은 virtualbox에 올린 가상컴퓨터 우분투에 ssh로 접근해 진행했다.

1. 신규 사용자 풀 생성하기

① 생성해둔 아마존 계정으로 로그인을 하고 왼쪽위의 Services를 누르면 여러가지 서비스들이 보인다.

그 중에서 Mobile Services > Cognito를 선택한다.

② 사용자 풀 생성 으로 이동하여 생성을 시작한다.

표준 속성은 생성할 시 선택하고 생성 후에는 변경할 수 없다. 테스트할 때는 하나 또는 둘 정도를 선택하는 것이 편하다. 암호 강도 또한 숫자, 특수 문자, 대문자, 소문자를 모두 선택하는 것이 보안에는 좋으나 난 간단하게 숫자, 소문자 정도로 선택했다.

③ 계속 기본으로 두고 다음을 선택했다.
④ 앱 클라이언트에서 클라이언트를 생성하고 이름 등을 설정한다.

여기에서 기본으로 클라이언트 보안키 생성가 체크되어 있는데 참고자료에서 제공하는 첫번째 예시는 보안키를 체크하지 않기 때문에 인증 오류로 많은 시간을 허비했다. 그냥 좀 멍청했다. 일단 기능을 이용해보고 테스트해보려면 체크 해제하는 것을 추천한다.
⑤ 생성이 끝났다. 생성 후에 중요한 부분은 설정의 맨위에 있는 풀 ID와 앱 클라이언트 부분 오른쪽의 연필 모양을 누르면 나오는 앱 클라이언트 ID 이다. 이 두가지는 뒤에서 사용된다.

2. 회원가입 테스트하기

① 많이 헤맸던 부분이다. 예제를 먼저 이용해 본다. 원하는 위치로 가서 https://github.com/aws/amazon-cognito-identity-js의 예제코드를 다운받는다.

$ git clone https://github.com/aws/amazon-cognito-identity-js 
$ cd /examples/babel-webpack/src 
$ vi config.js

② config.js에서 필요한 것이 풀ID 와 클라이언트ID이다. region부분은 내가 선택한 지역을 입력하고 나는 서울로 설정되어 있기 때문에 'ap-northeast-2'라고 적었다.

/*config.js*/
export default{
   region: '__________________' ,
   IdentityPoolId: '',
   UserPoolId: '__________________',
   ClientId: '___________________',
}

③ package.json에 내용을 추가한다.

$ cd ..
$ vi package.json

package.json

{ 
  "private" : true
  } 

④ 이제 예제코드를 실행할 수 있는 환경을 만든다. 이는 아까 예제코드가 있는 깃허브를 보고 따라했다.

경로는 ./amazon-cognito-identity-js/examples/babel-webpack 에서 진행했다. 다른 곳에서 하면 모듈을 인식하지 못한다.

$ sudo apt-get install nodejs
$ npm install --save-dev webpack json-loader
$ npm install --save amazon-cognito-identity-js
$ npm install --save aws-sdk
$ npm install

간혹 export를 인식하지 못하는 경우가 있는데 나는 npm install을 다시 한번 실행함으로써 해결했다. 제대로 설치되지 않았나보다.

⑤ 이제 entry를 할 javascript를 생성한다.

경로는 ./amazon-cognito-identity-js/examples/babel-webpack/src 에서 진행했다. 어디든 상관 없을 것 같은데, 예제가 이미 src에 main.jsx로 생성되어 있기에 그대로 했을 뿐이다. entry를 수정하려면 ./amazon-cognito-identity-js/examples/babel-webpack 의 webpack.config.babel.js 에 가서 수정해주면 된다.

⑥ join.js를 생성할 것이기에 entry를 './src/main.jsx 에서 './src/join.js' 로 수정했다.

/*join.js*/
var AmazonCognitoIdentity = require('amazon-cognito-identity-js');
var CognitoUserPool = AmazonCognitoIdentity.CognitoUserPool;
var CognitoUserAttribute = AmazonCognitoIdentity.CogitoUserAttribute;

var poolData = {
       UserPoolId : '_________________', // Your user pool id here
       ClientId : '__________________' // Your client id here
   };

var userPool = new CognitoUserPool(poolData);
var attributeList = [];
var dataEmail = {
        Name : 'email',
        Value : 'dearjiya@domain.com'
    };

var dataGender = {
   Name : 'gender',
        Value : 'female'
    };

var attributeEmail = new CognitoUserAttribute(dataEmail);
var attributeGender = new CognitoUserAttribute(dataGender);

attributeList.push(attributeEmail);
attributeList.push(attributeGender);

userPool.signUp('bellayang', 'Bellayang1', attributeList, null, function(err, result){   //username: bellayang, userpwd: Bellayang1
   if (err) {
          //alert(err);
      console.log(err.message);
               return;
        }
        cognitoUser = result.user;
        console.log('user name is ' + cognitoUser.getUsername());
});

이제 거의 다 온듯하다. ./amazon-cognito-identity-js/examples/babel-webpack 이 경로에서 npm run build 를 해보았다.

빌드가 성공적으로 되었고, 이를 실행해보았다.

로그가 찍혔음을 확인할 수 있다.

사용자 풀에서 확인해보았다. 성공적으로 들어갔다.
무턱대고 cognito를 사용해보았는데, 사실 자료가 좀 부족한 느낌이였고 이래저래 많이 고생했다.