개요
이 가이드에서는 Azure Mobile Apps용 최신 JavaScript SDK를 사용하여 일반적인 시나리오를 수행하는 방법을 설명합니다. Azure Mobile Apps를 처음 접하는 경우 먼저 Azure Mobile Apps 빠른 시작을 완료하여 백 엔드를 만들고 테이블을 만듭니다. 이 가이드에서는 HTML/JavaScript 웹 애플리케이션에서 모바일 백 엔드를 사용하는 데 집중합니다.
지원되는 플랫폼
브라우저 지원은 Google Chrome, Microsoft Edge, Microsoft Internet Explorer 및 Mozilla Firefox와 같은 주요 브라우저의 현재 및 마지막 버전으로 제한됩니다. SDK는 비교적 최신 브라우저에서 작동할 것으로 예상됩니다.
패키지는 유니버설 JavaScript 모듈로 배포되므로 전역, AMD 및 CommonJS 형식을 지원합니다.
설정 및 필수 구성 요소
이 가이드에서는 테이블이 있는 백 엔드를 만들었다고 가정합니다. 이 가이드에서는 테이블에 해당 자습서의 테이블과 동일한 스키마가 있다고 가정합니다.
Azure Mobile Apps JavaScript SDK 설치는 다음 명령을 통해 npm 수행할 수 있습니다.
npm install azure-mobile-apps-client --save
라이브러리는 Browserify 및 Webpack과 같은 CommonJS 환경 내에서 ES2015 모듈로, AMD 라이브러리로 사용할 수도 있습니다. 다음은 그 예입니다.
// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';
CDN에서 직접 다운로드하여 미리 빌드된 버전의 SDK를 사용할 수도 있습니다.
<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>
클라이언트 연결 만들기
WindowsAzure.MobileServiceClient 개체를 만들어 클라이언트 연결을 만듭니다.
appUrl 모바일 앱의 URL로 바꾸십시오.
var client = WindowsAzure.MobileServiceClient(appUrl);
테이블 작업
데이터에 액세스하거나 업데이트하려면 백 엔드 테이블에 대한 참조를 만듭니다.
tableName 테이블 이름으로 바꾸기
var table = client.getTable(tableName);
테이블 참조가 있으면 테이블을 더 자세히 작업할 수 있습니다.
방법: 테이블 참조 쿼리
테이블 참조가 있으면 이를 사용하여 서버의 데이터를 쿼리할 수 있습니다. 쿼리는 "LINQ와 유사한" 언어로 만들어집니다. 테이블에서 모든 데이터를 반환하려면 다음 코드를 사용합니다.
/**
* Process the results that are received by a call to table.read()
*
* @param {Object} results the results as a pseudo-array
* @param {int} results.length the length of the results array
* @param {Object} results[] the individual results
*/
function success(results) {
var numItemsRead = results.length;
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Each row is an object - the properties are the columns
}
}
function failure(error) {
throw new Error('Error loading data: ', error);
}
table
.read()
.then(success, failure);
성공 함수는 결과와 함께 호출됩니다. 다른 쿼리 함수(예: for (var i in results))가 사용될 때 결과에 포함된 정보를 반복하기 때문에 성공 함수에서 .includeTotalCount() 사용하지 마세요.
쿼리 구문에 대한 자세한 내용은 [쿼리 개체 설명서]를 참조하세요.
서버에서 데이터 필터링
테이블 참조에서 where 절을 사용할 수 있습니다.
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
개체를 필터링하는 함수를 사용할 수도 있습니다. 이 경우 this 변수가 필터링되는 현재 개체에 할당됩니다. 다음 코드는 이전 예제와 기능적으로 동일합니다.
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
데이터 페이지 넘기기
take() 및 skip() 메서드를 활용합니다. 예를 들어 테이블을 100행 레코드로 분할하려는 경우:
var totalCount = 0, pages = 0;
// Step 1 - get the total number of records
table.includeTotalCount().take(0).read(function (results) {
totalCount = results.totalCount;
pages = Math.floor(totalCount/100) + 1;
loadPage(0);
}, failure);
function loadPage(pageNum) {
let skip = pageNum * 100;
table.skip(skip).take(100).read(function (results) {
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Process each row
}
}
}
.includeTotalCount() 메서드는 totalCount 필드를 결과 개체에 추가하는 데 사용됩니다. totalCount 필드는 페이징이 사용되지 않는 경우 반환될 총 레코드 수로 채워집니다.
그런 다음 페이지 변수 및 일부 UI 단추를 사용하여 페이지 목록을 제공할 수 있습니다. loadPage() 사용하여 각 페이지에 대한 새 레코드를 로드합니다. 이미 로드된 레코드에 대한 액세스 속도를 높이기 위해 캐싱을 구현합니다.
방법: 정렬된 데이터 반환
.orderBy() 또는 .orderByDescending() 쿼리 메서드를 사용합니다.
table
.orderBy('name')
.read()
.then(success, failure);
Query 개체에 대한 자세한 내용은 [쿼리 개체 설명서]를 참조하세요.
방법: 데이터 삽입
적절한 날짜로 JavaScript 개체를 만들고 비동기적으로 table.insert() 호출합니다.
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
삽입에 성공하면 삽입된 항목이 동기화 작업에 필요한 추가 필드와 함께 반환됩니다. 이후 업데이트를 위해 이 정보로 사용자 고유의 캐시를 업데이트합니다.
Azure Mobile Apps Node.js Server SDK는 개발 목적으로 동적 스키마를 지원합니다. 동적 스키마를 사용하면 삽입 또는 업데이트 작업에서 열을 지정하여 테이블에 열을 추가할 수 있습니다. 애플리케이션을 프로덕션으로 이동하기 전에 동적 스키마를 해제하는 것이 좋습니다.
방법: 데이터 수정
.insert() 메서드와 마찬가지로 Update 개체를 만든 다음 .update()호출해야 합니다. 업데이트 개체는 업데이트할 레코드의 ID를 포함해야 합니다. 이 ID는 레코드를 읽거나 .insert()호출할 때 가져옵니다.
var updateItem = {
id: '7163bc7a-70b2-4dde-98e9-8818969611bd',
name: 'My New Name'
};
table
.update(updateItem)
.done(function (updatedItem) {
// You can now update your cached copy
}, failure);
방법: 데이터 삭제
레코드를 삭제하려면 .del() 메서드를 호출합니다. 개체 참조에 ID를 전달합니다.
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
방법: 사용자 인증
Azure App Service는 Facebook, Google, Microsoft 계정 및 Twitter와 같은 다양한 외부 ID 공급자를 사용하여 앱 사용자를 인증하고 권한을 부여할 수 있도록 지원합니다. 테이블에 대한 사용 권한을 설정하여 특정 작업에 대한 액세스를 인증된 사용자로만 제한할 수 있습니다. 인증된 사용자의 ID를 사용하여 서버 스크립트에서 권한 부여 규칙을 구현할 수도 있습니다. 자세한 내용은 인증 시작 자습서를 참조하세요.
서버 흐름과 클라이언트 흐름이라는 두 가지 인증 흐름이 지원됩니다. 서버 흐름은 공급자의 웹 인증 인터페이스를 사용하므로 가장 간단한 인증 환경을 제공합니다. 클라이언트 흐름을 사용하면 공급자별 SDK에 의존하기 때문에 Single Sign-On과 같은 디바이스별 기능과 더 심층 통합할 수 있습니다.
방법: 공급자를 사용하여 인증(서버 흐름)
Mobile Apps가 앱에서 인증 프로세스를 관리하도록 하려면 ID 공급자에 앱을 등록해야 합니다. 그런 다음 Azure App Service에서 공급자가 제공하는 애플리케이션 ID 및 비밀을 구성해야 합니다. 자세한 내용은 앱 인증 추가자습서를 참조하세요.
ID 공급자를 등록한 후에는 공급자 이름으로 .login() 메서드를 호출합니다. 예를 들어 Facebook으로 로그인하려면 다음 코드를 사용합니다.
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
공급자의 유효한 값은 'aad', 'facebook', 'google', 'microsoftaccount' 및 'twitter'입니다.
비고
Google 인증은 현재 서버 흐름을 통해 작동하지 않습니다. Google에서 인증하려면 클라이언트 흐름 방법을 사용해야 합니다.
이 경우 Azure App Service는 OAuth 2.0 인증 흐름을 관리합니다. 선택한 공급자의 로그인 페이지를 표시하고 ID 공급자와 성공적으로 로그인한 후 App Service 인증 토큰을 생성합니다. 로그인 함수가 완료되면 userId 및 authenticationToken 필드에 사용자 ID 및 App Service 인증 토큰을 각각 노출하는 JSON 개체를 반환합니다. 이 토큰은 만료될 때까지 캐시하고 다시 사용할 수 있습니다.
방법: 공급자를 사용하여 인증(클라이언트 흐름)
또한 앱은 ID 공급자에 독립적으로 연락한 다음, 인증을 위해 반환된 토큰을 App Service에 제공할 수 있습니다. 이 클라이언트 흐름을 사용하면 사용자에게 단일 로그인 환경을 제공하거나 ID 공급자에서 추가 사용자 데이터를 검색할 수 있습니다.
소셜 인증 기본 예제
이 예제에서는 인증에 Facebook 클라이언트 SDK를 사용합니다.
client.login(
"facebook",
{"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
이 예제에서는 해당 공급자 SDK에서 제공하는 토큰이 토큰 변수에 저장된다고 가정합니다.
방법: 인증된 사용자에 대한 정보 가져오기
HTTP 호출은 AJAX 라이브러리를 사용하여 /.auth/me 엔드포인트에서 인증 정보를 검색할 수 있습니다.
X-ZUMO-AUTH 헤더를 인증 토큰으로 설정해야 합니다. 인증 토큰은 client.currentUser.mobileServiceAuthenticationToken저장됩니다. 예를 들어 페치 API를 사용하려면 다음을 수행합니다.
var url = client.applicationUrl + '/.auth/me';
var headers = new Headers();
headers.append('X-ZUMO-AUTH', client.currentUser.mobileServiceAuthenticationToken);
fetch(url, { headers: headers })
.then(function (data) {
return data.json()
}).then(function (user) {
// The user object contains the claims for the authenticated user
});
페치는 npm 패키지 또는 CDNJS브라우저 다운로드에 사용할 수 있습니다. jQuery 또는 다른 AJAX API를 사용하여 정보를 가져올 수도 있습니다. 데이터는 JSON 개체로 수신됩니다.
방법: 외부 리디렉션 URL에 대해 Mobile App Service를 구성합니다.
여러 유형의 JavaScript 애플리케이션은 루프백 기능을 사용하여 OAuth UI 흐름을 처리합니다. 이러한 기능은 다음과 같습니다.
- 로컬로 서비스 실행
- Ionic Framework에서 Live Reload 사용
- 인증을 위해 App Service로 리디렉션.
로컬로 실행하면 기본적으로 App Service 인증이 모바일 앱 백 엔드에서 액세스를 허용하도록만 구성되므로 문제가 발생할 수 있습니다. 다음 단계를 사용하여 App Service 설정을 변경하여 서버를 로컬로 실행할 때 인증을 사용하도록 설정합니다.
Azure Portal에 로그인
모바일 앱 백 엔드로 이동합니다.
개발 도구 메뉴에서 리소스 탐색기를 선택합니다.
이동을 클릭하여 새 탭 또는 창에서 모바일 앱 백 엔드에 대한 리소스 탐색기를 엽니다.
앱에 대한 구성>인증 설정 노드를 확장합니다.
편집 단추를 클릭하여 리소스를 편집할 수 있습니다.
null이어야 하는 allowedExternalRedirectUrls 요소를 찾습니다. 배열에 URL을 추가합니다.
"allowedExternalRedirectUrls": [ "https://localhost:3000", "https://localhost:3000" ],배열의 URL을 서비스의 URL로 바꿉습니다. 이 예제에서는 로컬 Node.js 샘플 서비스에 대한 URL입니다
https://localhost:3000. 앱이 구성된 방식에 따라 Ripple 서비스 또는 다른 URL에 사용할https://localhost:4400수도 있습니다.페이지 맨 위에서 읽기/쓰기를 클릭한 다음 PUT 을 클릭하여 업데이트를 저장합니다.
또한 CORS 허용 목록 설정에 동일한 루프백 URL을 추가해야 합니다.
- Azure 포털로 되돌아갑니다.
- 모바일 앱 백 엔드로 이동합니다.
- API 메뉴에서 CORS를 클릭합니다.
- 빈 허용 원본 텍스트 상자에 각 URL을 입력합니다. 새 텍스트 상자가 만들어집니다.
- 저장을 클릭합니다.
백 엔드가 업데이트되면 앱에서 새 루프백 URL을 사용할 수 있습니다.