Jak używać wtyczki Apache Cordova dla usługi Azure Mobile Apps
Ten przewodnik zawiera instrukcje dotyczące wykonywania typowych scenariuszy przy użyciu najnowszej wtyczki Apache Cordova dla usługi Azure Mobile Apps. Jeśli dopiero zaczynasz korzystać z usługi Azure Mobile Apps, najpierw ukończ przewodnik Szybki start dotyczący usługi Azure Mobile Apps, aby utworzyć zaplecze, utworzyć tabelę i pobrać wstępnie utworzony projekt platformy Apache Cordova. W tym przewodniku skoncentrujemy się na wtyczki Apache Cordova po stronie klienta.
Obsługiwane platformy
Ten zestaw SDK obsługuje oprogramowanie Apache Cordova w wersji 6.0.0 lub nowszej na urządzeniach z systemami iOS, Android i Windows. Obsługa platformy jest następująca:
- Interfejs API systemu Android 19+.
- System iOS w wersji 8.0 lub nowszej.
Ostrzeżenie
W tym artykule opisano informacje dotyczące wersji 4.2.0 biblioteki, która została wycofana. W tej bibliotece nie zostaną wprowadzone żadne dalsze aktualizacje, w tym aktualizacje problemów z zabezpieczeniami. Rozważ przejście do klienta platformy .NET, takiego jak .NET MAUI , aby zapewnić ciągłą obsługę.
Konfigurowanie i wymagania wstępne
W tym przewodniku założono, że utworzono zaplecze z tabelą. Przykłady korzystają z TodoItem tabeli z przewodników Szybki start. Aby dodać wtyczkę usługi Azure Mobile Apps do projektu, użyj następującego polecenia:
cordova plugin add cordova-plugin-ms-azure-mobile-apps
Aby uzyskać więcej informacji na temat tworzenia pierwszej aplikacji Apache Cordova, zobacz ich dokumentację.
Konfigurowanie aplikacji Ionic w wersji 2
Aby prawidłowo skonfigurować projekt Ionic v2, najpierw utwórz podstawową aplikację i dodaj wtyczkę Cordova:
ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps
Dodaj następujące wiersze, aby app.component.ts utworzyć obiekt klienta:
declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");
Teraz możesz skompilować i uruchomić projekt w przeglądarce:
ionic platform add browser
ionic run browser
Wtyczka Cordova usługi Azure Mobile Apps obsługuje zarówno aplikacje Ionic v1, jak i v2. Tylko aplikacje Ionic w wersji 2 wymagają dodatkowej WindowsAzure deklaracji dla obiektu.
Tworzenie połączenia klienta
Utwórz połączenie klienta, tworząc obiekt WindowsAzure.MobileServiceClient. Zastąp ciąg appUrl adresem URL Twojej aplikacji Mobile App.
var client = WindowsAzure.MobileServiceClient(appUrl);
Praca z tabelami
Aby uzyskać dostęp do danych lub je zaktualizować, utwórz odwołanie do tabeli zaplecza. Zastąp ciąg tableName nazwą tabeli
var table = client.getTable(tableName);
Po utworzeniu odwołania do tabeli możesz kontynuować pracę z tabelą:
Wykonywanie zapytań względem dokumentacji tabeli
Po utworzeniu odwołania do tabeli możesz przy jego użyciu wysłać zapytanie o dane na serwerze. Zapytania są tworzone w języku przypominającym LINQ. Aby zwrócić wszystkie dane z tabeli, użyj następującego kodu:
/**
* 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);
Funkcja success jest wywoływana z użyciem wyników. Nie umieszczaj w funkcji success pętli for (var i in results), ponieważ będzie ona przechodzić przez informacje zawarte w wynikach w czasie, gdy będą używane inne funkcje zapytań (takie jak .includeTotalCount()).
Aby uzyskać więcej informacji na temat składni zapytania, zobacz dokumentację obiektu Query.
Filtrowanie danych na serwerze
W przypadku odwołania do tabeli możesz użyć klauzuli where:
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
Ponadto możesz użyć funkcji filtrującej obiekt. W tym przykładzie zmienna this jest przypisana do obecnie filtrowanego obiektu. Poniższy kod jest funkcjonalnie równoważny z poprzednim przykładem:
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Stronicowanie danych
Skorzystaj z metod take() i skip(). Na przykład jeśli chcesz podzielić tabelę na rekordy składające się ze 100 wierszy:
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
}
}
}
Metoda .includeTotalCount() powoduje dodanie pola totalCount do obiektu results. Pole totalCount zostanie wypełnione łączną liczbą rekordów, które zostałyby zwrócone w przypadku braku stronicowania.
Następnie możesz udostępnić listę stron za pomocą zmiennej pages i przycisków interfejsu użytkownika. Aby załadować nowe rekordy na każdą stronę, użyj metody loadPage(). Zaimplementuj buforowanie, aby przyspieszyć dostęp do już załadowanych rekordów.
Zwracanie posortowanych danych
Użyj metody zapytania .orderBy() lub .orderByDescending():
table
.orderBy('name')
.read()
.then(success, failure);
Aby uzyskać informacje o obiekcie Query, zobacz [dokumentację obiektu Query].
Wstawianie danych
Utwórz obiekt JavaScript z odpowiednimi danymi i asynchronicznie wywołaj metodę table.insert():
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Po pomyślnym wstawieniu wstawiony element jest zwracany z dodatkowymi polami wymaganymi do wykonywania operacji synchronizacji. Zaktualizuj własną pamięć podręczną o te informacje na potrzeby późniejszych aktualizacji.
Zestaw Azure Mobile Apps Node.js Server SDK obsługuje schemat dynamiczny dla celów deweloperskich. Schemat dynamiczny umożliwia dodawanie kolumn do tabeli przez podanie ich w operacji wstawiania lub aktualizacji. Zalecamy wyłączenie schematu dynamicznego przed przeniesieniem aplikacji na etap produkcji.
Modyfikowanie danych
Podobnie jak w przypadku metody .insert() należy utworzyć obiekt aktualizacji, a następnie wywołać metodę .update(). Obiekt aktualizacji musi zawierać identyfikator rekordu do zaktualizowania — identyfikator ten uzyskuje się podczas odczytu rekordu bądź wywoływania metody .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);
Usuwanie danych
Aby usunąć rekord, wywołaj metodę .del(). Przekaż identyfikator w odwołaniu do obiektu:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Uwierzytelnianie użytkowników
usługa aplikacja systemu Azure obsługuje uwierzytelnianie i autoryzowanie użytkowników aplikacji przy użyciu różnych zewnętrznych dostawców tożsamości: Facebook, Google, Konto Microsoft i Twitter. Możesz ustawić uprawnienia do tabel, aby ograniczyć dostęp do określonych operacji tylko uwierzytelnieni użytkownicy. Możesz również użyć tożsamości uwierzytelnionych użytkowników do zaimplementowania reguł autoryzacji w skryptach serwera. Aby uzyskać więcej informacji, zobacz samouczek Wprowadzenie do uwierzytelniania .
W przypadku korzystania z uwierzytelniania w aplikacji Apache Cordova następujące wtyczki Cordova muszą być dostępne:
Uwaga
Ostatnie zmiany zabezpieczeń w systemach iOS i Android mogą spowodować niedostępne uwierzytelnianie przepływu serwera. W takich przypadkach należy użyć przepływu klienta.
Obsługiwane są dwa przepływy uwierzytelniania: przepływ serwera i przepływ klienta. Przepływ serwera zapewnia najprostsze środowisko uwierzytelniania, ponieważ opiera się na interfejsie uwierzytelniania internetowego dostawcy. Przepływ klienta umożliwia głębszą integrację z funkcjami specyficznymi dla urządzenia, takimi jak logowanie jednokrotne, ponieważ opiera się na zestawach SDK specyficznych dla dostawcy.
Uwierzytelnianie za pomocą dostawcy (Przepływ serwera)
Aby usługa Mobile Apps zarządzała procesem uwierzytelniania w aplikacji, musisz zarejestrować swoją aplikację u dostawcy tożsamości. Następnie w usłudze Azure App Service musisz skonfigurować identyfikator aplikacji oraz wpis tajny udostępniony przez dostawcę. Aby uzyskać więcej informacji, zapoznaj się z samouczkiem Dodawanie uwierzytelniania do aplikacji.
Po zarejestrowaniu dostawcy tożsamości wywołaj metodę .login() z nazwą dostawcy. Aby na przykład zalogować się za pomocą serwisu Facebook, użyj następującego kodu:
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Prawidłowe wartości dla dostawcy to „aad”, „facebook”, „google”, „microsoftaccount” oraz „twitter”.
Uwaga
Ze względu na obawy dotyczące zabezpieczeń niektórzy dostawcy uwierzytelniania mogą nie pracować z przepływem serwera. W takich przypadkach należy użyć metody przepływu klienta.
W tym przypadku usługa Azure App Service zarządza przepływem uwierzytelniania OAuth 2.0. Wyświetla stronę logowania wybranego dostawcy i generuje token uwierzytelniania usługi App Service po pomyślnym zalogowaniu się u dostawcy tożsamości. Po zakończeniu swojego działania funkcja logowania zwraca obiekt JSON, który udostępnia zarówno identyfikator użytkownika, jak i token uwierzytelniania usługi App Service, odpowiednio w polach userId oraz authenticationToken. Ten token można zapisać w pamięci podręcznej i ponownie go używać, dopóki nie wygaśnie.
Uwierzytelnianie za pomocą dostawcy (przepływ klienta)
Aplikacja może również niezależnie skontaktować się z dostawcą tożsamości, a następnie udostępnić zwrócony token usłudze App Service na potrzeby uwierzytelniania. Ten przepływ klienta umożliwia zapewnienie użytkownikom środowiska logowania jednokrotnego lub pobranie dodatkowych danych użytkownika z dostawcy tożsamości.
Podstawowy przykład uwierzytelniania przy użyciu sieci społecznościowych
W tym przykładzie na potrzeby uwierzytelniania użyto zestawu SDK klienta usługi Facebook:
client.login("facebook", {"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
W tym przykładzie założono, że token udostępniony przez zestaw SDK danego dostawcy jest przechowywany w zmiennej token. Szczegóły wymagane przez każdego dostawcę są nieco inne. Zapoznaj się z dokumentacją dotyczącą uwierzytelniania i autoryzacji usługi aplikacja systemu Azure, aby określić dokładną formę ładunku.
Uzyskiwanie informacji o uwierzytelnianych użytkownikach
Informacje uwierzytelniania można pobrać z punktu końcowego /.auth/me przy użyciu wywołania HTTP z dowolną biblioteką HTTP/REST. Pamiętaj, aby dla nagłówka X-ZUMO-AUTH ustawić swój token uwierzytelniania. Token uwierzytelniania jest przechowywany w elemencie client.currentUser.mobileServiceAuthenticationToken. Na przykład aby użyć interfejsu API Fetch:
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
});
Interfejs Fetch jest dostępny jako pakiet npm. Ponadto można go pobrać w przeglądarce z witryny CDNJS. Dane są odbierane w postaci obiektu JSON.
Skonfiguruj usługę Mobile App Service pod kątem zewnętrznych adresów URL przekierowania.
Kilka typów aplikacji apache Cordova używa funkcji sprzężenia zwrotnego do obsługi przepływów interfejsu użytkownika OAuth. Przepływy interfejsu użytkownika OAuth na hoście lokalnym powodują problemy, ponieważ usługa uwierzytelniania domyślnie wie, jak korzystać z usługi. Przykłady problematycznych przepływów interfejsu użytkownika protokołu OAuth obejmują:
- Emulator Ripple.
- Załaduj ponownie na żywo za pomocą Ionic.
- Lokalne uruchamianie zaplecza mobilnego
- Uruchamianie zaplecza mobilnego w innej usłudze aplikacja systemu Azure niż w usłudze zapewniającej uwierzytelnianie.
Postępuj zgodnie z tymi instrukcjami, aby dodać ustawienia lokalne do konfiguracji:
Zaloguj się do witryny Azure Portal.
Wybierz pozycję Wszystkie zasoby lub usługi App Services , a następnie kliknij nazwę aplikacji mobilnej.
Kliknij pozycję Narzędzia
Kliknij pozycję Eksplorator zasobów w menu OBSERWOWANIE, a następnie kliknij pozycję Przejdź. Zostanie otwarte nowe okno lub karta.
Rozwiń węzeł konfiguracji authsettings dla witryny w obszarze nawigacji po lewej stronie.
Kliknij pozycję Edytuj
Wyszukaj element "allowedExternalRedirectUrls". Może być ustawiona na wartość null lub tablicę wartości. Zmień wartość na następującą wartość:
"allowedExternalRedirectUrls": [ "http://localhost:3000", "https://localhost:3000" ],Zastąp adresy URL adresami URL usługi. Przykłady obejmują
http://localhost:3000(dla przykładowej usługi Node.js) lubhttp://localhost:4400(dla usługi Ripple). Jednak te adresy URL są przykładami — sytuacja, w tym dla usług wymienionych w przykładach, może się różnić.Kliknij przycisk Odczyt/Zapis w prawym górnym rogu ekranu.
Kliknij zielony przycisk PUT .
Ustawienia są zapisywane w tym momencie. Nie zamykaj okna przeglądarki, dopóki ustawienia nie zakończą zapisywania. Dodaj również te adresy URL sprzężenia zwrotnego do ustawień mechanizmu CORS dla usługi App Service:
- Zaloguj się do witryny Azure Portal.
- Wybierz pozycję Wszystkie zasoby lub usługi App Services , a następnie kliknij nazwę aplikacji mobilnej.
- Zostanie otwarty blok Ustawienia automatycznie. Jeśli tak nie jest, kliknij pozycję Wszystkie Ustawienia.
- Kliknij pozycję CORS w menu interfejsu API.
- Wprowadź adres URL, który chcesz dodać w podanym polu i naciśnij klawisz Enter.
- Wprowadź więcej adresów URL zgodnie z potrzebami.
- Kliknij polecenie Zapisz, aby zapisać ustawienia.
Zastosowanie nowych ustawień trwa około 10–15 sekund.
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla