Tutorial: Enviar notificações para usuários específicos usando os hubs de notificação do AzureTutorial: Send notifications to specific users by using Azure Notification Hubs

Descrição geralOverview

Este tutorial mostra-lhe como utilizar os Hubs de Notificação do Azure para enviar notificações push para um utilizador específico da aplicação num dispositivo específico.This tutorial shows you how to use Azure Notification Hubs to send push notifications to a specific app user on a specific device. Um back-end de ASP.NET WebAPI é utilizado para autenticar clientes.An ASP.NET WebAPI backend is used to authenticate clients. Quando o back-end autentica um utilizador de aplicação de cliente, adiciona automaticamente uma etiqueta ao registo de notificação.When the backend authenticates a client application user, it automatically adds a tag to the notification registration. O back-end utiliza esta etiqueta para enviar notificações para o utilizador específico.The backend uses this tag to send notifications to the specific user.

Nota

O código concluído deste tutorial pode ser encontrado no GitHub.The completed code for this tutorial can be found on GitHub.

Neste tutorial, siga os seguintes passos:In this tutorial, you take the following steps:

  • Criar o Projeto WebAPICreate the WebAPI project
  • Autenticar clientes no back-end de WebAPIAuthenticate clients to the WebAPI backend
  • Utilizar o back-end de WebAPI para registar notificaçõesRegister for notifications by using the WebAPI backend
  • Enviar notificações a partir do back-end de WebAPISend notifications from the WebAPI backend
  • Publicar o back-end de WebAPI novoPublish the new WebAPI backend
  • Atualizar o código do projeto de clienteUpdate the code for the client project
  • Testar a aplicaçãoTest the application

Pré-requisitosPrerequisites

Este tutorial se baseia no Hub de notificação e no projeto do Visual Studio que você criou no tutorial: Enviar notificações para plataforma universal do Windows aplicativos usando o tutorial de hubs de notificação do Azure.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. Por isso, conclua-o antes de iniciar este tutorial.Therefore, complete it before starting on this tutorial.

Nota

Se estiver a utilizar Aplicações Móveis no Serviço de Aplicações do Azure como o seu serviço de back-end, veja a secção Versão para Aplicações Móveis deste tutorial.If you are using Mobile Apps in Azure App Service as your backend service, see the Mobile Apps version of this tutorial.

Criar o projeto WebAPICreate the WebAPI project

As secções seguintes abordam a criação de um novo back-end de ASP.NET WebAPI.The following sections discuss the creation of a new ASP.NET WebAPI backend. Este processo tem três objetivos principais:This process has three main purposes:

  • Autenticar clientes: Você adiciona um manipulador de mensagens para autenticar solicitações de cliente e associar o usuário à solicitação.Authenticate clients: You add a message handler to authenticate client requests and associate the user with the request.
  • Registre-se para receber notificações usando o back-end WebAPI: Você adiciona um controlador para lidar com novos registros para um dispositivo cliente receber notificações.Register for notifications by using the WebAPI backend: You add a controller to handle new registrations for a client device to receive notifications. O nome de utilizador autenticado é adicionado automaticamente ao registo como uma etiqueta.The authenticated username is automatically added to the registration as a tag.
  • Enviar notificações aos clientes: Você adiciona um controlador para fornecer uma maneira para os usuários dispararem um envio por push seguro para dispositivos e clientes associados à marca.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.

Crie o novo back-end de ASP.NET WebAPI através das seguintes ações:Create the new ASP.NET WebAPI backend by doing the following actions:

Importante

Se estiver a utilizar o Visual Studio 2015 ou anterior, antes de começar este tutorial, certifique-se que instalou a versão mais recente do Gestor de Pacotes de NuGet para o Visual Studio.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.

Para confirmar, inicie o Visual Studio.To check, start Visual Studio. No menu Ferramentas, selecione Extensões e Atualizações.On the Tools menu, select Extensions and Updates. Procure o Gestor de Pacotes de NuGet na sua versão do Visual Studio e verifique se tem a versão mais recente.Search for NuGet Package Manager in your version of Visual Studio, and make sure you have the latest version. Se a sua versão não for a versão mais recente, desinstale-a e, em seguida, reinstale o Gestor de Pacotes de NuGet.If your version is not the latest version, uninstall it, and then reinstall the NuGet Package Manager.

Nota

