Zelfstudie: Verificatie van Azure SignalR Service met Azure Functions

In deze stapsgewijze zelfstudie bouwt u een chatruimte met verificatie en privéberichten met behulp van deze technologieën:

• Azure Functions: Back-end-API voor het verifiëren van gebruikers en het verzenden van chatberichten.
• Azure SignalR-service: service voor het uitzenden van nieuwe berichten naar verbonden chatclients.
• Azure Storage: Opslagservice die azure Functions nodig heeft.
• Azure-app Service: Service die gebruikersverificatie biedt.

Model v4

Notitie

U kunt de code ophalen die in dit artikel wordt vermeld in GitHub.

Model v3

Notitie

U kunt de code ophalen die in dit artikel wordt vermeld in GitHub.

Vereisten

• Een Azure-account met een actief abonnement. Als u geen account hebt, kunt u er gratis een maken.
• Node.js (versie 20.x).
• Azure Functions Core Tools (versie 4).

Ondervindt u problemen? Laat het ons weten.

Essentiële resources maken in Azure

Een Azure SignalR Service-resource maken

Uw toepassing heeft toegang tot een Azure SignalR Service-exemplaar. Gebruik de volgende stappen om een Azure SignalR Service-exemplaar te maken met behulp van Azure Portal:

1. Selecteer in Azure Portal de knop Een resource maken (+).

2. Zoek naar SignalR Service en selecteer deze.

3. Selecteer Maken.

4. Voer de volgende informatie in.

   Naam	Weergegeven als
   Resourcegroep	Maak een nieuwe resourcegroep met een unieke naam.
   Resourcenaam	Voer een unieke naam in voor het Azure SignalR Service-exemplaar.
   Regio	Selecteer een regio bij u in de buurt.
   Prijscategorie	Selecteer Gratis.
   Servicemodus	Selecteer Serverloos.

5. Selecteer Controleren + maken.

6. Selecteer Maken.

Ondervindt u problemen? Laat het ons weten.

Een Azure-functie-app en een Azure-opslagaccount maken

1. Selecteer op de startpagina in Azure Portal de optie Een resource maken (+).

2. Zoek naar functie-app en selecteer deze.

3. Selecteer Maken.

4. Voer de volgende informatie in.

   Naam	Weergegeven als
   Resourcegroep	Gebruik dezelfde resourcegroep met uw Azure SignalR Service-exemplaar.
   Naam van de functie-app	Voer een unieke naam in voor de functie-app.
   Runtimestack	Selecteer Node.js.
   Regio	Selecteer een regio bij u in de buurt.

5. Standaard wordt een nieuw Azure-opslagaccount gemaakt in dezelfde resourcegroep samen met uw functie-app. Als u een ander opslagaccount in de functie-app wilt gebruiken, schakelt u over naar het tabblad Hosting om een account te kiezen.

6. Selecteer Controleren + maken en selecteer vervolgens Maken.

Een Azure Functions-project lokaal maken

Een functie-app initialiseren

1. Maak vanaf een opdrachtregel een hoofdmap voor uw project en ga naar de map.

2. Voer de volgende opdracht uit in uw terminal om een nieuw JavaScript Functions-project te maken:

Model v4

func init --worker-runtime node --language javascript --name my-app --model V4

Model v3

func init --worker-runtime node --language javascript --name my-app --model V3

Het gegenereerde project bevat standaard een host.json-bestand met de extensiebundels die de SignalR-extensie bevatten. Zie Azure Functions-bindingsextensies registreren voor meer informatie over extensiebundels.

Toepassingsinstellingen configureren

Wanneer u de Azure Functions-runtime lokaal uitvoert en foutopsporing uitvoert, leest de functie-app toepassingsinstellingen uit local.settings.json. Werk dit bestand bij met de verbindingsreeks s van het Azure SignalR Service-exemplaar en het opslagaccount dat u eerder hebt gemaakt.

Vervang de inhoud van local.settings.json door de volgende code:

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "<your-storage-account-connection-string>",
    "AzureSignalRConnectionString": "<your-Azure-SignalR-connection-string>"
  }
}

In de voorgaande code:

• Voer de Azure SignalR Service-verbindingsreeks in de AzureSignalRConnectionString instelling in.

  Als u de tekenreeks wilt ophalen, gaat u naar uw Azure SignalR Service-exemplaar in Azure Portal. Zoek in de sectie Instellingen de instelling Sleutels. Selecteer de knop Kopiëren rechts van het verbindingsreeks om deze naar het klembord te kopiëren. U kunt de primaire of secundaire verbindingsreeks gebruiken.

• Voer het opslagaccount verbindingsreeks in de AzureWebJobsStorage instelling in.

  Als u de tekenreeks wilt ophalen, gaat u naar uw opslagaccount in Azure Portal. Zoek in de sectie Beveiliging en netwerken de instelling Toegangssleutels . Selecteer de knop Kopiëren rechts van het verbindingsreeks om deze naar het klembord te kopiëren. U kunt de primaire of secundaire verbindingsreeks gebruiken.

Ondervindt u problemen? Laat het ons weten.

Een functie maken om gebruikers te verifiëren bij Azure SignalR Service

Wanneer de chat-app de eerste keer wordt geopend in de browser, zijn geldige verbindingsreferenties vereist voor het maken van verbinding met Azure SignalR Service. Maak een HTTP-triggerfunctie met de naam negotiate in uw functie-app om deze verbindingsgegevens te retourneren.

Notitie

Deze functie moet een naam negotiate hebben omdat voor de SignalR-client een eindpunt is vereist dat eindigt op /negotiate.

Model v4

1. Maak vanuit de hoofdprojectmap de negotiate functie op basis van een ingebouwde sjabloon met behulp van de volgende opdracht:

   func new --template "HTTP trigger" --name negotiate
   

2. Open src/functions/negotiate.js en werk de inhoud als volgt bij:

   const { app, input } = require('@azure/functions');
   
   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
   });
   
   app.post('negotiate', {
       authLevel: 'anonymous',
       handler: (request, context) => {
           return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
       },
       route: 'negotiate',
       extraInputs: [inputSignalR],
   });
   

   De functie bevat een HTTP-triggerbinding voor het ontvangen van aanvragen van SignalR-clients. De functie bevat ook een SignalR-invoerbinding om geldige referenties te genereren voor een client om verbinding te maken met een Azure SignalR Service-hub met de naam default.

   Deze functie neemt de SignalR-verbindingsgegevens van de invoerbinding en retourneert deze naar de client in de hoofdtekst van het HTTP-antwoord.

   Er is geen userId eigenschap in de signalRConnectionInfo binding voor lokale ontwikkeling. U voegt deze later toe om de gebruikersnaam van een SignalR-verbinding in te stellen wanneer u de functie-app implementeert in Azure.

Model v3

1. Maak vanuit de hoofdprojectmap de negotiate functie op basis van een ingebouwde sjabloon met behulp van de volgende opdracht:

   func new --template "SignalR negotiate HTTP trigger" --name negotiate
   

2. Open negotiate/function.json om de configuratie van de functiebinding weer te geven.

   De functie bevat een HTTP-triggerbinding voor het ontvangen van aanvragen van SignalR-clients. De functie bevat ook een SignalR-invoerbinding om geldige referenties te genereren voor een client om verbinding te maken met een Azure SignalR Service-hub met de naam default.

   {
     "disabled": false,
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "methods": ["post"],
         "name": "req",
         "route": "negotiate"
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       },
       {
         "type": "signalRConnectionInfo",
         "name": "connectionInfo",
         "hubName": "default",
         "connectionStringSetting": "AzureSignalRConnectionString",
         "direction": "in"
       }
     ]
   }
   

   Er is geen userId eigenschap in de signalRConnectionInfo binding voor lokale ontwikkeling. U voegt deze later toe om de gebruikersnaam van een SignalR-verbinding in te stellen wanneer u de functie-app implementeert in Azure.

3. Sluit het bestand onderhandelen/function.json .

4. Open negotiate/index.js om de hoofdtekst van de functie weer te geven:

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

   Deze functie gebruikt de SignalR-verbindingsgegevens van de invoerbinding en retourneert die aan de client in de hoofdtekst van het HTTP-antwoord. De SignalR-client gebruikt deze informatie om verbinding te maken met het Azure SignalR Service-exemplaar.

Ondervindt u problemen? Laat het ons weten.

Een functie maken voor het verzenden van chatberichten

De web-app vereist ook een HTTP-API voor het verzenden van chatberichten. Maak een HTTP-triggerfunctie waarmee berichten worden verzonden naar alle verbonden clients die gebruikmaken van Azure SignalR Service:

Model v4

1. Maak vanuit de hoofdprojectmap een HTTP-triggerfunctie met de naam sendMessage van de sjabloon met behulp van de volgende opdracht:

   func new --name sendMessage --template "Http trigger"
   

2. Open het bestand src/functions/sendMessage.js en werk de inhoud als volgt bij:

   const { app, output } = require('@azure/functions');
   
   const signalR = output.generic({
       type: 'signalR',
       name: 'signalR',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
   });
   
   app.http('messages', {
       methods: ['POST'],
       authLevel: 'anonymous',
       extraOutputs: [signalR],
       handler: async (request, context) => {
           const message = await request.json();
           message.sender = request.headers && request.headers.get('x-ms-client-principal-name') || '';
   
           let recipientUserId = '';
           if (message.recipient) {
               recipientUserId = message.recipient;
               message.isPrivate = true;
           }
           context.extraOutputs.set(signalR,
               {
                   'userId': recipientUserId,
                   'target': 'newMessage',
                   'arguments': [message]
               });
       }
   });
   

   De functie bevat een HTTP-trigger en een SignalR-uitvoerbinding. De hoofdtekst van de HTTP-aanvraag wordt verzonden naar clients die zijn verbonden met Azure SignalR Service. Er wordt een functie aangeroepen met de naam newMessage op elke client.

   De functie kan de identiteit van de afzender lezen en kan een recipient waarde in de hoofdtekst van het bericht accepteren, zodat u een bericht privé naar één gebruiker kunt verzenden. U gebruikt deze functies verderop in de zelfstudie.

3. Sla het bestand op.

Model v3

1. Maak vanuit de hoofdprojectmap een HTTP-triggerfunctie met de naam sendMessage van de sjabloon met behulp van de volgende opdracht:

   func new --name sendMessage --template "Http trigger"
   

2. Als u bindingen voor de functie wilt configureren, vervangt u de inhoud van sendMessage/function.json door de volgende code:

   {
     "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": "default",
         "direction": "out"
       }
     ]
   }
   

   De voorgaande code brengt twee wijzigingen aan in het oorspronkelijke bestand:

   • De route wordt gewijzigd en messages de HTTP-trigger wordt beperkt tot de POST HTTP-methode.
   • Er wordt een Azure SignalR Service-uitvoerbinding toegevoegd waarmee een bericht dat door de functie wordt geretourneerd, wordt verzonden naar alle clients die zijn verbonden met een Azure SignalR Service-hub met de naam default.

3. Vervang de inhoud van sendMessage/index.js door de volgende code:

   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],
     };
   };
   

   Deze functie neemt de hoofdtekst van de HTTP-aanvraag en verzendt deze naar clients die zijn verbonden met Azure SignalR Service. Er wordt een functie aangeroepen met de naam newMessage op elke client.

   De functie kan de identiteit van de afzender lezen en kan een recipient waarde in de hoofdtekst van het bericht accepteren, zodat u een bericht privé naar één gebruiker kunt verzenden. U gebruikt deze functies verderop in de zelfstudie.

4. Sla het bestand op.

Ondervindt u problemen? Laat het ons weten.

De webgebruikersinterface van de chatclient hosten

De gebruikersinterface van de chattoepassing is een eenvoudige toepassing met één pagina die is gemaakt met het Vue JavaScript-framework met behulp van de ASP.NET Core SignalR JavaScript-client. Ter vereenvoudiging fungeert de functie-app als host voor de webpagina. In een productieomgeving kunt u Static Web Apps gebruiken om de webpagina te hosten.

Model v4

1. Maak een bestand met de naam index.html in de hoofdmap van uw functieproject.

2. Kopieer en plak de inhoud van index.html in uw bestand. Sla het bestand op.

3. Maak vanuit de hoofdprojectmap een HTTP-triggerfunctie met de naam index van de sjabloon met behulp van deze opdracht:

   func new --name index --template "Http trigger"
   

4. Wijzig de inhoud van src/functions/index.js in de volgende code:

   const { app } = require('@azure/functions');
   const { readFile } = require('fs/promises');
   
   app.http('index', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: async (context) => {
           const content = await readFile('index.html', 'utf8', (err, data) => {
               if (err) {
                   context.err(err)
                   return
               }
           });
   
           return {
               status: 200,
               headers: {
                   'Content-Type': 'text/html'
               },
               body: content,
           };
       }
   });
   

   De functie leest de statische webpagina en retourneert deze aan de gebruiker.

5. Test uw app lokaal. Start de functie-app met behulp van deze opdracht:

   func start
   

6. Open http://localhost:7071/api/index in uw webbrowser. Er moet een chatwebpagina worden weergegeven.

   

7. Voer een bericht in het chatvak in.

   Nadat u de Enter-toets hebt geselecteerd, wordt het bericht weergegeven op de webpagina. Omdat de gebruikersnaam van de SignalR-client niet is ingesteld, verzendt u alle berichten anoniem.

Model v3

1. Maak een map met de naam inhoud in de hoofdmap van uw functieproject.

2. Maak in de inhoudsmap een bestand met de naam index.html.

3. Kopieer en plak de inhoud van index.html in uw bestand. Sla het bestand op.

4. Maak vanuit de hoofdprojectmap een HTTP-triggerfunctie met de naam index van de sjabloon met behulp van deze opdracht:

   func new --name index --template "Http trigger"
   

5. Wijzig de inhoud van index/index.js de volgende code:

   const fs = require("fs");
   
   module.exports = async function (context, req) {
     const fileContent = fs.readFileSync("content/index.html", "utf8");
   
     context.res = {
       // status: 200, /* Defaults to 200 */
       body: fileContent,
       headers: {
         "Content-Type": "text/html",
       },
     };
   };
   

   De functie leest de statische webpagina en retourneert deze aan de gebruiker.

6. Open index/function.json en wijzig de authLevel waarde van de bindingen in anonymous. Het hele bestand ziet er nu uit zoals in dit voorbeeld:

   {
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "name": "req",
         "methods": ["get", "post"]
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       }
     ]
   }
   

7. Test uw app lokaal. Start de functie-app met behulp van deze opdracht:

   func start
   

8. Open http://localhost:7071/api/index in uw webbrowser. Er moet een chatwebpagina worden weergegeven.

   

9. Voer een bericht in het chatvak in.

   Nadat u de Enter-toets hebt geselecteerd, wordt het bericht weergegeven op de webpagina. Omdat de gebruikersnaam van de SignalR-client niet is ingesteld, verzendt u alle berichten anoniem.

Ondervindt u problemen? Laat het ons weten.

Implementeren naar Azure en verificatie inschakelen

U hebt de functie-app en chat-app lokaal uitgevoerd. Implementeer ze nu in Azure en schakel verificatie en privéberichten in.

De functie-app configureren voor verificatie

