Cognito User Pools + Amazon Cognito Identity SDK for JavaScript로 가입

Amazon Cognito User Pools를 사용하여 웹 사이트에 사용자 인증 인프라 만들기 - Qiita
[새 기능] Amazon Cognito에 대망의 사용자 인증 기반 'User Pools'가 추가되었습니다! | Developers.IO
라든지를 보고 있어, 우선 취급할 수 있게 되고 싶었기 때문에 대략 만져 보았습니다.

파일 다운로드



필요한 파일을 DL합니다.
가로 착용 사양이므로 404 오류가 발생하면 원래 리포지토리에서 zip 파일을 DL합시다.
# https://github.com/aws/amazon-cognito-identity-js
$ wget https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.min.js
$ wget https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js

# https://github.com/aws/aws-sdk-js
$ wget https://sdk.amazonaws.com/js/aws-sdk-2.4.10.min.js

# http://momentjs.com/
$ wget http://momentjs.com/downloads/moment.min.js

html 파일 준비


<!DOCTYPE html>
<html>
<head>
    <title>Cognito User Pools Test page</title>
</head>
<body>

    <script src="js/aws-cognito-sdk.min.js"></script>
    <script src="js/amazon-cognito-identity.min.js"></script>
    <script src="js/aws-sdk-2.4.10.min.js"></script>
    <script src="js/moment.min.js"></script>
    <script>
    //ここにコードを書く
    </script>
</body>
</html>

샘플 코드 입력



htps : // 기주 b. 코 m / 아 ws / 아마 젠 - 코 g와 토이 덴치 ty js # 토끼 의 코드를 이동해 봅니다.

방금 전의 코드의 //ここにコードを書く 부분에 돌진해 봅시다.
AWS.config.region = 'us-east-1'; // Configure region in the AWS SDK if you will use it

    AWSCognito.config.region = 'us-east-1'; //This is required to derive the endpoint
    // Need to provide placeholder keys unless unauthorised user access is enabled for user pool
    AWSCognito.config.update({
    accessKeyId: 'anything',
    secretAccessKey: 'anything'
    })

    var poolData = { 
        UserPoolId : 'us-east-1_TcoKGbf7n',
        ClientId : '4pe2usejqcdmhi0a25jp4b5sh3'
    };
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

    var attributeList = [];

    var dataEmail = {
        Name : 'email',
        Value : '[email protected]'
    };
    var dataPhoneNumber = {
        Name : 'phone_number',
        Value : '+15555555555'
    };
    var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
    var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);

    attributeList.push(attributeEmail);
    attributeList.push(attributePhoneNumber);

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

AWSCognito.config.update 에 대한 자격 증명을 설정하고 poolData에 만든 Cognito User Pools에 대한 정보를 넣으십시오. 설정하지 않으면 400 오류가 발생합니다.

동작 결과



방금 html 파일을 브라우저에서 열면 JS가 실행됩니다.
경고 창이 나오지 않으면 등록 완료(의 것)입니다.

성공하면 Cognito 측에서도 사용자가 표시됩니다.


만져보세요



「간단해」 「간단이나」라고 하는 사람이 자꾸 말하고 있었습니다만, 정말로 간단하네요.
아직 유저 등록했을 뿐이므로, 여러가지 만져 보고 회원 사이트와 같은 것을 만들 수 있으면 좋겠다고 생각합니다.

좋은 웹페이지 즐겨찾기