Zelfstudie: Meldingen verzenden naar specifieke gebruikers met behulp van Azure Notification HubsTutorial: Send notifications to specific users by using Azure Notification Hubs

OverzichtOverview

In deze zelfstudie wordt uitgelegd hoe u met Azure Notification Hubs pushmeldingen kunt verzenden naar een specifieke app-gebruiker op een specifiek apparaat.This tutorial shows you how to use Azure Notification Hubs to send push notifications to a specific app user on a specific device. Er wordt een ASP.NET WebAPI-back-end gebruikt om clients te verifiëren.An ASP.NET WebAPI backend is used to authenticate clients. Wanneer de back-end de gebruiker van een clienttoepassing verifieert, wordt er automatisch een tag aan de registratie van de melding toegevoegd.When the backend authenticates a client application user, it automatically adds a tag to the notification registration. De back-end gebruikt deze tag om meldingen te verzenden naar de specifieke gebruiker.The backend uses this tag to send notifications to the specific user.

Notitie

De volledige code voor deze zelfstudie vindt u op GitHub.The completed code for this tutorial can be found on GitHub.

In deze zelfstudie voert u de volgende stappen uit:In this tutorial, you take the following steps:

  • Het WebAPI-project makenCreate the WebAPI project
  • Clients verifiëren bij de WebAPI-back-endAuthenticate clients to the WebAPI backend
  • Registreren voor meldingen met behulp van de WebAPI-back-endRegister for notifications by using the WebAPI backend
  • Meldingen verzenden vanuit de WebAPI-back-endSend notifications from the WebAPI backend
  • De nieuwe WebAPI-back-end publicerenPublish the new WebAPI backend
  • De code voor het clientproject bijwerkenUpdate the code for the client project
  • De toepassing testenTest the application

VereistenPrerequisites

Deze zelfstudie bouwt voort op de Notification Hub die en het Visual Studio-project dat u hebt gemaakt in de Zelfstudie: Meldingen verzenden naar Universeel Windows-platform-apps met behulp van Azure Notification Hubs.This tutorial builds on the notification hub and Visual Studio project that you created in the Tutorial: Send notifications to Universal Windows Platform apps by using Azure Notification Hubs tutorial. Het is dan ook belangrijk dat u eerst die zelfstudie voltooit voordat u aan de slag gaat met deze zelfstudie.Therefore, complete it before starting on this tutorial.

Notitie

Als u Mobile Apps in Azure App Service gebruikt als uw back-endservice, raadpleegt u de Mobile Apps-versie van deze zelfstudie.If you are using Mobile Apps in Azure App Service as your backend service, see the Mobile Apps version of this tutorial.

Het WebAPI-project makenCreate the WebAPI project

In de volgende secties wordt het maken van een nieuwe ASP.NET WebAPI-back-end besproken.The following sections discuss the creation of a new ASP.NET WebAPI backend. Dit proces heeft drie hoofddoelen:This process has three main purposes:

  • Clients verifiëren: U voegt een bericht-handler toe voor het verifiëren van client aanvragen en het koppelen van de gebruiker aan de aanvraag.Authenticate clients: You add a message handler to authenticate client requests and associate the user with the request.
  • Registreer u voor meldingen met behulp van de WebAPI-back-end: U voegt een controller toe voor het afhandelen van nieuwe registraties voor een client apparaat om meldingen te ontvangen.Register for notifications by using the WebAPI backend: You add a controller to handle new registrations for a client device to receive notifications. De naam van de geverifieerde gebruiker wordt automatisch aan de registratie toegevoegd als een tag.The authenticated username is automatically added to the registration as a tag.
  • Meldingen verzenden naar clients: U voegt een controller toe om gebruikers in staat te stellen een beveiligde push naar apparaten en clients te activeren die zijn gekoppeld aan het label.Send notifications to clients: You add a controller to provide a way for users to trigger a secure push to devices and clients associated with the tag.

Maak de nieuwe ASP.NET WebAPI-back-end door de volgende acties uit te voeren:Create the new ASP.NET WebAPI backend by doing the following actions:

Belangrijk

Als u Visual Studio 2015 of eerder gebruikt, moet u voordat u deze zelfstudie begint controleren of u de meest recente versie van NuGet Package Manager voor Visual Studio hebt geïnstalleerd.If you are using Visual Studio 2015 or earlier, before starting this tutorial, ensure that you have installed the latest version of NuGet Package Manager for Visual Studio.

Start Visual Studio om dit te controleren.To check, start Visual Studio. Selecteer Extensies en updates in het menu Extra.On the Tools menu, select Extensions and Updates. Zoek naar NuGet Package Manager in uw versie van Visual Studio en controleer of u de meest recente versie hebt.Search for NuGet Package Manager in your version of Visual Studio, and make sure you have the latest version. Als uw versie niet de nieuwste versie is, verwijdert u deze en installeert u NuGet Package Manager.If your version is not the latest version, uninstall it, and then reinstall the NuGet Package Manager.

Notitie

Controleer of u de Visual Studio Azure SDK voor website-implementatie hebt geïnstalleerd.Make sure you have installed the Visual Studio Azure SDK for website deployment.

  1. Start Visual Studio of Visual Studio Express.Start Visual Studio or Visual Studio Express.

  2. Selecteer Server Explorer en meld u aan bij uw Azure-account.Select Server Explorer, and sign in to your Azure account. U moet zijn aangemeld om de websiteresources voor uw account te maken.To create the web site resources on your account, you must be signed in.

  3. Klik in Visual Studio met de rechtermuisknop op de Visual Studio-oplossing, houd de muisaanwijzer op Toevoegen en klik op Nieuw item.In Visual Studio, right-click Visual Studio solution, point to Add, and click New Project.

  4. Vouw Visual C# uit, selecteer Web, en klik op SP.NET-webtoepassing.Expand Visual C#, select Web, and click ASP.NET Web Application.

  5. Typ AppBackend in het vak Naam en selecteer OK.In the Name box, type AppBackend, and then select OK.

    Het venster Nieuw project

  6. Selecteer in het venster Nieuw ASP.NET-project het selectievakje Web-API en selecteer vervolgens OK.In the New ASP.NET Project window, select the Web API check box, and then select OK.

    Het venster Nieuw ASP.NET-project

  7. Selecteer een abonnement in het venster Microsoft Azure Web App configureren en voer in de lijst App Service-plan een van de volgende acties uit:In the Configure Microsoft Azure Web App window, select a subscription and then, in the App Service plan list, do either of the following actions:

    • Selecteer een App Service-plan dat u al hebt gemaakt.Select an app service plan that you've already created.
    • Selecteer Een nieuw App Service-plan maken, en maak er vervolgens een.Select Create a new app service plan, and then create one.

    U hebt geen database nodig voor deze zelfstudie.You do not need a database for this tutorial. Nadat u uw App Service-plan hebt geselecteerd, selecteert u OK om het project te maken.After you have selected your app service plan, select OK to create the project.

    Het venster Microsoft Azure Web App configureren

    Als u deze pagina voor het configureren van het app service-abonnement niet ziet, gaat u verder met de zelf studie.If you don't see this page for configure app service plan, continue with the tutorial. U kunt deze configureren terwijl u de app later publiceert.You can configure it while publishing the app later.

Clients verifiëren bij de WebAPI-back-endAuthenticate clients to the WebAPI backend

In deze sectie maakt u een nieuwe berichtenhandlerklasse met de naam AuthenticationTestHandler voor de nieuwe back-end.In this section, you create a new message-handler class named AuthenticationTestHandler for the new backend. Deze klasse wordt afgeleid van DelegatingHandler en toegevoegd als een berichtenhandler zodat deze alle aanvragen die de back-end ontvangt, kan verwerken.This class is derived from DelegatingHandler and added as a message handler so that it can process all requests that come into the backend.

  1. Klik in Solution Explorer met de rechtermuisknop op het project AppBackend, selecteer Toevoegen en selecteer vervolgens Klasse.In Solution Explorer, right-click the AppBackend project, select Add, and then select Class.

  2. Geef de nieuwe klasse de naam AuthenticationTestHandler.cs en selecteer Toevoegen om de klasse te genereren.Name the new class AuthenticationTestHandler.cs, and then select Add to generate the class. Deze klasse verifieert gebruikers met behulp van Basisverificatie om het eenvoudig te houden.This class authenticates users by using Basic Authentication for simplicity. Uw app kan een willekeurig verificatieschema gebruiken.Your app can use any authentication scheme.

  3. Voeg in AuthenticationTestHandler.cs de volgende using-instructies toe:In AuthenticationTestHandler.cs, add the following using statements:

    using System.Net.Http;
    using System.Threading;
    using System.Security.Principal;
    using System.Net;
    using System.Text;
    using System.Threading.Tasks;
    
  4. Vervang in AuthenticationTestHandler.cs de AuthenticationTestHandler-klassedefinitie door de volgende code:In AuthenticationTestHandler.cs, replace the AuthenticationTestHandler class definition with the following code:

    Deze handler verifieert de aanvraag wanneer de volgende drie voorwaarden waar zijn:The handler authorizes the request when the following three conditions are true:

    • De aanvraag bevat een autorisatieheader.The request includes an Authorization header.
    • De aanvraag maakt gebruik van basisverificatie.The request uses basic authentication.
    • De gebruikersnaamtekenreeks en de wachtwoordtekenreeks zijn dezelfde tekenreeks.The user name string and the password string are the same string.

    Anders wordt de aanvraag geweigerd.Otherwise, the request is rejected. Deze verificatie is geen bestaande benadering op verificatie en autorisatie.This authentication is not a true authentication and authorization approach. Dit is slechts een eenvoudig voorbeeld voor deze zelfstudie.It is only a simple example for this tutorial.

    Als het aanvraagbericht is geverifieerd en geautoriseerd door AuthenticationTestHandler, wordt de basisverificatiegebruiker toegevoegd aan de huidige aanvraag in HttpContext.If the request message is authenticated and authorized by AuthenticationTestHandler, the basic authentication user is attached to the current request on HttpContext. Gebruikersgegevens in HttpContext worden later gebruikt door een andere controller (RegisterController) om een tag toe te voegen aan de aanvraag voor meldingen van registraties.User information in HttpContext will be used by another controller (RegisterController) later to add a tag to the notification registration request.

    public class AuthenticationTestHandler : DelegatingHandler
    {
        protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
        {
            var authorizationHeader = request.Headers.GetValues("Authorization").First();
    
            if (authorizationHeader != null && authorizationHeader
                .StartsWith("Basic ", StringComparison.InvariantCultureIgnoreCase))
            {
                string authorizationUserAndPwdBase64 =
                    authorizationHeader.Substring("Basic ".Length);
                string authorizationUserAndPwd = Encoding.Default
                    .GetString(Convert.FromBase64String(authorizationUserAndPwdBase64));
                string user = authorizationUserAndPwd.Split(':')[0];
                string password = authorizationUserAndPwd.Split(':')[1];
    
                if (verifyUserAndPwd(user, password))
                {
                    // Attach the new principal object to the current HttpContext object
                    HttpContext.Current.User =
                        new GenericPrincipal(new GenericIdentity(user), new string[0]);
                    System.Threading.Thread.CurrentPrincipal =
                        System.Web.HttpContext.Current.User;
                }
                else return Unauthorized();
            }
            else return Unauthorized();
    
            return base.SendAsync(request, cancellationToken);
        }
    
        private bool verifyUserAndPwd(string user, string password)
        {
            // This is not a real authentication scheme.
            return user == password;
        }
    
        private Task<HttpResponseMessage> Unauthorized()
        {
            var response = new HttpResponseMessage(HttpStatusCode.Forbidden);
            var tsc = new TaskCompletionSource<HttpResponseMessage>();
            tsc.SetResult(response);
            return tsc.Task;
        }
    }
    

    Notitie

    Opmerking over beveiliging: De AuthenticationTestHandler klasse biedt geen echte authenticatie.Security note: The AuthenticationTestHandler class does not provide true authentication. Het wordt alleen gebruikt om basisverificatie na te bootsen en is niet beveiligd.It is used only to mimic basic authentication and is not secure. U moet een veilig verificatiemechanisme implementeren in uw productietoepassingen en -services.You must implement a secure authentication mechanism in your production applications and services.

  5. Voeg de volgende code toe aan het einde van de Register-methode in de klasse App_Start/WebApiConfig.cs om de berichtenhandler te registreren:To register the message handler, add the following code at the end of the Register method in the App_Start/WebApiConfig.cs class:

    config.MessageHandlers.Add(new AuthenticationTestHandler());
    
  6. Sla uw wijzigingen op.Save your changes.

