이번 주 PouchDB v3.4.0 가 Couchbase 동기화 게이트웨이와 호환되어 출시되었습니다.

이 글에서는 기존의 TodoMVC 예제를 가지고 Facebook 인증을 사용하여 필터링된 동기화를 추가하겠습니다. 웹 클라이언트 간 동기화 외에도 데이터 모델을 약간 변경하여 다음에서 실행 중인 기존 ToDoLite 앱과 동기화하도록 하겠습니다. iOS 그리고 안드로이드:

따라 하려면 커밋 에서 TodoMVC 예제를 열고 실행하면 됩니다.d9bb961. 편의를 위해 Facebook 로그인 코드를 다음과 같이 추가했습니다. app.js. 사용자가 로그인하면 기능 시작 세션 및 동기화(액세스 토큰, 사용자 ID) 를 호출합니다. 이제 이를 실현하기 위한 코드를 추가해 보겠습니다!

빠른 시작

포트에서 앱을 제공해야 합니다. 9000 에 대해 CORS를 구성할 것이므로 localhost:9000 나중에. 간단한 파이썬 명령으로 충분합니다:

$ python -m SimpleHTTPServer 9000

1	$ python -m SimpleHTTPServer 9000

데이터 모델링

토도MVC와 토도라이트는 데이터 모델이 약간 다릅니다. ToDoLite 앱에서는 한 사용자가 여러 개의 목록을 만들어 여러 사용자와 공유할 수 있습니다.

먼저 예상되는 작업 문서가 있는 작업 문서를 살펴보겠습니다. title 속성과 list_id 가 속한 목록(이 경우 123)을 참조합니다:

{
  "_id": "E9W3-9I2Y-O8W2-6Y4D",
  "type": "task",
  "list_id": "123",
  "title": "A task title"
}

{

"_id": "E9W3-9I2Y-O8W2-6Y4D",

"type": "task",

"list_id": "123",

"title": "작업 제목"

}

마찬가지로 목록 문서에도 title 소유자와 해당 소유자가 속한 사용자를 참조하는 소유자:

{
  "_id": "123",
  "type": "list",
  "title": "TodoMVC list",
  "owner": "p:1234567890"
}

{

"_id": "123",

"type": "목록",

"title": "TodoMVC 목록",

"소유자": "p:1234567890"

}

그러나 TodoMVC는 단일 목록 앱입니다. 간단하게 유지하기 위해 사용자가 로그인하자마자 목록 문서를 코드에 삽입할 수 있습니다.

라는 새 함수를 만들어 보겠습니다. 마이그레이트게스트투유저 를 클릭하여 사용자 ID로 목록 문서를 생성하고 PouchDB에 저장합니다:

function migrateGuestToUser(userId) {
  var list = {
    _id: '123',
    type: 'list',
    title: 'TodoMVC list',
    owner: 'p:' + userId
  };
  db.put(list, function(err, result) {
    if (!err) {
      console.log('Successfully saved user list');
    }
  })
}

함수 마이그레이트게스트투유저(userId) {

var 목록 = {

_id: '123',

유형: 'list',

title: 'TodoMVC 목록',

소유자: 'p:' + userId

};

db.put(목록, 함수(err, 결과) {

만약 (!err) {

콘솔.로그('사용자 목록 저장 성공');

}

})

}

참고: 소유자 필드를 설정하는 것이 매우 중요하며, 동기화 기능이 문서를 거부합니다. 그렇지 않으면.

그리고 시작 세션 및 동기화:

function startSessionAndSync(accessToken, userId) {
  migrateGuestToUser(userId);
}

함수 시작 세션 및 동기화(액세스 토큰, userId) {

마이그레이트게스트투유저(userId);

}

작업 문서는 목록에 속해 있으므로 list_id 속성을 설정해야 합니다. 프로퍼티를 변경하려면 토도 추가 함수의 app.js 를 아래와 같이 변경합니다. 아래에서 list_id 필드를 하드코딩된 _id 를 삽입했습니다:

function addTodo(text) {
  var todo = {
    _id: new Date().toISOString(),
    title: text,
    checked: false,
    type: 'task',
    list_id: '123',
    created_at: new Date()
  };
  db.put(todo, function callback(err, result) {
    if (!err) {
      console.log('Successfully posted a todo!');
    }
  });
}

함수 토도 추가(텍스트) {

var 할 일 = {

_id: new 날짜().toISOString(),

title: 텍스트,

확인됨: false,

유형: 'task',

list_id: '123',

created_at: new 날짜()

};

db.put(할 일, 함수 콜백(err, 결과) {

만약 (!err) {

콘솔.로그('할 일을 성공적으로 게시했습니다!');

}

});

}

이제 ToDoLite의 데이터 모델을 준수하는 적절한 문서가 있으므로 인증 및 복제에 대해 살펴볼 수 있습니다.

동기화 게이트웨이에서 CORS 활성화하기

이 자습서에서는 다음에서 동기화 게이트웨이의 로컬 인스턴스를 실행합니다. localhost:4984 하지만 웹 앱은 localhost:9000. 이 시점에서 동일한 원본 정책 오류가 발생합니다. 하지만 Chris 최근 이를 위해 동기화 게이트웨이에 CORS 지원을 추가했습니다. 따라서 서버 측 코드를 한 줄도 작성할 필요가 없습니다.)

CORS를 사용하면 웹 앱이 원본 도메인이 아닌 다른 도메인의 리소스에 액세스할 수 있습니다. 동기화 게이트웨이에서 CORS를 사용 설정하면 브라우저에 "예, 동기화 게이트웨이 도메인 이름이 이 웹 앱과 통신할 수 있습니다"라는 메시지가 표시됩니다. 열기 동기화 게이트웨이-config.json 추가 CORS 구성을 통해 활성화할 수 있습니다. localhost:9000:

{ 
 ...
 "CORS": {
   "Origin": ["http://localhost:9000"],
   "LoginOrigin": ["http://localhost:9000"],
   "Headers": ["Content-Type"],
   "MaxAge": 17280000
 },
 ...
}

{

...

"CORS": {

"Origin": ["http://localhost:9000"],

"LoginOrigin": ["http://localhost:9000"],

"헤더": ["콘텐츠 유형"],

"MaxAge": 17280000

...

}

동기화 게이트웨이 1.1 이상을 사용하세요. 구성 파일로 시작하세요:

$ ~/Downloads/sync_gateway sync-gateway-config.json

1	$ ~/다운로드/동기화 게이트웨이 동기화-게이트웨이-구성.json

다시 들어가기 app.js를 클릭하고 그에 따라 원격 소파 URL을 업데이트합니다:

var SYNC_GATEWAY_URL = 'http://127.0.0.1:4984/todos/';
var remoteCouch = SYNC_GATEWAY_URL;

1 2	var sync_gateway_url = 'http://127.0.0.1:4984/todos/'; var 원격 소파 = sync_gateway_url;

이제 목록을 동기화 게이트웨이에 동기화하려고 하면 401 권한 없음 오류가 발생합니다. Facebook 로그인으로 사용자 세션을 생성하여 이 문제를 해결해 보겠습니다.

동기화 게이트웨이로 인증하기

동기화 게이트웨이로 인증하려면 다음 주소로 POST 요청을 보내면 됩니다. /todos/_facebook 액세스 토큰을 사용하여 200 OK를 반환하면 브라우저는 향후 푸시/풀 복제를 위해 동기화 게이트웨이에서 반환된 세션 쿠키를 설정합니다.

function startSyncGatewaySession(accessToken) {
  var request = new XMLHttpRequest();
  request.open('POST', SYNC_GATEWAY_URL + '/_facebook', true);
  request.setRequestHeader('Content-Type', 'application/json');
  request.onreadystatechange = function() {
    if (request.readyState == 4 &amp;&amp; request.status == 200) {
      console.log('New SG session, starting sync!');
      sync();
  };
  request.withCredentials = true;
  request.send(JSON.stringify({"access_token": accessToken}));
}

함수 시작 동기화 게이트웨이 세션(액세스 토큰) {

var 요청 = new XMLHttpRequest();

요청.열기('POST', sync_gateway_url + '/_facebook', true);

요청.설정 요청 헤더('콘텐츠 유형', 'application/json');

요청.읽기 상태 변경 = 함수() {

만약 (요청.readyState == 4 && 요청.상태 == 200) {

콘솔.로그('새 SG 세션, 동기화 시작!');

동기화();

};

요청.자격증명 = true;

요청.보내기(JSON.문자열화({"access_token": 액세스 토큰}));

}

참고: 설정하는 것이 중요합니다. request.withCredentials = true 를 CORS 요청에 추가하여 향후 인증된 요청(푸시/풀 복제)을 위해 동기화 게이트웨이에서 반환된 쿠키를 저장합니다.

신고하기 시작 세션 및 동기화 를 전달하고 액세스 토큰 Facebook에서 돌아왔습니다:

function startSessionAndSync(accessToken, userId) {
  migrateGuestToUser(userId);
  startSyncGatewaySession(accessToken);
}

함수 시작 세션 및 동기화(액세스 토큰, userId) {

마이그레이트게스트투유저(userId);

시작 동기화 게이트웨이 세션(액세스 토큰);

}

마무리

이제 브라우저를 열면 할 일 항목이 열려 있는 다른 브라우저 창이나 TodoLite를 실행하는 기본 앱과 동기화되는지 테스트할 수 있습니다.

사용자는 로그인하지 않고도 작업을 만들 수 있습니다. 하지만 사용자가 로그인하는 순간 해당 작업은 사용자의 목록에 속하게 됩니다. 게스트 계정 기능을 제공하는 것은 오프라인 우선 기능을 구축할 때 얻을 수 있는 많은 이점 중 하나입니다.

주목하세요. TodoMVC 목록 문서가 Chrome에서 작업으로 표시되지 않습니다. 이는 이 예제에서 모든 문서 쿼리를 사용하여 작업을 표시합니다.

다음 글에서는 맵/축소 쿼리를 사용하여 다중 목록 기능과 프로필 문서를 추가하고 다른 사용자와 공유할 수 있도록 하겠습니다.

자세히 읽어보세요:

동기화 게이트웨이 CORS 구성: https://www.couchbase.com/developers/mobile/#cors-configuration
CORS 요청에서 쿠키를 활성화합니다: http://www.html5rocks.com/en/tutorials/cors/#toc-withcredentials
PouchDB로 필터링된 복제: http://pouchdb.com/2015/04/05/filtered-replication.html

제임스 노센티니, 모바일 테크니컬 라이터, Couchbase

이 문서 공유하기

댓글 하나

누탄 산타람 4월 29, 2015에서 8:56 오전

안녕하세요 제임스, 튜토리얼을 제공해 주셔서 감사합니다. Windows 컴퓨터의 동기화 게이트웨이에서 CORS를 활성화하는 방법을 알고 있나요?

커밋 E8CF146의 빌드입니다. Windows 머신에서 실행할 수 있나요?

json 구성으로 동기화 게이트웨이를 실행하려고 하면 오류가 발생합니다:

XMLHttpRequest를 로드할 수 없습니다. http://localhost:4984/todos/_facebook. 요청된 리소스에 \'Access-Control-Allow-Origin\' 헤더가 없습니다. 따라서 원본 \'http://localhost:9000\'에 대한 액세스가 허용되지 않습니다.

감사합니다,
Nuthan.

로그인 하여 답글 남기기
플로리온 코이페 6월 16, 2015에서 5:33 오후

Github의 현재 마스터에서 빌드한 동기화 게이트웨이를 사용하고 있습니다. 여기에는 CORS 및 PouchDB 지원이 포함되어야 하나요?
저에게는 그렇지 않은데, 브라우저에서 "요청된 리소스에 \'Access-Control-Allow-Origin\' 헤더가 없습니다\"라고 알려줍니다.

config.json 파일에 CORS 줄을 추가했습니다:

\"CORS\": {
\”Origin\”:[\”http://185.90.50.35:80\”],
\”LoginOrigin\”:[\”http://185.90.50.35:80\”],
\"헤더\":[\"콘텐츠 유형\"],
\"MaxAge\": 1728000
}

이유를 아세요? :)

로그인 하여 답글 남기기
함루네즈 7월 9, 2015에서 11:00 오전

CORS가 작동하지 않습니다 !!!! 여전히 \'액세스 제어 허용-오리진\'이 없습니다.
해결책이 있나요?

로그인 하여 답글 남기기
1. 제임스 노센티니 7월 12, 2015에서 12:16 오후
  
  동기화 게이트웨이 1.1을 사용 중인가요? 이 튜토리얼을 따라 CORS/PouchDB 및 웹 푸시 알림을 설정할 수도 있습니다. https://github.com/couchbasela.... 그래도 문제가 해결되지 않으면 알려주세요.
  
  로그인 하여 답글 남기기
조나스 슈미드 7월 14, 2015에서 9:50 오전

동영상에서 웹 페이지가 있는 브라우저가 열려 있습니다. 동기화 게이트웨이의 일부인가요? 별도로 설치해야 하나요?
접속을 시도했지만 404만 표시되었습니다.
고마워요

로그인 하여 답글 남기기
1. 조나스 슈미드 7월 14, 2015에서 9:54 오전
  
  신경 쓰지 마세요. 관리자 인터페이스는 127.0.0.1의 연결만 허용합니다.
  
  로그인 하여 답글 남기기
하라시카게 4월 18, 2016에서 8:58 오전

안녕하세요 제임스

CORS가 작동하지 않습니다.
오류:
XMLHttpRequest가 을 로드할 수 없습니다. 사전 비행 요청에 대한 응답이 접근 제어 검사를 통과하지 못했습니다: 'Access-Control-Allow-Origin\' 헤더에 잘못된 값 \'\'이 포함되어 있습니다. 따라서 원본 에 대한 액세스가 허용되지 않습니다.

동기화 시 요청에 \'ORIGIN\'에 대한 로컬 URL이 있고 게이트웨이가 \'HOST\'로 설정되어 있습니다. 그러나 응답 헤더 > \'Access-Control-Allow-Origin\'>은 Null이고 요청은 204 콘텐츠 없음 을 던지고 있습니다.

동기화 게이트웨이도 특정 오리진 / 모든 URL에 대해 구성되었지만 여전히 동일한 문제가 발생했습니다.

로그인 하여 답글 남기기
코리 퀼렌 4월 25, 2016에서 7:25 오후

여기에서도 CORS 오류가 발생합니다. 시간을 내어 살펴볼 수 있는 사람이 있다면 다음 스택오버플로 질문을 게시했습니다:

http://stackoverflow.com/quest…

로그인 하여 답글 남기기

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

PouchDB 및 동기화 게이트웨이의 첫 단계

빠른 시작

데이터 모델링

동기화 게이트웨이에서 CORS 활성화하기

동기화 게이트웨이로 인증하기

마무리

받은 편지함에서 카우치베이스 블로그 업데이트 받기

작성자

게시자 제임스 노센티니, 모바일 테크니컬 라이터, Couchbase

댓글 하나

댓글 남기기 응답 취소

카우치베이스 카펠라를 시작할 준비가 되셨나요?

구축 시작

카펠라 무료 사용

연락하기