Advertisement
  1. Code
  2. Windows Phone

Hinzufügen der Authentifizierung mit Azure Mobile Services

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Mit Azure Mobile Services können Sie Benutzer von Ihren universellen Windows-Apps aus authentifizieren. In diesem Tutorial erfahren Sie, wie Sie:

  • die Authentifizierung zu einer Windows Phone 8.1 WinRT-App mithilfe verschiedener Identitätsanbieter hinzufügen, die von Azure Mobile Services unterstützt werden
  • zwischengespeicherte Authentifizierungstoken auf dem Client speichern 
  • Benutzerprofildetails in einer Azure-Datenbank mithilfe von Serverskripten abrufen und speichern
  • zusätzliche Authentifizierungsbereiche hinzufügen, um weitere Benutzerinformationen vom Server abzurufen
  • das Einfügeskript der UsersTable bearbeiten, um einen Datensatz einzufügen, wenn ein Benutzer mit derselben userId nicht vorhanden ist, und aktualisieren Sie andernfalls den vorhandenen Benutzer

Die folgenden Schritte sind erforderlich, um die Authentifizierung in Ihrer App zu aktivieren:

  • Registrieren Sie Ihre App zur Authentifizierung
  • Konfigurieren Sie Azure Mobile Services
  • Beschränken Sie die Tabellenberechtigungen auf authentifizierte Benutzer
  • Konfigurieren Sie Ihre App für die Verwendung von Azure Mobile Services
  • Fügen Sie der App eine Authentifizierung hinzu
  • Cache-Authentifizierungstoken auf dem Client
  • Benutzerinformationen vom Server abrufen

Sie müssen Ihre App bei einem Identitätsanbieter registrieren und die vom Anbieter generierten Anmeldeinformationen zu Azure Mobile Services hinzufügen. Lassen Sie uns zunächst sehen, wie Sie Ihre App für die Microsoft-Kontoanmeldung registrieren.

1. App-Registrierung

Führen Sie die folgenden Schritte aus, um Live Connect als Authentifizierungsanbieter für Azure Mobile Services zu verwenden.

Schritt 1: Erstellen Sie eine neue App im Dev Center

Öffnen Sie einen Browser und rufen Sie das Dev Center für Windows Store-Apps auf. Navigieren Sie zur Seite App senden und klicken Sie auf App-Name.

Submit an app to Windows StoreSubmit an app to Windows StoreSubmit an app to Windows Store

Schritt 2: Reservieren Sie einen App-Namen

Reservieren Sie einen App-Namen und klicken Sie auf Speichern. Die App wird im Windows Store unter diesem Namen aufgeführt.

Reserve app nameReserve app nameReserve app name

Schritt 3: Konfigurieren Sie Live-Dienste für die App

Klicken Sie auf der Seite Dienste unter Windows Azure Mobile-Dienste auf Live-Dienste.

Navigate to Live Services siteNavigate to Live Services siteNavigate to Live Services site

Schritt 4: Notieren Sie die App-Einstellungswerte

Notieren Sie sich die Werte für Client-ID, Client-Geheimnis und Paketsicherheitskennung (SID). Sie benötigen diese Werte später.

Note the App Settings from Live Services siteNote the App Settings from Live Services siteNote the App Settings from Live Services site

Schritt 5: Legen Sie den Umleitungs-URI für die App fest

Geben Sie unter API-Einstellungen den folgenden Wert als Umleitungs-URl ein und klicken Sie auf Speichern.

Configure App Settings in Live Services SiteConfigure App Settings in Live Services SiteConfigure App Settings in Live Services Site

Dies aktiviert die Microsoft-Kontoauthentifizierung für Ihre App.

2. Konfigurieren Sie Azure Mobile Services

Nachdem Sie Ihre App beim Identitätsanbieter registriert haben, müssen Sie Azure Mobile Services über das Azure Management Portal konfigurieren.

Schritt 1: Wählen Sie den mobilen Dienst für die App aus

Melden Sie sich beim Azure Management Portal an, klicken Sie auf Mobile-Dienste und wählen Sie Ihre App aus.

Select Mobile Service in Azure Management PortalSelect Mobile Service in Azure Management PortalSelect Mobile Service in Azure Management Portal

Schritt 2: Konfigurieren Sie die Push-Einstellungen

Geben Sie auf der Registerkarte Push die Werte für Client Secret und Package SID ein und klicken Sie auf Speichern.

Set Client Secret and Package SID for the appSet Client Secret and Package SID for the appSet Client Secret and Package SID for the app

Schritt 3: Konfigurieren Sie die Identitätseinstellungen

Stellen Sie auf der Registerkarte Identität die Client-ID ein. Stellen Sie auch die Werte für Client Secret und Package SID ein, wenn sie noch nicht eingestellt sind.

Configure Microsoft account settingsConfigure Microsoft account settingsConfigure Microsoft account settings

Sie können jetzt ein Microsoft-Konto für die Authentifizierung in Ihrer App mithilfe von Azure Mobile Services verwenden.

3. Beschränken Sie die Tabellenberechtigungen

Mithilfe des Azure-Verwaltungsportals können wir die Tabellenberechtigungen so festlegen, dass der Zugriff nur auf angemeldete Benutzer beschränkt wird.

Schritt 1: Wählen Sie die UsersTable aus

Wählen Sie im Azure-Verwaltungsportal auf der Registerkarte Daten die Tabelle aus, für die Sie die Berechtigungen ändern möchten. In diesem Tutorial ändern wir die Berechtigungen für UsersTable.

Schritt 2: Festlegen von Tabellenberechtigungen

Setzen Sie auf der Registerkarte Berechtigungen alle Berechtigungen auf Nur authentifizierte Benutzer und klicken Sie auf Speichern.

Restrict table permissions to authenticated usersRestrict table permissions to authenticated usersRestrict table permissions to authenticated users

Wenn Ihre Windows Store-App versucht, auf diese Tabelle zuzugreifen, wird eine nicht behandelte Ausnahme mit dem Statuscode 401 (Nicht autorisiert) ausgelöst. Dies liegt daran, dass die App versucht, als nicht authentifizierter Benutzer auf Azure Mobile Services zuzugreifen.

4. Konfigurieren Sie die App für die Verwendung mobiler Dienste

Als Nächstes müssen wir die Windows Phone 8.1 WinRT-App für die Verwendung von Azure Mobile Services konfigurieren.

Schritt 1: (Optional) Verknüpfen Sie Ihre App mit dem Store

Dieser Schritt gilt nur für den Microsoft-Kontoanmeldeanbieter. Beim Registrieren der Windows Store-App-Paketinformationen bei Mobile Services kann der Client die Microsoft-Anmeldedaten für eine einmalige Anmeldung wiederverwenden.

Klicken Sie mit der rechten Maustaste auf das Projekt im Lösung-Explorer, wählen Sie Store und klicken Sie auf App mit dem Store verbinden. Klicken Sie im Assistenten Assoziieren Ihrer App mit dem Windows Store auf Anmelden und melden Sie sich mit Ihrem Microsoft-Konto an. Wählen Sie die App aus, die Sie zuvor registriert haben, und assoziieren Sie sie mit dem Store.

Associate app with storeAssociate app with storeAssociate app with store

Die erforderlichen Windows Store-Registrierungsinformationen werden dann zum Anwendungsmanifest hinzugefügt.

Schritt 2: Fügen Sie das Windows Azure Mobile-Dienste-SDK hinzu

Fügen Sie als Nächstes das Windows Azure Mobile Dienste-SDK mithilfe des NuGet-Paketmanagers hinzu.

Add Windows Azure Mobile Services SDK to the appAdd Windows Azure Mobile Services SDK to the appAdd Windows Azure Mobile Services SDK to the app

Schritt 3: Fügen Sie Azure Mobile-Dienste als verbundenen Dienst hinzu

Der im Azure-Verwaltungsportal erstellte mobile Dienst muss mit der App verknüpft sein. Klicken Sie im Lösung-Explorer mit der rechten Maustaste auf das Projekt und wählen Sie unter Hinzufügen die Option Verbundene Dienste aus.

Wählen Sie im angezeigten Dialogfeld Service Manager den zuvor erstellten mobilen Dienst aus und klicken Sie auf OK. Dadurch wird eine Instanz des mobilen Dienstes in App.xaml.cs hinzugefügt.

Connect the Mobile Service with your appConnect the Mobile Service with your appConnect the Mobile Service with your app

Schritt 4: Fügen Sie eine Klasse für UsersTable hinzu

Definieren Sie eine Klasse UsersTable, deren Datenelemente die Spalten in der Tabelle darstellen. Sie müssen einen Verweis auf die Json.NET-Bibliothek in Ihrer App hinzufügen, um die JsonProperty-Klasse verwenden zu können.

5. Fügen Sie der App eine Authentifizierung hinzu

Als Nächstes fügen wir die Benutzerauthentifizierung hinzu, bevor wir Ressourcen vom mobilen Dienst anfordern.

Schritt 1: Deklarieren Sie globale Variablen