Registreren voor meldingen met behulp van de WebAPI-back-endRegister for notifications by using the WebAPI backend

In deze sectie voegen we een nieuwe controller toe aan de WebAPI-back-end om aanvragen voor het registreren van een gebruiker en een apparaat voor meldingen af te handelen met behulp van de clientbibliotheek voor notification hubs.In this section, you add a new controller to the WebAPI backend to handle requests to register a user and a device for notifications by using the client library for notification hubs. De controller voegt een gebruikerstag toe voor de gebruiker die door AuthenticationTestHandler is geverifieerd en gekoppeld aan HttpContext.The controller adds a user tag for the user that was authenticated and attached to HttpContext by AuthenticationTestHandler. De tag heeft de indeling van de tekenreeks, "username:<actual username>".The tag has the string format, "username:<actual username>".

  1. Klik in Solution Explorer met de rechtermuisknop op het project AppBackend en selecteer vervolgens NuGet-pakketten beheren.In Solution Explorer, right-click the AppBackend project and then select Manage NuGet Packages.

  2. Selecteer in het linkerdeelvenster Online en typ Microsoft.Azure.NotificationHubs in het vak Zoeken.In the left pane, select Online and then, in the Search box, type Microsoft.Azure.NotificationHubs.

  3. Selecteer Microsoft Azure Notification Hubs in de lijst met resultaten en selecteer vervolgens Installeren.In the results list, select Microsoft Azure Notification Hubs, and then select Install. Voltooi de installatie en sluit vervolgens het venster Nuget Package Manager.Complete the installation, and then close the NuGet Package Manager window.

    Met deze actie wordt een verwijzing toegevoegd aan de Azure Notification Hubs-SDK met het Microsoft.Azure.Notification Hubs NuGet-pakket.This action adds a reference to the Azure Notification Hubs SDK by using the Microsoft.Azure.Notification Hubs NuGet package.

  4. Maak een nieuw klassebestand waarmee de verbinding met de notification hub die wordt gebruikt voor het verzenden van meldingen.Create a new class file that represents the connection with the notification hub that's used to send notifications. Klik in Solution Explorer met de rechtermuisknop op de map Modellen en selecteer achtereenvolgens Toevoegen en Klasse.In Solution Explorer, right-click the Models folder, select Add, and then select Class. Noem de nieuwe klasse Notifications.cs en selecteer vervolgens Toevoegen om de klasse te genereren.Name the new class Notifications.cs, and then select Add to generate the class.

    Het venster Nieuw Item toevoegen

  5. Voeg in Notifications.cs de volgende using-instructie toe aan het begin van het bestand:In Notifications.cs, add the following using statement at the top of the file:

    using Microsoft.Azure.NotificationHubs;
    
  6. Vervang de Notifications-klassedefinitie door de volgende code en vervang de twee tijdelijke aanduidingen door de verbindingsreeks (met volledige toegang) voor uw notification hub en de naam van de hub (beschikbaar in Azure Portal):Replace the Notifications class definition with the following code, and replace the two placeholders with the connection string (with full access) for your notification hub and the hub name (available at Azure portal):

    public class Notifications
    {
        public static Notifications Instance = new Notifications();
    
        public NotificationHubClient Hub { get; set; }
    
        private Notifications() {
            Hub = NotificationHubClient.CreateClientFromConnectionString("<your hub's DefaultFullSharedAccessSignature>",
                                                                            "<hub name>");
        }
    }
    

    Belangrijk

    Voer de naam en het DefaultFullSharedAccessSignature van uw hub in voordat u verder gaat.Enter the name and the DefaultFullSharedAccessSignature of your hub before proceeding further.

  7. Maak vervolgens een nieuwe controller met de naam RegisterController.Next, create a new controller named RegisterController. Klik in Solution Explorer met de rechtermuisknop op de map Controllers en selecteer achtereenvolgens Toevoegen en Controller.In Solution Explorer, right-click the Controllers folder, select Add, and then select Controller.

  8. Selecteer Web API 2 Controller - leeg en selecteer vervolgens Toevoegen.Select Web API 2 Controller - Empty, and then select Add.

    Het venster Scaffold toevoegen

  9. Typ in het vak Controllernaam RegisterController als naam voor de nieuwe klasse en selecteer vervolgens Toevoegen.In the Controller name box, type RegisterController to name the new class, and then select Add.

    Het venster Controller toevoegen

  10. Voeg in RegisterController.cs de volgende using-instructies toe:In RegisterController.cs, add the following using statements:

    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.NotificationHubs.Messaging;
    using AppBackend.Models;
    using System.Threading.Tasks;
    using System.Web;
    
  11. Voeg de volgende code in de RegisterController-klassedefinitie.Add the following code inside the RegisterController class definition. In deze code voegt u een gebruikerstag toe voor de gebruiker die is gekoppeld aan HttpContext.In this code, you add a user tag for the user that's attached to HttpContext. De gebruiker is geverifieerd en gekoppeld aan HttpContext door het berichtenfilter dat u hebt toegevoegd, AuthenticationTestHandler.The user was authenticated and attached to HttpContext by the message filter that you added, AuthenticationTestHandler. U kunt ook optionele controles toevoegen om te controleren of de gebruiker rechten heeft voor het registreren voor de aangevraagde tags.You can also add optional checks to verify that the user has rights to register for the requested tags.

    private NotificationHubClient hub;
    
    public RegisterController()
    {
        hub = Notifications.Instance.Hub;
    }
    
    public class DeviceRegistration
    {
        public string Platform { get; set; }
        public string Handle { get; set; }
        public string[] Tags { get; set; }
    }
    
    // POST api/register
    // This creates a registration id
    public async Task<string> Post(string handle = null)
    {
        string newRegistrationId = null;
    
        // make sure there are no existing registrations for this push handle (used for iOS and Android)
        if (handle != null)
        {
            var registrations = await hub.GetRegistrationsByChannelAsync(handle, 100);
    
            foreach (RegistrationDescription registration in registrations)
            {
                if (newRegistrationId == null)
                {
                    newRegistrationId = registration.RegistrationId;
                }
                else
                {
                    await hub.DeleteRegistrationAsync(registration);
                }
            }
        }
    
        if (newRegistrationId == null) 
            newRegistrationId = await hub.CreateRegistrationIdAsync();
    
        return newRegistrationId;
    }
    
    // PUT api/register/5
    // This creates or updates a registration (with provided channelURI) at the specified id
    public async Task<HttpResponseMessage> Put(string id, DeviceRegistration deviceUpdate)
    {
        RegistrationDescription registration = null;
        switch (deviceUpdate.Platform)
        {
            case "mpns":
                registration = new MpnsRegistrationDescription(deviceUpdate.Handle);
                break;
            case "wns":
                registration = new WindowsRegistrationDescription(deviceUpdate.Handle);
                break;
            case "apns":
                registration = new AppleRegistrationDescription(deviceUpdate.Handle);
                break;
            case "fcm":
                registration = new FcmRegistrationDescription(deviceUpdate.Handle);
                break;
            default:
                throw new HttpResponseException(HttpStatusCode.BadRequest);
        }
    
        registration.RegistrationId = id;
        var username = HttpContext.Current.User.Identity.Name;
    
        // add check if user is allowed to add these tags
        registration.Tags = new HashSet<string>(deviceUpdate.Tags);
        registration.Tags.Add("username:" + username);
    
        try
        {
            await hub.CreateOrUpdateRegistrationAsync(registration);
        }
        catch (MessagingException e)
        {
            ReturnGoneIfHubResponseIsGone(e);
        }
    
        return Request.CreateResponse(HttpStatusCode.OK);
    }
    
    // DELETE api/register/5
    public async Task<HttpResponseMessage> Delete(string id)
    {
        await hub.DeleteRegistrationAsync(id);
        return Request.CreateResponse(HttpStatusCode.OK);
    }
    
    private static void ReturnGoneIfHubResponseIsGone(MessagingException e)
    {
        var webex = e.InnerException as WebException;
        if (webex.Status == WebExceptionStatus.ProtocolError)
        {
            var response = (HttpWebResponse)webex.Response;
            if (response.StatusCode == HttpStatusCode.Gone)
                throw new HttpRequestException(HttpStatusCode.Gone.ToString());
        }
    }
    
  12. Sla uw wijzigingen op.Save your changes.