Tot nu toe werkt de chat-app anoniem. In Azure gebruikt u App Service-verificatie om de gebruiker te verifiëren. De gebruikers-id of gebruikersnaam van de geverifieerde gebruiker wordt doorgegeven aan de SignalRConnectionInfo binding om verbindingsgegevens te genereren die zijn geverifieerd als de gebruiker.

Model v4

1. Open het bestand src/functions/negotiate.js .

2. Voeg een userId eigenschap in de inputSignalR binding in met de waarde {headers.x-ms-client-principal-name}. Deze waarde is een bindingexpressie waarmee de gebruikersnaam van de SignalR-client wordt ingesteld op de naam van de geverifieerde gebruiker. De binding moet er nu uitzien zoals in dit voorbeeld:

   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
       userId: '{headers.x-ms-client-principal-name}'
   });
   

3. Sla het bestand op.

Model v3

1. Open negotiate/function.json.

2. Voeg een userId eigenschap in de SignalRConnectionInfo binding in met de waarde {headers.x-ms-client-principal-name}. Deze waarde is een bindingexpressie waarmee de gebruikersnaam van de SignalR-client wordt ingesteld op de naam van de geverifieerde gebruiker. De binding moet er nu uitzien zoals in dit voorbeeld:

   {
     "type": "signalRConnectionInfo",
     "name": "connectionInfo",
     "userId": "{headers.x-ms-client-principal-name}",
     "hubName": "default",
     "direction": "in"
   }
   

3. Sla het bestand op.

De functie-app implementeren in Azure

Implementeer de functie-app in Azure met behulp van de volgende opdracht:

func azure functionapp publish <your-function-app-name> --publish-local-settings

Met de --publish-local-settings optie publiceert u uw lokale instellingen van het local.settings.json-bestand naar Azure, zodat u ze niet opnieuw hoeft te configureren in Azure.

App Service-verificatie inschakelen

Azure Functions ondersteunt verificatie met Microsoft Entra ID, Facebook, Twitter, Microsoft-account en Google. U gebruikt Microsoft als id-provider voor deze zelfstudie.

1. Ga in Azure Portal naar de resourcepagina van uw functie-app.

2. Selecteer Instellingen> Verificatie.

3. Selecteer Id-provider toevoegen.

   

4. Selecteer Microsoft in de lijst met id-providers. Selecteer vervolgens Toevoegen.

   

Met de voltooide instellingen maakt u een app-registratie die uw id-provider koppelt aan uw functie-app.

Zie de volgende artikelen voor meer informatie over de ondersteunde id-providers:

• Microsoft Entra ID
• Facebook
• Twitter
• Microsoft-account
• Google

De toepassing uitproberen

1. https://<YOUR-FUNCTION-APP-NAME>.azurewebsites.net/api/index openen.
2. Selecteer Aanmelden om u aan te melden met uw gekozen verificatieprovider.
3. Verzend openbare berichten door ze in te voeren in het hoofdchatvak.
4. Privéberichten verzenden door een gebruikersnaam te selecteren in de chatgeschiedenis. Alleen de geselecteerde geadresseerde ontvangt deze berichten.

Gefeliciteerd U hebt een realtime, serverloze chat-app geïmplementeerd.

Ondervindt u problemen? Laat het ons weten.

Resources opschonen

Als u de resources die u in deze zelfstudie hebt gemaakt, wilt opschonen, verwijdert u de resourcegroep met behulp van Azure Portal.

Let op

Als u de resourcegroep verwijdert, worden alle resources verwijderd die deze bevat. Als de resourcegroep resources bevat die buiten het bereik van deze zelfstudie vallen, worden ze ook verwijderd.

Ondervindt u problemen? Laat het ons weten.

Volgende stappen

In deze zelfstudie hebt u geleerd u hoe u Azure Functions gebruikt met de Azure SignalR Service. Meer informatie over het bouwen van serverloze toepassingen in realtime met Azure SignalR Service-bindingen voor Azure Functions:

Realtime-apps met Azure SignalR Service en Azure Functions

Ondervindt u problemen? Laat het ons weten.