Zelfstudie: Meldingen verzenden naar specifieke gebruikers met behulp van Azure Notification Hubs

  • Artikel

Overzicht

In deze zelfstudie wordt beschreven hoe u met Azure Notification Hubs pushmeldingen kunt verzenden naar een specifieke app-gebruiker op een specifiek apparaat. Er wordt een ASP.NET WebAPI-back-end gebruikt om clients te verifiëren. Wanneer de back-end de gebruiker van een clienttoepassing verifieert, wordt er automatisch een tag aan de registratie van de melding toegevoegd. De back-end gebruikt deze tag om meldingen te verzenden naar de specifieke gebruiker.

Notitie

De volledige code voor deze zelfstudie vindt u op GitHub.

In deze zelfstudie voert u de volgende stappen uit:

  • Het WebAPI-project maken
  • Clients verifiëren bij de WebAPI-back-end
  • Registreren voor meldingen met behulp van de WebAPI-back-end
  • Meldingen verzenden vanuit de WebAPI-back-end
  • De nieuwe WebAPI-back-end publiceren
  • De code voor het clientproject bijwerken
  • De toepassing testen

Vereisten

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. Het is dan ook belangrijk dat u eerst die zelfstudie voltooit voordat u aan de slag gaat met deze zelfstudie.

Notitie

Als u Mobile Apps in Azure App Service gebruikt als uw back-endservice, raadpleegt u de Mobile Apps-versie van deze zelfstudie.

Het WebAPI-project maken

In de volgende secties wordt het maken van een nieuwe ASP.NET WebAPI-back-end besproken. Dit proces heeft drie hoofddoelen:

  • Clients verifiëren: er wordt een berichtenhandler toegevoegd voor het verifiëren van aanvragen van clients en het koppelen van de gebruiker aan de aanvraag.
  • Registreren voor meldingen met behulp van de WebAPI-back-end: u voegt een controller toe voor het afhandelen van nieuwe registraties voor een clientapparaat voor het ontvangen van meldingen. De naam van de geverifieerde gebruiker wordt automatisch aan de registratie toegevoegd als een tag.
  • Meldingen verzenden naar clients: u voegt een controller toe om gebruikers een manier te bieden voor het activeren van een beveiligde push naar apparaten en clients die zijn gekoppeld aan de tag.

Maak de nieuwe ASP.NET Core 6.0 web-API-back-end door de volgende acties uit te voeren:

Start Visual Studio om dit te controleren. Selecteer Extensies en updates in het menu Extra. Zoek naar NuGet Package Manager in uw versie van Visual Studio en controleer of u de meest recente versie hebt. Als uw versie niet de nieuwste versie is, verwijdert u deze en installeert u NuGet Package Manager.

Schermopname van het dialoogvenster Extensies en updates met NuGet-pakketbeheer voor het Visual Studio-pakket gemarkeerd.

Notitie

Controleer of u de Visual Studio Azure SDK voor website-implementatie hebt geïnstalleerd.

  1. Start Visual Studio of Visual Studio Express.

  2. Selecteer Server Explorer en meld u aan bij uw Azure-account. U moet zijn aangemeld om de websiteresources voor uw account te maken.

  3. Selecteer in het menu Bestand van Visual Studio de optie Nieuw>project.

  4. Voer Web-API in het zoekvak in.

  5. Selecteer de projectsjabloon ASP.NET Core Web API en selecteer Volgende.

  6. In het dialoogvenster Uw nieuwe project configureren geeft u het project de naam AppBackend en selecteert u Volgende.

  7. In het dialoogvenster Aanvullende informatie :

    • Controleer of framework.NET 6.0 (langetermijnondersteuning) is.
    • Controleer of het selectievakje controllers gebruiken (schakel het selectievakje uit om minimale API's te gebruiken) is ingeschakeld.
    • Schakel OpenAPI-ondersteuning inschakelen uit.
    • Selecteer Maken.

De sjabloonbestanden WeatherForecast verwijderen

  1. Verwijder de voorbeeldbestanden WeatherForecast.cs en Controllers/WeatherForecastController.cs uit het nieuwe AppBackend-project .
  2. Open Properties\launchSettings.json.
  3. Wijzig launchUrl-eigenschappen van weatherforcast in appbackend.

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:

  • Selecteer een Azure App Service plan dat u al hebt gemaakt.
  • Selecteer Een nieuw App Service-plan maken, en maak er vervolgens een.

U hebt geen database nodig voor deze zelfstudie. Nadat u uw App Service-plan hebt geselecteerd, selecteert u OK om het project te maken.

Het venster Microsoft Azure Web App configureren

Als u deze pagina voor het configureren van het App Service-plan niet ziet, gaat u door met de zelfstudie. U kunt het configureren en de app later publiceren.

Clients verifiëren bij de WebAPI-back-end

In deze sectie maakt u een nieuwe berichtenhandlerklasse met de naam AuthenticationTestHandler voor de nieuwe back-end. Deze klasse wordt afgeleid van DelegatingHandler en toegevoegd als een berichtenhandler zodat deze alle aanvragen die de back-end ontvangt, kan verwerken.

  1. Klik in Solution Explorer met de rechtermuisknop op het project AppBackend, selecteer Toevoegen en selecteer vervolgens Klasse.

  2. Geef de nieuwe klasse de naam AuthenticationTestHandler.cs en selecteer Toevoegen om de klasse te genereren. Deze klasse verifieert gebruikers met behulp van Basisverificatie om het eenvoudig te houden. Uw app kan een willekeurig verificatieschema gebruiken.

  3. Voeg in AuthenticationTestHandler.cs de volgende using-instructies toe:

    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:

    Deze handler verifieert de aanvraag wanneer de volgende drie voorwaarden waar zijn:

    • De aanvraag bevat een autorisatieheader.
    • De aanvraag maakt gebruik van basisverificatie.
    • De gebruikersnaamtekenreeks en de wachtwoordtekenreeks zijn dezelfde tekenreeks.

    Anders wordt de aanvraag geweigerd. Deze verificatie is geen bestaande benadering op verificatie en autorisatie. Dit is slechts een eenvoudig voorbeeld voor deze zelfstudie.

    Als het aanvraagbericht is geverifieerd en geautoriseerd door AuthenticationTestHandler, wordt de basisverificatiegebruiker toegevoegd aan de huidige aanvraag in 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.

    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 verificatie. Het wordt alleen gebruikt om basisverificatie na te bootsen en is niet beveiligd. U moet een veilig verificatiemechanisme implementeren in uw productietoepassingen en -services.

  5. Als u de berichtenhandler wilt registreren, voegt u de volgende code toe aan het einde van de Register methode in het bestand Program.cs :

    config.MessageHandlers.Add(new AuthenticationTestHandler());

  6. Sla uw wijzigingen op.

Registreren voor meldingen met behulp van de WebAPI-back-end

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. De controller voegt een gebruikerstag toe voor de gebruiker die door AuthenticationTestHandler is geverifieerd en gekoppeld aan HttpContext. De tag heeft de indeling van de tekenreeks, "username:<actual username>".

  1. Klik in Solution Explorer met de rechtermuisknop op het project AppBackend en selecteer vervolgens NuGet-pakketten beheren.

  2. Selecteer in het linkerdeelvenster Online en typ Microsoft.Azure.NotificationHubs in het vak Zoeken.

  3. Selecteer Microsoft Azure Notification Hubs in de lijst met resultaten en selecteer vervolgens Installeren. Voltooi de installatie en sluit vervolgens het venster Nuget Package Manager.

    Met deze actie wordt een verwijzing toegevoegd aan de Azure Notification Hubs-SDK met het Microsoft.Azure.Notification Hubs NuGet-pakket.

  4. Maak een nieuw klassebestand waarmee de verbinding met de notification hub die wordt gebruikt voor het verzenden van meldingen. Klik in Solution Explorer met de rechtermuisknop op de map Modellen en selecteer achtereenvolgens Toevoegen en Klasse. Noem de nieuwe klasse Notifications.cs en selecteer vervolgens Toevoegen om de klasse te genereren.

    Het venster Nieuw Item toevoegen

  5. Voeg in Notifications.cs de volgende using-instructie toe aan het begin van het bestand:

    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):

    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 de DefaultListenSharedAccessSignature van uw hub in voordat u verdergaat.

  7. Maak vervolgens een nieuwe controller met de naam RegisterController. Klik in Solution Explorer met de rechtermuisknop op de map Controllers en selecteer achtereenvolgens Toevoegen en Controller.

  8. Selecteer API-controller - leeg en selecteer vervolgens Toevoegen.

  9. Typ in het vak ControllernaamRegisterController als naam voor de nieuwe klasse en selecteer vervolgens Toevoegen.

    Het venster Controller toevoegen.

  10. Voeg in RegisterController.cs de volgende using-instructies toe:

    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. In deze code voegt u een gebruikerstag toe voor de gebruiker die is gekoppeld aan HttpContext. De gebruiker is geverifieerd en gekoppeld aan HttpContext door het berichtenfilter dat u hebt toegevoegd, AuthenticationTestHandler. U kunt ook optionele controles toevoegen om te controleren of de gebruiker rechten heeft voor het registreren voor de aangevraagde 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.

Meldingen verzenden vanuit de WebAPI-back-end

In deze sectie voegt u een nieuwe domeincontroller toe die clientapparaten een manier biedt om een melding te verzenden. De melding is gebaseerd op de gebruikersnaamtag die gebruikmaakt van de Azure Notification Hubs .NET-bibliotheek in de ASP.NET WebAPI-back-end.

  1. Maak nog een nieuwe controller met de naam NotificationsController op dezelfde manier als u RegisterController in de vorige sectie hebt gemaakt.

  2. Voeg in NotificationsController.cs de volgende using-instructies toe:

    using AppBackend.Models;
using System.Threading.Tasks;
using System.Web;

  3. Voeg de volgende methode toe aan de klasse NotificationsController:

    Met deze code wordt een meldingstype verzonden die is gebaseerd op de pns-parameter (Platform Notification Service, PNS). De waarde van to_tag wordt gebruikt om de tag gebruikersnaam in te stellen in het bericht. Deze tag moet overeenkomen met een gebruikersnaamtag van een actieve notification hub-registratie. Het meldingsbericht wordt opgehaald uit de hoofdtekst van de POST-aanvraag en geformatteerd voor de doel-PNS.

    Afhankelijk van de PNS die uw ondersteunde apparaten gebruiken om meldingen te ontvangen, worden de meldingen met verschillende indelingen ondersteund. Bijvoorbeeld op Windows-apparaten kunt u een pop-upmelding met WNS gebruiken die niet rechtstreeks wordt ondersteund door een andere 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. Gebruik vervolgens de juiste API voor verzending in de NotificationHubClient-klasse.

    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. De app opent een webbrowser en deze wordt weergegeven met de startpagina van ASP.NET.

De nieuwe WebAPI-back-end publiceren

U gaat de app nu implementeren op een Azure-website zodat deze toegankelijk is vanaf alle apparaten.

  1. Klik met de rechtermuisknop op het project AppBackend en selecteer Publiceren.

  2. Selecteer Microsoft Azure App Service als publicatiedoel en selecteer vervolgens \*\*Publiceren. Het venster App Service maken wordt geopend. Hier kunt u alle benodigde Azure-resources maken die nodig zijn om de ASP.NET-web-app in Azure uit te voeren.

    De tegel Microsoft Azure App Service

  3. Selecteer uw Azure-account in het venster App Service maken. Selecteer Type wijzigen>Web App. Houd de standaard Web App-naam en selecteer het Abonnement, de Resourcegroep en het App Service-plan.

  4. Selecteer Maken.

  5. Noteer de Site-URL-eigenschap in de sectie Samenvatting. Deze URL is het eindpunt van uw back-end verderop in de zelfstudie.

  6. Selecteer Publiceren.

Nadat u de wizard hebt voltooid, wordt de ASP.NET-web-app naar Azure gepubliceerd. Daarna wordt de app geopend in de standaardbrowser. Uw toepassing is zichtbaar in Azure App Services.

De URL gebruikt de naam van de web-app die u eerder hebt opgegeven, met de indeling http://< app_name.azurewebsites.net>.

De code voor het UWP-client bijwerken

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. Het project moet al zijn gekoppeld aan de Windows Store. Bovendien moet het project zijn geconfigureerd voor het gebruik van uw 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.

  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.

  2. Klik in Solution Explorer met de rechtermuisknop op het project Universal Windows Platform (UWP) en klik vervolgens op Manage NuGet-pakketten.

  3. Selecteer aan de linkerkant Bladeren.

  4. Typ Http Client in het zoekvak.

  5. Klik in de lijst met resultaten op System.Net.Http en vervolgens op Installeren. Voltooi de installatie.

  6. Typ nu Json.net in het zoekvak van NuGet. Installeer het pakket Newtonsoft.json en sluit het venster NuGet Package Manager.

  7. Dubbelklik in Solution Explorer in het project WindowsApp op het bestand MainPage.xaml om dit te openen in de Visual Studio-editor.

  8. Vervang in het bestand 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. Ook worden er tekstvakken toegevoegd voor de melding en voor de gebruikersnaam-tag die de melding moet ontvangen:

    <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) . Voeg de volgende using-instructies toe aan het begin van beide bestanden:

    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. Zorg ervoor dat u <Enter Your Backend Endpoint> vervangt door het eindpunt van de back-end dat u eerder hebt vastgesteld. Bijvoorbeeld 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) .

    De methode PushClick is de handler voor de knop Send Push. 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. De melding wordt als JSON-inhoud verzonden in de aanvraagtekst.

    De methode LoginAndRegisterClick is de klik-handler voor de knop Login and register. 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.

    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(). Maak een commentaar van de aanroep naar InitNotificationsAsync() of verwijder de aanroep. De knop-handler initialiseert de registratie van meldingen:

    protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    //InitNotificationsAsync();

  13. Klik met de rechtermuisknop op het project WindowsApp, klik op Add en op Class. Geef de klasse de naam RegisterClient.cs en klik vervolgens op OK om de klasse te genereren.

    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. 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. De klasse maakt gebruik van een verificatietoken dat wordt opgeslagen in de lokale opslag wanneer u op de knop Login and register klikt.

  14. Voeg aan het begin van het bestand RegisterClient.cs de volgende using-instructies toe:

    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:

    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.

De toepassing testen

  1. Start de toepassing in beide versies van Windows.

  2. Voer een gebruikersnaam (Username) en wachtwoord (Password) in zoals weergegeven in het scherm hieronder. Deze moeten verschillen van de gebruikersnaam en het wachtwoord voor Windows Phone.

  3. Klik op Login and register en controleer of er een dialoogvenster wordt weergegeven met de mededeling dat u zich hebt aangemeld. Met deze code wordt ook de knop Send Push ingeschakeld.

    Schermopname van de Notification Hubs-toepassing waarin de gebruikersnaam en het wachtwoord zijn ingevuld.

  4. Voer in het veld Recipient Username Tag de geregistreerde gebruikersnaam in. Voer tekst in voor de melding en klik op Send Push.

  5. Alleen de apparaten die zijn geregistreerd met de overeenkomende gebruikersnaam-tag ontvangen de melding.

    Schermopname van de Notification Hubs-toepassing met weergave van het bericht dat werd gepushed.

Volgende stappen

In deze zelfstudie hebt u geleerd hoe u pushmeldingen kunt verzenden naar specifieke gebruikers door een tag te koppelen aan hun registraties. Als u wilt weten hoe u locatiegebaseerde pushmeldingen kunt verzenden, gaat u verder met de volgende zelfstudie:

Locatiegebaseerde pushmeldingen verzenden