Kurz: Ověřování služby Azure SignalR s využitím služby Azure Functions

V tomto podrobném kurzu vytvoříte chatovací místnost s ověřováním a privátním zasíláním zpráv pomocí těchto technologií:

• Azure Functions: Back-endové rozhraní API pro ověřování uživatelů a odesílání chatovacích zpráv.
• Služba Azure SignalR: Služba pro vysílání nových zpráv připojeným chatovacím klientům.
• Azure Storage: Služba úložiště, kterou služba Azure Functions vyžaduje.
• služba Aplikace Azure: Služba, která poskytuje ověřování uživatelů.

Model v4

Poznámka:

Kód uvedený v tomto článku můžete získat z GitHubu.

Model v3

Poznámka:

Kód uvedený v tomto článku můžete získat z GitHubu.

Požadavky

• Účet Azure s aktivním předplatným. Pokud jej nemáte, můžete si jej zdarma vytvořit.
• Node.js (verze 20.x).
• Azure Functions Core Tools (verze 4).

Máte problémy? Dejte nám vědět.

Vytvoření základních prostředků v Azure

Vytvoření prostředku služby Azure SignalR

Vaše aplikace bude přistupovat k instanci služby Azure SignalR. Pomocí následujících kroků vytvořte instanci služby Azure SignalR Pomocí webu Azure Portal:

1. Na webu Azure Portal vyberte tlačítko Vytvořit prostředek (+).

2. Vyhledejte a vyberte službu SignalR.

3. Vyberte Vytvořit.

4. Zadejte následující informace.

   Jméno	Hodnota
   Skupina prostředků	Vytvořte novou skupinu prostředků s jedinečným názvem.
   Název prostředku	Zadejte jedinečný název instance služby Azure SignalR.
   Oblast	Vyberte oblast blízko od vás.
   Cenová úroveň	Vyberte Free.
   Režim služby	Vyberte bezserverovou verzi.

5. Vyberte Zkontrolovat a vytvořit.

6. Vyberte Vytvořit.

Máte problémy? Dejte nám vědět.

Vytvoření aplikace funkcí Azure a účtu úložiště Azure

1. Na domovské stránce webu Azure Portal vyberte Vytvořit prostředek (+).

2. Vyhledejte aplikaci Funkcí a vyberte ji.

3. Vyberte Vytvořit.

4. Zadejte následující informace.

   Jméno	Hodnota
   Skupina prostředků	Použijte stejnou skupinu prostředků s vaší instancí služby Azure SignalR Service.
   Název aplikace funkcí	Zadejte jedinečný název aplikace funkcí.
   Zásobník modulu runtime	Vyberte Node.js.
   Oblast	Vyberte oblast blízko od vás.

5. Ve výchozím nastavení se ve stejné skupině prostředků vytvoří nový účet úložiště Azure společně s vaší aplikací funkcí. Pokud chcete použít jiný účet úložiště v aplikaci funkcí, přepněte na kartu Hostování a zvolte účet.

6. Vyberte Zkontrolovat a vytvořit a potom vyberte Vytvořit.

Místní vytvoření projektu Azure Functions

Inicializace aplikace funkcí

1. Z příkazového řádku vytvořte pro svůj projekt kořenovou složku a přejděte do složky.

2. Spuštěním následujícího příkazu v terminálu vytvořte nový projekt JavaScript Functions:

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

Ve výchozím nastavení vygenerovaný projekt obsahuje host.json soubor, který obsahuje sady rozšíření, které zahrnují příponu SignalR. Další informace o balíčcích rozšíření najdete v tématu Registrace rozšíření vazeb Azure Functions.

Konfigurace nastavení aplikace

Když místně spustíte a ladíte modul runtime Azure Functions, aplikace funkcí načte nastavení aplikace z local.settings.json. Aktualizujte tento soubor pomocí připojovací řetězec instance služby Azure SignalR a účtu úložiště, který jste vytvořili dříve.

Obsah local.settings.json nahraďte následujícím kódem:

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

V předchozím kódu:

• Do nastavení zadejte připojovací řetězec AzureSignalRConnectionString služby Azure SignalR.

  Pokud chcete získat řetězec, přejděte na webu Azure Portal do instance služby Azure SignalR. V části Nastavení vyhledejte nastavení Klíče. Výběrem tlačítka Kopírovat napravo od připojovací řetězec ho zkopírujte do schránky. Můžete použít primární nebo sekundární připojovací řetězec.

• Do nastavení zadejte připojovací řetězec AzureWebJobsStorage účtu úložiště.

  Pokud chcete získat řetězec, přejděte na webu Azure Portal ke svému účtu úložiště. V části Zabezpečení a sítě vyhledejte nastavení Přístupové klíče. Výběrem tlačítka Kopírovat napravo od připojovací řetězec ho zkopírujte do schránky. Můžete použít primární nebo sekundární připojovací řetězec.

Máte problémy? Dejte nám vědět.

Vytvoření funkce pro ověřování uživatelů ve službě Azure SignalR

Při prvním otevření chatovací aplikace v prohlížeči se vyžadují platné přihlašovací údaje pro připojení ke službě Azure SignalR. Vytvořte ve své aplikaci funkcí funkci negotiate triggeru HTTP, která vrátí tyto informace o připojení.

Poznámka:

Tato funkce musí být pojmenovánanegotiate, protože klient SignalR vyžaduje koncový bod, který končí ./negotiate

Model v4

1. Ve složce kořenového projektu vytvořte negotiate funkci z předdefinované šablony pomocí následujícího příkazu:

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

2. Otevřete src/functions/negotiate.js, aktualizujte obsah následujícím způsobem:

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

   Funkce obsahuje vazbu triggeru HTTP pro příjem požadavků od klientů SignalR. Funkce obsahuje také vstupní vazbu SignalR pro vygenerování platných přihlašovacích údajů pro klienta pro připojení k centru služby Azure SignalR s názvem default.

   Tato funkce přebírá informace o připojení SignalR ze vstupní vazby a vrací je klientovi v těle odpovědi HTTP.

   V vazbě signalRConnectionInfo pro místní vývoj neexistuje žádná userId vlastnost. Později ho přidáte, abyste při nasazení aplikace funkcí do Azure nastavili uživatelské jméno připojení SignalR.

Model v3

1. Ve složce kořenového projektu vytvořte negotiate funkci z předdefinované šablony pomocí následujícího příkazu:

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

2. Otevřete možnost negotiate/function.json a zobrazte konfiguraci vazby funkce.

   Funkce obsahuje vazbu triggeru HTTP pro příjem požadavků od klientů SignalR. Funkce obsahuje také vstupní vazbu SignalR pro vygenerování platných přihlašovacích údajů pro klienta pro připojení k centru služby Azure SignalR s názvem 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"
       }
     ]
   }
   

   V vazbě signalRConnectionInfo pro místní vývoj neexistuje žádná userId vlastnost. Později ho přidáte, abyste při nasazení aplikace funkcí do Azure nastavili uživatelské jméno připojení SignalR.

3. Zavřete soubor negotiate/function.json .

4. Otevřete možnost negotiate/index.js a zobrazte si tělo funkce:

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

   Tato funkce převezme ze vstupní vazby informace o připojení ke službě SignalR a vrátí je klientovi v textu odpovědi HTTP. Klient SignalR používá tyto informace pro připojení k instanci služby Azure SignalR.

Máte problémy? Dejte nám vědět.

Vytvoření funkce pro odesílání zpráv chatu

Webová aplikace k odesílání zpráv chatu vyžaduje také rozhraní HTTP API. Vytvořte funkci triggeru HTTP, která odesílá zprávy všem připojeným klientům, kteří používají službu Azure SignalR:

Model v4

1. Ve složce kořenového projektu vytvořte funkci triggeru HTTP pojmenovanou sendMessage ze šablony pomocí následujícího příkazu:

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

2. Otevřete soubor src/functions/sendMessage.js a následujícím způsobem aktualizujte obsah:

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

   Funkce obsahuje trigger HTTP a výstupní vazbu SignalR. Převezme tělo z požadavku HTTP a odešle ho klientům připojeným ke službě Azure SignalR. Vyvolá funkci pojmenovanou newMessage pro každého klienta.

   Funkce může číst identitu odesílatele a může přijmout recipient hodnotu v textu zprávy, která vám umožní soukromě odeslat zprávu jednomu uživateli. Tyto funkce použijete později v tomto kurzu.

3. Uložte soubor.

Model v3

1. Ve složce kořenového projektu vytvořte funkci triggeru HTTP pojmenovanou sendMessage ze šablony pomocí následujícího příkazu:

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

2. Chcete-li konfigurovat vazby pro funkci, nahraďte obsah sendMessage/function.json následujícím kódem:

   {
     "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"
       }
     ]
   }
   

   Předchozí kód provede dvě změny původního souboru:

   • Změní trasu na messages metodu HTTP a omezí ji na metodu POST HTTP.
   • Přidá výstupní vazbu služby Azure SignalR, která odešle zprávu vrácenou funkcí všem klientům připojeným k centru služby Azure SignalR s názvem default.

3. Obsah sendMessage/index.js nahraďte následujícím kódem:

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

   Tato funkce přebírá tělo z požadavku HTTP a odesílá ho klientům připojeným ke službě Azure SignalR. Vyvolá funkci pojmenovanou newMessage pro každého klienta.

   Funkce může číst identitu odesílatele a může přijmout recipient hodnotu v textu zprávy, která vám umožní soukromě odeslat zprávu jednomu uživateli. Tyto funkce použijete později v tomto kurzu.

4. Uložte soubor.

Máte problémy? Dejte nám vědět.

Hostování webového uživatelského rozhraní chatovacího klienta

Uživatelské rozhraní chatovací aplikace je jednoduchá jednostránkové aplikace (SPA) vytvořená s architekturou Vue JavaScriptu pomocí klienta ASP.NET Core SignalR JavaScript. Kvůli jednoduchosti je aplikace funkcí hostitelem webové stránky. V produkčním prostředí můžete k hostování webové stránky použít Static Web Apps .

Model v4

1. V kořenovém adresáři projektu funkce vytvořte soubor s názvem index.html .

2. Zkopírujte a vložte obsah index.html do souboru. Uložte soubor.

3. Ve složce kořenového projektu vytvořte funkci triggeru HTTP pojmenovanou index ze šablony pomocí tohoto příkazu:

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

4. Upravte obsah src /functions/index.js následujícím kódem:

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

   Funkce přečte statickou webovou stránku a vrátí ji uživateli.

5. Otestujte aplikaci místně. Spusťte aplikaci funkcí pomocí tohoto příkazu:

   func start
   

6. Otevřete http://localhost:7071/api/index ve webovém prohlížeči. Měla by se zobrazit webová stránka chatu.

   

7. Do pole chatu zadejte zprávu.

   Po výběru klávesy Enter se zpráva zobrazí na webové stránce. Protože uživatelské jméno klienta SignalR není nastavené, odesíláte všechny zprávy anonymně.

Model v3

1. Vytvořte složku s názvem obsah v kořenovém adresáři projektu funkce.

2. Ve složce obsahu vytvořte soubor s názvem index.html.

3. Zkopírujte a vložte obsah index.html do souboru. Uložte soubor.

4. Ve složce kořenového projektu vytvořte funkci triggeru HTTP pojmenovanou index ze šablony pomocí tohoto příkazu:

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

5. Upravte obsah index/index.js tohoto kódu:

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

   Funkce přečte statickou webovou stránku a vrátí ji uživateli.

6. Otevřete index/function.json a změňte authLevel hodnotu vazeb na anonymous. Celý soubor teď vypadá jako v tomto příkladu:

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

7. Otestujte aplikaci místně. Spusťte aplikaci funkcí pomocí tohoto příkazu:

   func start
   

8. Otevřete http://localhost:7071/api/index ve webovém prohlížeči. Měla by se zobrazit webová stránka chatu.

   

9. Do pole chatu zadejte zprávu.

   Po výběru klávesy Enter se zpráva zobrazí na webové stránce. Protože uživatelské jméno klienta SignalR není nastavené, odesíláte všechny zprávy anonymně.

Máte problémy? Dejte nám vědět.

Nasazení do Azure a povolení ověřování

Spustili jste aplikaci funkcí a chatovací aplikaci místně. Teď je nasaďte do Azure a povolte ověřování a privátní zasílání zpráv.

Konfigurace aplikace funkcí pro ověřování

Chatovací aplikace zatím funguje anonymně. V Azure použijete ověřování služby App Service k ověření uživatele. ID uživatele nebo uživatelské jméno ověřeného uživatele se předá vazbě SignalRConnectionInfo za účelem vygenerování informací o připojení ověřených jako uživatel.

Model v4

1. Otevřete soubor src/functions/negotiate.js .

2. userId Vložte vlastnost do vazby inputSignalR s hodnotou {headers.x-ms-client-principal-name}. Tato hodnota je vazbový výraz , který nastaví uživatelské jméno klienta SignalR na název ověřeného uživatele. Vazba by teď měla vypadat jako v tomto příkladu:

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

3. Uložte soubor.

Model v3

1. Otevřete možnost negotiate/function.json.

2. userId Vložte vlastnost do vazby SignalRConnectionInfo s hodnotou {headers.x-ms-client-principal-name}. Tato hodnota je vazbový výraz , který nastaví uživatelské jméno klienta SignalR na název ověřeného uživatele. Vazba by teď měla vypadat jako v tomto příkladu:

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

3. Uložte soubor.

Nasazení aplikace funkcí do Azure

Nasaďte aplikaci funkcí do Azure pomocí následujícího příkazu:

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

Tato --publish-local-settings možnost publikuje místní nastavení ze souboru local.settings.json do Azure, takže je nemusíte znovu konfigurovat v Azure.

Povolení ověřování pomocí služby App Service

Azure Functions podporuje ověřování pomocí Microsoft Entra ID, Facebooku, Twitteru, účtu Microsoft a Googlu. Microsoft použijete jako zprostředkovatele identity pro účely tohoto kurzu.

1. Na webu Azure Portal přejděte na stránku prostředku vaší aplikace funkcí.

2. Vyberte Nastavení> Authentication.

3. Vyberte Přidat zprostředkovatele identity.

   

4. V seznamu zprostředkovatele identity vyberte Microsoft. Pak vyberte Přidat.

   

Dokončené nastavení vytvoří registraci aplikace, která přidruží vašeho zprostředkovatele identity k vaší aplikaci funkcí.

Další informace o podporovaných zprostředkovatelech identit najdete v následujících článcích:

• Microsoft Entra ID
• Facebook
• Twitter
• Účet Microsoft
• Google

Vyzkoušení aplikace

1. Otevře záznam typu https://<YOUR-FUNCTION-APP-NAME>.azurewebsites.net/api/index.
2. Vyberte Login (Přihlášení) a ověřte se přes vybraného zprostředkovatele ověřování.
3. Odešlete veřejné zprávy tak, že je zadáte do hlavního chatovacího pole.
4. Soukromé zprávy můžete odesílat výběrem uživatelského jména v historii chatu. Tyto zprávy obdrží pouze vybraný příjemce.

Gratulujeme! Nasadili jste chatovací aplikaci bez serveru v reálném čase.

Máte problémy? Dejte nám vědět.

Vyčištění prostředků

Pokud chcete vyčistit prostředky, které jste vytvořili v tomto kurzu, odstraňte skupinu prostředků pomocí webu Azure Portal.

Upozornění

Odstraněním skupiny prostředků odstraníte všechny prostředky, které obsahuje. Pokud skupina prostředků obsahuje prostředky mimo rozsah tohoto kurzu, odstraní se také.

Máte problémy? Dejte nám vědět.

Další kroky

V tomto kurzu jste zjistili, jak používat Azure Functions se službou Azure SignalR. Přečtěte si další informace o vytváření bezserverových aplikací v reálném čase pomocí vazeb služby Azure SignalR pro Azure Functions:

Aplikace v reálném čase se službou Azure SignalR a Azure Functions

Máte problémy? Dejte nám vědět.