Tutorial: Azure SignalR Service-Authentifizierung mit Azure FunctionsTutorial: Azure SignalR Service authentication with Azure Functions

Hier finden Sie ein ausführliches Tutorial zum Erstellen eines Chatraums mit Authentifizierung und privaten Nachrichten unter Verwendung von Azure Functions, App Service-Authentifizierung und SignalR Service.A step by step tutorial to build a chat room with authentication and private messaging using Azure Functions, App Service Authentication, and SignalR Service.

EinführungIntroduction

Eingesetzte Technologien:Technologies used

VoraussetzungenPrerequisites

Für dieses Tutorial ist die folgende Software erforderlich:The following software is required to build this tutorial.

Anmelden beim Azure-PortalSign into the Azure portal

Wechseln Sie zum Azure-Portal, und melden Sie sich mit Ihren Anmeldeinformationen an.Go to the Azure portal and sign in with your credentials.

Erstellen einer Azure SignalR Service-InstanzCreate an Azure SignalR Service instance

Sie erstellen und testen die Azure Functions-App lokal.You will build and test the Azure Functions app locally. Die App greift auf eine SignalR Service-Instanz in Azure zu, die zuvor erstellt werden muss.The app will access a SignalR Service instance in Azure that needs to be created ahead of time.

  1. Klicken Sie auf die Schaltfläche Ressource erstellen ( + ), um eine neue Azure-Ressource zu erstellen.Click on the Create a resource (+) button for creating a new Azure resource.

  2. Suchen Sie nach SignalR Service, und wählen Sie den Dienst aus.Search for SignalR Service and select it. Klicken Sie auf Create.Click Create.

    Neue SignalR Service-Instanz

  3. Geben Sie Folgendes ein:Enter the following information.

    NAMEName WertValue
    RessourcennameResource name Ein eindeutiger Name für die SignalR Service-InstanzA unique name for the SignalR Service instance
    Resource groupResource group Erstellen Sie eine neue Ressourcengruppe mit einem eindeutigen Namen.Create a new resource group with a unique name
    LocationLocation Wählen Sie einen Standort in Ihrer Nähe aus.Select a location close to you
    PreisstufePricing Tier KostenlosFree
  4. Klicken Sie auf Create.Click Create.

  5. Nachdem die Instanz bereitgestellt wurde, öffnen Sie sie im Portal und suchen Sie die Seite „Einstellungen“.After the instance is deployed, open it in the portal and locate its Settings page. Ändern Sie die Einstellung des Dienstmodus in Serverlos.Change the Service Mode setting to Serverless.

    SignalR-Dienstmodus

Initialisieren der Funktions-AppInitialize the function app

Erstellen eines neuen Azure Functions-ProjektsCreate a new Azure Functions project

  1. Verwenden Sie in einem neuen VS Code-Fenster File > Open Folder im Menü, um einen leeren Ordner an einem geeigneten Speicherort zu erstellen und zu öffnen.In a new VS Code window, use File > Open Folder in the menu to create and open an empty folder in an appropriate location. Dies wird der Hauptprojektordner für die Anwendung, die Sie erstellen werden.This will be the main project folder for the application that you will build.

  2. Initialisieren Sie mithilfe der Azure Functions-Erweiterung in VS Code eine Funktions-App im Hauptprojektordner.Using the Azure Functions extension in VS Code, initialize a Function app in the main project folder.

    1. Öffnen Sie dazu die Befehlspalette in Visual Studio Code, indem Sie im Menü die Optionen Ansicht > Befehlspalette auswählen (Tastenkombination: Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the Command Palette in VS Code by selecting View > Command Palette from the menu (shortcut Ctrl-Shift-P, macOS: Cmd-Shift-P).

    2. Suchen Sie den Befehl Azure Functions: Neues Projekt erstellen und wählen Sie ihn aus.Search for the Azure Functions: Create New Project command and select it.

    3. Daraufhin sollte der Hauptprojektordner angezeigt werden.The main project folder should appear. Wählen Sie ihn aus. (Oder navigieren Sie über „Durchsuchen“ zu diesem Ordner.)Select it (or use "Browse" to locate it).

    4. Wählen Sie in der Aufforderung zum Auswählen einer Sprache JavaScript aus.In the prompt to choose a language, select JavaScript.

      Erstellen einer Funktionen-App

Installieren der Funktions-App-ErweiterungenInstall function app extensions

In diesem Tutorial werden Azure Functions-Bindungen für die Interaktion mit Azure SignalR Service verwendet.This tutorial uses Azure Functions bindings to interact with Azure SignalR Service. Wie die meisten anderen Bindungen stehen die SignalR Service-Bindungen als Erweiterung zur Verfügung, die mithilfe der Azure Functions Core Tools-CLI installiert werden muss, damit sie verwendet werden kann.Like most other bindings, the SignalR Service bindings are available as an extension that needs to be installed using the Azure Functions Core Tools CLI before they can be used.

  1. Öffnen Sie in VS Code ein Terminal, indem Sie im Menü die Optionen Ansicht > Terminal (STRG-`) auswählen.Open a terminal in VS Code by selecting View > Terminal from the menu (Ctrl-`).

  2. Stellen Sie sicher, dass der Hauptprojektordner das aktuelle Verzeichnis ist.Ensure the main project folder is the current directory.

  3. Installieren Sie die Erweiterung für die SignalR Service-Funktions-App.Install the SignalR Service function app extension.

    func extensions install -p Microsoft.Azure.WebJobs.Extensions.SignalRService -v 1.0.0
    

Konfigurieren von AnwendungseinstellungenConfigure application settings

Beim lokalen Ausführen und Debuggen der Azure Functions-Runtime werden Anwendungseinstellungen aus local.settings.json gelesen.When running and debugging the Azure Functions runtime locally, application settings are read from local.settings.json. Aktualisieren Sie diese Datei mit der Verbindungszeichenfolge der zuvor erstellten SignalR Service-Instanz.Update this file with the connection string of the SignalR Service instance that you created earlier.

  1. Wählen Sie in VS Code im Explorer-Bereich die Datei local.settings.json aus, um sie zu öffnen.In VS Code, select local.settings.json in the Explorer pane to open it.

  2. Ersetzen Sie den Inhalt der Datei durch Folgendes:Replace the file's contents with the following.

    {
        "IsEncrypted": false,
        "Values": {
            "AzureSignalRConnectionString": "<signalr-connection-string>",
            "WEBSITE_NODE_DEFAULT_VERSION": "10.14.1",
            "FUNCTIONS_WORKER_RUNTIME": "node"
        },
        "Host": {
            "LocalHttpPort": 7071,
            "CORS": "http://127.0.0.1:5500",
            "CORSCredentials": true
        }
    }
    
    • Geben Sie die Azure SignalR Service-Verbindungszeichenfolge in eine Einstellung namens AzureSignalRConnectionString ein.Enter the Azure SignalR Service connection string into a setting named AzureSignalRConnectionString. Den Wert finden Sie im Azure-Portal in der Azure SignalR Service-Ressource auf der Seite Schlüssel. Sie können die primäre oder die sekundäre Verbindungszeichenfolge verwenden.Obtain the value from the Keys page in the Azure SignalR Service resource in the Azure portal; either the primary or secondary connection string can be used.

    • Die Einstellung WEBSITE_NODE_DEFAULT_VERSION wird nicht lokal verwendet, ist aber bei der Bereitstellung in Azure erforderlich.The WEBSITE_NODE_DEFAULT_VERSION setting is not used locally, but is required when deployed to Azure.

    • Im Abschnitt Host sind der Port und die CORS-Einstellungen für den lokalen Functions-Host konfiguriert. (Diese Einstellung hat bei der Ausführung in Azure keine Auswirkung.)The Host section configures the port and CORS settings for the local Functions host (this setting has no effect when running in Azure).

      Hinweis

      Live Server ist typischerweise konfiguriert, um Inhalte von http://127.0.0.1:5500 bereitzustellen.Live Server is typically configured to serve content from http://127.0.0.1:5500. Wenn Sie feststellen, dass er eine andere URL verwendet oder Sie einen anderen HTTP-Server verwenden, ändern Sie die Einstellung CORS, um den richtigen Ursprung wiederzugeben.If you find that it is using a different URL or you are using a different HTTP server, change the CORS setting to reflect the correct origin.

      Abrufen des SignalR Service-Schlüssels

  3. Speichern Sie die Datei .Save the file.

Erstellen einer Funktion zum Authentifizieren von Benutzern bei SignalR ServiceCreate a function to authenticate users to SignalR Service

Wird die Chap-App zum ersten Mal im Browser geöffnet, sind gültige Verbindungsanmeldeinformationen für das Herstellen einer Verbindung mit Azure SignalR Service erforderlich.When the chat app first opens in the browser, it requires valid connection credentials to connect to Azure SignalR Service. Sie erstellen in Ihrer Funktions-App eine über HTTP ausgelöste Funktion namens negotiate, um diese Verbindungsinformationen zurückzugeben.You'll create an HTTP triggered function named negotiate in your function app to return this connection information.

Hinweis

Diese Funktion muss den Namen negotiate tragen, da der SignalR-Client einen Endpunkt benötigt, der mit /negotiate endet.This function must be named negotiate as the SignalR client requires an endpoint that ends in /negotiate.

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P).

  2. Suchen Sie den Befehl Azure Functions: Funktion erstellen, und wählen Sie ihn aus.Search for and select the Azure Functions: Create Function command.

  3. Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:When prompted, provide the following information.

    NAMEName WertValue
    Funktions-App-OrdnerFunction app folder Wählen Sie den Hauptprojektordner aus.Select the main project folder
    VorlageTemplate HTTP-TriggerHTTP Trigger
    NAMEName negotiatenegotiate
    AutorisierungsstufeAuthorization level AnonymAnonymous

    Ein Ordner mit dem Namen negotiate wird erstellt, der die neue Funktion enthält.A folder named negotiate is created that contains the new function.

  4. Öffnen Sie negotiate/function.json, um Bindungen für die Funktion zu konfigurieren.Open negotiate/function.json to configure bindings for the function. Ändern Sie den Inhalt der Datei wie unten angegeben.Modify the content of the file to the following. Dadurch wird eine Eingabebindung hinzugefügt, die gültige Anmeldeinformationen für einen Client generiert, um eine Verbindung mit einem Azure SignalR Service-Hub namens chat herzustellen.This adds an input binding that generates valid credentials for a client to connect to an Azure SignalR Service hub named chat.

    {
        "disabled": false,
        "bindings": [
            {
                "authLevel": "anonymous",
                "type": "httpTrigger",
                "direction": "in",
                "name": "req"
            },
            {
                "type": "http",
                "direction": "out",
                "name": "res"
            },
            {
                "type": "signalRConnectionInfo",
                "name": "connectionInfo",
                "userId": "",
                "hubName": "chat",
                "direction": "in"
            }
        ]
    }
    

    Die Eigenschaft userId in der signalRConnectionInfo-Bindung wird zum Erstellen einer authentifizierten SignalR Service-Verbindung verwendet.The userId property in the signalRConnectionInfo binding is used to create an authenticated SignalR Service connection. Lassen Sie die Eigenschaft bei der lokalen Entwicklung leer.Leave the property blank for local development. Sie verwenden sie bei der Bereitstellung der Funktions-App in Azure.You will use it when the function app is deployed to Azure.

  5. Öffnen Sie negotiate/index.js, um den Textteil der Funktion anzuzeigen.Open negotiate/index.js to view the body of the function. Ändern Sie den Inhalt der Datei wie unten angegeben.Modify the content of the file to the following.

    module.exports = async function (context, req, connectionInfo) {
        context.res.body = connectionInfo;
    };
    

    Diese Funktion übernimmt die SignalR-Verbindungsinformationen aus der Eingabebindung und gibt sie an den Client im HTTP-Antworttext zurück.This function takes the SignalR connection information from the input binding and returns it to the client in the HTTP response body. Der SignalR-Client verwendet diese Informationen, um sich mit der SignalR Service-Instanz zu verbinden.The SignalR client will use this information to connect to the SignalR Service instance.

Erstellen einer Funktion zum Senden von ChatnachrichtenCreate a function to send chat messages

Die Web-App benötigt darüber hinaus eine HTTP-API zum Senden von Chatnachrichten.The web app also requires an HTTP API to send chat messages. Sie erstellen eine über HTTP ausgelöste Funktion namens SendMessage, die mithilfe von SignalR Service Nachrichten an alle verbundenen Clients sendet.You will create an HTTP triggered function named SendMessage that sends messages to all connected clients using SignalR Service.

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P).

  2. Suchen Sie den Befehl Azure Functions: Funktion erstellen, und wählen Sie ihn aus.Search for and select the Azure Functions: Create Function command.

  3. Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:When prompted, provide the following information.

    NAMEName WertValue
    Funktions-App-OrdnerFunction app folder Wählen Sie den Hauptprojektordner aus.select the main project folder
    VorlageTemplate HTTP-TriggerHTTP Trigger
    NAMEName SendMessageSendMessage
    AutorisierungsstufeAuthorization level AnonymAnonymous

    Ein Ordner mit dem Namen SendMessage wird erstellt, der die neue Funktion enthält.A folder named SendMessage is created that contains the new function.

  4. Öffnen Sie SendMessage/function.json, um Bindungen für die Funktion zu konfigurieren.Open SendMessage/function.json to configure bindings for the function. Ändern Sie den Inhalt der Datei wie unten angegeben.Modify the content of the file to the following.

    {
        "disabled": false,
        "bindings": [
            {
                "authLevel": "anonymous",
                "type": "httpTrigger",
                "direction": "in",
                "name": "req",
                "route": "messages",
                "methods": [
                    "post"
                ]
            },
            {
                "type": "http",
                "direction": "out",
                "name": "res"
            },
            {
                "type": "signalR",
                "name": "$return",
                "hubName": "chat",
                "direction": "out"
            }
        ]
    }
    

    Dadurch werden an der ursprünglichen Funktion zwei Änderungen vorgenommen:This makes two changes to the original function:

    • Die Route wird in messages geändert und der HTTP-Trigger auf die POST-HTTP-Methode beschränkt.Changes the route to messages and restricts the HTTP trigger to the POST HTTP method.
    • Eine SignalR Service-Ausgabebindung wird hinzugefügt, die eine von der Funktion zurückgegebene Nachricht an alle Clients sendet, die mit einem SignalR Service-Hub namens chat verbunden sind.Adds a SignalR Service output binding that sends a message returned by the function to all clients connected to a SignalR Service hub named chat.
  5. Speichern Sie die Datei .Save the file.

  6. Öffnen Sie SendMessage/index.js, um den Textteil der Funktion anzuzeigen.Open SendMessage/index.js to view the body of the function. Ändern Sie den Inhalt der Datei wie unten angegeben.Modify the content of the file to the following.

    module.exports = async function (context, req) {
        const message = req.body;
        message.sender = req.headers && req.headers['x-ms-client-principal-name'] || '';
    
        let recipientUserId = '';
        if (message.recipient) {
            recipientUserId = message.recipient;
            message.isPrivate = true;
        }
    
        return {
            'userId': recipientUserId,
            'target': 'newMessage',
            'arguments': [ message ]
        };
    };
    

    Diese Funktion übernimmt den Textteil aus der HTTP-Anforderung und sendet ihn an Clients, die mit SignalR Service verbunden sind. Dabei wird auf jedem Client eine Funktion namens newMessage aufgerufen.This function takes the body from the HTTP request and sends it to clients connected to SignalR Service, invoking a function named newMessage on each client.

    Die Funktion kann die Identität des Absenders lesen und den Wert recipient im Nachrichtentext akzeptieren, um zuzulassen, dass eine Nachricht privat an einen einzelnen Benutzer gesendet wird.The function can read the sender's identity and can accept a recipient value in the message body to allow for a message to be sent privately to a single user. Diese Funktionen werden später im Tutorial verwendet.These functionalities will be used later in the tutorial.

  7. Speichern Sie die Datei .Save the file.

Erstellen und Ausführen der Webbenutzeroberfläche des ChatclientsCreate and run the chat client web user interface

Die Benutzeroberfläche der Chatanwendung ist eine Single-Page-Webanwendung (Single Page Application, SPA), die mit dem JavaScript-Framework Vue erstellt wird.The chat application's UI is a simple single page application (SPA) created with the Vue JavaScript framework. Sie wird separat von der Funktions-App gehostet.It will be hosted separately from the function app. Lokal führen Sie die Webbenutzeroberfläche mit der VS Code-Erweiterung für Live Server aus.Locally, you will run the web interface using the Live Server VS Code extension.

  1. Erstellen Sie in VS Code im Stamm des Hauptprojektordners einen neuen Ordner namens Inhalt.In VS Code, create a new folder named content at the root of the main project folder.

  2. Erstellen Sie im Ordner Inhalt eine neue Datei mit dem Namen index.html.In the content folder, create a new file named index.html.

  3. Kopieren Sie den Inhalt von index.html , und fügen Sie ihn ein.Copy and paste the content of index.html.

  4. Speichern Sie die Datei .Save the file.

  5. Drücken Sie F5, um die Funktions-App lokal auszuführen und einen Debugger anzufügen.Press F5 to run the function app locally and attach a debugger.

  6. Öffnen Sie index.html, und starten Sie Live Server. Öffnen Sie dazu die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P), und wählen Sie Live Server: Mit Live-Server öffnen aus.With index.html open, start Live Server by opening the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P) and selecting Live Server: Open with Live Server. Live Server öffnet die Anwendung in einem Browser.Live Server will open the application in a browser.

  7. Die Anwendung wird geöffnet.The application opens. Geben Sie eine Nachricht ins Chatfeld ein, und drücken Sie die EINGABETASTE.Enter a message in the chat box and press enter. Aktualisieren Sie die Anwendung, um neue Nachrichten anzuzeigen.Refresh the application to see new messages. Da keine Authentifizierung konfiguriert wurde, werden alle Nachrichten anonym gesendet.Because no authentication was configured, all messages will be sent as "anonymous".

Bereitstellen in Azure und Aktivieren der AuthentifizierungDeploy to Azure and enable authentication

Sie haben die Funktions-App und die Chatanwendung lokal ausgeführt.You have been running the function app and chat application locally. Nun stellen Sie sie in Azure bereit und aktivieren Authentifizierung und private Nachrichten in der Anwendung.You will now deploy them to Azure and enable authentication and private messaging in the application.

Anmelden bei Azure mit VS CodeLog into Azure with VS Code

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P).

  2. Suchen Sie den Befehl Azure: Anmelden, und wählen Sie ihn aus.Search for and select the Azure: Sign in command.

  3. Folgen Sie den Anweisungen, um den Anmeldevorgang im Browser abzuschließen.Follow the instructions to complete the sign in process in your browser.

Erstellen eines SpeicherkontosCreate a Storage account

Für eine in Azure ausgeführte Funktions-App wird ein Azure Storage-Konto benötigt.An Azure Storage account is required by a function app running in Azure. Sie werden auch die Webseite für die Chat-Benutzeroberfläche mit dem Feature der statischen Website von Azure Storage hosten.You will also host the web page for the chat UI using the static websites feature of Azure Storage.

  1. Klicken Sie im Azure-Portal auf die Schaltfläche Ressource erstellen ( + ), um eine neue Azure-Ressource zu erstellen.In the Azure portal, click on the Create a resource (+) button for creating a new Azure resource.

  2. Wählen Sie die Kategorie Storage und dann die Option Speicherkonten aus.Select the Storage category, then select Storage account.

  3. Geben Sie Folgendes ein:Enter the following information.

    NAMEName WertValue
    SubscriptionSubscription Wählen Sie das Abonnement mit der SignalR Service-Instanz.Select the subscription containing the SignalR Service instance
    Resource groupResource group Wählen Sie dieselbe Ressourcengruppe.Select the same resource group
    RessourcennameResource name Geben Sie einen eindeutigen Namen für das Speicherkonto an.A unique name for the Storage account
    LocationLocation Wählen Sie den gleichen Speicherort wie für Ihre anderen Ressourcen aus.Select the same location as your other resources
    LeistungPerformance StandardStandard
    KontoartAccount kind StorageV2 (universell v2)StorageV2 (general purpose V2)
    ReplikationReplication Lokal redundanter Speicher (LRS)Locally-redundant storage (LRS)
    ZugriffsebeneAccess Tier HeißHot
  4. Klicken Sie auf Überprüfen + erstellen und dann auf Erstellen.Click Review + create, then Create.

Konfigurieren von statischen WebsitesConfigure static websites

  1. Öffnen Sie das Speicherkonto nach seiner Erstellung im Azure-Portal.After the Storage account is created, open it in the Azure portal.

  2. Wählen Sie Statische Website aus.Select Static website.

  3. Wählen Sie Aktiviert, um das Feature für die statische Website zu aktivieren.Select Enabled to enable the static website feature.

  4. Geben Sie index.html als Name des Indexdokuments ein.In Index document name, enter index.html.

  5. Klicken Sie auf Speichern.Click Save.

  6. Es wird ein Primärer Endpunkt angezeigt.A Primary endpoint appears. Notieren Sie sich diesen Wert.Note this value. Dieser wird für zum Konfigurieren der Funktions-App benötigt.It will be required to configure the function app.

Konfigurieren der Funktions-App für die AuthentifizierungConfigure function app for authentication

Bisher funktioniert die Chat-App anonym.So far, the chat app works anonymously. In Azure verwenden Sie zum Authentifizieren von Benutzern die App Service-Authentifizierung.In Azure, you will use App Service Authentication to authenticate the user. Die Benutzer-ID oder der Benutzername des authentifizierten Benutzers kann an die SignalRConnectionInfo-Bindung übergeben werden, um Verbindungsinformationen zu generieren, die als der entsprechende Benutzer authentifiziert sind.The user ID or username of the authenticated user can be passed to the SignalRConnectionInfo binding to generate connection information that is authenticated as the user.

Beim Senden einer Nachricht kann die App entscheiden, ob sie an alle verbundenen Clients oder nur an die Clients gesendet werden soll, die für einen bestimmten Benutzer authentifiziert wurde.When a sending message, the app can decide whether to send it to all connected clients, or only to the clients that have been authenticated to a given user.

  1. Öffnen Sie in VS Code die Datei negotiate/function.json.In VS Code, open negotiate/function.json.

  2. Fügen Sie in der Eigenschaft userId der SignalRConnectionInfo-Bindung einen Bindungsausdruck ein: {headers.x-ms-client-principal-name}.Insert a binding expression into the userId property of the SignalRConnectionInfo binding: {headers.x-ms-client-principal-name}. Damit wird der Wert auf den Benutzernamen des authentifizierten Benutzers festgelegt.This sets the value to the username of the authenticated user. Das Attribut sollte nun wie folgt aussehen:The attribute should now look like this.

    {
        "type": "signalRConnectionInfo",
        "name": "connectionInfo",
        "userId": "{headers.x-ms-client-principal-name}",
        "hubName": "chat",
        "direction": "in"
    }
    
  3. Speichern Sie die Datei .Save the file.

Bereitstellen der Funktions-App in AzureDeploy function app to Azure

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P), und wählen Sie Azure Functions: Für Funktions-App bereitstellen aus.Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P) and select Azure Functions: Deploy to Function App.

  2. Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:When prompted, provide the following information.

    NAMEName WertValue
    Bereitzustellender OrdnerFolder to deploy Wählen Sie den Hauptprojektordner aus.Select the main project folder
    SubscriptionSubscription Wählen Sie Ihr Abonnement aus.Select your subscription
    Funktionen-AppFunction app Wählen Sie Create New Function App (Neue Funktions-App erstellen) aus.Select Create New Function App
    Name der Funktions-AppFunction app name Geben Sie einen eindeutigen Namen ein.Enter a unique name
    Resource groupResource group Wählen Sie die gleiche Ressourcengruppe wie für die SignalR Service-Instanz aus.Select the same resource group as the SignalR Service instance
    SpeicherkontoStorage account Wählen Sie das zuvor erstellte Speicherkonto aus.Select the storage account you created earlier

    Eine neue Funktions-App wird in Azure erstellt, und die Bereitstellung beginnt.A new function app is created in Azure and the deployment begins. Warten Sie, bis die Bereitstellung abgeschlossen ist.Wait for the deployment to complete.

Hochladen lokaler Einstellungen für die Funktions-AppUpload function app local settings

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P).

  2. Suchen Sie den Befehl Azure Functions: Lokale Einstellungen hochladen, und wählen Sie ihn aus.Search for and select the Azure Functions: Upload local settings command.

  3. Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:When prompted, provide the following information.

    NAMEName WertValue
    Datei für lokale EinstellungenLocal settings file local.settings.jsonlocal.settings.json
    SubscriptionSubscription Wählen Sie Ihr Abonnement aus.Select your subscription
    Funktionen-AppFunction app Wählen Sie die zuvor bereitgestellte Funktions-App aus.Select the previously deployed function app

Lokale Einstellungen werden in die Funktions-App in Azure hochgeladen.Local settings are uploaded to the function app in Azure. Wählen Sie Ja, alle aus, wenn Sie zum Überschreiben vorhandener Einstellungen aufgefordert werden.If prompted to overwrite existing settings, select Yes to all.

Aktivieren der App Service-AuthentifizierungEnable App Service Authentication

App Service-Authentifizierung unterstützt die Authentifizierung über Azure Active Directory, Facebook, Twitter, Microsoft-Konten und Google.App Service Authentication supports authentication with Azure Active Directory, Facebook, Twitter, Microsoft account, and Google.

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P).

  2. Suchen Sie den Befehl Azure Functions: In Portal öffnen, und wählen Sie ihn aus.Search for and select the Azure Functions: Open in portal command.

  3. Wählen Sie den Abonnement- und Funktions-App-Namen aus, um die Funktions-App im Azure-Portal zu öffnen.Select the subscription and function app name to open the function app in the Azure portal.

  4. Lassen Sie die Funktions-App im Portal geöffnet. Navigieren Sie zur Registerkarte Plattformfeatures, und wählen Sie Authentifizierung/Autorisierung.In the function app that was opened in the portal, locate the Platform features tab, select Authentication/Authorization.

  5. Aktivieren Sie die App Service-Authentifizierung.Turn On App Service Authentication.

  6. Wählen Sie unter Die auszuführende Aktion, wenn die Anforderung nicht authentifiziert ist die Option „Mit {zuvor ausgewählter Authentifizierungsanbieter} anmelden“.In Action to take when request is not authenticated, select "Log in with {authentication provider you selected earlier}".

  7. Geben Sie unter Zulässige externe Umleitungs-URLs die URL des primären Webendpunkts Ihres Speicherkontos ein, die Sie zuvor notiert haben.In Allowed External Redirect URLs, enter the URL of your storage account primary web endpoint that you previously noted.

  8. Befolgen Sie zum Abschließen der Konfiguration die Anweisungen in der Dokumentation des ausgewählten Anmeldeanbieters.Follow the documentation for the login provider of your choice to complete the configuration.

Aktualisieren der Web-AppUpdate the web app

  1. Navigieren Sie im Azure-Portal zur Seite „Übersicht“ der Funktions-App.In the Azure portal, navigate to the function app's overview page.

  2. Kopieren Sie die URL der Funktions-App.Copy the function app's URL.

    Abrufen der URL

  3. Öffnen Sie in VS Code die Datei index.html, und ersetzen Sie den Wert apiBaseUrl durch die URL der Funktions-App.In VS Code, open index.html and replace the value of apiBaseUrl with the function app's URL.

  4. Die Anwendung kann mit Authentifizierung über Azure Active Directory, Facebook, Twitter, Microsoft-Konten oder Google konfiguriert werden.The application can be configured with authentication using Azure Active Directory, Facebook, Twitter, Microsoft account, or Google. Legen Sie den Wert authProvider fest, um den gewünschten Authentifizierungsanbieter auszuwählen.Select the authentication provider that you will use by setting the value of authProvider.

  5. Speichern Sie die Datei .Save the file.

Bereitstellen der Webanwendung in BlobspeicherDeploy the web application to blob storage

Die Webanwendung wird mithilfe des Azure Blob Storage-Features für statische Websites gehostet.The web application will be hosted using Azure Blob Storage's static websites feature.

  1. Öffnen Sie die VS Code-Befehlspalette (Ctrl-Shift-P, macOS: Cmd-Shift-P).Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P).

  2. Suchen Sie den Befehl Azure Storage: Bereitstellen für statische Website aus.Search for and select the Azure Storage: Deploy to Static Website command.

  3. Geben Sie die folgenden Werte ein:Enter the following values:

    NAMEName WertValue
    SubscriptionSubscription Wählen Sie Ihr Abonnement aus.Select your subscription
    SpeicherkontoStorage account Wählen Sie das zuvor erstellte Speicherkonto aus.Select the storage account you created earlier
    Bereitzustellender OrdnerFolder to deploy Wählen Sie Durchsuchen , und wählen Sie den Ordner content aus.Select Browse and select the content folder

Die Dateien im Ordner content sollten nun auf der statischen Website bereitgestellt werden.The files in the content folder should now be deployed to the static website.

Aktivieren der Ressourcenfreigabe zwischen verschiedenen Ursprüngen (CORS) für die Funktions-AppEnable function app cross origin resource sharing (CORS)

local.settings.json enthält zwar eine CORS-Einstellung, sie wird jedoch nicht an die Funktions-App in Azure weitergegeben.Although there is a CORS setting in local.settings.json, it is not propagated to the function app in Azure. Sie müssen sie separat festlegen.You need to set it separately.

  1. Öffnen Sie die Funktions-App im Azure-Portal.Open the function app in the Azure portal.

  2. Wählen Sie auf der Registerkarte Plattformfeatures die Option CORS.Under the Platform features tab, select CORS.

    Suchen von CORS

  3. Fügen Sie im Abschnitt Zulässige Ursprünge einen Eintrag mit dem primären Endpunkt der statischen Website als Wert hinzu (entfernen Sie die nachfolgenden / ).In the Allowed origins section, add an entry with the static website primary endpoint as the value (remove the trailing /).

  4. Damit das SignalR JavaScript SDK Ihre Funktions-App von einem Browser aus aufrufen kann, muss die Unterstützung für Anmeldeinformationen in CORS aktiviert sein.In order for the SignalR JavaScript SDK call your function app from a browser, support for credentials in CORS must be enabled. Aktivieren Sie das Kontrollkästchen „Access-Control-Allow-Credentials“ aktivieren“ aus.Select the "Enable Access-Control-Allow-Credentials" checkbox.

    „Access-Control-Allow-Credentials“ aktivieren

  5. Klicken Sie auf Speichern, um die CORS-Einstellungen zu speichern.Click Save to persist the CORS settings.

Testen der AnwendungTry the application

  1. Navigieren Sie in einem Browser zum primären Webendpunkt des Speicherkontos.In a browser, navigate to the storage account's primary web endpoint.

  2. Wählen Sie Anmeldung aus, um sich mit dem ausgewählten Authentifizierungsanbieter zu authentifizieren.Select Login to authenticate with your chosen authentication provider.

  3. Senden Sie öffentliche Nachrichten, indem Sie sie ins Hauptchatfeld eingeben.Send public messages by entering them into the main chat box.

  4. Senden Sie private Nachrichten, indem Sie auf einen Benutzernamen im Chatverlauf klicken.Send private messages by clicking on a username in the chat history. Nur der ausgewählte Empfänger erhält diese Nachrichten.Only the selected recipient will receive these messages.

Glückwunsch!Congratulations! Sie haben eine serverlose Echtzeit-Chat-App bereitgestellt.You have deployed a real-time, serverless chat app!

Demo

Bereinigen von RessourcenClean up resources

Zum Bereinigen der im Rahmen dieses Tutorials erstellten Ressourcen löschen Sie die Ressourcengruppe über das Azure-Portal.To clean up the resources created in this tutorial, delete the resource group using the Azure portal.

Nächste SchritteNext steps

In diesem Tutorial haben Sie erfahren, wie Sie Azure Functions mit Azure SignalR Service nutzen.In this tutorial, you learned how to use Azure Functions with Azure SignalR Service. Lesen Sie mehr über das Erstellen von serverlosen Echtzeitanwendungen mit SignalR Service-Bindungen für Azure Functions.Read more about building real-time serverless applications with SignalR Service bindings for Azure Functions.