Deklarieren Sie der MainPage-Klasse eine globale Mitgliedsvariable zum Speichern des authentifizierten Benutzers.

Schritt 2: Definieren Sie die AuthenticateAsync-Methode

Wir fügen eine Methode hinzu, die den Authentifizierungsprozess ausführt. Die LoginAsync-Methode verwendet den Identitätsanbieter als Parameter und verarbeitet den Authentifizierungsablauf.

Schritt 3: Behandeln Sie die Antwort bei der App-Aktivierung

Unter Windows Phone 8.1 müssen Sie die Antwort vom WebAuthenticationBroker verarbeiten. Wir fügen in App.xaml.cs eine OnActivated-Methode hinzu, um diese Antwort zu verarbeiten.

Wenn die OnActivated-Methode bereits vorhanden ist, fügen Sie einfach den obigen #if...#endif-Codeblock hinzu. Beachten Sie, dass die LoginAsync-Methode aufgerufen werden muss, nachdem die OnNavigated-Methode aufgerufen und das Loaded-Ereignis der Seite ausgelöst wurde.

Schritt 4: Fügen Sie eine Anmeldeschaltfläche hinzu

Fügen Sie der MainPage.xaml Ihrer App eine Anmeldeschaltfläche hinzu und rufen Sie eine Methode auf, um den Benutzer zu authentifizieren, wenn Sie auf die Schaltfläche klicken.

Rufen Sie beim Klicken auf die Schaltfläche die AuthenticateAsync-Methode auf und blenden Sie die Anmeldeschaltfläche aus, wenn die Authentifizierung erfolgreich ist.

Schritt 5: Behandeln Sie Ausnahmen in der AuthenticateAsync-Methode

Unsere AuthenticateAsync-Methode verwaltet die Authentifizierung von Benutzern, wir können jedoch Code hinzufügen, um Ausnahmen und alternative Abläufe zu behandeln. Wir aktualisieren die Funktion, um die LoginAsync-Methode iterativ aufzurufen, bis der user nicht null ist. Bei erfolgreicher Authentifizierung wird die UserId des authentifizierten Benutzers angezeigt. Sobald der Benutzer erfolgreich angemeldet ist, sollte die App fehlerfrei ausgeführt werden.

6. Cache-Authentifizierungstoken auf dem Client

Für die AuthenticateAsync-Funktion muss der Client bei jedem Start der App sowohl den Identitätsanbieter als auch den Mobilfunkdienst kontaktieren. Das ist nicht sehr effizient. Wenn viele Benutzer die App gleichzeitig verwenden, können Probleme beim Laden auftreten.

Um dieses Problem zu beheben, können wir das Authentifizierungstoken zwischenspeichern. Wir können versuchen, das zwischengespeicherte Authentifizierungstoken zu verwenden und auf den Standardauthentifizierungsablauf zurückzugreifen, wenn das Authentifizierungstoken nicht mehr gültig ist.

Die geänderte AuthenticateAsync-Funktion versucht, die im PasswordVault gespeicherten Anmeldeinformationen für den Zugriff auf den Mobilfunkdienst zu verwenden. Die folgende Abfolge von Ereignissen tritt auf:

  • Wenn Anmeldeinformationen vorhanden sind, werden sie aus dem PasswordVault abgerufen.
  • Eine einfache Abfrage wird gesendet, um zu überprüfen, ob das Token nicht abgelaufen ist.
  • Wenn der Server mit einem 401-Statuscode antwortet, greifen wir auf den Standardauthentifizierungsablauf zurück.
  • Wenn der PasswordVault keine Anmeldeinformationen enthält, greifen wir auf den Standardauthentifizierungsablauf zurück.

Beachten Sie, dass die App während der Anmeldung nach abgelaufenen Authentifizierungstoken sucht. Authentifizierungstoken können jedoch nach der Authentifizierung ablaufen, wenn der Benutzer die App verwendet. In einem MSDN-Blogbeitrag wird erläutert, wie mit einer solchen Situation umgegangen wird.

7. Benutzerinformationen abrufen

Die Client-Objekte machen nicht alle Benutzerinformationen verfügbar, aber auf dem Server können wir alle benötigten Informationen abrufen. Das User-Objekt, das an alle Skripte übergeben wird, verfügt über eine Funktion getIdentities, die ein Objekt mit anbieterspezifischen Daten zurückgibt. Es kann verwendet werden, um die Benutzerinformationen abzufragen. Für einen Benutzer, der mit einem Microsoft-Konto authentifiziert ist, wird das Objekt durch Aufrufen von user.getIdentities zurückgegeben.

Um die Benutzerinformationen zu erhalten, senden wir eine Anfrage an https://apis.live.net/v5.0/me/ und übergeben das Zugriffstoken als Parameter. Die Menge an Informationen, die von den Anbietern für die Benutzerskripte verfügbar sind, ist begrenzt. Dies ist das Ergebnis der Anforderung an den /me-Endpunkt:

Für weitere Informationen müssen zusätzliche Authentifizierungsbereiche angefordert werden. Mit Azure Mobile Services können wir benutzerdefinierte Bereiche angeben, die bei der serverseitigen Authentifizierung an die Authentifizierungsanbieter übergeben werden.

Standardmäßig fordert die Anmeldung nur den Bereich wl.basic an. Wir können weitere Informationen über den Benutzer erhalten, wenn wir einige zusätzliche Bereiche festlegen. Fordern wir jetzt einen zusätzlichen Bereich beim Microsoft-Login an.

Legen Sie auf der Registerkarte Konfigurieren des mobilen Dienstes das MS_MicrosoftScope in den App-Einstellungen fest.

app settingsapp settingsapp settings

Aufgrund dieser Änderung erhalte ich die zusätzlichen Informationen, die ich nach dem erneuten Anmelden angefordert habe.

Wenn der Benutzer über ein Microsoft-Konto angemeldet ist, sendet er eine Anforderung an Live Connect-APIs und übergibt das im Benutzeridentitätsobjekt gespeicherte Token. Schließlich wird das zurückgegebene JSON-Objekt analysiert und Benutzerprofildetails abgerufen.

Wir müssen jetzt das Einfügeskript ändern, um einen neuen Datensatz einzufügen, wenn ein Benutzer mit der userId nicht vorhanden ist. Wenn ein Benutzer vorhanden ist, aktualisieren wir diesen Benutzer. Sie können ein serverseitiges Tabellenskript verwenden, um zu überprüfen, ob ein Datensatz vorhanden ist, bevor Sie den Einfügevorgang abschließen.

Hier ist ein Beispielskript, das prüft, ob eines der Elemente in der Tabelle einen übereinstimmenden userId-Wert hat, und in diesem Fall keine Einfügung durchführt.

Wir können jetzt beide Skripte kombinieren, um unser endgültiges Einfügeskript für UsersTable zu erstellen. Ersetzen Sie auf der Registerkarte Skript von UsersTable das Einfügeskript durch das folgende Skript:

Nachdem wir das Einfügeskript aktualisiert haben, wird bei jedem Aufruf einer Einfügeoperation ein neuer Datensatz hinzugefügt, wenn ein Benutzer mit einer bestimmten userId nicht vorhanden ist. Außerdem wird das Einfügeelement mit Benutzerinformationen userId, name und email-Adresse aktualisiert.

Ich habe eine Methode InsertUser hinzugefügt, die einen user-Parameter vom Typ UsersTable in die Tabelle einfügt.

Nach dem Aufruf der AuthenticateAsync-Methode beim Klicken auf die Schaltfläche rufe ich die InsertUser-Methode auf, um den Benutzer zu UsersTable hinzuzufügen.

Sie können die App im Emulator ausführen, um zu überprüfen, ob sie funktioniert. Wenn Sie sich zum zweiten Mal anmelden, verwendet die App das zwischengespeicherte Authentifizierungstoken, anstatt den Anmeldebildschirm anzuzeigen.

Login using a Microsoft accountLogin using a Microsoft accountLogin using a Microsoft account

Schlussfolgerung

Die Authentifizierung von Benutzern für verschiedene Identitätsanbieter mithilfe von Azure Mobile Services ist recht einfach. In diesem Tutorial habe ich gezeigt, wie ein Microsoft-Konto zur Authentifizierung verwendet werden kann. Das Verfahren zur Verwendung anderer Identitätsanbieter ist dasselbe. Im AuthenticateAsync-Aufruf muss nur der provider-Parameter geändert werden. Es wird empfohlen, das Authentifizierungstoken zwischenzuspeichern, damit der Benutzer eine einmalige Anmeldung erhalten kann.

Zusätzliche Authentifizierungsbereiche können angefordert werden, um weitere Benutzerinformationen abzurufen. In diesem MSDN-Artikel wird erläutert, wie dies für verschiedene Identitätsanbieter durchgeführt werden kann. Laden Sie die Quelldateien des Tutorials als Referenz herunter. Denken Sie daran, die App für die Verwendung von Azure Mobile Services zu konfigurieren, bevor Sie sie bereitstellen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.