Öğretici: Azure İşlevleri ile Azure SignalR Hizmeti kimlik doğrulaması

Bu adım adım öğreticide, şu teknolojileri kullanarak kimlik doğrulaması ve özel mesajlaşma ile bir sohbet odası oluşturacaksınız:

• Azure İşlevleri: Kullanıcıların kimliğini doğrulamak ve sohbet iletileri göndermek için arka uç API'si.
• Azure SignalR Hizmeti: Bağlı sohbet istemcilerine yeni iletiler yayınlama hizmeti.
• Azure Depolama: Azure İşlevleri gerektiren Depolama hizmeti.
• Azure Uygulaması Hizmeti: Kullanıcı kimlik doğrulaması sağlayan hizmet.

Model v4

Not

Bu makalede belirtilen kodu GitHub'dan alabilirsiniz.

Model v3

Not

Bu makalede belirtilen kodu GitHub'dan alabilirsiniz.

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Kuruluşunuz yoksa şimdi ücretsiz olarak bir tane oluşturabilirsiniz.
• Node.js (sürüm 20.x).
• Azure İşlevleri Core Tools (sürüm 4).

Sorun mu yaşıyorsunuz? Bize bildirin.

Azure'da temel kaynaklar oluşturma

Azure SignalR Hizmeti kaynağı oluşturma

Uygulamanız bir Azure SignalR Hizmeti örneğine erişecek. Azure portalını kullanarak Azure SignalR Hizmeti örneği oluşturmak için aşağıdaki adımları kullanın:

1. Azure portalında Kaynak oluştur (+) düğmesini seçin.

2. SignalR Hizmeti araması yapın ve sonuçlardan seçin.

3. Oluştur'u belirleyin.

4. Aşağıdaki bilgileri girin.

   Veri Akışı Adı	Değer
   Kaynak grubu	Benzersiz bir ada sahip yeni bir kaynak grubu oluşturun.
   Kaynak adı	Azure SignalR Hizmeti örneği için benzersiz bir ad girin.
   Bölge	Size yakın bir bölge seçin.
   Fiyatlandırma Katmanı	Ücretsiz'i seçin.
   Hizmet modu	Sunucusuz'a tıklayın.

5. Gözden geçir + Oluştur’u seçin.

6. Oluştur'u belirleyin.

Sorun mu yaşıyorsunuz? Bize bildirin.

Azure işlev uygulaması ve Azure depolama hesabı oluşturma

1. Azure portalının giriş sayfasında Kaynak oluştur ()+ öğesini seçin.

2. İşlev Uygulamasını arayın ve seçin.

3. Oluştur'u belirleyin.

4. Aşağıdaki bilgileri girin.

   Veri Akışı Adı	Değer
   Kaynak grubu	Azure SignalR Hizmeti örneğiniz ile aynı kaynak grubunu kullanın.
   İşlev Uygulamasının adı	İşlev uygulaması için benzersiz bir ad girin.
   Çalışma zamanı yığını	Node.js’yi seçin.
   Bölge	Size yakın bir bölge seçin.

5. Varsayılan olarak, işlev uygulamanızla birlikte aynı kaynak grubunda yeni bir Azure depolama hesabı oluşturulur. İşlev uygulamasında başka bir depolama hesabı kullanmak istiyorsanız, bir hesap seçmek için Barındırma sekmesine geçin.

6. Gözden Geçir + Oluştur'u ve ardından Oluştur'u seçin.

Yerel olarak Azure İşlevleri projesi oluşturma

İşlev uygulamasını başlatma

1. Komut satırından projeniz için bir kök klasör oluşturun ve klasörüne geçin.

2. Yeni bir JavaScript İşlevleri projesi oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:

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

Varsayılan olarak, oluşturulan proje SignalR uzantısını içeren uzantı paketlerini içeren bir host.json dosyası içerir. Uzantı paketleri hakkında daha fazla bilgi için bkz. Azure İşlevleri bağlama uzantılarını kaydetme.

Uygulama ayarlarını yapılandırma

Azure İşlevleri çalışma zamanını yerel olarak çalıştırıp hatalarını ayıkladığınızda, işlev uygulaması uygulama ayarlarını local.settings.json okur. Bu dosyayı Azure SignalR Hizmeti örneğinin bağlantı dizesi ve daha önce oluşturduğunuz depolama hesabıyla güncelleştirin.

local.settings.json içeriğini aşağıdaki kodla değiştirin:

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

Önceki kodda:

• ayara Azure SignalR Hizmeti bağlantı dizesi AzureSignalRConnectionString girin.

  Dizeyi almak için Azure portalında Azure SignalR Hizmeti örneğine gidin. Ayarlar bölümünde Anahtarlar ayarını bulun. Panonuza kopyalamak için bağlantı dizesi sağındaki Kopyala düğmesini seçin. Birincil veya ikincil bağlantı dizesi kullanabilirsiniz.

• Ayara bağlantı dizesi AzureWebJobsStorage depolama hesabını girin.

  Dizeyi almak için Azure portalında depolama hesabınıza gidin. Güvenlik + ağ bölümünde Erişim anahtarları ayarını bulun. Panonuza kopyalamak için bağlantı dizesi sağındaki Kopyala düğmesini seçin. Birincil veya ikincil bağlantı dizesi kullanabilirsiniz.

Sorun mu yaşıyorsunuz? Bize bildirin.

Azure SignalR Hizmeti kullanıcıların kimliğini doğrulamak için işlev oluşturma

Sohbet uygulaması tarayıcıda ilk açıldığında Azure SignalR Hizmetine bağlanmak için gerekli bağlantı kimlik bilgilerine ihtiyaç duyar. Bu bağlantı bilgilerini döndürmek için işlev uygulamanızda adlı negotiate bir HTTP tetikleyici işlevi oluşturun.

Not

SignalR istemcisi ile biten /negotiatebir uç nokta gerektirdiğinden bu işlev adlandırılmalıdırnegotiate.

Model v4

1. Kök proje klasöründen negotiate aşağıdaki komutu kullanarak yerleşik bir şablondan işlevi oluşturun:

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

2. src/functions/negotiate.js açın, içeriği aşağıdaki gibi güncelleştirin:

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

   İşlev, SignalR istemcilerinden istekleri almak için bir HTTP tetikleyici bağlaması içerir. İşlev, istemcinin adlı defaultbir Azure SignalR Hizmeti hub'ına bağlanması için geçerli kimlik bilgileri oluşturmak için signalr giriş bağlaması da içerir.

   Bu işlev giriş bağlamasından SignalR bağlantı bilgilerini alır ve HTTP yanıt gövdesindeki istemciye döndürür..

   Bağlamada signalRConnectionInfo yerel geliştirme için özellik yokturuserId. İşlev uygulamasını Azure'a dağıtırken SignalR bağlantısının kullanıcı adını ayarlamak için daha sonra bu bağlantıyı ekleyeceksiniz.

Model v3

1. Kök proje klasöründen negotiate aşağıdaki komutu kullanarak yerleşik bir şablondan işlevi oluşturun:

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

2. İşlev bağlama yapılandırmasını görüntülemek için negotiate/function.json açın.

   İşlev, SignalR istemcilerinden istekleri almak için bir HTTP tetikleyici bağlaması içerir. İşlev, istemcinin adlı defaultbir Azure SignalR Hizmeti hub'ına bağlanması için geçerli kimlik bilgileri oluşturmak için signalr giriş bağlaması da içerir.

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

   Bağlamada signalRConnectionInfo yerel geliştirme için özellik yokturuserId. İşlev uygulamasını Azure'a dağıtırken SignalR bağlantısının kullanıcı adını ayarlamak için daha sonra bu bağlantıyı ekleyeceksiniz.

3. Negotiate/function.json dosyasını kapatın.

4. İşlevin gövdesini görüntülemek için negotiate/index.js açın:

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

   Bu işlev giriş bağlamasındaki SignalR bağlantısı bilgilerini alır ve HTTP yanıtı gövdesinde istemciye döndürür. SignalR istemcisi, Azure SignalR Hizmeti örneğine bağlanmak için bu bilgileri kullanır.

Sorun mu yaşıyorsunuz? Bize bildirin.

Sohbet iletisi göndermek için işlev oluşturma

Web uygulaması, sohbet iletisi göndermek için bir HTTP API'sine ihtiyaç duyar. Azure SignalR Hizmeti kullanan tüm bağlı istemcilere ileti gönderen bir HTTP tetikleyici işlevi oluşturun:

Model v4

1. Kök proje klasöründen aşağıdaki komutu kullanarak şablondan adlı sendMessage bir HTTP tetikleyici işlevi oluşturun:

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

2. src/functions/sendMessage.js dosyasını açın, içeriği aşağıdaki gibi güncelleştirin:

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

   İşlev bir HTTP tetikleyicisi ve SignalR çıkış bağlaması içerir. Http isteğinden gövdeyi alır ve Azure SignalR Hizmeti bağlı istemcilere gönderir. Her istemcide adlı newMessage bir işlev çağırır.

   İşlev, gönderenin kimliğini okuyabilir ve tek bir kullanıcıya özel olarak recipient ileti göndermenizi sağlamak için ileti gövdesindeki bir değeri kabul edebilir. Bu işlevleri öğreticinin ilerleyen bölümlerinde kullanacaksınız.

