Verificatie toevoegen met Azure Mobile Services

Met Azure Mobile Services kunt u gebruikers verifiëren met uw universele Windows-apps. In deze tutorial leert u hoe u:

  • authenticatie toevoegen aan een Windows Phone 8.1 WinRT-app met verschillende identiteitsproviders die worden ondersteund door Azure Mobile Services
  • bewaar in de cache opgeslagen authenticatietokens op de client
  • gegevens van gebruikersprofielen ophalen en opslaan in een Azure-database met behulp van serverscripts
  • voeg extra verificatie scopes toe om meer gebruikersinformatie van de server op te halen
  • bewerk het invoegscript van de UsersTable om een ​​record in te voegen als een gebruiker met hetzelfde gebruikersnaam bestaat niet en werkt de bestaande gebruiker anders bij

De volgende stappen zijn vereist om verificatie in uw app in te schakelen:

  • registreer uw app voor authenticatie
  • Azure Mobile Services configureren
  • beperking van tabelrechten voor geverifieerde gebruikers
  • configureer uw app om Azure Mobile Services te gebruiken
  • voeg authenticatie toe aan de app
  • cache-authenticatietokens op de client
  • gebruikersinformatie ophalen van de server

U moet uw app registreren bij een identiteitsprovider en de door de leverancier gegenereerde aanmeldingsgegevens toevoegen aan Azure Mobile Services. Laten we eerst eens kijken hoe u uw app registreert voor het aanmelden bij een Microsoft-account. 

1. App-registratie

Volg deze stappen om Live Connect te gebruiken als verificatieprovider voor Azure Mobile Services.

Stap 1: Maak een nieuwe app in het Dev Center

Open een browser en ga naar de Dev Center voor Windows Store-apps. Navigeer naar de Dien een app in pagina en klik Applicatie naam.

Stap 2: Reserveer een app-naam

Reserveer een Applicatie naam en klik Opslaan. De app wordt onder deze naam vermeld in de Windows Store.

Stap 3: Live-services configureren voor de app

Op de Diensten pagina, klik Live-services onder Windows Azure Mobile Services.

Stap 4: noteer de waarden voor de app-instellingen

Let op de waarden van klant identificatie, Cliënt geheim, en Pakketbeveiligings-ID (SID). Je hebt deze waarden later nodig.

Stap 5: Stel de omleidings-URI voor de app in

Onder API-instellingen, lever de volgende waarde als URl doorsturen en klik Opslaan.

https: //.azure-mobile.net/login/microsoftaccount

Dit maakt authenticatie van uw Microsoft-account voor uw app mogelijk.

2. Configureer Azure Mobile Services

Nadat u uw app bij de identiteitsprovider heeft geregistreerd, moet u Azure Mobile Services configureren met behulp van de Azure Management Portal.

Stap 1: Selecteer de mobiele service voor de app 

Meld u aan bij de Azure Management Portal en klik op Mobiele services, en selecteer je app.

Stap 2: Push-instellingen configureren

Onder de Duwen tab, voer het Client Secret en Pakket SID waarden en klik Opslaan.

Stap 3: Identiteitsinstellingen configureren

Onder de Identiteit tab, stel de klant identificatie. Stel ook de Client Secret en Pakket SID waarden als ze nog niet zijn ingesteld.

U kunt nu een Microsoft-account gebruiken voor verificatie in uw app met behulp van Azure Mobile Services.

3. Beperk Table-machtigingen

Met behulp van de Azure Management Portal kunnen we de tabelmachtigingen instellen om alleen toegang tot ingelogde gebruikers te beperken.

Stap 1: Selecteer de UsersTable

Onder de Gegevens in het Azure Management Portal, kiest u de tabel waarvoor u de machtigingen wilt wijzigen. In deze zelfstudie wijzigen we de machtigingen voor UsersTable.

Stap 2: Tabelmachtigingen instellen

Onder de machtigingen tab, stel alle rechten in Alleen geverifieerde gebruikers en klik Opslaan.

Wanneer uw Windows Store-app toegang tot deze tabel probeert te krijgen, wordt een niet-afgehandelde uitzondering met een statuscode van 401 (ongeautoriseerd) weergegeven. Dit gebeurt omdat de app toegang probeert te krijgen tot Azure Mobile Services als een niet-geverifieerde gebruiker.

4. Configureer de app om mobiele services te gebruiken