Meldingen verzenden vanuit de WebAPI-back-endSend notifications from the WebAPI backend

In deze sectie voegt u een nieuwe domeincontroller toe die clientapparaten een manier biedt om een melding te verzenden.In this section, you add a new controller that exposes a way for client devices to send a notification. De melding is gebaseerd op de gebruikersnaamtag die gebruikmaakt van de Azure Notification Hubs .NET-bibliotheek in de ASP.NET WebAPI-back-end.The notification is based on the username tag that uses Azure Notification Hubs .NET Library in the ASP.NET WebAPI backend.

  1. Maak nog een nieuwe controller met de naam NotificationsController op dezelfde manier als u RegisterController in de vorige sectie hebt gemaakt.Create another new controller named NotificationsController the same way you created RegisterController in the previous section.

  2. Voeg in NotificationsController.cs de volgende using-instructies toe:In NotificationsController.cs, add the following using statements:

    using AppBackend.Models;
    using System.Threading.Tasks;
    using System.Web;
    
  3. Voeg de volgende methode toe aan de klasse NotificationsController:Add the following method to the NotificationsController class:

    Met deze code wordt een meldingstype verzonden die is gebaseerd op de pns-parameter (Platform Notification Service, PNS).This code sends a notification type that's based on the Platform Notification Service (PNS) pns parameter. De waarde van to_tag wordt gebruikt om de tag gebruikersnaam in te stellen in het bericht.The value of to_tag is used to set the username tag on the message. Deze tag moet overeenkomen met een gebruikersnaamtag van een actieve notification hub-registratie.This tag must match a username tag of an active notification hub registration. Het meldingsbericht wordt opgehaald uit de hoofdtekst van de POST-aanvraag en geformatteerd voor de doel-PNS.The notification message is pulled from the body of the POST request and formatted for the target PNS.

    Afhankelijk van de PNS die uw ondersteunde apparaten gebruiken om meldingen te ontvangen, worden de meldingen met verschillende indelingen ondersteund.Depending on the PNS that your supported devices use to receive notifications, the notifications are supported by a variety of formats. Bijvoorbeeld op Windows-apparaten kunt u een pop-upmelding met WNS gebruiken die niet rechtstreeks wordt ondersteund door een andere PNS.For example, on Windows devices, you might use a toast notification with WNS that isn't directly supported by another PNS. In een dergelijk geval moet uw back-end de melding in een ondersteunde melding indelen voor de PNS van apparaten die u wilt ondersteunen.In such an instance, your backend needs to format the notification into a supported notification for the PNS of devices you plan to support. Gebruik vervolgens de juiste API voor verzending in de NotificationHubClient-klasse.Then use the appropriate send API on the NotificationHubClient class.

    public async Task<HttpResponseMessage> Post(string pns, [FromBody]string message, string to_tag)
    {
        var user = HttpContext.Current.User.Identity.Name;
        string[] userTag = new string[2];
        userTag[0] = "username:" + to_tag;
        userTag[1] = "from:" + user;
    
        Microsoft.Azure.NotificationHubs.NotificationOutcome outcome = null;
        HttpStatusCode ret = HttpStatusCode.InternalServerError;
    
        switch (pns.ToLower())
        {
            case "wns":
                // Windows 8.1 / Windows Phone 8.1
                var toast = @"<toast><visual><binding template=""ToastText01""><text id=""1"">" + 
                            "From " + user + ": " + message + "</text></binding></visual></toast>";
                outcome = await Notifications.Instance.Hub.SendWindowsNativeNotificationAsync(toast, userTag);
                break;
            case "apns":
                // iOS
                var alert = "{\"aps\":{\"alert\":\"" + "From " + user + ": " + message + "\"}}";
                outcome = await Notifications.Instance.Hub.SendAppleNativeNotificationAsync(alert, userTag);
                break;
            case "fcm":
                // Android
                var notif = "{ \"data\" : {\"message\":\"" + "From " + user + ": " + message + "\"}}";
                outcome = await Notifications.Instance.Hub.SendFcmNativeNotificationAsync(notif, userTag);
                break;
        }
    
        if (outcome != null)
        {
            if (!((outcome.State == Microsoft.Azure.NotificationHubs.NotificationOutcomeState.Abandoned) ||
                (outcome.State == Microsoft.Azure.NotificationHubs.NotificationOutcomeState.Unknown)))
            {
                ret = HttpStatusCode.OK;
            }
        }
    
        return Request.CreateResponse(ret);
    }
    
  4. Selecteer de toets F5 om de toepassing uit te voeren en om de juistheid van uw werk tot nu toe te controleren.To run the application and ensure the accuracy of your work so far, select the F5 key. De app opent een webbrowser en deze wordt weergegeven met de startpagina van ASP.NET.The app opens a web browser, and it is displayed on the ASP.NET home page.

