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

Azure İşlevleri, App Service Kimlik Doğrulaması ve SignalR Hizmeti ile kimlik doğrulaması ve özel mesajlaşma özelliklerine sahip bir sohbet odası oluşturma öğreticisi.

Giriş

Kullanılan teknolojiler

• Azure İşlevleri: Kullanıcıların kimliğini doğrulamak ve sohbet iletisi göndermek için kullanılan arka uç API'si
• Azure SignalR Hizmeti: Yeni iletileri bağlı sohbet istemcilerine yayınlar
• Azure Depolama: Sohbet istemcisi arabirimi için statik web sitesini barındırır

Önkoşullar

Bu öğreticiyi oluşturmak için aşağıdaki yazılımlar gereklidir.

• Git
• Node.js (Sürüm 10.x)
• .NET SDK (Sürüm 2.x, İşlevler uzantıları için gereklidir)
• Azure İşlevleri Temel Araçları (Sürüm 2)
• Visual Studio Code (VS Code) ve aşağıdaki uzantılar
  • Azure İşlevleri - VS Code'da Azure İşlevleri ile çalışmak için
  • Canlı Sunucu - Test amacıyla yerel ortamda web sayfası sunmak için

Sorun mu yaşıyorsunuz? Bize bilgi verin.

Azure portalda oturum açma

Azure portala gidin ve kimlik bilgilerinizle oturum açın.

Sorun mu yaşıyorsunuz? Bize bilgi verin.

Azure SignalR Hizmeti örneği oluşturma

Azure İşlevleri uygulamasını yerel ortamda derleyecek ve test edeceksiniz. Uygulama, Azure'da önceden oluşturulması gereken bir SignalR Hizmeti örneğine erişecek.

1. Yeni bir Azure kaynağı oluşturmak için kaynak oluştur ( + ) düğmesine tıklayın.

2. SignalR Hizmeti araması yapın ve sonuçlardan seçin. Oluştur’a tıklayın.

   

3. Aşağıdaki bilgileri girin.

   Name	Değer
   Kaynak adı	SignalR Hizmeti örneği için benzersiz bir ad
   Kaynak grubu	Benzersiz bir ada sahip yeni bir kaynak grubu oluşturun
   Konum	Size yakın bir konum seçin
   Fiyatlandırma Katmanı	Ücretsiz

4. Oluştur’a tıklayın.

5. Örnek dağıtıldıktan sonra portalda açın ve ayarlar sayfasını bulun. Hizmet modu ayarını sunucusuz olarak değiştirin.

   

Sorun mu yaşıyorsunuz? Bize bilgi verin.

İşlev uygulamasını başlatma

Yeni bir Azure İşlevleri projesi oluşturma

1. Yeni bir VS Code penceresinde menüden File > Open Folder seçeneğini kullanarak uygun konumda boş bir klasör oluşturun ve açın. Bu derleyeceğiniz uygulamanın ana proje klasörü olacaktır.

2. VS Code Azure İşlevleri uzantısını kullanarak ana proje klasöründe bir İşlev uygulaması başlatın.

   1. Menüden Görünüm > Komut Paleti yolunu izleyerek (kısayol Ctrl-Shift-P, macOS: Cmd-Shift-P) VS Code'da Komut Paletini açın.

   2. Azure İşlevleri: Yeni Proje Oluştur komutunu arayın ve seçin.

   3. Ana proje klasörü görünmelidir. Bu klasörü seçin (veya "Gözat" düğmesini kullanarak bulun).

   4. Dil seçmeniz istendiğinde JavaScript'i seçin.

      

İşlev uygulaması uzantılarını yükleme

Bu öğreticide Azure SignalR Hizmeti ile etkileşim kurmak için Azure İşlevleri bağlamaları kullanılır. Diğer bağlamalar gibi SignalR Hizmeti bağlamaları da kullanılabilmesi için Azure İşlevleri Temel Araçları CLI aracılığıyla yüklenmesi gereken bir uzantı olarak sunulur.

1. Menüden > terminali görüntüle ' ye (Ctrl-) seçerek vs Code bir Terminal açın ` .

