[Amazon Cognito] JavaScript로 데이터 동기화

1. Abstract



Amazon Cognito은 사용자 인증과 데이터 동기화의 두 가지 기능을 제공합니다. 데이터 동기화 기사를 별로 보이지 않으므로 이번에는 데이터 동기화에 대해 이야기합니다.

1. 사용자 인증
Facebook/Google/Amazon 등의 ID 제공업체에서의 사용자 인증 또는 미인증으로 게스트를 취급할 수 있습니다.

2. 데이터 동기화 ← 이번에는 이거 ★
네트워크 상태를 고려하지 않고도 AWS에 모든 데이터를 쉽게 동기화하고 저장할 수 있습니다.

※환경
us-east-1 지역
Google 크롬

AWS Management Console에서 Cognito의 Identity Pool을 생성하면 iOS, Android, .NET의 Starter Code가 표시되므로 다운로드할 수 있으므로 즉시 시작할 수 있지만 JavaScript에 대한 언급은 없습니다.

이 기사에서는 브라우저에서 JavaScript로 데이터 동기화를 실시하고 싶습니다.



2. Create Cognito Identity Pool



AWS Management Console에서 Identity Pool을 생성합니다. 데이터 동기화에 대해서 실시하고 싶을 뿐이므로, Unauthorized (미인증 게스트)로 이용합니다.


↓↓↓


3. Include Cognito Sync Manager SDK for JavaScript



AWS SDK for JavaScript 및 Cognito Sync Manager SDK for JavaScript을 HTML에 포함합니다.

index.html
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.4.min.js"></script>
<script src="js/amazon-cognito.min.js"></script>

4. Source code and Execution result



CognitoSyncClient를 생성하고 데이터 세트를 조작하는 스크립트를 작성합니다.

페이지 로드시에는, Dataset 를 Create 혹은 Open 다음에, Key:"myData"의 데이터를 Console.log() 에 표시합니다. 또 읽어들일 때에는, Key:"myData"의 Value 에 "newValue"라고 하는 캐릭터 라인을 put 해 동기 하고 있습니다.

index.html
var client = null; 
AWS.config.region = 'us-east-1';
var cognitoParams = {
    AccountId: 'AWS_ACCOUNT_ID',
    IdentityPoolId: 'IDENITY_POOL_ID',
    RoleArn: 'arn:aws:iam::xxxx:UNAUTHENTICATED_ROLE_ARN'
};

AWS.config.credentials = new AWS.CognitoIdentityCredentials(cognitoParams);
AWS.config.credentials.get(function() {
    client = new CognitoSyncManager();

    client.openOrCreateDataset("myDatasetName", function(err, dataset) {
        dataset.get('myData', function(err, value) {
            console.log('myData = ' + value);
        });

        dataset.put('myData', 'newValue', function(err, record) {
            if ( !err ) {
                dataset.synchronize({
                    onSuccess: function(dataset, newRecords) {
                        console.log("Data saved successfully.");
                    },
                    onFailure: function(err) {
                        console.log("Error occured.");
                    },
                    onConflict: function(dataset, conflicts, callback) {
                        var resolved = [];
                        for (var i=0; i < conflicts.length; i++) {
                            resolved.push(conflicts[i].resolveWithRemoteRecord());
                        }
                        dataset.resolve(resolved, function(err) {
                            callback(true);
                        });
                    },
                    onDatasetDeleted: function(dataset, datasetName, callback) {
                        return callback(true);
                    },
                    onDatasetMerged: function(dataset, datasetNames, callback) {
                        return callback(false); 
                    }
                });
            }
        });
    }
});

소스 코드는 여기에 넣을 때.
htps : // st. 기주 b. 이 m / shi my / e d319fc37d cd d61 a4 a f3

Result



페이지 처음 읽을 때는 데이터가 없으므로 undefined, 2번째 로드 이후는 "newValue"라는 값이 설정되어 있는 것을 알 수 있습니다.

처음 로드할 때

 
 
2회째 이후의 로딩시

 
 
AWS Management Console
Data sync가 작동하고 데이터가 저장되었음을 알 수 있습니다.


 
 

면책



이쪽은 개인의 의견으로 회사와는 관계 없습니다.

좋은 웹페이지 즐겨찾기