Dodawanie uwierzytelniania do aplikacji Xamarin Forms

Artykuł
2019-06-25

Przegląd

W tym temacie przedstawiono sposób uwierzytelniania użytkowników aplikacji mobilnej usługi App Service z poziomu aplikacji klienckiej. W tym samouczku dodasz uwierzytelnianie do projektu szybkiego startu Xamarin Forms, korzystając z dostawcy tożsamości obsługiwanego przez App Service. Po pomyślnym uwierzytelnieniu i autoryzacji przez aplikację mobilną zostanie wyświetlona wartość identyfikatora użytkownika, a użytkownik będzie mógł uzyskać dostęp do ograniczonych danych tabeli.

Wymagania wstępne

Aby uzyskać najlepszy wynik z tego samouczka, zalecamy ukończenie samouczka Tworzenie aplikacji platformy Xamarin Forms . Po ukończeniu tego samouczka będziesz mieć projekt platformy Xamarin Forms, który jest wieloplatformową aplikacją TodoList.

Jeśli nie używasz pobranego projektu serwera Szybkiego startu, musisz dodać pakiet rozszerzenia uwierzytelniania do projektu. Aby uzyskać więcej informacji na temat pakietów rozszerzeń serwera, zobacz Work with the .NET backend server SDK for Azure Mobile Apps.

Rejestrowanie aplikacji pod kątem uwierzytelniania i konfigurowanie usług App Services

Najpierw należy zarejestrować aplikację w witrynie dostawcy tożsamości, a następnie ustawić poświadczenia wygenerowane przez dostawcę w zapleczu usługi Mobile Apps.

Skonfiguruj preferowanego dostawcę tożsamości, postępując zgodnie z instrukcjami specyficznymi dla dostawcy:
- Azure Active Directory
- Facebook
- Google
- Microsoft
- Twitter
Powtórz poprzednie kroki dla każdego dostawcy, który chcesz obsługiwać w aplikacji.

Dodaj swoją aplikację do dozwolonych zewnętrznych adresów URL przekierowania

Bezpieczne uwierzytelnianie wymaga zdefiniowania nowego schematu adresów URL dla aplikacji. Dzięki temu system uwierzytelniania może przekierować z powrotem do aplikacji po zakończeniu procesu uwierzytelniania. W tym samouczku użyjemy schematu adresów URL nazwa_aplikacji. Można jednak użyć dowolnego wybranego schematu adresów URL. Powinna być unikatowa dla aplikacji mobilnej. Aby włączyć przekierowanie po stronie serwera:

W witrynie Azure Portalwybierz usługę App Service.
Kliknij opcję menu Uwierzytelnianie/autoryzacja.
W dozwolone zewnętrzne adresy URL przekierowań, wprowadź url_scheme_of_your_app://easyauth.callback. url_scheme_of_your_app w tym ciągu znaków to schemat adresów URL dla aplikacji mobilnej. Powinna ona być zgodna ze standardową specyfikacją adresu URL protokołu (należy używać tylko liter i cyfr, a następnie zaczynać się literą). Należy zanotować wybrany ciąg, ponieważ musisz dostosować kod aplikacji mobilnej za pomocą schematu adresów URL w kilku miejscach.
Kliknij przycisk OK.
Kliknij przycisk Zapisz.

Ograniczanie uprawnień do uwierzytelnionych użytkowników

Domyślnie interfejsy API w zapleczu usługi Mobile Apps mogą być wywoływane anonimowo. Następnie należy ograniczyć dostęp tylko do uwierzytelnionych klientów.

Node.js część serwerowa (za pośrednictwem Azure Portal) :

W ustawieniach usługi Mobile Apps kliknij pozycję Łatwe tabele i wybierz tabelę. Kliknij pozycję Zmień uprawnienia, wybierz pozycję Dostęp uwierzytelniony tylko dla wszystkich uprawnień, a następnie kliknij Zapisz.
zaplecze platformy .NET (C#):

W projekcie serwera przejdź do Controllers>TodoItemController.cs. Dodaj atrybut [Authorize] do klasy TodoItemController w następujący sposób. Aby ograniczyć dostęp tylko do określonych metod, można również zastosować ten atrybut tylko do tych metod zamiast klasy. Ponownie opublikuj projekt serwera.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js zaplecze (za pomocą kodu Node.js) :

Aby wymagać uwierzytelniania w celu uzyskania dostępu do tabeli, dodaj następujący wiersz do skryptu serwera Node.js:
```
  table.access = 'authenticated';
```
Aby uzyskać więcej informacji, zobacz Instrukcje: wymaganie uwierzytelniania w celu uzyskania dostępu do tabel. Aby dowiedzieć się, jak pobrać projekt kodu szybkiego startu z witryny, zobacz Jak: Pobrać projekt kodu backend Node.js za pomocą Git.

Dodawanie uwierzytelniania do przenośnej biblioteki klas

Usługa Mobile Apps używa metody rozszerzenia LoginAsync w aplikacji MobileServiceClient , aby zalogować użytkownika przy użyciu uwierzytelniania usługi App Service. W tym przykładzie jest używany przepływ uwierzytelniania zarządzanego przez serwer, który wyświetla interfejs logowania dostawcy w aplikacji. Aby uzyskać więcej informacji, zobacz Uwierzytelnianie zarządzane przez serwer. Aby zapewnić lepsze środowisko użytkownika w aplikacji produkcyjnej, należy rozważyć użycie uwierzytelniania zarządzanego przez klienta.

Aby uwierzytelnić się w projekcie zestawu narzędzi Xamarin Forms, zdefiniuj interfejs IAuthenticate w przenośnej bibliotece klas dla aplikacji. Następnie dodaj przycisk Zaloguj się do interfejsu użytkownika zdefiniowanego w przenośnej bibliotece klas, który kliknij, aby rozpocząć uwierzytelnianie. Dane są ładowane z zaplecza aplikacji mobilnej po pomyślnym uwierzytelnieniu.

Zaimplementuj interfejs IAuthenticate dla każdej platformy obsługiwanej przez aplikację.

W programie Visual Studio lub programie Xamarin Studio otwórz App.cs z projektu z aplikacją Portable w nazwie, która jest projektem Portable Class Library, a następnie dodaj następującą using instrukcję:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
W App.cs dodaj następującą IAuthenticate definicję interfejsu bezpośrednio przed definicją App klasy.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Aby zainicjować interfejs z implementacją specyficzną dla platformy, dodaj następujące statyczne elementy członkowskie do klasy App .

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

Otwórz plik TodoList.xaml z projektu Portable Class Library, dodaj następujący element Button w elemecie układu buttonsPanel po istniejącym przycisku:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Ten przycisk wyzwala uwierzytelnianie zarządzane przez serwer za pomocą zaplecza aplikacji mobilnej.
Otwórz TodoList.xaml.cs z projektu Portable Class Library, a następnie dodaj następujące pole do TodoList klasy:
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Zastąp metodę OnAppearing następującym kodem:

 ```csharp
 protected override async void OnAppearing()
 {
     base.OnAppearing();

     // Refresh items only when authenticated.
     if (authenticated == true)
     {
         // Set syncItems to true in order to synchronize the data
         // on startup when running in offline mode.
         await RefreshItems(true, syncItems: false);

         // Hide the Sign-in button.
         this.loginButton.IsVisible = false;
     }
 }
 ```

Ten kod zapewnia, że dane są odświeżane tylko z usługi po uwierzytelnieniu.

Dodaj następującą procedurę obsługi dla zdarzenia Klikniętego do klasy TodoList :

 ```csharp
 async void loginButton_Clicked(object sender, EventArgs e)
 {
     if (App.Authenticator != null)
         authenticated = await App.Authenticator.Authenticate();

     // Set syncItems to true to synchronize the data on startup when offline is enabled.
     if (authenticated == true)
         await RefreshItems(true, syncItems: false);
 }
 ```

Zapisz zmiany, a następnie ponownie skompiluj projekt Portable Class Library, aby zweryfikować brak błędów.

Dodawanie uwierzytelniania do aplikacji systemu Android

W tej sekcji pokazano, jak zaimplementować interfejs IAuthenticate w projekcie aplikacji systemu Android. Pomiń tę sekcję, jeśli nie obsługujesz urządzeń z systemem Android.

W programie Visual Studio lub Xamarin Studio kliknij prawym przyciskiem myszy projekt droid , a następnie ustaw jako projekt startowy.
Naciśnij F5, aby uruchomić projekt w debugerze, a następnie sprawdź, czy po uruchomieniu aplikacji zostanie zgłoszony nieobsługiwany wyjątek z kodem stanu 401 (Brak autoryzacji). Kod 401 jest generowany, ponieważ dostęp do zaplecza jest ograniczony tylko do autoryzowanych użytkowników.

Otwórz MainActivity.cs w projekcie systemu Android i dodaj następujące using instrukcje:

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Zaktualizuj klasę MainActivity , aby zaimplementować interfejs IAuthenticate w następujący sposób:

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

Zaktualizuj klasę MainActivity , dodając pole MobileServiceUser i metodę Authentication , która jest wymagana przez interfejs IAuthenticate w następujący sposób:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
             MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         if (user != null)
         {
             message = string.Format("you are now signed-in as {0}.",
                 user.UserId);
             success = true;
         }
     }
     catch (Exception ex)
     {
         message = ex.Message;
     }

     // Display the success or failure message.
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.SetMessage(message);
     builder.SetTitle("Sign-in result");
     builder.Create().Show();

     return success;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

Jeśli używasz dostawcy tożsamości innego niż Facebook, wybierz inną wartość dla elementu MobileServiceAuthenticationProvider.

Zaktualizuj plik AndroidManifest.xml , dodając następujący kod XML wewnątrz <application> elementu:

<activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

Zastąp {url_scheme_of_your_app} schematem adresu URL.

Dodaj następujący kod do metody OnCreate klasy MainActivity przed wywołaniem metody LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Ten kod zapewnia zainicjowanie uwierzytelniającego zanim aplikacja się załaduje.
Skompiluj aplikację, uruchom ją, a następnie zaloguj się przy użyciu wybranego dostawcy uwierzytelniania i sprawdź, czy masz dostęp do danych jako uwierzytelniony użytkownik.

Rozwiązywanie problemów

Aplikacja uległa awarii Java.Lang.NoSuchMethodError: No static method startActivity

W niektórych przypadkach konflikty w pakietach pomocy technicznej wyświetlane jako ostrzeżenie w programie Visual Studio, ale aplikacja ulega awarii z tym wyjątkiem w czasie wykonywania. W takim przypadku należy upewnić się, że wszystkie pakiety pomocy technicznej, do których odwołuje się projekt, mają tę samą wersję. Pakiet NuGet Azure Mobile Apps ma zależności dla platformy Android, więc jeśli twój projekt korzysta z nowszych pakietów wsparcia, musisz zainstalować ten pakiet z wymaganą wersją bezpośrednio, aby uniknąć konfliktów.

Dodawanie uwierzytelniania do aplikacji systemu iOS

W tej sekcji pokazano, jak zaimplementować interfejs IAuthenticate w projekcie aplikacji systemu iOS. Pomiń tę sekcję, jeśli nie obsługujesz urządzeń z systemem iOS.

W programie Visual Studio lub programie Xamarin Studio kliknij prawym przyciskiem myszy projekt systemu iOS , a następnie ustaw jako projekt startowy.
Naciśnij F5, aby uruchomić projekt w debugerze, a następnie sprawdź, czy po uruchomieniu aplikacji zostanie zgłoszony nieobsługiwany wyjątek z kodem stanu 401 (Brak autoryzacji). Odpowiedź 401 jest generowana, ponieważ dostęp do zaplecza jest ograniczony tylko do autoryzowanych użytkowników.

Otwórz AppDelegate.cs w projekcie iOS i dodaj poniższe instrukcje:

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Zaktualizuj klasę AppDelegate , aby zaimplementować interfejs IAuthenticate w następujący sposób:

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

Zaktualizuj klasę AppDelegate , dodając pole MobileServiceUser i metodę Authentication , która jest wymagana przez interfejs IAuthenticate w następujący sposób:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
                 success = true;
             }
         }
     }
     catch (Exception ex)
     {
        message = ex.Message;
     }

     // Display the success or failure message.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

Jeśli używasz dostawcy tożsamości innego niż Facebook, wybierz inną wartość dla elementu [MobileServiceAuthenticationProvider].

Zaktualizuj klasę AppDelegate , dodając przeciążenie metody OpenUrl w następujący sposób:

 ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

Dodaj następujący wiersz kodu do metody FinishedLaunching przed wywołaniem metody LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Ten kod zapewnia zainicjowanie mechanizmu uwierzytelniającego przed załadowaniem aplikacji.
Otwórz plik Info.plist i dodaj typ adresu URL. Ustaw identyfikator na wybraną nazwę, schematy adresów URL dla aplikacji i rolę na Brak.
Skompiluj aplikację, uruchom ją, a następnie zaloguj się przy użyciu wybranego dostawcy uwierzytelniania i sprawdź, czy masz dostęp do danych jako uwierzytelniony użytkownik.

Dodawanie uwierzytelniania do projektów aplikacji systemu Windows 10 (w tym telefonu)

W tej sekcji pokazano, jak zaimplementować interfejs IAuthenticate w projektach aplikacji systemu Windows 10. Te same kroki dotyczą projektów platformy uniwersalnej systemu Windows (UWP), ale przy użyciu projektu UWP (ze zanotowanymi zmianami). Pomiń tę sekcję, jeśli nie obsługujesz urządzeń z systemem Windows.

W programie Visual Studio kliknij prawym przyciskiem myszy projekt platformy UWP , a następnie ustaw jako projekt startowy.
Naciśnij F5, aby uruchomić projekt w debugerze, a następnie sprawdź, czy po uruchomieniu aplikacji zostanie zgłoszony nieobsługiwany wyjątek z kodem stanu 401 (Brak autoryzacji). Odpowiedź 401 występuje, ponieważ dostęp do zaplecza jest ograniczony tylko do autoryzowanych użytkowników.
Otwórz MainPage.xaml.cs dla projektu aplikacji systemu Windows i dodaj następujące using instrukcje:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Zastąp <your_Portable_Class_Library_namespace> przestrzenią nazw dla przenośnej biblioteki klas.
Zaktualizuj klasę MainPage , aby zaimplementować interfejs IAuthenticate w następujący sposób:
```
 public sealed partial class MainPage : IAuthenticate
```

Zaktualizuj klasę MainPage , dodając pole MobileServiceUser i metodę Authentication , która jest wymagana przez interfejs IAuthenticate w następujący sposób:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```