Azure Mobile Apps용 Apache Cordova 플러그 인을 사용하는 방법

아티클
10/23/2023

이 가이드에서는 최신 Azure Mobile Apps용 Apache Cordova 플러그 인을 사용하여 일반적인 시나리오를 수행하는 방법을 알려줍니다. Azure Mobile Apps를 처음 접하는 경우 먼저 Azure Mobile Apps 빠른 시작을 완료하여 백 엔드를 만들고, 테이블을 만들고, 미리 빌드된 Apache Cordova 프로젝트를 다운로드합니다. 이 가이드에서는 클라이언트 쪽 Apache Cordova 플러그 인에 중점을 둡니다.

지원되는 플랫폼

이 SDK는 iOS, Android 및 Windows 디바이스에서 Apache Cordova v6.0.0 이상을 지원합니다. 플랫폼 지원은 다음과 같습니다.

Android API 19 이상
iOS 버전 8.0 이상.

Warning

이 문서에서는 사용 중지된 v4.2.0 라이브러리 버전에 대한 정보를 다룹니다. 보안 문제에 대한 업데이트를 포함하여 이 라이브러리에 대한 추가 업데이트는 수행되지 않습니다. 지속적인 지원을 위해 .NET MAUI와 같은 .NET 클라이언트로 이동하는 것이 좋습니다.

설정 및 필수 조건

이 가이드에서는 테이블이 있는 백 엔드를 만들었다고 가정합니다. 예제에서는 빠른 시작의 TodoItem 테이블을 사용합니다. Azure Mobile Apps 플러그 인을 프로젝트에 추가하려면 다음 명령을 사용합니다.

cordova plugin add cordova-plugin-ms-azure-mobile-apps

첫 번째 Apache Cordova 앱을 만드는 방법에 대한 자세한 내용은 해당 설명서를 참조하세요.

Ionic v2 앱 설정

Ionic v2 프로젝트를 올바르게 구성하려면 먼저 기본 앱을 만들고 Cordova 플러그 인을 추가합니다.

ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps

app.component.ts에 다음 줄을 추가하여 클라이언트 개체를 만듭니다.

declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");

이제 브라우저에서 프로젝트를 빌드하고 실행할 수 있습니다.

ionic platform add browser
ionic run browser

Azure Mobile Apps Cordova 플러그 인은 Ionic v1 및 v2 앱을 모두 지원합니다. Ionic v2 앱만 개체에 대한 추가 선언이 WindowsAzure 필요합니다.

클라이언트 연결 만들기

개체를 만들어 클라이언트 연결을 만듭니다 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);

성공 함수는 결과와 함께 호출됩니다. 다른 쿼리 함수(예: )가 사용될 때 결과에 포함된 정보를 반복하기 때문에 .includeTotalCount()성공 함수에는 사용하지 for (var i in results) 마세요.

쿼리 구문에 대한 자세한 내용은 쿼리 개체 설명서를 참조 하세요.

서버에서 데이터 필터링

테이블 참조에서 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);

데이터 페이징

및 skip() 메서드를 take() 활용합니다. 예를 들어 테이블을 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() . 이미 로드된 레코드에 대한 액세스 속도를 높이려면 캐싱을 구현합니다.

정렬된 데이터 반환

또는 .orderByDescending() 쿼리 메서드를 .orderBy() 사용합니다.

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 서버 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 앱 Service는 다양한 외부 ID 공급자(Facebook, Google, Microsoft 계정 및 Twitter)를 사용하여 앱 사용자의 인증 및 권한을 부여합니다. 테이블에 대한 사용 권한을 설정하여 특정 작업에 대한 액세스를 인증된 사용자로만 제한할 수 있습니다. 인증된 사용자의 ID를 사용하여 서버 스크립트에서 권한 부여 규칙을 구현할 수도 있습니다. 자세한 내용은 인증 시작 자습서를 참조하세요.

Apache Cordova 앱에서 인증을 사용하는 경우 다음 Cordova 플러그 인을 사용할 수 있어야 합니다.

참고 항목

iOS 및 Android의 최근 보안 변경으로 서버 흐름 인증을 사용할 수 없게 될 수 있습니다. 이러한 경우 클라이언트 흐름을 사용해야 합니다.

서버 흐름과 클라이언트 흐름이라는 두 가지 인증 흐름이 지원됩니다. 서버 흐름은 공급자의 웹 인증 인터페이스를 사용하므로 가장 간단한 인증 환경을 제공합니다. 클라이언트 흐름을 사용하면 공급자별 디바이스별 SDK에 의존하기 때문에 Single Sign-On과 같은 디바이스별 기능과 더 심층 통합할 수 있습니다.

공급자를 사용하여 인증(서버 흐름)

Mobile Apps가 앱에서 인증 프로세스를 관리하게 하려면 앱을 ID 공급자에 등록해야 합니다. 그런 다음 Azure 앱 서비스에서 공급자가 제공하는 애플리케이션 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'입니다.

참고 항목

보안 문제로 인해 일부 인증 공급자는 서버 흐름에서 작동하지 않을 수 있습니다. 이러한 경우 클라이언트 흐름 메서드를 사용해야 합니다.

이 경우 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에서 제공하는 토큰이 토큰 변수에 저장된다고 가정합니다. 각 공급자에 필요한 세부 정보는 약간 다릅니다. 페이로드의 정확한 형식을 확인하려면 Azure App Service 인증 및 권한 부여 설명서를 참조하세요.

인증된 사용자에 대한 정보 가져오기

HTTP/REST 라이브러리에서 HTTP 호출을 /.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
    });

Fetch는 npm 패키지 또는 CDNJS에서 브라우저 다운로드용으로 사용할 수 있습니다. 데이터는 JSON 개체로 수신됩니다.

외부 리디렉션 URL에 대한 모바일 App Service를 구성합니다.

여러 유형의 Apache Cordova 애플리케이션은 루프백 기능을 사용하여 OAuth UI 흐름을 처리합니다. 인증 서비스는 기본적으로 서비스를 활용하는 방법만 알고 있기 때문에 localhost의 OAuth UI 흐름으로 인해 문제가 발생합니다. 문제가 있는 OAuth UI 흐름의 예는 다음과 같습니다.

Ripple 에뮬레이터입니다.
Ionic을 사용하여 라이브 다시 로드.
로컬에서 모바일 백엔드 실행
인증을 제공하는 것과 다른 Azure 앱 서비스에서 모바일 백 엔드를 실행합니다.

다음 지침에 따라 구성에 로컬 설정을 추가합니다.

Azure Portal에 로그인
모든 리소스 또는 App Services를 선택한 다음 모바일 앱의 이름을 클릭합니다.
도구 클릭
관찰 메뉴에서 리소스 탐색기를 클릭한 다음 이동을 클릭합니다. 새 창 또는 탭이 열립니다.
왼쪽 탐색 영역에서 사이트에 대한 구성, 인증 노드를 확장합니다.
편집을 클릭합니다.
"allowedExternalRedirectUrls" 요소를 찾습니다. null 또는 값 배열로 설정할 수 있습니다. 값을 다음 값으로 변경합니다.
```
"allowedExternalRedirectUrls": [
    "http://localhost:3000",
    "https://localhost:3000"
],
```
URL을 서비스의 URL로 바꿉다. 예를 들어 http://localhost:3000 (Node.js 샘플 서비스의 경우) 또는 http://localhost:4400 (Ripple 서비스의 경우) 그러나 이러한 URL은 예입니다. 예제에 멘션 서비스를 포함한 상황은 다를 수 있습니다.
화면 오른쪽 위에 있는 읽기/쓰기 단추를 클릭합니다.
녹색 배치 단추를 클릭합니다.

이 시점에서 설정이 저장됩니다. 설정 저장이 완료될 때까지 브라우저 창을 닫지 마세요. 또한 App Service에 대한 CORS 설정에 이러한 루프백 URL을 추가합니다.

Azure Portal에 로그인
모든 리소스 또는 App Services를 선택한 다음 모바일 앱의 이름을 클릭합니다.
설정 블레이드가 자동으로 열립니다. 그렇지 않으면 모두 설정 클릭합니다.
API 메뉴에서 CORS를 클릭합니다.
제공된 상자에 추가할 URL을 입력하고 Enter 키를 누릅니다.
필요에 따라 더 많은 URL을 입력합니다.
저장을 클릭하여 설정을 저장합니다.

새 설정이 적용되려면 약 10-15초가 걸립니다.

Azure Mobile Apps용 Apache Cordova 플러그 인을 사용하는 방법

지원되는 플랫폼

설정 및 필수 조건

Ionic v2 앱 설정

클라이언트 연결 만들기

테이블 작업

테이블 참조 쿼리

서버에서 데이터 필터링

데이터 페이징

정렬된 데이터 반환

데이터 삽입

데이터 수정

데이터 삭제

사용자 인증

공급자를 사용하여 인증(서버 흐름)

공급자를 사용하여 인증(클라이언트 흐름)

인증된 사용자에 대한 정보 가져오기

외부 리디렉션 URL에 대한 모바일 App Service를 구성합니다.

피드백

피드백

추가 리소스

Azure Mobile Apps용 Apache Cordova 플러그 인을 사용하는 방법

지원되는 플랫폼

설정 및 필수 조건

Ionic v2 앱 설정

클라이언트 연결 만들기

테이블 작업

테이블 참조 쿼리

서버에서 데이터 필터링

데이터 페이징

정렬된 데이터 반환

데이터 삽입

데이터 수정

데이터 삭제

사용자 인증

공급자를 사용하여 인증(서버 흐름)

공급자를 사용하여 인증(클라이언트 흐름)

소셜 인증 기본 예제

인증된 사용자에 대한 정보 가져오기

외부 리디렉션 URL에 대한 모바일 App Service를 구성합니다.

피드백

피드백

추가 리소스