De nieuwe WebAPI-back-end publicerenPublish the new WebAPI backend

U gaat de app nu implementeren op een Azure-website zodat deze toegankelijk is vanaf alle apparaten.Next, you deploy the app to an Azure website to make it accessible from all devices.

  1. Klik met de rechtermuisknop op het project AppBackend en selecteer Publiceren.Right-click the AppBackend project, and then select Publish.

  2. Selecteer Microsoft Azure App Service als publicatiedoel en selecteer vervolgens **Publiceren.Select Microsoft Azure App Service as your publish target, and then select **Publish. Het venster App Service maken wordt geopend.The Create App Service window opens. Hier kunt u alle benodigde Azure-resources maken die nodig zijn om de ASP.NET-web-app in Azure uit te voeren.Here you can create all the necessary Azure resources to run the ASP.NET web app in Azure.

    De tegel Microsoft Azure App Service

  3. Selecteer uw Azure-account in het venster App Service maken.In the Create App Service window, select your Azure account. Selecteer Type wijzigen > Web App.Select Change Type > Web App. Houd de standaard Web App-naam en selecteer het Abonnement, de Resourcegroep en het App Service-plan.Keep the default Web App Name, and then select the Subscription, Resource Group, and App Service Plan.

  4. Selecteer Maken.Select Create.

  5. Noteer de Site-URL-eigenschap in de sectie Samenvatting.Make a note of the Site URL property in the Summary section. Deze URL is het eindpunt van uw back-end verderop in de zelfstudie.This URL is your back-end endpoint later in the tutorial.

  6. Selecteer Publiceren.Select Publish.

Nadat u de wizard hebt voltooid, wordt de ASP.NET-web-app naar Azure gepubliceerd. Daarna wordt de app geopend in de standaardbrowser.After you've completed the wizard, it publishes the ASP.NET web app to Azure and then opens the app in the default browser. Uw toepassing is zichtbaar in Azure App Services.Your application is viewable in Azure App Services.

De URL maakt gebruik van de web-appnaam die u eerder hebt opgegeven, met de notatie http://<app_naam>.azurewebsites.net.The URL uses the web app name that you specified earlier, with the format http://<app_name>.azurewebsites.net.

De code voor de UWP-client bijwerkenUpdate the code for the UWP client

In deze sectie werkt u de code bij in het project dat u hebt gemaakt voor de Zelfstudie: Meldingen verzenden naar Universeel Windows-platform-apps met behulp van Azure Notification Hubs.In this section, you update the code in the project you completed for the Tutorial: Send notifications to Universal Windows Platform apps by using Azure Notification Hubs tutorial. Het project moet al zijn gekoppeld aan de Windows Store.The project should already be associated with the Windows store. Bovendien moet het project zijn geconfigureerd voor het gebruik van uw Notification Hub.It also should be configured to use your notification hub. In dit gedeelte voegt u code toe voor het aanroepen van de nieuwe WebAPI-back-end en gebruikt u deze voor het registreren en verzenden van meldingen.In this section, you add code to call the new WebAPI backend and use it for registering and sending notifications.

  1. Open in Visual Studio de oplossing die u hebt gemaakt voor de Zelfstudie: Meldingen verzenden naar Universeel Windows-platform-apps met behulp van Azure Notification Hubs.In Visual Studio, open the solution you created for the Tutorial: Send notifications to Universal Windows Platform apps by using Azure Notification Hubs.

  2. Klik in Solution Explorer met de rechter muisknop op het project Universeel Windows-platform (UWP) en klik vervolgens op NuGet-pakketten beheren.In Solution Explorer, right-click the Universal Windows Platform (UWP) project and then click Manage NuGet Packages.

  3. Klik aan de linkerkant op Bladeren.On the left-hand side, select Browse.

  4. Typ Http Client in het zoekvak.In the Search box, type Http Client.

  5. Klik in de lijst met resultaten op System.Net.Http en vervolgens op Installeren.In the results list, click System.Net.Http, and click Install. Voltooi de installatie.Complete the installation.

  6. Typ nu Json.net in het zoekvak van NuGet.Back in the NuGet Search box, type Json.net. Installeer het pakket Newtonsoft.json en sluit het venster NuGet Package Manager.Install the Newtonsoft.json package, and then close the NuGet Package Manager window.

  7. Dubbelklik in Solution Explorer in het project WindowsApp op het bestand MainPage.xaml om dit te openen in de Visual Studio-editor.In Solution Explorer, in the WindowsApp project, double-click MainPage.xaml to open it in the Visual Studio editor.

  8. Vervang in de XML-code voor MainPage.xaml de sectie <Grid> door de volgende code: Met deze code wordt een tekstvak voor de gebruikersnaam en het wachtwoord toegevoegd waarmee de gebruiker wordt geverifieerd.In the MainPage.xaml XML code, replace the <Grid> section with the following code: This code adds a username and password textbox that the user authenticates with. Ook worden er tekstvakken toegevoegd voor de melding en voor de gebruikersnaam-tag die de melding moet ontvangen:It also adds text boxes for the notification message and the username tag that should receive the notification:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    
        <TextBlock Grid.Row="0" Text="Notify Users" HorizontalAlignment="Center" FontSize="48"/>
    
        <StackPanel Grid.Row="1" VerticalAlignment="Center">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="Username" FontSize="24" Margin="20,0,20,0"/>
                <TextBox Name="UsernameTextBox" Grid.Row="1" Grid.ColumnSpan="3" Margin="20,0,20,0"/>
                <TextBlock Grid.Row="2" Grid.ColumnSpan="3" Text="Password" FontSize="24" Margin="20,0,20,0" />
                <PasswordBox Name="PasswordTextBox" Grid.Row="3" Grid.ColumnSpan="3" Margin="20,0,20,0"/>
    
                <Button Grid.Row="4" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center"
                            Content="1. Login and register" Click="LoginAndRegisterClick" Margin="0,0,0,20"/>
    
                <ToggleButton Name="toggleWNS" Grid.Row="5" Grid.Column="0" HorizontalAlignment="Right" Content="WNS" IsChecked="True" />
                <ToggleButton Name="toggleFCM" Grid.Row="5" Grid.Column="1" HorizontalAlignment="Center" Content="FCM" />
                <ToggleButton Name="toggleAPNS" Grid.Row="5" Grid.Column="2" HorizontalAlignment="Left" Content="APNS" />
    
                <TextBlock Grid.Row="6" Grid.ColumnSpan="3" Text="Username Tag To Send To" FontSize="24" Margin="20,0,20,0"/>
                <TextBox Name="ToUserTagTextBox" Grid.Row="7" Grid.ColumnSpan="3" Margin="20,0,20,0" TextWrapping="Wrap" />
                <TextBlock Grid.Row="8" Grid.ColumnSpan="3" Text="Enter Notification Message" FontSize="24" Margin="20,0,20,0"/>
                <TextBox Name="NotificationMessageTextBox" Grid.Row="9" Grid.ColumnSpan="3" Margin="20,0,20,0" TextWrapping="Wrap" />
                <Button Grid.Row="10" Grid.ColumnSpan="3" HorizontalAlignment="Center" Content="2. Send push" Click="PushClick" Name="SendPushButton" />
            </Grid>
        </StackPanel>
    </Grid>
    
  9. Open in Solution Explorer het bestand MainPage.xaml.cs voor de projecten (Windows 8.1) en (Windows Phone 8.1) .In Solution Explorer, open the MainPage.xaml.cs file for the (Windows 8.1) and (Windows Phone 8.1) projects. Voeg de volgende using-instructies toe aan het begin van beide bestanden:Add the following using statements at the top of both files:

    using System.Net.Http;
    using Windows.Storage;
    using System.Net.Http.Headers;
    using Windows.Networking.PushNotifications;
    using Windows.UI.Popups;
    using System.Threading.Tasks;
    
  10. Voeg in MainPage.xaml.cs voor het project WindowsApp het volgende lid toe aan de klasse MainPage.In MainPage.xaml.cs for the WindowsApp project, add the following member to the MainPage class. Zorg ervoor dat u <Enter Your Backend Endpoint> vervangt door het eindpunt van de back-end dat u eerder hebt vastgesteld.Be sure to replace <Enter Your Backend Endpoint> with your actual backend endpoint obtained previously. Bijvoorbeeld http://mybackend.azurewebsites.net.For example, http://mybackend.azurewebsites.net.

    private static string BACKEND_ENDPOINT = "<Enter Your Backend Endpoint>";
    
  11. Voeg de volgende code toe aan de klasse MainPage in MainPage.xaml.cs voor de projecten (Windows 8.1) en (Windows Phone 8.1) .Add the code below to the MainPage class in MainPage.xaml.cs for the (Windows 8.1) and (Windows Phone 8.1) projects.

    De methode PushClick is de handler voor de knop Send Push.The PushClick method is the click handler for the Send Push button. De methode roept de back-end aan om een melding te triggeren naar alle apparaten met een gebruikersnaam-tag die overeenkomt met de parameter to_tag.It calls the backend to trigger a notification to all devices with a username tag that matches the to_tag parameter. De melding wordt als JSON-inhoud verzonden in de aanvraagtekst.The notification message is sent as JSON content in the request body.

    De methode LoginAndRegisterClick is de klik-handler voor de knop Login and register.The LoginAndRegisterClick method is the click handler for the Login and register button. De methode slaat het basisverificatie-token op in de lokale opslag, waarna RegisterClient wordt gebruikt voor het registreren voor meldingen met behulp van de back-end. Het token kan overigens elk token zijn dat door uw verificatieschema wordt gebruikt.It stores the basic authentication token (represents any token your authentication scheme uses) in local storage, then uses RegisterClient to register for notifications using the backend.

    private async void PushClick(object sender, RoutedEventArgs e)
    {
        if (toggleWNS.IsChecked.Value)
        {
            await sendPush("wns", ToUserTagTextBox.Text, this.NotificationMessageTextBox.Text);
        }
        if (toggleFCM.IsChecked.Value)
        {
            await sendPush("fcm", ToUserTagTextBox.Text, this.NotificationMessageTextBox.Text);
        }
        if (toggleAPNS.IsChecked.Value)
        {
            await sendPush("apns", ToUserTagTextBox.Text, this.NotificationMessageTextBox.Text);
    
        }
    }
    
    private async Task sendPush(string pns, string userTag, string message)
    {
        var POST_URL = BACKEND_ENDPOINT + "/api/notifications?pns=" +
            pns + "&to_tag=" + userTag;
    
        using (var httpClient = new HttpClient())
        {
            var settings = ApplicationData.Current.LocalSettings.Values;
            httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", (string)settings["AuthenticationToken"]);
    
            try
            {
                await httpClient.PostAsync(POST_URL, new StringContent("\"" + message + "\"",
                    System.Text.Encoding.UTF8, "application/json"));
            }
            catch (Exception ex)
            {
                MessageDialog alert = new MessageDialog(ex.Message, "Failed to send " + pns + " message");
                alert.ShowAsync();
            }
        }
    }
    
    private async void LoginAndRegisterClick(object sender, RoutedEventArgs e)
    {
        SetAuthenticationTokenInLocalStorage();
    
        var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
        // The "username:<user name>" tag gets automatically added by the message handler in the backend.
        // The tag passed here can be whatever other tags you may want to use.
        try
        {
            // The device handle used is different depending on the device and PNS.
            // Windows devices use the channel uri as the PNS handle.
            await new RegisterClient(BACKEND_ENDPOINT).RegisterAsync(channel.Uri, new string[] { "myTag" });
    
            var dialog = new MessageDialog("Registered as: " + UsernameTextBox.Text);
            dialog.Commands.Add(new UICommand("OK"));
            await dialog.ShowAsync();
            SendPushButton.IsEnabled = true;
        }
        catch (Exception ex)
        {
            MessageDialog alert = new MessageDialog(ex.Message, "Failed to register with RegisterClient");
            alert.ShowAsync();
        }
    }
    
    private void SetAuthenticationTokenInLocalStorage()
    {
        string username = UsernameTextBox.Text;
        string password = PasswordTextBox.Password;
    
        var token = Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(username + ":" + password));
        ApplicationData.Current.LocalSettings.Values["AuthenticationToken"] = token;
    }
    
  12. Open App.xaml.cs en zoek de aanroep naar InitNotificationsAsync() in de gebeurtenis-handler OnLaunched().Open App.xaml.cs and find the call to InitNotificationsAsync() in the OnLaunched() event handler. Maak een commentaar van de aanroep naar InitNotificationsAsync() of verwijder de aanroep.Comment out or delete the call to InitNotificationsAsync(). De knop-handler initialiseert de registratie van meldingen.The button handler initializes notification registrations.

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        //InitNotificationsAsync();
    
  13. Klik met de rechtermuisknop op het project WindowsApp, klik op Add en op Class.Right-click the WindowsApp project, click Add, and then click Class. Geef de klasse de naam RegisterClient.cs en klik vervolgens op OK om de klasse te genereren.Name the class RegisterClient.cs, then click OK to generate the class.

    Deze klasse verpakt de REST-aanroepen die nodig zijn om contact op te nemen met de app-back-end, om registratie voor pushmeldingen mogelijk te maken.This class wraps the REST calls required to contact the app backend, in order to register for push notifications. Daarnaast wordt de registrationIds die is gemaakt door de Notification Hub, lokaal opgeslagen. Zie Registering from your App Backend (Registreren vanuit uw app-back-end) voor meer informatie.It also locally stores the registrationIds created by the Notification Hub as detailed in Registering from your app backend. De klasse maakt gebruik van een verificatietoken dat wordt opgeslagen in de lokale opslag wanneer u op de knop Login and register klikt.It uses an authorization token stored in local storage when you click the Login and register button.

  14. Voeg aan het begin van het bestand RegisterClient.cs de volgende using-instructies toe:Add the following using statements at the top of the RegisterClient.cs file:

    using Windows.Storage;
    using System.Net;
    using System.Net.Http;
    using System.Net.Http.Headers;
    using Newtonsoft.Json;
    using System.Threading.Tasks;
    using System.Linq;
    
  15. Voeg de volgende code in de RegisterClient-klassedefinitie.Add the following code inside the RegisterClient class definition.

    private string POST_URL;
    
    private class DeviceRegistration
    {
        public string Platform { get; set; }
        public string Handle { get; set; }
        public string[] Tags { get; set; }
    }
    
    public RegisterClient(string backendEndpoint)
    {
        POST_URL = backendEndpoint + "/api/register";
    }
    
    public async Task RegisterAsync(string handle, IEnumerable<string> tags)
    {
        var regId = await RetrieveRegistrationIdOrRequestNewOneAsync();
    
        var deviceRegistration = new DeviceRegistration
        {
            Platform = "wns",
            Handle = handle,
            Tags = tags.ToArray<string>()
        };
    
        var statusCode = await UpdateRegistrationAsync(regId, deviceRegistration);
    
        if (statusCode == HttpStatusCode.Gone)
        {
            // regId is expired, deleting from local storage & recreating
            var settings = ApplicationData.Current.LocalSettings.Values;
            settings.Remove("__NHRegistrationId");
            regId = await RetrieveRegistrationIdOrRequestNewOneAsync();
            statusCode = await UpdateRegistrationAsync(regId, deviceRegistration);
        }
    
        if (statusCode != HttpStatusCode.Accepted && statusCode != HttpStatusCode.OK)
        {
            // log or throw
            throw new System.Net.WebException(statusCode.ToString());
        }
    }
    
    private async Task<HttpStatusCode> UpdateRegistrationAsync(string regId, DeviceRegistration deviceRegistration)
    {
        using (var httpClient = new HttpClient())
        {
            var settings = ApplicationData.Current.LocalSettings.Values;
            httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", (string) settings["AuthenticationToken"]);
    
            var putUri = POST_URL + "/" + regId;
    
            string json = JsonConvert.SerializeObject(deviceRegistration);
                            var response = await httpClient.PutAsync(putUri, new StringContent(json, Encoding.UTF8, "application/json"));
            return response.StatusCode;
        }
    }
    
    private async Task<string> RetrieveRegistrationIdOrRequestNewOneAsync()
    {
        var settings = ApplicationData.Current.LocalSettings.Values;
        if (!settings.ContainsKey("__NHRegistrationId"))
        {
            using (var httpClient = new HttpClient())
            {
                httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", (string)settings["AuthenticationToken"]);
    
                var response = await httpClient.PostAsync(POST_URL, new StringContent(""));
                if (response.IsSuccessStatusCode)
                {
                    string regId = await response.Content.ReadAsStringAsync();
                    regId = regId.Substring(1, regId.Length - 2);
                    settings.Add("__NHRegistrationId", regId);
                }
                else
                {
                    throw new System.Net.WebException(response.StatusCode.ToString());
                }
            }
        }
        return (string)settings["__NHRegistrationId"];
    
    }
    
  16. Sla al uw wijzigingen op.Save all your changes.

De toepassing testenTest the Application

  1. Start de toepassing in beide versies van Windows.Launch the application on both Windows.

  2. Voer een gebruikersnaam (Username) en wachtwoord (Password) in zoals weergegeven in het scherm hieronder.Enter a Username and Password as shown in the screen below. Deze moeten verschillen van de gebruikersnaam en het wachtwoord voor Windows Phone.It should differ from the user name and password you enter on Windows Phone.

  3. Klik op Login and register en controleer of er een dialoogvenster wordt weergegeven met de mededeling dat u zich hebt aangemeld.Click Log in and register and verify a dialog shows that you have logged in. Met deze code wordt ook de knop Send Push ingeschakeld.This code also enables the Send Push button.

  4. Voer in het veld Recipient Username Tag de geregistreerde gebruikersnaam in.Then in the Recipient Username Tag field, enter the user name registered. Voer tekst in voor de melding en klik op Send Push.Enter a notification message and click Send Push.

  5. Alleen de apparaten die zijn geregistreerd met de overeenkomende gebruikersnaam-tag ontvangen de melding.Only the devices that have registered with the matching username tag receive the notification message.

Volgende stappenNext steps

In deze zelfstudie hebt u geleerd hoe u pushmeldingen kunt verzenden naar specifieke gebruikers door een tag te koppelen aan hun registraties.In this tutorial, you learned how to push notifications to specific users that have tags associated with their registrations. Als u wilt weten hoe u locatiegebaseerde pushmeldingen kunt verzenden, gaat u verder met de volgende zelfstudie:To learn how to push location-based notifications, advance to the following tutorial: