Oktatóanyag: Azure SignalR Service-hitelesítés az Azure Functions segítségével

Ebben a lépésenkénti oktatóanyagban egy csevegőszobát hoz létre hitelesítéssel és privát üzenetküldéssel az alábbi technológiák használatával:

• Azure Functions: Háttér API a felhasználók hitelesítéséhez és csevegőüzenetek küldéséhez.
• Azure SignalR Service: Szolgáltatás új üzenetek csatlakoztatott csevegő ügyfeleknek való közvetítéséhez.
• Azure Storage: Az Azure Functions által igényelt tárolási szolgáltatás.
• Azure-alkalmazás Szolgáltatás: Felhasználóhitelesítést biztosító szolgáltatás.

Modell v4

Feljegyzés

A cikkben említett kódot a GitHubról szerezheti be.

Modell v3

Feljegyzés

A cikkben említett kódot a GitHubról szerezheti be.

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Ha még nem rendelkezik fiókkal, ingyen létrehozhat egyet.
• Node.js (20.x-es verzió).
• Azure Functions Core Tools (4-es verzió).

Problémákat tapasztal? Tudassa velünk.

Alapvető erőforrások létrehozása az Azure-ban

Azure SignalR service-erőforrás létrehozása

Az alkalmazás hozzáfér egy Azure SignalR-szolgáltatáspéldányhoz. Azure SignalR-szolgáltatáspéldány létrehozásához kövesse az alábbi lépéseket az Azure Portal használatával:

1. Az Azure Portalon válassza az Erőforrás létrehozása (+) gombot.

2. Keresse meg és válassza ki a SignalR Service elemet.

3. Válassza a Létrehozás lehetőséget.

4. Adja meg a következő információkat.

   Név szerint	Érték
   Erőforráscsoport	Hozzon létre egy új erőforráscsoportot egyedi névvel.
   Erőforrás neve	Adjon meg egy egyedi nevet az Azure SignalR Service-példánynak.
   Régió	Válasszon ki egy Önhöz közeli régiót.
   Tarifacsomag	Válassza az Ingyenes lehetőséget.
   Szolgáltatás mód	Válassza a Kiszolgáló nélküli lehetőséget.

5. Válassza a Felülvizsgálat és létrehozás lehetőséget.

6. Válassza a Létrehozás lehetőséget.

Problémákat tapasztal? Tudassa velünk.

Azure-függvényalkalmazás és Azure Storage-fiók létrehozása

1. Az Azure Portal kezdőlapján válassza az Erőforrás létrehozása (+) lehetőséget.

2. Keresse meg a függvényalkalmazást , és válassza ki.

3. Válassza a Létrehozás lehetőséget.

4. Adja meg a következő információkat.

   Név szerint	Érték
   Erőforráscsoport	Használja ugyanazt az erőforráscsoportot az Azure SignalR Service-példányával.
   Függvényalkalmazás neve	Adja meg a függvényalkalmazás egyedi nevét.
   Futtatókörnyezeti verem	Válassza a Node.js lehetőséget.
   Régió	Válasszon ki egy Önhöz közeli régiót.

5. Alapértelmezés szerint egy új Azure Storage-fiók jön létre ugyanabban az erőforráscsoportban a függvényalkalmazással együtt. Ha egy másik tárfiókot szeretne használni a függvényalkalmazásban, váltson a Hosting lapra egy fiók kiválasztásához.

6. Válassza a Felülvizsgálat + létrehozás, majd a Létrehozás lehetőséget.

Azure Functions-projekt helyi létrehozása

Függvényalkalmazás inicializálása

1. Parancssorból hozzon létre egy gyökérmappát a projekthez, és váltson a mappára.

2. Futtassa az alábbi parancsot a terminálban egy új JavaScript Functions-projekt létrehozásához:

Modell v4

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

Modell v3

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

A létrehozott projekt alapértelmezés szerint tartalmaz egy host.json fájlt, amely tartalmazza a SignalR-bővítményt tartalmazó bővítménycsomagokat. További információ a bővítménykötegekről: Azure Functions-kötésbővítmények regisztrálása.

Alkalmazásbeállítások konfigurálása

Az Azure Functions-futtatókörnyezet helyi futtatásakor és hibakeresésekor a függvényalkalmazás beolvassa az alkalmazásbeállításokat local.settings.json. Frissítse ezt a fájlt az Azure SignalR szolgáltatáspéldány kapcsolati sztring és a korábban létrehozott tárfiókkal.

Cserélje le a local.settings.json tartalmát a következő kódra:

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

A fenti kód a következőket végzi el:

• Adja meg az Azure SignalR szolgáltatás kapcsolati sztring a AzureSignalRConnectionString beállításba.

  A sztring lekéréséhez nyissa meg az Azure SignalR Service-példányt az Azure Portalon. A Gépház szakaszban keresse meg a Kulcsok beállítást. A vágólapra való másoláshoz kattintson a kapcsolati sztring jobb oldalán található Másolás gombra. Használhatja az elsődleges vagy a másodlagos kapcsolati sztring.

• Adja meg a kapcsolati sztring tárfiókot a AzureWebJobsStorage beállításba.

  A sztring lekéréséhez nyissa meg a tárfiókot az Azure Portalon. A Biztonság + hálózatkezelés szakaszban keresse meg az Access-kulcsok beállítását. A vágólapra való másoláshoz kattintson a kapcsolati sztring jobb oldalán található Másolás gombra. Használhatja az elsődleges vagy a másodlagos kapcsolati sztring.

Problémákat tapasztal? Tudassa velünk.

Függvény létrehozása a felhasználók Azure SignalR Szolgáltatásban való hitelesítéséhez

Amikor a csevegőalkalmazás először nyílik meg a böngészőben, szüksége lesz a kapcsolat hitelesítő adataira ahhoz, hogy kapcsolódhasson az Azure SignalR Service-hez. Hozzon létre egy HTTP-eseményindító függvényt negotiate a függvényalkalmazásban a kapcsolati adatok visszaadásához.

Feljegyzés

Ezt a függvényt el kell nevezni negotiate , mert a SignalR-ügyfélnek szüksége van egy végpontra, amely a következő végződésű /negotiate: .

Modell v4

1. A gyökérprojekt mappából hozza létre a negotiate függvényt egy beépített sablonból az alábbi paranccsal:

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

2. Nyissa meg az src/functions/negotiate.js, frissítse a tartalmat az alábbiak szerint:

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

   A függvény egy HTTP-eseményindító-kötést tartalmaz a SignalR-ügyfelektől érkező kérések fogadásához. A függvény egy SignalR bemeneti kötést is tartalmaz, amely érvényes hitelesítő adatokat hoz létre egy ügyfél számára egy Azure SignalR Service Hubhoz való defaultcsatlakozáshoz.

   Ez a függvény felveszi a SignalR kapcsolati adatait a bemeneti kötésből, és visszaadja azokat az ügyfélnek a HTTP-válasz törzsében.

   A helyi fejlesztéshez nincs userId tulajdonság a signalRConnectionInfo kötésben. Később hozzáadja, hogy beállítsa a SignalR-kapcsolat felhasználónevét, amikor üzembe helyezi a függvényalkalmazást az Azure-ban.

Modell v3

1. A gyökérprojekt mappából hozza létre a negotiate függvényt egy beépített sablonból az alábbi paranccsal:

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

2. Nyissa meg a egyeztetési/function.json a függvénykötés konfigurációjának megtekintéséhez.

   A függvény egy HTTP-eseményindító-kötést tartalmaz a SignalR-ügyfelektől érkező kérések fogadásához. A függvény egy SignalR bemeneti kötést is tartalmaz, amely érvényes hitelesítő adatokat hoz létre egy ügyfél számára egy Azure SignalR Service Hubhoz való defaultcsatlakozáshoz.

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

   A helyi fejlesztéshez nincs userId tulajdonság a signalRConnectionInfo kötésben. Később hozzáadja, hogy beállítsa a SignalR-kapcsolat felhasználónevét, amikor üzembe helyezi a függvényalkalmazást az Azure-ban.

3. Zárja be a tárgyalási/function.json fájlt.

4. Nyissa meg a egyeztetési/index.js a függvény törzsének megtekintéséhez:

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

   A függvény a bemeneti kötés SignalR kapcsolati adatait adja vissza az ügyfélnek a HTTP-válasz törzsében. A SignalR-ügyfél ezeket az információkat használja az Azure SignalR-szolgáltatáspéldányhoz való csatlakozáshoz.

Problémákat tapasztal? Tudassa velünk.

Függvény létrehozása csevegőüzenetek küldéséhez

A webalkalmazásnak egy HTTP API-ra is szüksége lesz, hogy csevegőüzeneteket tudjon küldeni. Hozzon létre egy HTTP-triggerfüggvényt, amely üzeneteket küld az Azure SignalR szolgáltatást használó összes csatlakoztatott ügyfélnek:

Modell v4

1. A gyökérprojekt mappájából hozzon létre egy HTTP-eseményindító függvényt sendMessage a sablonból a következő paranccsal:

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

2. Nyissa meg az src/functions/sendMessage.js fájlt, frissítse a tartalmat az alábbiak szerint:

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

   A függvény egy HTTP-eseményindítót és egy SignalR kimeneti kötést tartalmaz. Felveszi a törzset a HTTP-kérelemből, és elküldi az Azure SignalR Szolgáltatáshoz csatlakozó ügyfeleknek. Meghívja az egyes ügyfeleken elnevezett newMessage függvényt.

   A függvény beolvassa a feladó identitását, és elfogadhat egy recipient értéket az üzenet törzsében, amely lehetővé teszi, hogy privát módon küldjön üzenetet egyetlen felhasználónak. Ezeket a funkciókat az oktatóanyag későbbi részében fogja használni.

3. Mentse a fájlt.

Modell v3

1. A gyökérprojekt mappájából hozzon létre egy HTTP-eseményindító függvényt sendMessage a sablonból a következő paranccsal:

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

2. A függvény kötéseinek konfigurálásához cserélje le a sendMessage/function.json tartalmát a következő kódra:

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

   Az előző kód két módosítást hajt végre az eredeti fájlon:

   • Megváltoztatja az útvonalat, messages és a HTTP-eseményindítót a POST HTTP-metódusra korlátozza.
   • Hozzáad egy Azure SignalR-szolgáltatás kimeneti kötést, amely a függvény által visszaadott üzenetet küld minden ügyfélnek, amely egy Azure SignalR Service-központhoz defaultcsatlakozik.

3. Cserélje le a sendMessage/index.js tartalmát a következő kódra:

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

   Ez a függvény átveszi a törzset a HTTP-kérésből, és elküldi az Azure SignalR Szolgáltatáshoz csatlakoztatott ügyfeleknek. Meghívja az egyes ügyfeleken elnevezett newMessage függvényt.

   A függvény beolvassa a feladó identitását, és elfogadhat egy recipient értéket az üzenet törzsében, amely lehetővé teszi, hogy privát módon küldjön üzenetet egyetlen felhasználónak. Ezeket a funkciókat az oktatóanyag későbbi részében fogja használni.

4. Mentse a fájlt.

Problémákat tapasztal? Tudassa velünk.

A csevegőügyfél webes felhasználói felületének üzemeltetése

A csevegőalkalmazás felhasználói felülete egy egyszerű, egyoldalas alkalmazás (SPA), amelyet a Vue JavaScript-keretrendszerrel hoztak létre a ASP.NET Core SignalR JavaScript-ügyfél használatával. Az egyszerűség kedvéért a függvényalkalmazás üzemelteti a weblapot. Éles környezetben a Static Web Apps használatával üzemeltetheti a weblapot.

Modell v4

1. Hozzon létre egy index.html nevű fájlt a függvényprojekt gyökérkönyvtárában.

2. Másolja és illessze be a index.html tartalmát a fájlba. Mentse a fájlt.

3. A gyökérprojekt mappájából hozzon létre egy HTTP-eseményindító függvényt index a sablonból az alábbi paranccsal:

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

4. Módosítsa az src/functions/index.js tartalmát a következő kódra:

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

   A függvény beolvassa a statikus weblapot, és visszaadja a felhasználónak.

5. Tesztelje az alkalmazást helyileg. Indítsa el a függvényalkalmazást a következő paranccsal:

   func start
   

6. Nyissa meg http://localhost:7071/api/index a webböngészőben. Meg kell jelennie egy csevegőoldalnak.

   

7. Írjon be egy üzenetet a csevegőablakba.

   Az Enter billentyű kiválasztása után az üzenet megjelenik a weblapon. Mivel a SignalR-ügyfél felhasználóneve nincs beállítva, az összes üzenetet névtelenül küldi el.

Modell v3

1. Hozzon létre egy nevű mappát a függvényprojekt gyökérkönyvtárában.

2. A tartalommappában hozzon létre egy index.html nevű fájlt.

3. Másolja és illessze be a index.html tartalmát a fájlba. Mentse a fájlt.

4. A gyökérprojekt mappájából hozzon létre egy HTTP-eseményindító függvényt index a sablonból az alábbi paranccsal:

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

5. Módosítsa a következő kód tartalmát index/index.js :

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

   A függvény beolvassa a statikus weblapot, és visszaadja a felhasználónak.

6. Nyissa meg az indexet/function.json, és módosítsa a authLevel kötések értékét a következőre anonymous: . Most az egész fájl az alábbi példához hasonlóan néz ki:

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

7. Tesztelje az alkalmazást helyileg. Indítsa el a függvényalkalmazást a következő paranccsal:

   func start
   

8. Nyissa meg http://localhost:7071/api/index a webböngészőben. Meg kell jelennie egy csevegőoldalnak.

   

9. Írjon be egy üzenetet a csevegőablakba.

   Az Enter billentyű kiválasztása után az üzenet megjelenik a weblapon. Mivel a SignalR-ügyfél felhasználóneve nincs beállítva, az összes üzenetet névtelenül küldi el.

Problémákat tapasztal? Tudassa velünk.

Üzembe helyezés az Azure-ban és a hitelesítés engedélyezése

A függvényalkalmazást és a csevegőalkalmazást helyileg futtatta. Most helyezze üzembe őket az Azure-ban, és engedélyezze a hitelesítést és a privát üzenetküldést.

A függvényalkalmazás konfigurálása hitelesítéshez

Eddig a csevegőalkalmazás névtelenül működött. Az Azure-ban App Service-hitelesítést fog használni a felhasználó hitelesítéséhez. A hitelesített felhasználó felhasználói azonosítóját vagy felhasználónevét a rendszer átadja a kötésnek a SignalRConnectionInfo felhasználóként hitelesített kapcsolati adatok létrehozásához.

Modell v4

1. Nyissa meg az src/functions/negotiate.js fájlt.

2. userId Tulajdonság beszúrása a inputSignalR kötésbe az értékkel{headers.x-ms-client-principal-name}. Ez az érték egy kötési kifejezés , amely a SignalR-ügyfél felhasználónevét a hitelesített felhasználó nevére állítja. A kötésnek most az alábbi példához hasonlóan kell kinéznie:

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

3. Mentse a fájlt.

Modell v3

1. Egyeztetés/function.json megnyitása.

2. userId Tulajdonság beszúrása a SignalRConnectionInfo kötésbe az értékkel{headers.x-ms-client-principal-name}. Ez az érték egy kötési kifejezés , amely a SignalR-ügyfél felhasználónevét a hitelesített felhasználó nevére állítja. A kötésnek most az alábbi példához hasonlóan kell kinéznie:

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

3. Mentse a fájlt.

A függvényalkalmazás üzembe helyezése az Azure-ban

A függvényalkalmazás üzembe helyezése az Azure-ban a következő paranccsal:

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

A --publish-local-settings beállítás közzéteszi a helyi beállításokat a local.settings.json fájlból az Azure-ba, így nem kell újra konfigurálnia őket az Azure-ban.

Az App Service-hitelesítés engedélyezése

Az Azure Functions a Microsoft Entra ID, a Facebook, a Twitter, a Microsoft-fiók és a Google használatával támogatja a hitelesítést. Ebben az oktatóanyagban a Microsoftot fogja használni identitásszolgáltatóként.

1. Az Azure Portalon nyissa meg a függvényalkalmazás erőforrásoldalát.

2. Válassza a Gépház> Hitelesítés lehetőséget.

3. Válassza az Identitásszolgáltató hozzáadása lehetőséget.

   

4. Az Identitásszolgáltató listában válassza a Microsoftot. Ezután válassza a Hozzáadás elemet.

   

A kész beállítások létrehoznak egy alkalmazásregisztrációt, amely társítja az identitásszolgáltatót a függvényalkalmazáshoz.

A támogatott identitásszolgáltatókkal kapcsolatos további információkért tekintse meg a következő cikkeket:

• Microsoft Entra ID
• Facebook
• Twitter
• Microsoft-fiók
• Google

Az alkalmazás kipróbálása

1. Nyílt https://<YOUR-FUNCTION-APP-NAME>.azurewebsites.net/api/index.
2. Válassza a Bejelentkezést, hogy hitelesíthesse magát a kiválasztott hitelesítési szolgáltatóval.
3. Nyilvános üzenetek küldése a fő csevegőablakban való megadásával.
4. Privát üzenetek küldése egy felhasználónév kiválasztásával a csevegési előzményekben. Ezeket az üzeneteket csak a kijelölt címzett kapja meg.

Gratulálunk! Egy valós idejű, kiszolgáló nélküli csevegőalkalmazást helyezett üzembe.

Problémákat tapasztal? Tudassa velünk.

Az erőforrások eltávolítása

Az oktatóanyagban létrehozott erőforrások törléséhez törölje az erőforráscsoportot az Azure Portal használatával.

Figyelemfelhívás

Az erőforráscsoport törlése törli az összes benne lévő erőforrást. Ha az erőforráscsoport az oktatóanyag hatókörén kívül eső erőforrásokat is tartalmaz, azok is törlődnek.

Problémákat tapasztal? Tudassa velünk.

Következő lépések

Ebből az oktatóanyagból elsajátította, hogyan használható az Azure Functions az Azure SignalR Service szolgáltatással. További információ a valós idejű kiszolgáló nélküli alkalmazások Azure SignalR Service-kötésekkel történő készítéséről az Azure Functionshez:

Valós idejű alkalmazások az Azure SignalR Szolgáltatással és az Azure Functions szolgáltatással

Problémákat tapasztal? Tudassa velünk.