Vervolgens moeten we de Windows Phone 8.1 WinRT-app configureren om Azure Mobile Services te gebruiken.

Stap 1: (Optioneel) Koppel uw app aan de winkel

Deze stap is alleen van toepassing op de aanmeldingsprovider van het Microsoft-account. Bij het registreren van de Windows Store-app-pakketinformatie bij Mobile Services kan de client Microsoft-inloggegevens opnieuw gebruiken voor eenmalige aanmelding. 

Klik met de rechtermuisknop op het project in de Solution Explorer, kiezen Op te slaan en klik App koppelen aan de winkel. In de Koppel uw app aan de Windows Store wizard, klik Aanmelden en log in met uw Microsoft-account. Selecteer de app die u eerder hebt geregistreerd en Associëren het met de winkel.

De vereiste registratie-informatie voor Windows Store wordt vervolgens toegevoegd aan het toepassingsmanifest.

Stap 2: Voeg Windows Azure Mobile Services SDK toe

Voeg vervolgens de Windows Azure Mobile Services SDK met behulp van de NuGet-pakketbeheerder.

Stap 3: Azure Mobile Services toevoegen als een verbonden service

De mobiele service die u in de Azure Management Portal hebt gemaakt, moet aan de app zijn gekoppeld. Klik met de rechtermuisknop op het project in de Solution Explorer en selecteer Connected Services onder Toevoegen.

In de Service Manager dialoogvenster dat verschijnt, kies de mobiele service die u eerder hebt gemaakt en klik op OK. Hiermee wordt een instantie voor mobiele service toegevoegd in App.xaml.cs.

Stap 4: voeg een klasse toe voor gebruikerstabel

Definieer een klasse UsersTable waarvan de gegevensleden de kolommen in de tabel vertegenwoordigen. U moet een verwijzing naar de Json.NET-bibliotheek in uw app toevoegen om de JsonProperty klasse.

class UsersTable [JsonProperty (PropertyName = "id")] public string Id get; vast te stellen;  [JsonProperty (PropertyName = "userId")] public string UserID get; vast te stellen;  [JsonProperty (PropertyName = "user_email")] public string Email get; vast te stellen;  [JsonProperty (PropertyName = "profile_picture")] public string ProfilePicture get; vast te stellen;  [JsonProperty (PropertyName = "display_name")] public string DisplayName get; vast te stellen; 

5. Verificatie aan de app toevoegen

Vervolgens voegen we gebruikersverificatie toe voordat we bronnen van de mobiele service aanvragen.

Stap 1: Global Variables verklaren

Verklaar een lidvariabele die globaal is voor de Hoofdpagina klasse voor het opslaan van de geverifieerde gebruiker.

privé MobileServiceUser gebruiker;

Stap 2: Definieer de AuthenticateAsync Methode

We voegen een methode toe die het authenticatieproces uitvoert. De LoginAsync methode neemt de identiteitsprovider als een parameter en verwerkt de authenticatiestroom.

private async System.Threading.Tasks.Task AuthenticateAsync () user = wacht op App.MobileService.LoginAsync (MobileServiceAuthenticationProvider.MicrosoftAccount); 

Stap 3: Behandel de reactie op app-activering

Op Windows Phone 8.1 moet u het antwoord van de WebAuthenticationBroker. We voegen een toe OnActivated methode in App.xaml.cs om dit antwoord te behandelen.

beschermde override void OnActivated (IActivatedEventArgs args) #if WINDOWS_PHONE_APP if (args.Kind == ActivationKind.WebAuthenticationBrokerContinuation) App.MobileService.LoginComplete (args als WebAuthenticationBrokerContinuationEventArgs);  #endif base.OnActivated (args); 

Als het OnActivated methode bestaat al, voeg gewoon het bovenstaande toe # if ... #endif codeblok. Merk op dat de LoginAsync methode moet na de OnNavigated methode is aangeroepen en na de pagina's loaded evenement is geactiveerd.

Stap 4: voeg een login-knop toe

Voeg een login-knop toe aan uw apps MainPage.xaml en bel een methode om de gebruiker te authenticeren wanneer op de knop wordt geklikt.

Klik op de knop, de AuthenticateAsync methode en verberg de login-knop als de authenticatie succesvol is.

private async void ButtonLogin_Click (object afzender, RoutedEventArgs e) // Meld u aan bij de gebruiker en laad vervolgens gegevens van de mobiele service. wachten op AuthenticateAsync (); // Verberg de login-knop en laad items van de mobiele service. this.ButtonLogin.Visibility = Windows.UI.Xaml.Visibility.Collapsed; 

Stap 5: Behandel uitzonderingen in de AuthenticateAsync Methode

Onze AuthenticateAsync methode verwerkt de authenticatie van gebruikers, maar we kunnen code toevoegen om uitzonderingen en alternatieve stromen af ​​te handelen. We werken de functie bij om iteratief de. Te bellen LoginAsync methode tot de gebruiker is niet nul. Bij succesvolle verificatie tonen we de Gebruikersnaam van de geverifieerde gebruiker. Nadat de gebruiker met succes is ingelogd, moet de app zonder fouten worden uitgevoerd.

private async System.Threading.Tasks.Task AuthenticateAsync () while (user == null) string message; probeer user = wacht op App.MobileService.LoginAsync (MobileServiceAuthenticationProvider.MicrosoftAccount); message = string.Format ("U bent nu aangemeld - - 0", user.UserId);  catch (InvalidOperationException) message = "Login vereist";  var dialog = new MessageDialog (bericht); dialog.Commands.Add (nieuwe UICommand ("OK")); wacht op dialog.ShowAsync (); 

6. Cacheverificatie Tokens op de client

De AuthenticateAsync functie vereist dat de klant contact opneemt met zowel de identiteitsprovider als de mobiele service telkens wanneer de app start. Dat is niet erg efficiënt. Als veel gebruikers de app tegelijkertijd gebruiken, kunnen er problemen met de belasting optreden.

Om dit probleem te verhelpen, kunnen we het verificatietoken in de cache opslaan. We kunnen proberen het cacheverificatietoken te gebruiken, terug te vallen naar de standaardverificatiestroom als het verificatietoken niet langer geldig is.

private async System.Threading.Tasks.Task AuthenticateAsync (String-provider) string message; // Gebruik de PasswordVault om uw legitimatiegegevens veilig op te slaan en in te zien. PasswordVault-kluis = nieuwe PasswordVault (); PasswordCredential-referentie = null; while (credential == null) try // Probeer een bestaande referentie uit de kluis te halen. credential = vault.FindAllByResource (provider) .FirstOrDefault ();  catch (Uitzondering) // Als er geen overeenkomende resource is, treedt er een fout op die we negeren.  if (credential! = null) // Maak een gebruiker aan uit de opgeslagen inloggegevens. user = nieuwe MobileServiceUser (credential.UserName); credential.RetrievePassword (); user.MobileServiceAuthenticationToken = credential.Password; // Stel de gebruiker in op de opgeslagen inloggegevens. App.MobileService.CurrentUser = gebruiker; Probeer // Probeer nu een item te retourneren om te bepalen of de inloggegevens in de cache zijn verlopen. wacht op App.MobileService.GetTable() .Neem (1) .ToListAsync ();  catch (MobileServiceInvalidOperationException ex) if (ex.Response.StatusCode == System.Net.HttpStatusCode.Unauthorized) // Verwijder de referentie met het verlopen token. vault.Remove (referenties); referentie = null; doorgaan met;  else try // Log in met de identiteitsprovider. user = wacht op App.MobileService.LoginAsync (provider); // Creëer en bewaar de gebruikersreferenties. credential = new PasswordCredential (provider, user.UserId, user.MobileServiceAuthenticationToken); vault.Add (referenties);  catch (MobileServiceInvalidOperationException ex) message = "U moet inloggen. Login vereist";  message = string.Format ("U bent nu aangemeld - 0", user.UserId); var dialog = new MessageDialog (bericht); dialog.Commands.Add (nieuwe UICommand ("OK")); wacht op dialog.ShowAsync (); 

De gemodificeerde AuthenticateAsync functie probeert de inloggegevens te gebruiken die zijn opgeslagen in de PasswordVault om toegang te krijgen tot de mobiele service. De volgende reeks gebeurtenissen vindt plaats:

  • Als er referenties aanwezig zijn, worden deze opgehaald van de PasswordVault.
  • Er wordt een eenvoudige query verzonden om te controleren of het token niet is verlopen.
  • Als de server antwoordt met een 401-statuscode, vallen we terug naar de standaardverificatiestroom.
  • Als het PasswordVault bevat geen referenties, we vallen terug naar de standaard authenticatiestroom.

Merk op dat de app tests uitvoert voor verlopen authenticatietokens tijdens het inloggen. Verificatietokens kunnen echter vervallen na verificatie, wanneer de gebruiker de app gebruikt. In een MSDN-blogpost wordt uitgelegd hoe u met een dergelijke situatie moet omgaan.

7. Haal gebruikersinformatie op

De clientobjecten onthullen niet alle gebruikersinformatie, maar op de server kunnen we alle informatie krijgen die we nodig hebben. De Gebruiker object, dat wordt doorgegeven aan alle scripts, heeft een getIdentities functie die een object retourneert met providerspecifieke gegevens. Het kan worden gebruikt om de gebruikersinformatie op te vragen. Voor een gebruiker die is geverifieerd met een Microsoft-account, wordt het object geretourneerd door te bellen user.getIdentities.

"microsoft": "userId": "MicrosoftAccount: my-actual-user-id", "accessToken": "the-actual-access-token" 

Om de gebruikersinformatie te verkrijgen, sturen we een verzoek naar https://apis.live.net/v5.0/me/, het toegangstoken als een parameter doorgeven. De hoeveelheid informatie die beschikbaar is van de providers voor de gebruikersscripts is beperkt. Dit is het resultaat van het verzoek aan de /me eindpunt:

"id": "my-live-id", "name": "Vivek Maskara", "first_name": "Vivek", "last_name": "Maskara", "link": "https://profile.live .com / "," geslacht ": null," locale ":" en_US "," updated_time ":" 2015-03-10T16: 03: 43-08: 00 "

 Aanvullende authenticatiespectieven moeten worden aangevraagd voor meer informatie. Met Azure Mobile Services kunnen we aangepaste scopes opgeven die worden doorgegeven aan de verificatieproviders bij het uitvoeren van verificatie op de server.

Standaard vraagt ​​de login alleen de wl.basic scope. We kunnen meer informatie over de gebruiker krijgen als we een aantal extra scopes instellen. Laten we nu een extra scope aanvragen bij de Microsoft-aanmelding.

Onder de configureren tab van de mobiele dienst, stel de MS_MicrosoftScope in app instellingen.

Als gevolg van deze wijziging ontvang ik de aanvullende informatie die ik heb aangevraagd na opnieuw in te loggen.

"id": "my-live-id", "name": "Vivek Maskara", "first_name": "Vivek", "last_name": "Maskara", "link": "https://profile.live .com / "," geslacht ": null," e-mails ": " preferred ":" [email protected] "," account ":" [email protected] "," personal ": null," business ": null, "locale": "en_US", "updated_time": "2015-03-10T16: 03: 43-08: 00"

Als de gebruiker is aangemeld via een Microsoft-account, wordt een aanvraag verzonden naar Live Connect-API's, waarbij het opgeslagen token in het object voor gebruikersidentiteiten wordt doorgegeven. Ten slotte wordt het JSON-object dat wordt geretourneerd ontleed en worden gebruikersprofieldetails opgehaald.

user.getIdentities (succes: functie (identiteiten) var url; var oauth = null; if (identities.microsoft) var liveAccessToken = identities.microsoft.accessToken; url = 'https://apis.live.net/v5 .0 / me /? Method = GET & access_token = '+ liveAccessToken; if (url) var requestCallback = function (err, resp, body) if (err || resp.statusCode! == 200) console.error ( 'Fout bij het verzenden van gegevens naar de provider:', err); request.respond (statusCodes.INTERNAL_SERVER_ERROR, body); else try var userData = JSON.parse (body); item.userId = user.userId; item.display_name = userData.name; item.user_email = userData.emails ['account']; request.execute (); catch (ex) console.error ('Fout bij parseren van antwoord van de provider-API:', ex); request. antwoord (statusCodes.INTERNAL_SERVER_ERROR, ex); var req = require ('request'); var reqOptions = uri: url, headers: Accept: "application / json"; req (reqOptions, requestCallback);  else // Invoegen met standaard gebruikersnaam request.execute (););

We moeten nu het invoegscript aanpassen om een ​​nieuwe record in te voegen als een gebruiker met de gebruikersnaam bestaat niet Als een gebruiker bestaat, werken we die gebruiker bij. U kunt een tafelscript op de server gebruiken om te controleren of er een record bestaat voordat u de invoegbewerking voltooit.

Hier is een voorbeeldscript dat controleert of een van de items in de tabel een overeenkomst heeft gebruikersnaam waarde en, als dat het geval is, voert het geen insert uit.

functie-insert (item, gebruiker, verzoek) var table = tables.getTable ('UsersTable'); table.where (userId: user.userId). read (success: upsertItem); function upsertItem (existingItems) if (existingItems.length === 0) request.execute ();  else item.id = existingItems [0] .id; table.update (item, success: function (updatedItem) request.respond (200, updatedItem)); 

We kunnen nu beide scripts combineren om ons laatste invoegscript voor te bouwen UsersTable. Onder de Script tabblad van UsersTable, vervang het invoegscript door het volgende script:

functie-insert (item, gebruiker, verzoek) item.display_name = ""; // standaard var tabel = tables.getTable ('UsersTable'); table.where (userId: user.userId). read (success: upsertItem); function upsertItem (existingItems) if (existingItems.length === 0) user.getIdentities (succes: functie (identiteiten) var url; var oauth = null; if (identities.microsoft) var liveAccessToken = identities.microsoft.accessToken; url = 'https: // apis .live.net / v5.0 / me /? method = GET & access_token = '+ liveAccessToken; if (url) var requestCallback = function (err, resp, body) if (err || resp.statusCode! == 200 ) console.error ('Fout bij het verzenden van gegevens naar de provider:', err); request.respond (statusCodes.INTERNAL_SERVER_ERROR, body); else try var userData = JSON.parse (body); item.userId = gebruiker .userId; item.display_name = userData.name; item.user_email = userData.emails ['account']; request.execute (); catch (ex) console.error ('Fout bij parseren van reactie van de provider-API:' , ex); request.respond (statusCodes.INTERNAL_SERVER_ERROR, ex); var req = requir e ( 'request'); var reqOptions = uri: url, headers: Accept: "application / json"; req (reqOptions, requestCallback);  else // Invoegen met standaard gebruikersnaam request.execute (); );  else // we hebben de gebruiker bijgewerkt met bestaande waarden, maar u kunt hier nieuwe waarden invoeren. item.id = existingItems [0] .id; item.userId = existingItems [0] .userId; item.display_name = existingItems [0] .display_name; item.user_email = existingItems [0] .user_email; item.profile_picture = existingItems [0] .profile_picture; table.update (item, success: function (updatedItem) request.respond (200, updatedItem)); 

Nu we het invoegscript hebben bijgewerkt, zal elke aanroep voor een invoegbewerking een nieuwe record toevoegen als een gebruiker met een specifieke gebruikersnaam bestaat niet Het invoegitem wordt ook bijgewerkt met gebruikersinformatie gebruikersnaam, naam, en e-mail.

Ik heb een methode toegevoegd InsertUser, welke een parameter neemt gebruiker van type UsersTable en voegt het in de tabel.

private async Task InsertUser (UsersTable user) await humansTable.InsertAsync (user); 

Na de oproep naar de AuthenticateAsync methode op de knop klik, ik bel de InsertUser methode om de gebruiker toe te voegen UsersTable.

wacht op InsertUser (nieuwe UsersTable ProfilePicture = string.Empty);

U kunt de app in de emulator uitvoeren om te zien of deze werkt. Wanneer u zich voor de tweede keer aanmeldt, gebruikt de app het cacheverificatietoken in plaats van het inlogscherm.

Conclusie

Gebruikers authenticeren voor verschillende identiteitsleveranciers met Azure Mobile Services is vrij eenvoudig. In deze zelfstudie heb ik laten zien hoe een Microsoft-account kan worden gebruikt voor verificatie. De procedure om andere identiteitsproviders te gebruiken is hetzelfde. Alleen de leverancier parameter moet worden gewijzigd in de AuthenticateAsync noemen. Het wordt aanbevolen om de verificatietoken in de cache op te slaan, zodat de gebruiker eenmalige aanmelding kan ervaren.

Er kunnen aanvullende verificatie scopes worden aangevraagd om meer gebruikersinformatie op te halen. In dit MSDN-artikel wordt besproken hoe dit kan worden gedaan voor verschillende identiteitsproviders. Download de bronbestanden van de zelfstudie als naslagwerk. Vergeet niet om de app te configureren om Azure Mobile Services te gebruiken voordat u deze implementeert.