3. Dosyayı kaydedin.

Model v3

1. Kök proje klasöründen aşağıdaki komutu kullanarak şablondan adlı sendMessage bir HTTP tetikleyici işlevi oluşturun:

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

2. İşlevin bağlamalarını yapılandırmak için sendMessage/function.json içeriğini aşağıdaki kodla değiştirin:

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

   Yukarıdaki kod, özgün dosyada iki değişiklik yapar:

   • Yolu olarak messages değiştirir ve HTTP tetikleyicisini HTTP yöntemiyle POST kısıtlar.
   • adlı defaultbir Azure SignalR Hizmeti hub'ına bağlı tüm istemcilere işlev tarafından döndürülen bir ileti gönderen bir Azure SignalR Hizmeti çıkış bağlaması ekler.

3. sendMessage/index.js içeriğini aşağıdaki kodla değiştirin:

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

   Bu işlev, http isteğinden gövdeyi alır ve Azure SignalR Hizmeti bağlı istemcilere gönderir. Her istemcide adlı newMessage bir işlev çağırır.

   İşlev, gönderenin kimliğini okuyabilir ve tek bir kullanıcıya özel olarak recipient ileti göndermenizi sağlamak için ileti gövdesindeki bir değeri kabul edebilir. Bu işlevleri öğreticinin ilerleyen bölümlerinde kullanacaksınız.

4. Dosyayı kaydedin.

Sorun mu yaşıyorsunuz? Bize bildirin.

Sohbet istemcisinin web kullanıcı arabirimini barındırma

Sohbet uygulamasının kullanıcı arabirimi, ASP.NET Core SignalR JavaScript istemcisi kullanılarak Vue JavaScript çerçevesiyle oluşturulan basit bir tek sayfalı uygulamadır (SPA). Kolaylık olması için işlev uygulaması web sayfasını barındırıyor. Üretim ortamında, web sayfasını barındırmak için Statik Web Uygulamaları'nı kullanabilirsiniz.

Model v4

1. İşlev projenizin kök dizininde index.html adlı bir dosya oluşturun.

2. index.html içeriğini kopyalayıp dosyanıza yapıştırın. Dosyayı kaydedin.

3. Kök proje klasöründen şu komutu kullanarak şablondan adlı index bir HTTP tetikleyici işlevi oluşturun:

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

4. src/functions/index.js içeriğini aşağıdaki kodla değiştirin:

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

   işlevi statik web sayfasını okur ve kullanıcıya döndürür.

5. Uygulamanızı yerel olarak test edin. Şu komutu kullanarak işlev uygulamasını başlatın:

   func start
   

6. Web tarayıcınızda açın http://localhost:7071/api/index . Bir sohbet web sayfası görünmelidir.

   

7. Sohbet kutusuna bir ileti girin.

   Enter tuşunu seçtikten sonra ileti web sayfasında görüntülenir. SignalR istemcisinin kullanıcı adı ayarlı olmadığından, tüm iletileri anonim olarak gönderiyorsunuz.

Model v3

1. İşlev projenizin kök dizininde content adlı bir klasör oluşturun.

2. İçerik klasöründe index.html adlı bir dosya oluşturun.

3. index.html içeriğini kopyalayıp dosyanıza yapıştırın. Dosyayı kaydedin.

4. Kök proje klasöründen şu komutu kullanarak şablondan adlı index bir HTTP tetikleyici işlevi oluşturun:

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

5. öğesinin içeriğini index/index.js aşağıdaki kodla değiştirin:

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

   işlevi statik web sayfasını okur ve kullanıcıya döndürür.

6. dizin/function.json açın ve bağlamaların değerini olarak anonymousdeğiştirinauthLevel. Şimdi dosyanın tamamı şu örneğe benzer:

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

7. Uygulamanızı yerel olarak test edin. Şu komutu kullanarak işlev uygulamasını başlatın:

   func start
   

8. Web tarayıcınızda açın http://localhost:7071/api/index . Bir sohbet web sayfası görünmelidir.

   

9. Sohbet kutusuna bir ileti girin.

   Enter tuşunu seçtikten sonra ileti web sayfasında görüntülenir. SignalR istemcisinin kullanıcı adı ayarlı olmadığından, tüm iletileri anonim olarak gönderiyorsunuz.

Sorun mu yaşıyorsunuz? Bize bildirin.

Azure'a dağıtma ve kimlik doğrulamasını etkinleştirme

İşlev uygulamasını ve sohbet uygulamasını yerel olarak çalıştırıyordunuz. Şimdi bunları Azure'a dağıtın ve kimlik doğrulamasını ve özel mesajlaşmayı etkinleştirin.

İşlev uygulamasını kimlik doğrulaması için yapılandırma

Şu ana kadar sohbet uygulaması anonim çalışıyordu. Azure'da, kullanıcının kimliğini doğrulamak için App Service kimlik doğrulamasını kullanacaksınız. Kimliği doğrulanmış kullanıcının kullanıcı kimliği veya kullanıcı adı, kullanıcı olarak kimliği doğrulanmış bağlantı bilgileri oluşturmak için bağlamaya geçirilir SignalRConnectionInfo .

Model v4

1. src/functions/negotiate.js dosyasını açın.

2. bağlamasına inputSignalR değeriyle {headers.x-ms-client-principal-name}bir userId özellik ekleyin. Bu değer, SignalR istemcisinin kullanıcı adını kimliği doğrulanmış kullanıcının adına ayarlayan bir bağlama ifadesidir . Bağlama şimdi şu örnekteki gibi görünmelidir:

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

3. Dosyayı kaydedin.

Model v3

1. Anlaşma/function.json açın.

2. bağlamasına SignalRConnectionInfo değeriyle {headers.x-ms-client-principal-name}bir userId özellik ekleyin. Bu değer, SignalR istemcisinin kullanıcı adını kimliği doğrulanmış kullanıcının adına ayarlayan bir bağlama ifadesidir . Bağlama şimdi şu örnekteki gibi görünmelidir:

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

3. Dosyayı kaydedin.

İşlev uygulamasını Azure'a dağıtma

Aşağıdaki komutu kullanarak işlev uygulamasını Azure'a dağıtın:

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

seçeneği --publish-local-settings yerel ayarlarınızı local.settings.json dosyasından Azure'da yayımlar, böylece bunları Azure'da yeniden yapılandırmanız gerekmez.

App Service kimlik doğrulamasını etkinleştirme

Azure İşlevleri Microsoft Entra ID, Facebook, Twitter, Microsoft hesabı ve Google ile kimlik doğrulamayı destekler. Bu öğreticide kimlik sağlayıcısı olarak Microsoft'u kullanacaksınız.

1. Azure portalında işlev uygulamanızın kaynak sayfasına gidin.

2. Ayarlar> Authentication'ı seçin.

3. Kimlik sağlayıcısı ekle'yi seçin.

   

4. Kimlik sağlayıcısı listesinde Microsoft'u seçin. Ardından Ekle'yi seçin.

   

Tamamlanan ayarlar, kimlik sağlayıcınızı işlev uygulamanızla ilişkilendiren bir uygulama kaydı oluşturur.

Desteklenen kimlik sağlayıcıları hakkında daha fazla bilgi için aşağıdaki makalelere bakın:

• Microsoft Entra ID
• Facebook
• Twitter
• Microsoft hesabı
• Google

Uygulamayı deneyin

1. https://<YOUR-FUNCTION-APP-NAME>.azurewebsites.net/api/index'ı açın.
2. Seçtiğiniz kimlik doğrulaması sağlayıcısıyla kimlik doğrulaması gerçekleştirmek için Oturum aç'ı seçin.
3. Genel iletileri ana sohbet kutusuna girerek gönderin.
4. Sohbet geçmişinde bir kullanıcı adı seçerek özel iletiler gönderin. Bu iletileri yalnızca seçili alıcı alır.

Tebrikler! Gerçek zamanlı, sunucusuz bir sohbet uygulaması dağıttınız.

Sorun mu yaşıyorsunuz? Bize bildirin.

Kaynakları temizleme

Bu öğreticide oluşturduğunuz kaynakları temizlemek için Azure portalını kullanarak kaynak grubunu silin.

Dikkat

Kaynak grubu silindiğinde, içerdiği tüm kaynaklar silinir. Kaynak grubu bu öğreticinin kapsamı dışında kaynaklar içeriyorsa, bunlar da silinir.

Sorun mu yaşıyorsunuz? Bize bildirin.

Sonraki adımlar

Bu öğreticide, Azure İşlevleri’ni Azure SignalR Hizmeti ile birlikte kullanmayı öğrendiniz. Azure İşlevleri için Azure SignalR Hizmeti bağlamalarla gerçek zamanlı sunucusuz uygulamalar oluşturma hakkında daha fazla bilgi edinin:

Azure SignalR Hizmeti ve Azure İşlevleri ile gerçek zamanlı uygulamalar

Sorun mu yaşıyorsunuz? Bize bildirin.