2. Geçerli dizinin ana proje dizini olduğundan emin olun.

3. SignalR Hizmeti işlev uygulaması uzantısını yükleyin.

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

Uygulama ayarlarını yapılandırma

Azure İşlevleri çalışma zamanını yerel ortamda çalıştırma ve hata ayıklama sırasında uygulama ayarları local.settings.json dosyasından okunur. Bu uygulamayı güncelleştirerek oluşturduğunuz SignalR Hizmeti örneğinin bağlantı dizesini ekleyin.

1. VS Code'un Gezgin bölmesinde local.settings.json dosyasını seçerek açın.

2. Dosyanın içeriğini aşağıdakilerle değiştirin.

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

   • Azure SignalR Hizmeti bağlantı dizesini AzureSignalRConnectionString adlı bir ayara girin. Azure portaldan Azure SignalR Hizmeti kaynağının Anahtarlar sayfasındaki değeri alın. Birincil veya ikincil bağlantı dizesini kullanabilirsiniz.

   • WEBSITE_NODE_DEFAULT_VERSION ayarı yerel ortamda kullanılmaz ancak uygulama Azure'a dağıtıldığında kullanılması gerekir.

   • Host bölümü yerel İşlevler ana bilgisayarı için bağlantı noktası ve CORS ayarlarını yapılandırır (Azure'da çalışırken bu ayarın bir etkisi yoktur).

     Not

     Canlı sunucu, genellikle içeriği sunacak şekilde yapılandırılır http://127.0.0.1:5500 . Farklı bir URL kullandığını fark ederseniz veya farklı bir HTTP sunucusu kullanıyorsanız, CORS ayarı doğru kaynağı yansıtacak şekilde değiştirin.

     

3. Dosyayı kaydedin.

Sorun mu yaşıyorsunuz? Bize bilgi verin.

Kullanıcıların SignalR Hizmetinde kimlik doğrulamasını sağlayacak işlevi 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 Negotiate ADLı bir http ile tetiklenen işlev oluşturacaksınız.

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P).

2. Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.

3. İstendiğinde aşağıdaki bilgileri girin.

   Ad	Değer
   İşlev uygulamasının klasörü	Ana proje klasörünü seçin
   Şablon	HTTP Tetikleyicisi
   Ad	negotiate
   Yetkilendirme düzeyi	Anonim

   Yeni işlevi içeren Negotiate adlı bir klasör oluşturulur.

4. İşlev için bağlamaları yapılandırmak üzere Negotiate/function.json açın. Dosyanın içeriğini aşağıdaki kodla değiştirin. Bu kod bir istemcinin chat adlı Azure SignalR Hizmeti hub'ına bağlanması için geçerli kimlik bilgileri oluşturan bir giriş bağlaması ekler.

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

   signalRConnectionInfo bağlamasındaki userId özelliği kimliği doğrulanmış SignalR Hizmeti bağlantısı oluşturmak için kullanılır. Yerel ortamda geliştirme için bu özelliği boş bırakın. İşlev uygulaması Azure'a dağıtıldığında bu özelliği kullanacaksınız.

5. İşlevin gövdesini görüntülemek için Negotiate/index.js açın. Dosyanın içeriğini aşağıdaki kodla değiştirin.

   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 bu bilgileri SignalR hizmeti örneğine bağlanmak için kullanır.

Sorun mu yaşıyorsunuz? Bize bilgi verin.

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

Web uygulaması, sohbet iletisi göndermek için bir HTTP API'sine ihtiyaç duyar. SignalR Hizmetini kullanarak bağlı olan tüm istemcilere ileti gönderen SendMessage adlı bir HTTP ile tetiklenen işlev oluşturacaksınız.

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P).

2. Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.

3. İstendiğinde aşağıdaki bilgileri girin.

   Ad	Değer
   İşlev uygulamasının klasörü	ana proje klasörünü seçin
   Şablon	HTTP Tetikleyicisi
   Ad	SendMessage
   Yetkilendirme düzeyi	Anonim

   Yeni işlevi içeren SendMessage adlı bir klasör oluşturulur.

4. İşlev bağlamalarını yapılandırmak için SendMessage/function.json dosyasını açın. Dosyanın 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": "chat",
               "direction": "out"
           }
       ]
   }
   

   Bu kod özgün işlevde iki değişiklik yapar:

   • Yolu messages olarak değiştirir ve HTTP tetikleyicisini POST HTTP metoduyla sınırlar.
   • Adlı bir SignalR hizmet merkezine bağlı tüm istemcilere işlev tarafından döndürülen bir ileti gönderen bir SignalR hizmeti çıkış bağlaması ekler chat .

5. Dosyayı kaydedin.

6. İşlevin gövdesini görüntülemek için SendMessage/index.js dosyasını açın. Dosyanın 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ğinin gövdesini alır ve SignalR Hizmetine bağlı istemcilere göndererek her istemcide newMessage adlı bir işlevi çağırır.

   İşlev gönderenin kimliğini okuyabilir ve ileti gövdesine eklenebilecek bir alıcı değeriyle iletinin tek bir kullanıcıya gönderilmesini sağlayabilir. Bu işlevler öğreticinin ilerleyen bölümlerinde kullanılacaktır.

7. Dosyayı kaydedin.

Sorun mu yaşıyorsunuz? Bize bilgi verin.

Sohbet istemcisi web kullanıcı arabirimini oluşturma ve çalıştırma

Sohbet uygulamasının arabirimi, Vue JavaScript çerçevesiyle oluşturulan basit bir tek sayfalı uygulamadır (SPA). İşlev uygulamasından ayrı barındırılacaktır. Yerel ortamda web arabirimini çalıştırmak için Canlı Sunucu VS Code uzantısını kullanacaksınız.

1. VS Code'da ana proje klasörünün kök dizininde content adlı yeni bir klasör oluşturun.

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

3. Aşağıdaki içeriği kopyalayıp index.html dosyasına yapıştırın.

4. Dosyayı kaydedin.

5. F5 tuşuna basarak işlev uygulamasını yerel ortamda çalıştırın ve bir hata ayıklayıcısı ekleyin.

6. index.html dosyası açıkken VS Code komut paletini açarak (Ctrl-Shift-P, macOS: Cmd-Shift-P) ve Canlı Sunucu: Canlı Sunucu ile Aç'ı seçerek Canlı Sunucuyu başlatın. Canlı Sunucu uygulamayı bir tarayıcıda açar.

7. Uygulama açılır. Sohbet kutusuna ileti yazıp Enter tuşuna basın. Yeni iletileri görmek için uygulamayı yenileyin. Kimlik doğrulaması yapılandırılmadığından tüm iletiler "anonim" olarak gönderilir.

Sorun mu yaşıyorsunuz? Bize bilgi verin.

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

Buraya kadar işlev uygulamasını ve sohbet uygulamasını yerel ortamda çalıştırdınız. Şimdi bunları Azure'a dağıtıp kimlik doğrulamasını ve uygulamanın özel mesajlaşma özelliğini etkinleştireceksiniz.

VS Code ile Azure'da oturum açma

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P).

2. Azure: Oturum aç komutunu bulun ve seçin.

3. Yönergeleri izleyerek tarayıcınızda oturum açma işlemlerini tamamlayın.

Depolama hesabı oluşturma

Azure depolama hesabı, Azure 'da çalışan bir işlev uygulaması için gereklidir. Ayrıca, Azure Storage 'ın statik Web siteleri özelliğini kullanarak sohbet kullanıcı arabirimi için Web sayfasını barıncaksınız.

1. Azure portal yeni bir Azure kaynağı oluşturmak için kaynak oluştur ( + ) düğmesine tıklayın.

2. Depolama kategorisini seçin ve depolama hesabı' nı seçin.

3. Aşağıdaki bilgileri girin.

   Name	Değer
   Abonelik	SignalR hizmet örneğini içeren aboneliği seçin
   Kaynak grubu	Aynı kaynak grubunu seçin
   Kaynak adı	Depolama hesabı için benzersiz bir ad
   Konum	Diğer kaynaklarınızla aynı konumu seçin
   Performans	Standart
   Hesap türü	StorageV2 (genel amaçlı V2)
   Çoğaltma	Yerel olarak yedekli depolama (LRS)
   Erişim katmanı	Sık Erişimli

4. Gözden geçir + oluştur ve sonra Oluştur' a tıklayın.

Statik Web sitelerini yapılandırma

1. Depolama hesabı oluşturulduktan sonra, Azure portal açın.

2. Statik Web sitesi seçin.

3. Statik Web sitesi özelliğini etkinleştirmek için etkin ' i seçin.

4. Dizin belgesi adı alanına index.html yazın.

5. Kaydet’e tıklayın.

6. Birincil uç nokta görünür. Bu değeri aklınızda edin. İşlev uygulamasını yapılandırmak için gerekli olacaktır.

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

Şu ana kadar sohbet uygulaması anonim çalışıyordu. Kullanıcıların kimliğini doğrulamak için Azure'da App Service Kimlik Doğrulamasını kullanacaksınız. Kimliği doğrulanmış olan kullanıcının kimliği veya kullanıcı adı SignalRConnectionInfo bağlamasına iletilerek kullanıcı olarak kimliği doğrulanan bağlantı bilgileri oluşturulabilir.

İleti gönderirken uygulama bağlı tüm istemcilere veya yalnızca belirli bir kullanıcı için kimliği doğrulanmış olan istemcilere gönderme seçenekleri arasında seçim yapabilir.

1. VS Code, üzerinde anlaş/function.js açın.

2. SignalRConnectionInfo bağlamasının userId özelliğine bir bağlama ifadesi ekleyin: {headers.x-ms-client-principal-name}. Bu ifade değeri kimliği doğrulanmış kullanıcının kullanıcı adı olarak ayarlar. Öznitelik şimdi aşağıdaki gibi görünmelidir.

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

3. Dosyayı kaydedin.

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

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P) ve Azure İşlevleri: İşlev Uygulamasına Dağıt komutunu seçin.

2. İstendiğinde aşağıdaki bilgileri girin.

   Ad	Değer
   Dağıtılacak klasör	Ana proje klasörünü seçin
   Abonelik	Aboneliğinizi seçin
   İşlev uygulaması	Yeni İşlev Uygulaması Oluştur'u seçin
   İşlev uygulamasının adı	Benzersiz bir ad girin
   Kaynak grubu	SignalR Hizmeti örneğinin bulunduğu kaynak grubunu seçin
   Depolama hesabı	Daha önce oluşturduğunuz depolama hesabını seçin

   Azure'da yeni bir işlev uygulaması oluşturulur ve dağıtım başlar. Dağıtımın tamamlanmasını bekleyin.

İşlev uygulaması yerel ayarlarını karşıya yükleme

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P).

2. Azure İşlevleri: Yerel ayarları karşıya yükle komutunu arayın ve seçin.

3. İstendiğinde aşağıdaki bilgileri girin.

   Ad	Değer
   Yerel ayarlar dosyası	local.settings.json
   Abonelik	Aboneliğinizi seçin
   İşlev uygulaması	Önceden dağıtılmış işlev uygulamasını seçin

Yerel ayarlar, Azure'daki işlev uygulamasına yüklenir. Geçerli ayarların üzerine yazmak isteyip istemediğiniz sorulduğunda Tümüne evet'i seçin.

App Service Kimlik Doğrulamayı Etkinleştirme

App Service Kimlik Doğrulaması; Azure Active Directory, Facebook, Twitter, Microsoft hesabı ve Google ile kimlik doğrulamayı destekler.

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P).

2. Azure İşlevleri: Portalda aç komutunu arayın ve seçin.

3. İşlev uygulamasını Azure portalda açmak için aboneliği ve işlev uygulaması adını seçin.

4. Portalda açılan işlev uygulamasında platform özellikleri sekmesini bulun, kimlik doğrulama/yetkilendirme' yi seçin.

5. App Service Kimlik Doğrulama ayarını Açık duruma getirin.

6. İsteğin kimliği doğrulanmamış olduğunda gerçekleştirilecek eylem menüsünde "{Seçtiğiniz kimlik doğrulaması sağlayıcısı} ile oturum aç"ı seçin.

7. İzin Verilen Dış Yönlendirme URL'leri bölümünde önceden not ettiğiniz depolama hesabı birincil web uç noktası URL'sini girin.

8. Yapılandırmayı tamamlamak için seçtiğiniz oturum açma hizmeti sağlayıcısının belgelerini inceleyin.

   • Azure Active Directory
   • Facebook
   • Twitter
   • Microsoft hesabı
   • Google

Web uygulamasını güncelleştirme

1. Azure portalda işlev uygulamasının genel bakış sayfasına gidin.

2. İşlev uygulamasının URL'sini kopyalayın.

   

3. VS Code'da index.html dosyasını açın ve apiBaseUrl değerini işlev uygulamasının URL'siyle değiştirin.

4. Uygulama Azure Active Directory, Facebook, Twitter, Microsoft hesabı veya Google ile kimlik doğrulaması gerçekleştirilecek şekilde yapılandırılabilir. authProvider değerini ayarlayarak kullanmak istediğiniz kimlik doğrulaması sağlayıcısını seçin.

5. Dosyayı kaydedin.

Web uygulamasını blob depolamaya dağıtma

Web uygulamasını Azure Blob Depolama'nın statik web siteleri özelliğini kullanarak barındıracağız.

1. VS Code komut paletini açın (Ctrl-Shift-P, macOS: Cmd-Shift-P).

2. Azure Depolama: Statik Web Sitesine Dağıt komutunu arayın ve seçin.

3. Aşağıdaki değerleri girin:

   Name	Değer
   Abonelik	Aboneliğinizi seçin
   Depolama hesabı	Daha önce oluşturduğunuz depolama hesabını seçin
   Dağıtılacak klasör	Araştır ' ı seçin ve içerik klasörünü seçin

İçerik klasöründeki dosyalar artık statik Web sitesine dağıtılmalıdır.

İşlev uygulamasında çıkış noktaları arası kaynak paylaşımını (CORS) etkinleştirme

local.settings.json dosyasında CORS seçeneği mevcut olsa da Azure'daki işlev uygulamasına yüklenmez. Bunu ayrıca ayarlamanız gerekir.

1. İşlev uygulamasını Azure Portal’da açın.

2. Platform özellikleri sekmesinde CORS' yi seçin.

   

3. Izin verilen kaynaklar bölümünde, değer olarak statik Web sitesi birincil uç noktasına sahip bir giriş ekleyin (sondaki değeri kaldırın / ).

4. SignalR JavaScript SDK 'Sı, işlev uygulamanızı bir tarayıcıdan çağırmak için, CORS 'de kimlik bilgileri desteğinin etkinleştirilmesi gerekir. "Erişim-denetim-Izin-kimlik bilgilerini etkinleştir" onay kutusunu seçin.

   

5. CORS ayarlarını kalıcı hale getirmek için Kaydet'e tıklayın.

Uygulamayı deneyin

1. Bir tarayıcıdan depolama hesabınızın birincil web uç noktasına gidin.

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. Ana sohbet kutusunu kullanarak genel ileti gönderin.

4. Sohbet geçmişindeki kullanıcı adlarından birine tıklayarak özel ileti gönderin. İletiler yalnızca seçilen alıcıya gönderilir.

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

Sorun mu yaşıyorsunuz? Bize bilgi verin.

Kaynakları temizleme

Bu öğretici ile oluşturulan kaynakları temizlemek için Azure portalı kullanarak kaynak grubunu silebilirsiniz.

Sorun mu yaşıyorsunuz? Bize bilgi verin.

Sonraki adımlar

Bu öğreticide, Azure İşlevleri’ni Azure SignalR Hizmeti ile birlikte kullanmayı öğrendiniz. Azure İşlevleri için SignalR Hizmeti bağlamalarıyla gerçek zamanlı sunucusuz uygulama derleme hakkında daha fazla bilgi edinin.

Sorun mu yaşıyorsunuz? Bize bilgi verin.