Öğretici: Azure İşlevleri ile Azure SignalR Hizmeti kimlik doğrulamasıTutorial: Azure SignalR Service authentication with Azure Functions

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.A step by step tutorial to build a chat room with authentication and private messaging using Azure Functions, App Service Authentication, and SignalR Service.

GirişIntroduction

Kullanılan teknolojilerTechnologies used

ÖnkoşullarPrerequisites

Bu öğreticiyi oluşturmak için aşağıdaki yazılımlar gereklidir.The following software is required to build this tutorial.

Azure portalda oturum açmaSign into the Azure portal

Azure portala gidin ve kimlik bilgilerinizle oturum açın.Go to the Azure portal and sign in with your credentials.

Azure SignalR Hizmeti örneği oluşturmaCreate an Azure SignalR Service instance

Azure İşlevleri uygulamasını yerel ortamda derleyecek ve test edeceksiniz.You will build and test the Azure Functions app locally. Uygulama, Azure'da önceden oluşturulması gereken bir SignalR Hizmeti örneğine erişecek.The app will access a SignalR Service instance in Azure that needs to be created ahead of time.

  1. Yeni bir Azure kaynağı oluşturmak için Kaynak oluştur ( + ) düğmesine tıklayın.Click on the Create a resource (+) button for creating a new Azure resource.

  2. SignalR Hizmeti araması yapın ve sonuçlardan seçin.Search for SignalR Service and select it. Oluştur’ tıklayın.Click Create.

    Yeni SignalR Service

  3. Aşağıdaki bilgileri girin.Enter the following information.

    AdName DeğerValue
    Kaynak adıResource name SignalR Hizmeti örneği için benzersiz bir adA unique name for the SignalR Service instance
    Kaynak grubuResource group Benzersiz bir ada sahip yeni bir kaynak grubu oluşturunCreate a new resource group with a unique name
    KonumLocation Size yakın bir konum seçinSelect a location close to you
    Fiyatlandırma KatmanıPricing Tier ÜcretsizFree
  4. Oluştur’ tıklayın.Click Create.

  5. Örnek dağıtıldıktan sonra portalda açın ve ayarlar sayfasını bulun.After the instance is deployed, open it in the portal and locate its Settings page. Hizmet modu ayarını sunucusuzolarak değiştirin.Change the Service Mode setting to Serverless.

    SignalR hizmeti modu

İşlev uygulamasını başlatmaInitialize the function app

Yeni bir Azure İşlevleri projesi oluşturmaCreate a new Azure Functions project

  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.In a new VS Code window, use File > Open Folder in the menu to create and open an empty folder in an appropriate location. Bu derleyeceğiniz uygulamanın ana proje klasörü olacaktır.This will be the main project folder for the application that you will build.

  2. VS Code Azure İşlevleri uzantısını kullanarak ana proje klasöründe bir İşlev uygulaması başlatın.Using the Azure Functions extension in VS Code, initialize a Function app in the main project folder.

    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.Open the Command Palette in VS Code by selecting View > Command Palette from the menu (shortcut Ctrl-Shift-P, macOS: Cmd-Shift-P).

    2. Azure İşlevleri: Yeni Proje Oluştur komutunu arayın ve seçin.Search for the Azure Functions: Create New Project command and select it.

    3. Ana proje klasörü görünmelidir.The main project folder should appear. Bu klasörü seçin (veya "Gözat" düğmesini kullanarak bulun).Select it (or use "Browse" to locate it).

    4. Dil seçmeniz istendiğinde JavaScript'i seçin.In the prompt to choose a language, select JavaScript.

      İşlev uygulaması oluşturma

İşlev uygulaması uzantılarını yüklemeInstall function app extensions

Bu öğreticide Azure SignalR Hizmeti ile etkileşim kurmak için Azure İşlevleri bağlamaları kullanılır.This tutorial uses Azure Functions bindings to interact with Azure SignalR Service. 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.Like most other bindings, the SignalR Service bindings are available as an extension that needs to be installed using the Azure Functions Core Tools CLI before they can be used.

  1. Menüden > terminali görüntüle ' ye (Ctrl-`) seçerek vs Code bir Terminal açın.Open a terminal in VS Code by selecting View > Terminal from the menu (Ctrl-`).

  2. Geçerli dizinin ana proje dizini olduğundan emin olun.Ensure the main project folder is the current directory.

  3. SignalR Hizmeti işlev uygulaması uzantısını yükleyin.Install the SignalR Service function app extension.

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

Uygulama ayarlarını yapılandırmaConfigure application settings

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.When running and debugging the Azure Functions runtime locally, application settings are read from local.settings.json. Bu uygulamayı güncelleştirerek oluşturduğunuz SignalR Hizmeti örneğinin bağlantı dizesini ekleyin.Update this file with the connection string of the SignalR Service instance that you created earlier.

  1. VS Code'un Gezgin bölmesinde local.settings.json dosyasını seçerek açın.In VS Code, select local.settings.json in the Explorer pane to open it.

  2. Dosyanın içeriğini aşağıdakilerle değiştirin.Replace the file's contents with the following.

    {
        "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.Enter the Azure SignalR Service connection string into a setting named AzureSignalRConnectionString. Azure portaldan Azure SignalR Hizmeti kaynağının Anahtarlar sayfasındaki değeri alın. Birincil veya ikincil bağlantı dizesini kullanabilirsiniz.Obtain the value from the Keys page in the Azure SignalR Service resource in the Azure portal; either the primary or secondary connection string can be used.

    • WEBSITE_NODE_DEFAULT_VERSION ayarı yerel ortamda kullanılmaz ancak uygulama Azure'a dağıtıldığında kullanılması gerekir.The WEBSITE_NODE_DEFAULT_VERSION setting is not used locally, but is required when deployed to Azure.

    • 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).The Host section configures the port and CORS settings for the local Functions host (this setting has no effect when running in Azure).

      Not

      Canlı sunucu genellikle http://127.0.0.1:5500içerik sunacak şekilde yapılandırılmıştır.Live Server is typically configured to serve content from http://127.0.0.1:5500. Farklı bir URL kullandığını veya farklı bir HTTP sunucusu kullandığınızı fark ederseniz CORS ayarını doğru kaynağı yansıtacak şekilde değiştirin.If you find that it is using a different URL or you are using a different HTTP server, change the CORS setting to reflect the correct origin.

      SignalR Hizmeti anahtarını alma

  3. Dosyayı kaydedin.Save the file.

Kullanıcıların SignalR Hizmetinde kimlik doğrulamasını sağlayacak işlevi oluşturmaCreate a function to authenticate users to SignalR Service

Sohbet uygulaması tarayıcıda ilk açıldığında Azure SignalR Hizmetine bağlanmak için gerekli bağlantı kimlik bilgilerine ihtiyaç duyar.When the chat app first opens in the browser, it requires valid connection credentials to connect to Azure SignalR Service. 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.You'll create an HTTP triggered function named negotiate in your function app to return this connection information.

Not

SignalR istemcisi /negotiatebiten bir uç nokta gerektirdiğinden bu işlev, Negotiate olarak adlandırılmalıdır.This function must be named negotiate as the SignalR client requires an endpoint that ends in /negotiate.

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

  2. Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.Search for and select the Azure Functions: Create Function command.

  3. İstendiğinde aşağıdaki bilgileri girin.When prompted, provide the following information.

    AdName DeğerValue
    İşlev uygulamasının klasörüFunction app folder Ana proje klasörünü seçinSelect the main project folder
    ŞablonTemplate HTTP TetikleyicisiHTTP Trigger
    AdName 'Ninnegotiate
    Yetkilendirme düzeyiAuthorization level AnonimAnonymous

    Yeni işlevi içeren Negotiate adlı bir klasör oluşturulur.A folder named negotiate is created that contains the new function.

  4. İşlev için bağlamaları yapılandırmak üzere Negotiate/function. JSON açın.Open negotiate/function.json to configure bindings for the function. Dosyanın içeriğini aşağıdaki kodla değiştirin.Modify the content of the file to the following. 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.This adds an input binding that generates valid credentials for a client to connect to an Azure SignalR Service hub named chat.

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

    userId bağlamasındaki signalRConnectionInfo özelliği kimliği doğrulanmış SignalR Hizmeti bağlantısı oluşturmak için kullanılır.The userId property in the signalRConnectionInfo binding is used to create an authenticated SignalR Service connection. Yerel ortamda geliştirme için bu özelliği boş bırakın.Leave the property blank for local development. İşlev uygulaması Azure'a dağıtıldığında bu özelliği kullanacaksınız.You will use it when the function app is deployed to Azure.

  5. İşlevin gövdesini görüntülemek için anlaş/index. js ' yi açın.Open negotiate/index.js to view the body of the function. Dosyanın içeriğini aşağıdaki kodla değiştirin.Modify the content of the file to the following.

    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.This function takes the SignalR connection information from the input binding and returns it to the client in the HTTP response body. SignalR istemcisi bu bilgileri SignalR hizmeti örneğine bağlanmak için kullanır.The SignalR client will use this information to connect to the SignalR Service instance.

Sohbet iletisi göndermek için işlev oluşturmaCreate a function to send chat messages

Web uygulaması, sohbet iletisi göndermek için bir HTTP API'sine ihtiyaç duyar.The web app also requires an HTTP API to send chat messages. SignalR Hizmetini kullanarak bağlı olan tüm istemcilere ileti gönderen SendMessage adlı bir HTTP ile tetiklenen işlev oluşturacaksınız.You will create an HTTP triggered function named SendMessage that sends messages to all connected clients using SignalR Service.

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

  2. Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.Search for and select the Azure Functions: Create Function command.

  3. İstendiğinde aşağıdaki bilgileri girin.When prompted, provide the following information.

    AdName DeğerValue
    İşlev uygulamasının klasörüFunction app folder ana proje klasörünü seçinselect the main project folder
    ŞablonTemplate HTTP TetikleyicisiHTTP Trigger
    AdName SendMessageSendMessage
    Yetkilendirme düzeyiAuthorization level AnonimAnonymous

    Yeni işlevi içeren SendMessage adlı bir klasör oluşturulur.A folder named SendMessage is created that contains the new function.

  4. İşlev bağlamalarını yapılandırmak için SendMessage/function.json dosyasını açın.Open SendMessage/function.json to configure bindings for the function. Dosyanın içeriğini aşağıdaki kodla değiştirin.Modify the content of the file to the following.

    {
        "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:This makes two changes to the original function:

    • Yolu messages olarak değiştirir ve HTTP tetikleyicisini POST HTTP metoduyla sınırlar.Changes the route to messages and restricts the HTTP trigger to the POST HTTP method.
    • chatadlı bir SignalR hizmeti 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.Adds a SignalR Service output binding that sends a message returned by the function to all clients connected to a SignalR Service hub named chat.
  5. Dosyayı kaydedin.Save the file.

  6. İşlevin gövdesini görüntülemek için SendMessage/index.js dosyasını açın.Open SendMessage/index.js to view the body of the function. Dosyanın içeriğini aşağıdaki kodla değiştirin.Modify the content of the file to the following.

    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.This function takes the body from the HTTP request and sends it to clients connected to SignalR Service, invoking a function named newMessage on each client.

    İş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.The function can read the sender's identity and can accept a recipient value in the message body to allow for a message to be sent privately to a single user. Bu işlevler öğreticinin ilerleyen bölümlerinde kullanılacaktır.These functionalities will be used later in the tutorial.

  7. Dosyayı kaydedin.Save the file.

Sohbet istemcisi web kullanıcı arabirimini oluşturma ve çalıştırmaCreate and run the chat client web user interface

Sohbet uygulamasının arabirimi, Vue JavaScript çerçevesiyle oluşturulan basit bir tek sayfalı uygulamadır (SPA).The chat application's UI is a simple single page application (SPA) created with the Vue JavaScript framework. İşlev uygulamasından ayrı barındırılacaktır.It will be hosted separately from the function app. Yerel ortamda web arabirimini çalıştırmak için Canlı Sunucu VS Code uzantısını kullanacaksınız.Locally, you will run the web interface using the Live Server VS Code extension.

  1. VS Code'da ana proje klasörünün kök dizininde content adlı yeni bir klasör oluşturun.In VS Code, create a new folder named content at the root of the main project folder.

  2. content klasöründe index.html adlı bir dosya oluşturun.In the content folder, create a new file named index.html.

  3. Aşağıdaki içeriği kopyalayıp index.html dosyasına yapıştırın.Copy and paste the content of index.html.

  4. Dosyayı kaydedin.Save the file.

  5. F5 tuşuna basarak işlev uygulamasını yerel ortamda çalıştırın ve bir hata ayıklayıcısı ekleyin.Press F5 to run the function app locally and attach a debugger.

  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.With index.html open, start Live Server by opening the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P) and selecting Live Server: Open with Live Server. Canlı Sunucu uygulamayı bir tarayıcıda açar.Live Server will open the application in a browser.

  7. Uygulama açılır.The application opens. Sohbet kutusuna ileti yazıp Enter tuşuna basın.Enter a message in the chat box and press enter. Yeni iletileri görmek için uygulamayı yenileyin.Refresh the application to see new messages. Kimlik doğrulaması yapılandırılmadığından tüm iletiler "anonim" olarak gönderilir.Because no authentication was configured, all messages will be sent as "anonymous".

Azure'a dağıtma ve kimlik doğrulamasını etkinleştirmeDeploy to Azure and enable authentication

Buraya kadar işlev uygulamasını ve sohbet uygulamasını yerel ortamda çalıştırdınız.You have been running the function app and chat application locally. Şimdi bunları Azure'a dağıtıp kimlik doğrulamasını ve uygulamanın özel mesajlaşma özelliğini etkinleştireceksiniz.You will now deploy them to Azure and enable authentication and private messaging in the application.

VS Code ile Azure'da oturum açmaLog into Azure with VS Code

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

  2. Azure: Oturum aç komutunu bulun ve seçin.Search for and select the Azure: Sign in command.

  3. Yönergeleri izleyerek tarayıcınızda oturum açma işlemlerini tamamlayın.Follow the instructions to complete the sign in process in your browser.

Depolama hesabı oluşturmaCreate a Storage account

Azure depolama hesabı, Azure 'da çalışan bir işlev uygulaması için gereklidir.An Azure Storage account is required by a function app running in Azure. Ayrıca, Azure Storage 'ın statik Web siteleri özelliğini kullanarak sohbet kullanıcı arabirimi için Web sayfasını barıncaksınız.You will also host the web page for the chat UI using the static websites feature of Azure Storage.

  1. Azure portal yeni bir Azure kaynağı oluşturmak için kaynak oluştur ( + ) düğmesine tıklayın.In the Azure portal, click on the Create a resource (+) button for creating a new Azure resource.

  2. Depolama kategorisini seçin ve depolama hesabı' nı seçin.Select the Storage category, then select Storage account.

  3. Aşağıdaki bilgileri girin.Enter the following information.

    AdName DeğerValue
    AbonelikSubscription SignalR hizmet örneğini içeren aboneliği seçinSelect the subscription containing the SignalR Service instance
    Kaynak grubuResource group Aynı kaynak grubunu seçinSelect the same resource group
    Kaynak adıResource name Depolama hesabı için benzersiz bir adA unique name for the Storage account
    KonumLocation Diğer kaynaklarınızla aynı konumu seçinSelect the same location as your other resources
    PerformansPerformance StandartStandard
    Hesap türüAccount kind StorageV2 (genel amaçlı V2)StorageV2 (general purpose V2)
    ÇoğaltmaReplication Yerel olarak yedekli depolama (LRS)Locally-redundant storage (LRS)
    Erişim katmanıAccess Tier Sık ErişimliHot
  4. Gözden geçir + oluşturve sonra Oluştur' a tıklayın.Click Review + create, then Create.

Statik Web sitelerini yapılandırmaConfigure static websites

  1. Depolama hesabı oluşturulduktan sonra, Azure portal açın.After the Storage account is created, open it in the Azure portal.

  2. Statik Web sitesiseçin.Select Static website.

  3. Statik Web sitesi özelliğini etkinleştirmek için etkin ' i seçin.Select Enabled to enable the static website feature.

  4. Dizin belgesi adı' nda index. htmlgirin.In Index document name, enter index.html.

  5. Save (Kaydet) düğmesine tıklayın.Click Save.

  6. Birincil uç nokta görünür.A Primary endpoint appears. Bu değeri aklınızda edin.Note this value. İşlev uygulamasını yapılandırmak için gerekli olacaktır.It will be required to configure the function app.

İşlev uygulamasını kimlik doğrulaması için yapılandırmaConfigure function app for authentication

Şu ana kadar sohbet uygulaması anonim çalışıyordu.So far, the chat app works anonymously. Kullanıcıların kimliğini doğrulamak için Azure'da App Service Kimlik Doğrulamasını kullanacaksınız.In Azure, you will use App Service Authentication to authenticate the user. 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.The user ID or username of the authenticated user can be passed to the SignalRConnectionInfo binding to generate connection information that is authenticated as the user.

İ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.When a sending message, the app can decide whether to send it to all connected clients, or only to the clients that have been authenticated to a given user.

  1. VS Code ' de anlaş/function. JSON' ı açın.In VS Code, open negotiate/function.json.

  2. SignalRConnectionInfo bağlamasının userId özelliğine bir bağlama ifadesi ekleyin: {headers.x-ms-client-principal-name}.Insert a binding expression into the userId property of the SignalRConnectionInfo binding: {headers.x-ms-client-principal-name}. Bu ifade değeri kimliği doğrulanmış kullanıcının kullanıcı adı olarak ayarlar.This sets the value to the username of the authenticated user. Öznitelik şimdi aşağıdaki gibi görünmelidir.The attribute should now look like this.

    {
        "type": "signalRConnectionInfo",
        "name": "connectionInfo",
        "userId": "{headers.x-ms-client-principal-name}",
        "hubName": "chat",
        "direction": "in"
    }
    
  3. Dosyayı kaydedin.Save the file.

İşlev uygulamasını Azure 'a dağıtmaDeploy function app to Azure

  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.Open the VS Code command palette (Ctrl-Shift-P, macOS: Cmd-Shift-P) and select Azure Functions: Deploy to Function App.

  2. İstendiğinde aşağıdaki bilgileri girin.When prompted, provide the following information.

    AdName DeğerValue
    Dağıtılacak klasörFolder to deploy Ana proje klasörünü seçinSelect the main project folder
    AbonelikSubscription Aboneliğinizi seçmeSelect your subscription
    İşlev uygulamasıFunction app Yeni İşlev Uygulaması Oluştur'u seçinSelect Create New Function App
    İşlev uygulamasının adıFunction app name Benzersiz bir ad girinEnter a unique name
    Kaynak grubuResource group SignalR Hizmeti örneğinin bulunduğu kaynak grubunu seçinSelect the same resource group as the SignalR Service instance
    Depolama hesabıStorage account Daha önce oluşturduğunuz depolama hesabını seçinSelect the storage account you created earlier

    Azure'da yeni bir işlev uygulaması oluşturulur ve dağıtım başlar.A new function app is created in Azure and the deployment begins. Dağıtımın tamamlanmasını bekleyin.Wait for the deployment to complete.

İşlev uygulaması yerel ayarlarını karşıya yüklemeUpload function app local settings

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

  2. Azure İşlevleri: Yerel ayarları karşıya yükle komutunu arayın ve seçin.Search for and select the Azure Functions: Upload local settings command.

  3. İstendiğinde aşağıdaki bilgileri girin.When prompted, provide the following information.

    AdName DeğerValue
    Yerel ayarlar dosyasıLocal settings file local.settings.jsonlocal.settings.json
    AbonelikSubscription Aboneliğinizi seçmeSelect your subscription
    İşlev uygulamasıFunction app Önceden dağıtılmış işlev uygulamasını seçinSelect the previously deployed function app

Yerel ayarlar, Azure'daki işlev uygulamasına yüklenir.Local settings are uploaded to the function app in Azure. Geçerli ayarların üzerine yazmak isteyip istemediğiniz sorulduğunda Tümüne evet'i seçin.If prompted to overwrite existing settings, select Yes to all.

App Service Kimlik Doğrulamayı EtkinleştirmeEnable App Service Authentication

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

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

  2. Azure İşlevleri: Portalda aç komutunu arayın ve seçin.Search for and select the Azure Functions: Open in portal command.

  3. İşlev uygulamasını Azure portalda açmak için aboneliği ve işlev uygulaması adını seçin.Select the subscription and function app name to open the function app in the Azure portal.

  4. Portalda açılan işlev uygulamasında platform özellikleri sekmesini bulun, kimlik doğrulama/yetkilendirme' yi seçin.In the function app that was opened in the portal, locate the Platform features tab, select Authentication/Authorization.

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

  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.In Action to take when request is not authenticated, select "Log in with {authentication provider you selected earlier}".

  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.In Allowed External Redirect URLs, enter the URL of your storage account primary web endpoint that you previously noted.

  8. Yapılandırmayı tamamlamak için seçtiğiniz oturum açma hizmeti sağlayıcısının belgelerini inceleyin.Follow the documentation for the login provider of your choice to complete the configuration.

Web uygulamasını güncelleştirmeUpdate the web app

  1. Azure portalda işlev uygulamasının genel bakış sayfasına gidin.In the Azure portal, navigate to the function app's overview page.

  2. İşlev uygulamasının URL'sini kopyalayın.Copy the function app's URL.

    URL'yi alı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.In VS Code, open index.html and replace the value of apiBaseUrl with the function app's URL.

  4. Uygulama Azure Active Directory, Facebook, Twitter, Microsoft hesabı veya Google ile kimlik doğrulaması gerçekleştirilecek şekilde yapılandırılabilir.The application can be configured with authentication using Azure Active Directory, Facebook, Twitter, Microsoft account, or Google. authProvider değerini ayarlayarak kullanmak istediğiniz kimlik doğrulaması sağlayıcısını seçin.Select the authentication provider that you will use by setting the value of authProvider.

  5. Dosyayı kaydedin.Save the file.

Web uygulamasını blob depolamaya dağıtmaDeploy the web application to blob storage

Web uygulamasını Azure Blob Depolama'nın statik web siteleri özelliğini kullanarak barındıracağız.The web application will be hosted using Azure Blob Storage's static websites feature.

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

  2. Azure depolama: statik Web sitesine dağıt komutuna arayın ve seçin.Search for and select the Azure Storage: Deploy to Static Website command.

  3. Aşağıdaki değerleri girin:Enter the following values:

    AdName DeğerValue
    AbonelikSubscription Aboneliğinizi seçmeSelect your subscription
    Depolama hesabıStorage account Daha önce oluşturduğunuz depolama hesabını seçinSelect the storage account you created earlier
    Dağıtılacak klasörFolder to deploy Araştır ' ı seçin ve içerik klasörünü seçinSelect Browse and select the content folder

İçerik klasöründeki dosyalar artık statik Web sitesine dağıtılmalıdır.The files in the content folder should now be deployed to the static website.

İşlev uygulamasında çıkış noktaları arası kaynak paylaşımını (CORS) etkinleştirmeEnable function app cross origin resource sharing (CORS)

local.settings.json dosyasında CORS seçeneği mevcut olsa da Azure'daki işlev uygulamasına yüklenmez.Although there is a CORS setting in local.settings.json, it is not propagated to the function app in Azure. Bunu ayrıca ayarlamanız gerekir.You need to set it separately.

  1. İşlev uygulamasını Azure portal açın.Open the function app in the Azure portal.

  2. Platform özellikleri sekmesinde CORS' yi seçin.Under the Platform features tab, select CORS.

    CORS'yi bulun

  3. Izin verilen kaynaklar bölümünde, değer olarak statik Web sitesi birincil uç noktasına sahip bir giriş ekleyin (sondaki / kaldırın).In the Allowed origins section, add an entry with the static website primary endpoint as the value (remove the trailing /).

  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.In order for the SignalR JavaScript SDK call your function app from a browser, support for credentials in CORS must be enabled. "Erişim-denetim-Izin-kimlik bilgilerini etkinleştir" onay kutusunu seçin.Select the "Enable Access-Control-Allow-Credentials" checkbox.

    Erişim-denetim-Izin-kimlik bilgilerini etkinleştir

  5. CORS ayarlarını kalıcı hale getirmek için Kaydet'e tıklayın.Click Save to persist the CORS settings.

Uygulamayı deneyinTry the application

  1. Bir tarayıcıdan depolama hesabınızın birincil web uç noktasına gidin.In a browser, navigate to the storage account's primary web endpoint.

  2. Seçtiğiniz kimlik doğrulaması sağlayıcısıyla kimlik doğrulaması gerçekleştirmek için Oturum aç'ı seçin.Select Login to authenticate with your chosen authentication provider.

  3. Ana sohbet kutusunu kullanarak genel ileti gönderin.Send public messages by entering them into the main chat box.

  4. Sohbet geçmişindeki kullanıcı adlarından birine tıklayarak özel ileti gönderin.Send private messages by clicking on a username in the chat history. İletiler yalnızca seçilen alıcıya gönderilir.Only the selected recipient will receive these messages.

Tebrikler!Congratulations! Gerçek zamanlı bir sunucusuz sohbet uygulaması dağıttınız!You have deployed a real-time, serverless chat app!

Tanıtım

Kaynakları temizlemeClean up resources

Bu öğretici ile oluşturulan kaynakları temizlemek için Azure portalı kullanarak kaynak grubunu silebilirsiniz.To clean up the resources created in this tutorial, delete the resource group using the Azure portal.

Sonraki adımlarNext steps

Bu öğreticide, Azure İşlevleri’ni Azure SignalR Hizmeti ile birlikte kullanmayı öğrendiniz.In this tutorial, you learned how to use Azure Functions with Azure SignalR Service. Azure İşlevleri için SignalR Hizmeti bağlamalarıyla gerçek zamanlı sunucusuz uygulama derleme hakkında daha fazla bilgi edinin.Read more about building real-time serverless applications with SignalR Service bindings for Azure Functions.