Verifique que tem instalado o Azure SDK para Visual Studio para implementação de Website.Make sure you have installed the Visual Studio Azure SDK for website deployment.

  1. Inicie o Visual Studio ou o Visual Studio Express.Start Visual Studio or Visual Studio Express.

  2. Selecione Explorador de Servidores e inicie sessão na sua conta do Azure.Select Server Explorer, and sign in to your Azure account. Para criar os recursos do site na sua conta, tem de ter sessão iniciada.To create the web site resources on your account, you must be signed in.

  3. No Visual Studio, clique com o botão direito do rato na solução Visual Studio, aponte para Adicionar e clique em Novo Projeto.In Visual Studio, right-click Visual Studio solution, point to Add, and click New Project.

  4. Expanda Visual C# , selecione Web e clique em Aplicação Web ASP.NET.Expand Visual C#, select Web, and click ASP.NET Web Application.

  5. Na caixa Nome, escreva AppBackend e selecione OK.In the Name box, type AppBackend, and then select OK.

    A janela Novo Projeto

  6. Na janela Novo Projeto ASP.NET, selecione a caixa de verificação API Web e, em seguida, selecione OK.In the New ASP.NET Project window, select the Web API check box, and then select OK.

    A janela Novo Projeto ASP.NET

  7. Na janela Configurar Aplicação Web do Microsoft Azure, selecione uma subscrição e, em seguida, na lista Plano do Serviço de Aplicações, efetue uma das seguintes ações: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:

    • Selecione um plano do serviço de aplicações que já tenha criado.Select an app service plan that you've already created.
    • Selecione Criar um novo plano do serviço de aplicações e, em seguida, crie um.Select Create a new app service plan, and then create one.

    Não precisa de uma base de dados para este tutorial.You do not need a database for this tutorial. Depois de selecionar o seu plano do serviço de aplicações, selecione OK para criar o projeto.After you have selected your app service plan, select OK to create the project.

    A janela Configurar Aplicação Web do Microsoft Azure

    Se você não vir esta página para configurar o plano do serviço de aplicativo, continue com o tutorial.If you don't see this page for configure app service plan, continue with the tutorial. Você pode configurá-lo enquanto publica o aplicativo mais tarde.You can configure it while publishing the app later.

Autenticar clientes no back-end de WebAPIAuthenticate clients to the WebAPI backend

Nesta secção, crie uma nova classe de processadores de mensagens com o nome AuthenticationTestHandler para o back-end novo.In this section, you create a new message-handler class named AuthenticationTestHandler for the new backend. Esta classe é derivada de DelegatingHandler e adicionada como um processador de mensagens, para processar todos os pedidos enviados para o back-end.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. No Explorador de Soluções, clique com o botão direito do rato no projeto AppBackend, selecione Adicionar e, em seguida, selecione Classe.In Solution Explorer, right-click the AppBackend project, select Add, and then select Class.

  2. Dê o nome AuthenticationTestHandler.cs à classe e selecione Adicionar para gerar a classe.Name the new class AuthenticationTestHandler.cs, and then select Add to generate the class. Esta classe autentica utilizadores com a Autenticação Básica, para simplicidade.This class authenticates users by using Basic Authentication for simplicity. A sua aplicação pode utilizar qualquer esquema de autenticação.Your app can use any authentication scheme.

  3. No AuthenticationTestHandler.cs, adicione as instruções using seguintes: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. No AuthenticationTestHandler.cs, substitua a definição de classe AuthenticationTestHandler pelo seguinte código:In AuthenticationTestHandler.cs, replace the AuthenticationTestHandler class definition with the following code:

    O processador autoriza o pedido quando se verificarem as três condições seguintes:The handler authorizes the request when the following three conditions are true:

    • O pedido inclui o cabeçalho Autorização.The request includes an Authorization header.
    • O pedido utiliza a autenticação básica.The request uses basic authentication.
    • A cadeia de nome de utilizador e a cadeia de palavra-passe são a mesma cadeia.The user name string and the password string are the same string.

    Caso contrário, o pedido é rejeitado.Otherwise, the request is rejected. Esta autenticação não é uma verdadeira abordagem de autenticação e autorização.This authentication is not a true authentication and authorization approach. É apenas um exemplo simples para este tutorial.It is only a simple example for this tutorial.

    Se AuthenticationTestHandler autenticar e autorizar a mensagem do pedido, o utilizador de autenticação básica é anexado ao pedido atual em HttpContext.If the request message is authenticated and authorized by AuthenticationTestHandler, the basic authentication user is attached to the current request on HttpContext. As informações do utilizador em HttpContext serão utilizadas por outro controlador (RegisterController) mais tarde, para adicionar uma etiqueta ao pedido de registo de notificação.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;
        }
    }
    

    Nota

    Observação de segurança: A AuthenticationTestHandler classe não fornece autenticação verdadeira.Security note: The AuthenticationTestHandler class does not provide true authentication. É utilizada apenas para imitar a autenticação básica e não é segura.It is used only to mimic basic authentication and is not secure. Tem de implementar um mecanismo de autenticação segura nos seus serviços e aplicações de produção.You must implement a secure authentication mechanism in your production applications and services.

  5. Para registar o processador de mensagens, adicione o seguinte código ao fim do método Register na classe App_Start/WebApiConfig.cs: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. Guarde as alterações.Save your changes.

Utilizar o back-end de WebAPI para registar notificaçõesRegister for notifications by using the WebAPI backend

Nesta secção, adicione um controlador novo ao back-end de WebAPI para processar pedidos de registo de um utilizador e de um dispositivo para as notificações, através da biblioteca de cliente dos hubs de notificação.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. O controlador adiciona uma etiqueta de utilizador para o utilizador que AuthenticationTestHandler autenticou e anexou a HttpContext.The controller adds a user tag for the user that was authenticated and attached to HttpContext by AuthenticationTestHandler. A etiqueta tem o formato de cadeia "username:<actual username>".The tag has the string format, "username:<actual username>".

  1. No Explorador de Soluções, clique com o botão direito no projeto AppBackend e, em seguida, selecione Gerir Pacotes de NuGet.In Solution Explorer, right-click the AppBackend project and then select Manage NuGet Packages.

  2. No painel esquerdo, selecione Online e, na caixa Procurar, escreva Microsoft.Azure.NotificationHubs.In the left pane, select Online and then, in the Search box, type Microsoft.Azure.NotificationHubs.

  3. Na lista de resultados, selecione Hubs de Notificação do Microsoft Azure e, em seguida, selecione Instalar.In the results list, select Microsoft Azure Notification Hubs, and then select Install. Conclua a instalação e feche a janela Gestor de Pacotes de NuGet.Complete the installation, and then close the NuGet Package Manager window.

    Esta ação adiciona uma referência ao SDK dos Hubs de Notificação do Azure mediante a utilização do Pacote NuGet Microsoft.Azure.Notification Hubs.This action adds a reference to the Azure Notification Hubs SDK by using the Microsoft.Azure.Notification Hubs NuGet package.

  4. Crie um ficheiro de classe novo que represente a ligação ao hub de notificação utilizado para enviar notificações.Create a new class file that represents the connection with the notification hub that's used to send notifications. No Explorador de Soluções, clique com o botão direito do rato na pasta Modelos, selecione Adicionar e, em seguida, selecione Classe.In Solution Explorer, right-click the Models folder, select Add, and then select Class. Dê o nome Notifications.cs à classe nova e selecione Adicionar para gerá-la.Name the new class Notifications.cs, and then select Add to generate the class.

    A janela Adicionar Novo Item

  5. Em Notifications.cs, adicione a instrução using à parte superior do ficheiro:In Notifications.cs, add the following using statement at the top of the file:

    using Microsoft.Azure.NotificationHubs;
    
  6. Substitua a definição de classe Notifications pelo código seguinte e substitua os dois marcadores de posição pela cadeia de ligação (com acesso total) do seu hub de notificação e o nome do hub (disponível no portal do Azure):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>");
        }
    }
    

    Importante

    Insira o nome e o DefaultFullSharedAccessSignature do seu hub antes de continuar.Enter the name and the DefaultFullSharedAccessSignature of your hub before proceeding further.

  7. Em seguida, crie um controlador novo com o nome RegisterController.Next, create a new controller named RegisterController. No Explorador de Soluções, clique com o botão direito do rato na pasta Controladores, selecione Adicionar e, em seguida, selecione Controlador.In Solution Explorer, right-click the Controllers folder, select Add, and then select Controller.

  8. Selecione Controlador da API Web 2 – Vazio e, em seguida, selecione Adicionar.Select Web API 2 Controller - Empty, and then select Add.

    A janela Adicionar Estrutura

  9. Na caixa Nome do controlador, escreva RegisterController para designar a classe nova e selecione Adicionar.In the Controller name box, type RegisterController to name the new class, and then select Add.

    A janela Adicionar Controlador

  10. No RegisterController.cs, adicione as instruções using seguintes: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. Adicione o código seguinte dentro da definição de classe RegisterController.Add the following code inside the RegisterController class definition. Neste código, adicione uma etiqueta de utilizador para o utilizador que está anexado a HttpContext.In this code, you add a user tag for the user that's attached to HttpContext. O utilizador foi autenticado e anexado a HttpContext através do filtro de mensagem que adicionou, AuthenticationTestHandler.The user was authenticated and attached to HttpContext by the message filter that you added, AuthenticationTestHandler. Também pode adicionar verificações opcionais para confirmar que o utilizador tem direitos para se registar nas etiquetas pedidas.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. Guarde as alterações.Save your changes.

Enviar notificações a partir do back-end de WebAPISend notifications from the WebAPI backend

Nesta secção, irá adicionar um novo controlador que indica uma forma de os dispositivos de cliente enviarem uma notificação.In this section, you add a new controller that exposes a way for client devices to send a notification. A notificação baseia-se na etiqueta de nome de utilizador que utiliza a Biblioteca .NET dos Hubs de Notificação do Azure no back-end de ASP.NET WebAPI.The notification is based on the username tag that uses Azure Notification Hubs .NET Library in the ASP.NET WebAPI backend.

  1. Crie outro controlador novo com o nome NotificationsController da mesma forma que criou o RegisterController na secção anterior.Create another new controller named NotificationsController the same way you created RegisterController in the previous section.

  2. No NotificationsController.cs, adicione as instruções using seguintes:In NotificationsController.cs, add the following using statements:

    using AppBackend.Models;
    using System.Threading.Tasks;
    using System.Web;
    
  3. Adicione o método seguinte à classe NotificationsController:Add the following method to the NotificationsController class:

    Este código envia um tipo de notificação com base no parâmetro pns do Serviço de Notificação de Plataforma (PNS).This code sends a notification type that's based on the Platform Notification Service (PNS) pns parameter. O valor de to_tag é utilizado para definir a etiqueta nome de utilizador na mensagem.The value of to_tag is used to set the username tag on the message. Esta etiqueta tem de corresponder a uma etiqueta de nome de utilizador de um registo de hub de notificação ativo.This tag must match a username tag of an active notification hub registration. A mensagem da notificação é retirada do corpo do pedido POST e formatada para o PNS de destino.The notification message is pulled from the body of the POST request and formatted for the target PNS.

    Consoante o PNS que os seus dispositivos suportados utilizam para receber notificações, estas são suportadas com vários formatos.Depending on the PNS that your supported devices use to receive notifications, the notifications are supported by a variety of formats. Por exemplo, em dispositivos Windows, poderá utilizar uma notificação de alerta com WNS que não seja diretamente suportada por outro PNS.For example, on Windows devices, you might use a toast notification with WNS that isn't directly supported by another PNS. Nesse caso, o seu back-end tem de formatar a notificação de modo a que seja suportada pelo PNS dos dispositivos que pretende incluir.In such an instance, your backend needs to format the notification into a supported notification for the PNS of devices you plan to support. Em seguida, utilize a API de envio adequada na classe NotificationHubClient.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. Para executar a aplicação e garantir a precisão do seu trabalho até ao momento, prima a tecla F5.To run the application and ensure the accuracy of your work so far, select the F5 key. A aplicação abre um browser e é apresentada na home page do ASP.NET.The app opens a web browser, and it is displayed on the ASP.NET home page.

Publicar o back-end de WebAPI novoPublish the new WebAPI backend

Em seguida, implemente a aplicação num site do Azure para que seja acessível a partir de todos os dispositivos.Next, you deploy the app to an Azure website to make it accessible from all devices.

  1. Clique com o botão direito do rato no projeto AppBackend e selecione Publicar.Right-click the AppBackend project, and then select Publish.

  2. Selecione Serviço de Aplicações do Microsoft Azure como o destino da publicação e selecione **Publicar.Select Microsoft Azure App Service as your publish target, and then select **Publish. A janela Criar Serviço de Aplicações é aberta.The Create App Service window opens. Aí, pode criar todos os recursos do Azure necessários para executar a aplicação Web ASP.NET no Azure.Here you can create all the necessary Azure resources to run the ASP.NET web app in Azure.

    O mosaico do Serviço de Aplicações do Microsoft Azure

  3. Na janela Criar Serviço de Aplicações, selecione a sua conta do Azure.In the Create App Service window, select your Azure account. Selecione Alterar Tipo > Aplicação Web.Select Change Type > Web App. Mantenha o Nome da Aplicação Web predefinido e, em seguida, selecione a Subscrição, o Grupo de Recursos e o Plano do Serviço de Aplicações.Keep the default Web App Name, and then select the Subscription, Resource Group, and App Service Plan.

  4. Selecione Criar.Select Create.

  5. Anote a propriedade URL do Site, na secção Resumo.Make a note of the Site URL property in the Summary section. Este URL será o seu ponto final de back-end mais adiante no tutorial.This URL is your back-end endpoint later in the tutorial.

  6. Selecione Publicar.Select Publish.

Depois de concluir o assistente, este publica a aplicação Web ASP.NET no Azure e, em seguida, abre a aplicação no browser predefinido.After you've completed the wizard, it publishes the ASP.NET web app to Azure and then opens the app in the default browser. A aplicação é visualizável nos Serviços Aplicacionais do Azure.Your application is viewable in Azure App Services.

O URL utiliza o nome da aplicação Web que especificou anteriormente, com o formato http://<nome_da_aplicação>.azurewebsites.net.The URL uses the web app name that you specified earlier, with the format http://<app_name>.azurewebsites.net.

Atualizar o código para o cliente UWPUpdate the code for the UWP client

Nesta seção, você atualiza o código no projeto que você concluiu para o tutorial: Enviar notificações para plataforma universal do Windows aplicativos usando o tutorial de hubs de notificação do Azure.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. O projeto já deve estar associado à Microsoft Store.The project should already be associated with the Windows store. Também deve estar configurado para utilizar o seu Hub de Notificação.It also should be configured to use your notification hub. Nesta secção, adicione o código para chamar o novo back-end de WebAPI e utilize-o para registar e enviar notificações.In this section, you add code to call the new WebAPI backend and use it for registering and sending notifications.

  1. No Visual Studio, abra a solução que você criou para o tutorial: Envie notificações para Plataforma Universal do Windows aplicativos usando os hubsde notificação do Azure.In Visual Studio, open the solution you created for the Tutorial: Send notifications to Universal Windows Platform apps by using Azure Notification Hubs.

  2. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto Plataforma Universal do Windows (UWP) e clique em gerenciar pacotes NuGet.In Solution Explorer, right-click the Universal Windows Platform (UWP) project and then click Manage NuGet Packages.

  3. No lado esquerdo, selecione procurar.On the left-hand side, select Browse.

  4. Na caixa Procurar, escreva Cliente HTTP.In the Search box, type Http Client.

  5. Na lista de resultados, clique em System.Net.Http e clique em Instalar.In the results list, click System.Net.Http, and click Install. Conclua a instalação.Complete the installation.

  6. Na caixa Procurar no NuGet, escreva Json.net.Back in the NuGet Search box, type Json.net. Instale o pacote Newtonsoft.json e, em seguida, feche a janela Gestor de Pacote NuGet.Install the Newtonsoft.json package, and then close the NuGet Package Manager window.

  7. No Explorador de Soluções, no projeto WindowsApp, faça duplo clique em MainPage.xaml para o abrir no editor do Visual Studio.In Solution Explorer, in the WindowsApp project, double-click MainPage.xaml to open it in the Visual Studio editor.

  8. <Grid> No código MainPage.xaml XML, substitua a seção pelo seguinte código: Esse código adiciona uma caixa de texto de nome de usuário e senha com a qual o usuário se autentica.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. Ele também adiciona caixas de texto para a mensagem de notificação e a marca de nome de usuário que deve receber a notificação: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. Em Gerenciador de soluções, abra o MainPage.xaml.cs arquivo para os projetos (Windows 8.1) e (Windows Phone 8,1) .In Solution Explorer, open the MainPage.xaml.cs file for the (Windows 8.1) and (Windows Phone 8.1) projects. Adicione as seguintes declarações using na parte superior dos ficheiros: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. No MainPage.xaml.cs para o projeto WindowsApp , adicione o MainPage seguinte membro à classe.In MainPage.xaml.cs for the WindowsApp project, add the following member to the MainPage class. Certifique-se de que substitui <Enter Your Backend Endpoint> pelo ponto final do back-end propriamente dito que obteve antes.Be sure to replace <Enter Your Backend Endpoint> with your actual backend endpoint obtained previously. Por exemplo, http://mybackend.azurewebsites.net.For example, http://mybackend.azurewebsites.net.

    private static string BACKEND_ENDPOINT = "<Enter Your Backend Endpoint>";
    
  11. Adicione o código abaixo à classe MainPage no MainPage.xaml.cs para os projetos (Windows 8.1) e (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.

    O método PushClick é o processador de cliques do botão Enviar Notificação Push.The PushClick method is the click handler for the Send Push button. Chama o back-end para acionar uma notificação para todos os dispositivos com uma etiqueta de nome de utilizador que corresponde ao parâmetro to_tag.It calls the backend to trigger a notification to all devices with a username tag that matches the to_tag parameter. A mensagem de notificação é enviada como conteúdo JSON no corpo do pedido.The notification message is sent as JSON content in the request body.

    O método LoginAndRegisterClick é o processador de cliques do botão Iniciar sessão e registar.The LoginAndRegisterClick method is the click handler for the Login and register button. Armazena o token de autenticação básico (representa qualquer token que o seu esquema de autenticação utilize) no armazenamento local e, em seguida, utiliza o RegisterClient para se registar para receber notificações com o back-end.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. Abra App.xaml.cs e localize a chamada para InitNotificationsAsync() no manipulador OnLaunched() de eventos.Open App.xaml.cs and find the call to InitNotificationsAsync() in the OnLaunched() event handler. Comente ou elimine a chamada para InitNotificationsAsync().Comment out or delete the call to InitNotificationsAsync(). O processador de botões inicia os registos de notificações.The button handler initializes notification registrations.

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        //InitNotificationsAsync();
    
  13. Clique com o botão direito do rato no projeto WindowsApp, clique em Adicionar e em Classe.Right-click the WindowsApp project, click Add, and then click Class. Nomeie a classe RegisterClient.cse clique em OK para gerar a classe.Name the class RegisterClient.cs, then click OK to generate the class.

    Esta classe encapsula as chamadas REST necessárias para contactar o back-end da aplicação, para se registar para receber notificações push.This class wraps the REST calls required to contact the app backend, in order to register for push notifications. Também armazena localmente os registrationIds criados pelo Hub de Notificação conforme detalhado em Registar-se a partir do back-end da aplicação.It also locally stores the registrationIds created by the Notification Hub as detailed in Registering from your app backend. Utiliza um token de autorização guardado no armazenamento local quando clica no botão Iniciar sessão e registar.It uses an authorization token stored in local storage when you click the Login and register button.

  14. Adicione as seguintes declarações using na parte superior do ficheiro RegisterClient.cs: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. Adicione o código seguinte dentro da definição de classe RegisterClient.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. Guarde todas as alterações.Save all your changes.

Testar a AplicaçãoTest the Application

  1. Inicie a aplicação em ambos os Windows.Launch the application on both Windows.

  2. Introduza um Nome de Utilizador e Palavra-passe conforme apresentado no ecrã abaixo.Enter a Username and Password as shown in the screen below. Devem diferir do nome de utilizador e da palavra-passe que introduziu no Windows Phone.It should differ from the user name and password you enter on Windows Phone.

  3. Clique em Iniciar sessão e registar e verifique se uma caixa de diálogo mostra que iniciou sessão.Click Log in and register and verify a dialog shows that you have logged in. Este código também ativa o botão Enviar Notificação Push.This code also enables the Send Push button.

  4. Em seguida, no campo Etiqueta de Nome de Utilizador de Destinatário, introduza o nome de utilizador registado.Then in the Recipient Username Tag field, enter the user name registered. Introduza a mensagem de notificação e clique em Enviar Notificação Push.Enter a notification message and click Send Push.

  5. Apenas os dispositivos registados com a etiqueta de nome de utilizador correspondente recebem a mensagem de notificação.Only the devices that have registered with the matching username tag receive the notification message.

Passos SeguintesNext steps

Neste tutorial, aprendeu a enviar notificações push para utilizadores específicos que têm etiquetas associadas aos respetivos registos.In this tutorial, you learned how to push notifications to specific users that have tags associated with their registrations. Para saber como enviar notificações push com base na localização, avance para o seguinte tutorial:To learn how to push location-based notifications, advance to the following tutorial: