Ověřování pomocí služby Azure SignalR

V tomto kurzu se používá aplikace chatovací místnosti zavedená v rychlém startu. Pokud jste ještě nedokončili cvičení Vytvoření chatovací místnosti s využitím služby SignalR, nejprve ho dokončete.

V tomto kurzu se naučíte implementovat vlastní ověřování a integrovat ho se službou Microsoft Azure SignalR.

Ověřování původně použité v aplikaci chatovací místnosti z rychlého startu je pro reálné scénáře moc jednoduché. Tato aplikace umožňuje každému klientovi, aby deklaroval svou identitu, a server ji jednoduše přijme. Tento přístup ale není moc užitečný pro reálné aplikace, kde by neautorizovaný uživatel mohl zosobnit jiného uživatele a zajistit si tak přístup k citlivým datům.

GitHub poskytuje ověřovací rozhraní API založená na oblíbeném standardním protokolu nazvaném OAuth. Tato rozhraní API umožňují aplikacím třetích stran ověřovat účty GitHub. V tomto kurzu pomocí těchto rozhraní API implementujete ověřování prostřednictvím účtu GitHubu před tím, než se klientům povolí přihlášení do aplikace chatovací místnosti. Po ověření účtu GitHub se informace o něm přidají jako soubor cookie, který bude webový klient používat k ověřování informací o tomto účtu.

Další informace o rozhraních API pro ověřování OAuth poskytovaných prostřednictvím GitHubu najdete v tématu Základy ověřování.

K dokončení kroků v tomto rychlém startu můžete použít jakýkoli editor kódu. Skvělou volbou je však editor Visual Studio Code, který je dostupný pro platformy Windows, macOS a Linux.

Kód pro tento kurz je k dispozici ke stažení v úložišti GitHub AzureSignalR-samples.

V tomto kurzu se naučíte:

Pokud ještě nemáte předplatné Azure,vytvořte si bezplatný účet před tím, než začnete.

Požadavky

Pro absolvování tohoto kurzu musí být splněné následující požadavky:

• Účet vytvořený na GitHubu
• Git
• Sada .NET Core SDK
• Azure Cloud Shell nakonfigurovaná pro prostředí bash.
• Stáhněte nebo naklonujte úložiště GitHub AzureSignalR-Sample .

Vytvoření aplikace OAuth

1. Otevřete webový prohlížeč, přejděte na https://github.com a přihlaste se k účtu.

2. Pro váš účet přejděte na Nastavení > vývojář nastavení a v části aplikace OAuth klikněte na zaregistrovat novou aplikaci nebo novou aplikaci OAuth .

3. Pro tuto novou aplikaci OAuth použijte následující nastavení a potom klikněte na Zaregistrovat aplikaci:

   Název nastavení	Navrhovaná hodnota	Description
   Název aplikace	Azure SignalR Chat	Uživatel GitHubu by měl být schopný rozpoznat a důvěřovat aplikaci, se kterou ověřuje.
   Adresa URL domovské stránky	http://localhost:5000/home
   Popis aplikace	Ukázka chatovací místnosti pomocí služby signalizace Azure s ověřováním GitHubu	Popis aplikace je užitečný, protože pomůže uživatelům vaší aplikace zjistit, v jakém kontextu se ověřování používá.
   Adresa URL zpětného volání autorizace	http://localhost:5000/signin-github	Toto nastavení je nejdůležitějším nastavením vaší aplikace OAuth. Je to adresa URL pro zpětné volání, na kterou GitHub po úspěšném ověření uživatele vrátí. V tomto kurzu musíte použít výchozí adresu URL pro zpětné volání pro balíček AspNet.Security.OAuth.GitHub, /signin-github.

4. Jakmile je registrace nové aplikace OAuth hotová, přidejte ID klienta a tajný klíč klienta do nástroje Secret Manager, a to pomocí následujících příkazů. Hodnoty Your_GitHub_Client_Id a Your_GitHub_Client_Secret nahraďte hodnotami pro vaši aplikaci OAuth.

   dotnet user-secrets set GitHubClientId Your_GitHub_Client_Id
   dotnet user-secrets set GitHubClientSecret Your_GitHub_Client_Secret
   

Implementace toku OAuth

Aktualizace třídy Startup pro podporu ověřování GitHubu

1. Přidejte odkaz na nejnovější balíčky Microsoft.AspNetCore.Authentication.Cookies a AspNet.Security.OAuth.GitHub a obnovte všechny balíčky.

   dotnet add package Microsoft.AspNetCore.Authentication.Cookies -v 2.1.0-rc1-30656
   dotnet add package AspNet.Security.OAuth.GitHub -v 2.0.0-rc2-final
   dotnet restore
   

2. Otevřete Startup.cs a přidejte příkazy using pro následující obory názvů:

   using System.Net.Http;
   using System.Net.Http.Headers;
   using System.Security.Claims;
   using Microsoft.AspNetCore.Authentication.Cookies;
   using Microsoft.AspNetCore.Authentication.OAuth;
   using Newtonsoft.Json.Linq;
   

3. V horní části třídy Startup přidejte konstanty pro klíče nástroje Secret Manager, ve který jsou uložené tajné kódy aplikace OAuth GitHubu.

   private const string GitHubClientId = "GitHubClientId";
   private const string GitHubClientSecret = "GitHubClientSecret";
   

4. Do metody ConfigureServices přidejte následující kód pro podporu ověřování pomocí aplikace OAuth GitHubu:

   services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
       .AddCookie()
       .AddGitHub(options =>
       {
           options.ClientId = Configuration[GitHubClientId];
           options.ClientSecret = Configuration[GitHubClientSecret];
           options.Scope.Add("user:email");
           options.Events = new OAuthEvents
           {
               OnCreatingTicket = GetUserCompanyInfoAsync
           };
       });
   

5. Do třídy Startup přidejte pomocnou metodu GetUserCompanyInfoAsync.

   private static async Task GetUserCompanyInfoAsync(OAuthCreatingTicketContext context)
   {
       var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
       request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
       request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", context.AccessToken);
   
       var response = await context.Backchannel.SendAsync(request,
           HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
   
       var user = JObject.Parse(await response.Content.ReadAsStringAsync());
       if (user.ContainsKey("company"))
       {
           var company = user["company"].ToString();
           var companyIdentity = new ClaimsIdentity(new[]
           {
               new Claim("Company", company)
           });
           context.Principal.AddIdentity(companyIdentity);
       }
   }
   

6. Aktualizujte metodu Configure třídy Startup následujícím řádkem kódu a potom soubor uložte.

   app.UseAuthentication();
   

Přidání kontroleru ověřování

V této části budete implementovat rozhraní API Login, které ověřuje klienty pomocí aplikace OAuth GitHubu. Po ověření toto rozhraní API přidá do odpovědi webového klienta soubor cookie a potom klienta přesměruje zpátky do chatovací aplikace. Tento soubor cookie se pak bude používat k identifikaci příslušného klienta.

1. Do adresáře chattest\Controllers přidejte soubor s kódem nového kontroleru. Tento soubor pojmenujte AuthController.cs.

2. Do kontroleru ověřování přidejte následující kód. Pokud jako adresář projektu nepoužíváte chattest, nezapomeňte aktualizovat obor názvů:

   using AspNet.Security.OAuth.GitHub;
   using Microsoft.AspNetCore.Authentication;
   using Microsoft.AspNetCore.Mvc;
   
   namespace chattest.Controllers
   {
       [Route("/")]
       public class AuthController : Controller
       {
           [HttpGet("login")]
           public IActionResult Login()
           {
               if (!User.Identity.IsAuthenticated)
               {
                   return Challenge(GitHubAuthenticationDefaults.AuthenticationScheme);
               }
   
               HttpContext.Response.Cookies.Append("githubchat_username", User.Identity.Name);
               HttpContext.SignInAsync(User);
               return Redirect("/");
           }
       }
   }
   

3. Uložte provedené změny.

Aktualizace třídy Hub

Pokud se ve výchozím nastavení webový klient pokusí připojit ke službě SignalR, připojení se udělí na základě přístupového tokenu, který se poskytuje interně. Tento přístupový token není přidružený k žádné ověřené identitě. Ve skutečnosti jde o anonymní přístup.

V této části zapnete reálné ověřování přidáním atributu Authorize do třídy Hub a aktualizací metod centra tak, aby načítaly uživatelské jméno z deklarace identity ověřeného uživatele.

1. Otevřete Hub\Chat.cs a přidejte odkazy na tyto obory názvů:

   using System.Threading.Tasks;
   using Microsoft.AspNetCore.Authorization;
   

2. Kód centra aktualizujte následujícím způsobem. Tento kód přidá atribut Authorize do třídy Chat a v metodách centra používá ověřenou identitu uživatelů. Přidá se také metody OnConnectedAsync, která při každém připojení nového klienta zaprotokoluje systémovou zprávu do chatovací místnosti.

   [Authorize]
   public class Chat : Hub
   {
       public override Task OnConnectedAsync()
       {
           return Clients.All.SendAsync("broadcastMessage", "_SYSTEM_", $"{Context.User.Identity.Name} JOINED");
       }
   
       // Uncomment this line to only allow user in Microsoft to send message
       //[Authorize(Policy = "Microsoft_Only")]
       public void BroadcastMessage(string message)
       {
           Clients.All.SendAsync("broadcastMessage", Context.User.Identity.Name, message);
       }
   
       public void Echo(string message)
       {
           var echoMessage = $"{message} (echo from server)";
           Clients.Client(Context.ConnectionId).SendAsync("echo", Context.User.Identity.Name, echoMessage);
       }
   }
   

3. Uložte provedené změny.

Aktualizace kódu webového klienta

1. Otevřete wwwroot\index.html a kód, který vyzývá k zadání uživatelského jména, nahraďte kódem pro použití souboru cookie vráceného kontrolerem ověřování.

   Ze souboru index.html odeberte následující kód:

   // Get the user name and store it to prepend to messages.
   var username = generateRandomName();
   var promptMessage = 'Enter your name:';
   do {
       username = prompt(promptMessage, username);
       if (!username || username.startsWith('_') || username.indexOf('<') > -1 || username.indexOf('>') > -1) {
           username = '';
           promptMessage = 'Invalid input. Enter your name:';
       }
   } while(!username)
   

   Místo kódu uvedeného výše přidejte následující kód pro použití souboru cookie:

   // Get the user name cookie.
   function getCookie(key) {
       var cookies = document.cookie.split(';').map(c => c.trim());
       for (var i = 0; i < cookies.length; i++) {
           if (cookies[i].startsWith(key + '=')) return unescape(cookies[i].slice(key.length + 1));
       }
       return '';
   }
   var username = getCookie('githubchat_username');
   

2. Přímo pod přidaný řádek kódu pro použití souboru cookie přidejte následující definici pro funkci appendMessage:

   function appendMessage(encodedName, encodedMsg) {
       var messageEntry = createMessageEntry(encodedName, encodedMsg);
       var messageBox = document.getElementById('messages');
       messageBox.appendChild(messageEntry);
       messageBox.scrollTop = messageBox.scrollHeight;
   }
   

3. Pomocí následujícího kódu aktualizujte funkce bindConnectionMessage a onConnected, aby využívaly appendMessage.

   function bindConnectionMessage(connection) {
       var messageCallback = function(name, message) {
           if (!message) return;
           // Html encode display name and message.
           var encodedName = name;
           var encodedMsg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
           appendMessage(encodedName, encodedMsg);
       };
       // Create a function that the hub can call to broadcast messages.
       connection.on('broadcastMessage', messageCallback);
       connection.on('echo', messageCallback);
       connection.onclose(onConnectionError);
   }
   
   function onConnected(connection) {
       console.log('connection started');
       document.getElementById('sendmessage').addEventListener('click', function (event) {
           // Call the broadcastMessage method on the hub.
           if (messageInput.value) {
               connection
                   .invoke('broadcastMessage', messageInput.value)
                   .catch(e => appendMessage('_BROADCAST_', e.message));
           }
   
           // Clear text box and reset focus for next comment.
           messageInput.value = '';
           messageInput.focus();
           event.preventDefault();
       });
       document.getElementById('message').addEventListener('keypress', function (event) {
           if (event.keyCode === 13) {
               event.preventDefault();
               document.getElementById('sendmessage').click();
               return false;
           }
       });
       document.getElementById('echo').addEventListener('click', function (event) {
           // Call the echo method on the hub.
           connection.send('echo', messageInput.value);
   
           // Clear text box and reset focus for next comment.
           messageInput.value = '';
           messageInput.focus();
           event.preventDefault();
       });
   }
   

4. V dolní části souboru index.html aktualizujte obslužnou rutinu chyb pro connection.start(), aby vyzývala uživatele k přihlášení.

   connection.start()
       .then(function () {
           onConnected(connection);
       })
       .catch(function (error) {
           if (error) {
               if (error.message) {
                   console.error(error.message);
               }
               if (error.statusCode && error.statusCode === 401) {
                   appendMessage('_BROADCAST_', 'You\'re not logged in. Click <a href="/login">here</a> to login with GitHub.');
               }
           }
       });
   

5. Uložte provedené změny.

Sestavení a místní spuštění aplikace

1. Uložte změny všech souborů.

2. Pokud chcete aplikaci sestavit pomocí .NET Core CLI, spusťte v příkazovém prostředí následující příkaz:

   dotnet build
   

3. Po úspěšném dokončení sestavení spuštěním následujícího příkazu místně spusťte webovou aplikaci:

   dotnet run
   

   Ve výchozím nastavení se tato aplikace bude místně hostovat na portu 5000:

   E:\Testing\chattest>dotnet run
   Hosting environment: Production
   Content root path: E:\Testing\chattest
   Now listening on: http://localhost:5000
                   Application started. Press Ctrl+C to shut down.
   

4. Spusťte okno prohlížeče a přejděte na adresu http://localhost:5000. Kliknutím na odkaz tady v horní části se přihlaste s využitím GitHubu.

   

   Zobrazí se výzva k autorizaci přístupu chatovací aplikace k vašemu účtu GitHub. Klikněte na tlačítko Authorize (Autorizovat).

   

   Budete přesměrováni do chatovací aplikace a přihlášeni pomocí vašeho účtu GitHub. Webová aplikace určila název vašeho účtu tak, že vás ověřila pomocí nového ověřování, které jste přidali.

   

   Teď když chatovací aplikace provádí ověřování pomocí GitHubu a ukládá ověřovací informace jako soubory cookie, měli byste ji nasadit do Azure, aby se i ostatní uživatelé mohli ověřovat pomocí svých účtů a komunikovat z dalších pracovních stanic.

Nasadit aplikaci do Azure

Připravte prostředí pro rozhraní příkazového řádku Azure:

• V nástroji použijte prostředí Bash Azure Cloud Shell.

  

• Pokud tomu dáváte přednost, můžete nainstalovat Azure CLI a spouštět referenční příkazy CLI.

  • Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu. Další možnosti přihlášení jsou popsané v tématu Přihlášení pomocí Azure CLI.

  • Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.

  • Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.

V této části použijete rozhraní příkazového řádku Azure (CLI) k vytvoření nové webové aplikace v Azure App Service k hostování vaší aplikace ASP.NET v Azure. Tato webová aplikace bude nakonfigurovaná tak, aby využívala místní nasazení z Gitu. Tato webová aplikace bude také nakonfigurovaná s využitím vašeho připojovacího řetězce SignalR, tajných kódů aplikace OAuth GitHubu a uživatele nasazení.

Při vytváření v následujících prostředků nezapomeňte použít stejnou skupinu prostředků, ve které jsou umístěné prostředky služby SignalR. Tento přístup vám později, až budete chtít odebrat všechny prostředky, výrazně usnadní čištění. Uvedený příklad předpokládá, že jste použili název skupiny doporučený v předchozích kurzech, SignalRTestResources.

Vytvoření webové aplikace a plánu

Zkopírujte text pro níže uvedené příkazy a aktualizujte parametry. Vložte aktualizovaný skript do Azure Cloud Shellu a stisknutím Enter vytvořte novou webovou aplikaci a plán služby App Service.

#========================================================================
#=== Update these variable for your resource group name.              ===
#========================================================================
ResourceGroupName=SignalRTestResources

#========================================================================
#=== Update these variable for your web app.                          ===
#========================================================================
WebAppName=myWebAppName
WebAppPlan=myAppServicePlanName

# Create an App Service plan.
az appservice plan create --name $WebAppPlan --resource-group $ResourceGroupName \
    --sku FREE

# Create the new Web App
az webapp create --name $WebAppName --resource-group $ResourceGroupName \
    --plan $WebAppPlan

Přidat aplikačních nastavení do webové aplikace

V této části přidáte aplikační nastavení pro následující komponenty:

• Připojovací řetězec prostředku služby SignalR
• ID klienta aplikace OAuth GitHubu
• Tajný kód klienta aplikace OAuth GitHubu

Zkopírujte text pro níže uvedené příkazy a aktualizujte parametry. Vložte aktualizovaný skript do služby Azure Cloud Shell a stisknutím Enter přidejte tato aplikační nastavení:

#========================================================================
#=== Update these variables for your GitHub OAuth App.                ===
#========================================================================
GitHubClientId=1234567890
GitHubClientSecret=1234567890

#========================================================================
#=== Update these variables for your resources.                       ===
#========================================================================
ResourceGroupName=SignalRTestResources
SignalRServiceResource=mySignalRresourcename
WebAppName=myWebAppName

# Get the SignalR primary connection string 
primaryConnectionString=$(az signalr key list --name $SignalRServiceResource \
  --resource-group $ResourceGroupName --query primaryConnectionString -o tsv)

#Add an app setting to the web app for the SignalR connection
az webapp config appsettings set --name $WebAppName \
    --resource-group $ResourceGroupName \
    --settings "Azure__SignalR__ConnectionString=$primaryConnectionString"

#Add the app settings to use with GitHub authentication
az webapp config appsettings set --name $WebAppName \
    --resource-group $ResourceGroupName \
    --settings "GitHubClientId=$GitHubClientId"
az webapp config appsettings set --name $WebAppName \
    --resource-group $ResourceGroupName \
    --settings "GitHubClientSecret=$GitHubClientSecret"

Konfigurace webové aplikace pro místní nasazení z Gitu

Do Azure Cloud Shellu vložte následující skript. Tento skript vytvoří jméno a heslo nového uživatele nasazení, které budete používat při nasazování vašeho kódu do webové aplikace pomocí Gitu. Tento skript také pro tuto webovou aplikaci nakonfiguruje nasazení s využitím místního úložiště Git a vrátí adresu URL nasazení z Gitu.

#========================================================================
#=== Update these variables for your resources.                       ===
#========================================================================
ResourceGroupName=SignalRTestResources
WebAppName=myWebAppName

#========================================================================
#=== Update these variables for your deployment user.                 ===
#========================================================================
DeploymentUserName=myUserName
DeploymentUserPassword=myPassword

# Add the desired deployment user name and password
az webapp deployment user set --user-name $DeploymentUserName \
    --password $DeploymentUserPassword

# Configure Git deployment and note the deployment URL in the output
az webapp deployment source config-local-git --name $WebAppName \
    --resource-group $ResourceGroupName \
    --query [url] -o tsv

Poznamenejte si adresu URL nasazení Gitu vrácenou tímto příkazem. Tuto adresu URL použijete později.

Nasazení vašeho kódu do webové aplikace Azure

Pokud chcete nasadit váš kód, spusťte následující příkazy v Git Shellu.

1. Přejděte do kořenového adresáře vašeho projektu. Pokud jste projekt neinicializovali s využitím úložiště Git, spusťte následující příkaz:

   git init
   

2. Přidejte příkaz remote pro adresu URL nasazení z Gitu, kterou jste si poznamenali dřív:

   git remote add Azure <your git deployment url>
   

3. Připravte všechny soubory v inicializovaném úložišti a přidejte příkaz commit.

   git add -A
   git commit -m "init commit"
   

4. Nasaďte váš kód do webové aplikace v Azure.

   git push Azure main
   

   Abyste mohli nasadit kód do Azure, zobrazí se výzva k ověření. Zadejte uživatelské jméno a heslo uživatele nasazení, které jste vytvořili výš.

Aktualizace aplikace OAuth GitHubu

Poslední věcí, která zbývá, je aktualizace nastavení Adresa URL domovské stránky a Adresa URL zpětného volání autorizace aplikace OAuth GitHubu, aby odkazovaly na novou hostovanou aplikaci.

1. https://github.comV prohlížeči otevřete prohlížeč a přejděte na nastavení vašeho účtu > > aplikace OAuth nastavení pro vývojáře.

2. Klikněte na vaši ověřovací aplikaci a aktualizujte nastavení Adresa URL domovské stránky a Adresa URL zpětného volání autorizace, jak je uvedeno dál:

   Nastavení	Příklad
   Adresa URL domovské stránky	https://signalrtestwebapp22665120.azurewebsites.net/home
   Adresa URL zpětného volání autorizace	https://signalrtestwebapp22665120.azurewebsites.net/signin-github

3. Přejděte na adresu URL webové aplikace a otestujte aplikaci.

   

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

Pokud budete pokračovat k dalšímu kurzu, můžete prostředky vytvořené v tomto rychlém startu zachovat pro pozdější použití.

V opačném případě, pokud jste už s ukázkovou aplikací v tomto rychlém startu skončili, můžete prostředky Azure vytvořené v tomto rychlém startu odstranit, abyste se vyhnuli poplatkům.

Přihlaste se na web Azure Portal a klikněte na Skupiny prostředků.

Do textového pole Filtrovat podle názvu zadejte název vaší skupiny prostředků. V pokynech v tomto článku se používala skupina prostředků SignalRTestResources. Ve výsledcích hledání klikněte na ... u vaší skupiny prostředků a pak na Odstranit skupinu prostředků.

Zobrazí se výzva k potvrzení odstranění skupiny prostředků. Potvrďte odstranění zadáním názvu vaší skupiny prostředků a klikněte na Odstranit.

Po chvíli bude skupina prostředků včetně všech obsažených prostředků odstraněná.

Další kroky

V tomto kurzu jste přidali ověřování pomocí OAuth pro zajištění lepšího přístupu k ověřování s využitím služby Azure SignalR. Další informace o použití služby Azure SignalR najdete v ukázkách Azure CLI pro službu SignalR.