👷🏻 📄 🕊️ ब्लेज़र क्लाइंट साइड ऑनलाइन स्टोर: भाग 1 - प्राधिकरण oidc (oauth2) + पहचान सर्वर 4 🚟 👨🏽‍🏫 🚱

नमस्कार, हेब्र! तो हाँ, अपने पिछले लेख में मैंने ब्लेज़र वासम पर टोडो सूची बनाने की कोशिश की और संतुष्ट था। अब मैंने इसे गंभीरता से लेने का प्रयास किया। मैं एक साधारण काल्पनिक ऑनलाइन स्टोर के लिए ब्लेज़र पर एक साधारण एसपीए यूआई बनाऊंगा। उपयोग विकल्प का मुकाबला करने के लिए जितना संभव हो उतना करीब। आरंभ करने के लिए, मैं उपयोगकर्ताओं की भूमिका और उनके पृथक्करण के रिकॉर्ड को भूमिकाओं द्वारा दर्ज करूँगा, ताकि व्यवस्थापक और नियमित उपयोगकर्ता को थोड़ा अलग इंटरफ़ेस दिखाई दे। मैंने डॉकटर छवियों में भी यह सब एकत्र किया और इसे डॉकटर रजिस्ट्री में अपलोड किया। विवरण के लिए, बिल्ली में आपका स्वागत है।

सामग्री

संदर्भ

स्रोत कोड
डॉकटर रजिस्ट्री छवियां

लांच

यह आवश्यक है कि आपके पास पहले से ही docker compose ( tyk ) के साथ docker स्थापित है और इंटरनेट जुड़ा हुआ है क्योंकि आपको इन चित्रों को डाउनलोड करने की आवश्यकता होगी।

माइक्रोसॉफ़्ट के लिए आवश्यक प्रमाण पत्र बनाने के लिए, .net कोर को स्थापित करने और इन कमांड को Windows PowerShell में चलाने के लिए।

dotnet --info dotnet dev-certs https --trust dotnet dev-certs https -ep $env:APPDATA\ASP.NET\Https\blazor-eshop-api.pfx -p 1234Qwert dotnet dev-certs https -ep $env:APPDATA\ASP.NET\Https\blazor-eshop-spa-angular.pfx -p 1234Qwert dotnet dev-certs https -ep $env:APPDATA\ASP.NET\Https\blazor-eshop-spa-blazor.pfx -p 1234Qwert dotnet dev-certs https -ep $env:APPDATA\ASP.NET\Https\blazor-eshop-sso.pfx -p 1234Qwert

प्रोजेक्ट शुरू करने के लिए, आपको docker-compose.yml फ़ाइल डाउनलोड करनी होगी (या उसी नाम से फ़ाइल में इसकी सामग्री की प्रतिलिपि बनाएँ) और docker-compose कमांड को उस निर्देशिका में चलाएँ जहाँ यह फ़ाइल स्थित है। सूक्ष्मदर्शी पते सुन रहे हैं
https: // localhost: 8000
https: // localhost: 8001
https: // localhost: 8002
और https: // localhost: 8003 ।

किसी ब्राउज़र में WASM क्लाइंट को अधिकृत करने के लिए लाइब्रेरी

Www.nuget.org/packages/Sotsera.Blazor.Oidc स्थापित करें और जीवन का आनंद लें

पहचान सर्वर 4 को कॉन्फ़िगर करें

सामान्य तौर पर, मैंने एक रेडी-मेड सर्वर लिया और बस वहां अपने एसपीए क्लाइंट के लिए सेटिंग्स जोड़ीं। पहचान सर्वर 4 की स्थापना स्वयं इस लेख के दायरे से परे है क्योंकि यह ब्लेज़र के बारे में है। यदि आप रुचि रखते हैं, तो आप मेरे स्रोतों में देख सकते हैं।

हमारे क्लाइंट को उपलब्ध क्लाइंट की सूची में जोड़ें

  new Client { ClientId = "spaBlazorClient", ClientName = "SPA Blazor Client", RequireClientSecret = false, RequireConsent = false, RedirectUris = new List<string> { $"{clientsUrl["SpaBlazor"]}/oidc/callbacks/authentication-redirect", $"{clientsUrl["SpaBlazor"]}/_content/Sotsera.Blazor.Oidc/silent-renew.html", $"{clientsUrl["SpaBlazor"]}", }, PostLogoutRedirectUris = new List<string> { $"{clientsUrl["SpaBlazor"]}/oidc/callbacks/logout-redirect", $"{clientsUrl["SpaBlazor"]}", }, AllowedCorsOrigins = new List<string> { $"{clientsUrl["SpaBlazor"]}", }, AllowedGrantTypes = GrantTypes.Code, AllowedScopes = { "openid", "profile", "email", "api" }, AllowOfflineAccess = true, RefreshTokenUsage = TokenUsage.ReUse }

JWT टोकन में अधिक भूमिकाएँ प्राप्त करने के लिए, हम अपने IProfileService को लागू करते हैं

 using IdentityModel; using IdentityServer4.Models; using IdentityServer4.Services; using Microsoft.AspNetCore.Identity; using Microsoft.eShopOnContainers.Services.Identity.API.Models; using System; using System.Collections.Generic; using System.IdentityModel.Tokens.Jwt; using System.Linq; using System.Security.Claims; using System.Threading.Tasks; namespace Microsoft.eShopOnContainers.Services.Identity.API.Services { public class ProfileService : IProfileService { private readonly UserManager<ApplicationUser> _userManager; public ProfileService(UserManager<ApplicationUser> userManager) { _userManager = userManager; } async public Task GetProfileDataAsync(ProfileDataRequestContext context) { var subject = context.Subject ?? throw new ArgumentNullException(nameof(context.Subject)); var subjectId = subject.Claims.Where(x => x.Type == "sub").FirstOrDefault().Value; var user = await _userManager.FindByIdAsync(subjectId); if (user == null) throw new ArgumentException("Invalid subject identifier"); var claims = GetClaimsFromUser(user); context.IssuedClaims = claims.ToList(); var roles = await _userManager.GetRolesAsync(user); foreach (var role in roles) { context.IssuedClaims.Add(new Claim(JwtClaimTypes.Role, role)); } } async public Task IsActiveAsync(IsActiveContext context) { var subject = context.Subject ?? throw new ArgumentNullException(nameof(context.Subject)); var subjectId = subject.Claims.Where(x => x.Type == "sub").FirstOrDefault().Value; var user = await _userManager.FindByIdAsync(subjectId); context.IsActive = false; if (user != null) { if (_userManager.SupportsUserSecurityStamp) { var security_stamp = subject.Claims.Where(c => c.Type == "security_stamp").Select(c => c.Value).SingleOrDefault(); if (security_stamp != null) { var db_security_stamp = await _userManager.GetSecurityStampAsync(user); if (db_security_stamp != security_stamp) return; } } context.IsActive = !user.LockoutEnabled || !user.LockoutEnd.HasValue || user.LockoutEnd <= DateTime.Now; } } private IEnumerable<Claim> GetClaimsFromUser(ApplicationUser user) { var claims = new List<Claim> { new Claim(JwtClaimTypes.Subject, user.Id), new Claim(JwtClaimTypes.PreferredUserName, user.UserName), new Claim(JwtRegisteredClaimNames.UniqueName, user.UserName) }; if (!string.IsNullOrWhiteSpace(user.Name)) claims.Add(new Claim("name", user.Name)); if (!string.IsNullOrWhiteSpace(user.LastName)) claims.Add(new Claim("last_name", user.LastName)); if (!string.IsNullOrWhiteSpace(user.CardNumber)) claims.Add(new Claim("card_number", user.CardNumber)); if (!string.IsNullOrWhiteSpace(user.CardHolderName)) claims.Add(new Claim("card_holder", user.CardHolderName)); if (!string.IsNullOrWhiteSpace(user.SecurityNumber)) claims.Add(new Claim("card_security_number", user.SecurityNumber)); if (!string.IsNullOrWhiteSpace(user.Expiration)) claims.Add(new Claim("card_expiration", user.Expiration)); if (!string.IsNullOrWhiteSpace(user.City)) claims.Add(new Claim("address_city", user.City)); if (!string.IsNullOrWhiteSpace(user.Country)) claims.Add(new Claim("address_country", user.Country)); if (!string.IsNullOrWhiteSpace(user.State)) claims.Add(new Claim("address_state", user.State)); if (!string.IsNullOrWhiteSpace(user.Street)) claims.Add(new Claim("address_street", user.Street)); if (!string.IsNullOrWhiteSpace(user.ZipCode)) claims.Add(new Claim("address_zip_code", user.ZipCode)); if (_userManager.SupportsUserEmail) { claims.AddRange(new[] { new Claim(JwtClaimTypes.Email, user.Email), new Claim(JwtClaimTypes.EmailVerified, user.EmailConfirmed ? "true" : "false", ClaimValueTypes.Boolean) }); } if (_userManager.SupportsUserPhoneNumber && !string.IsNullOrWhiteSpace(user.PhoneNumber)) { claims.AddRange(new[] { new Claim(JwtClaimTypes.PhoneNumber, user.PhoneNumber), new Claim(JwtClaimTypes.PhoneNumberVerified, user.PhoneNumberConfirmed ? "true" : "false", ClaimValueTypes.Boolean) }); } return claims; } } }

यहाँ कोड के इस टुकड़े में पूरे बिंदु

 var roles = await _userManager.GetRolesAsync(user); foreach (var role in roles) { context.IssuedClaims.Add(new Claim(JwtClaimTypes.Role, role)); }

और इसे asp.net में जोड़ें

 services.AddIdentityServer().AddProfileService<ProfileService>()

परियोजना निर्माण

यहां मैंने ASP.NET Core को होस्ट किया क्योंकि सेटिंग्स को ट्रांसफर करना मेरे लिए इतना आसान था। एक आसान छवि को इकट्ठा करने के लिए आसान है। यदि आप कंटेनर के अंदर चाहें तो नगनेक्स की मेजबानी भी कर सकते हैं।

कॉन्फ़िगरेशन फ़ाइल और पर्यावरण चर से सेटिंग स्थानांतरित करना

सर्वर साइड

सेटिंग्स मॉडल जोड़ें

 public class ConfigModel { public string SsoUri { get; set; } = string.Empty; public string ApiUri { get; set; } = string.Empty; }

इसे Startup.cs में पंजीकृत करें

 public void ConfigureServices(IServiceCollection services) { services.AddMvc(); services.AddResponseCompression(opts => { opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( new[] { "application/octet-stream" }); }); services.Configure<ConfigModel>(Configuration); }

ग्राहक के रूप में पास करें

 using BlazorEShop.Shared.Presentation; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Options; namespace BlazorEShop.Spa.BlazorWasm.Server.Controllers { [Route("api/v1/config")] [ApiController] public class ConfigController : ControllerBase { private readonly IOptionsSnapshot<ConfigModel> _configuration; public ConfigController(IOptionsSnapshot<ConfigModel> configuration) { _configuration = configuration; } // GET: api/<controller> [HttpGet] public ConfigModel Get() { return _configuration.Value; } } }

ग्राहक पक्ष

हम सर्वर से सेटिंग्स प्राप्त करते हैं और उन्हें हमारे DI कंटेनर में जोड़ते हैं

 using System; using System.Net.Http; using System.Threading; using System.Threading.Tasks; using BlazorEShop.Shared.Presentation; using Microsoft.AspNetCore.Blazor.Hosting; using Microsoft.AspNetCore.Components; using Microsoft.Extensions.DependencyInjection; namespace BlazorEShop.Spa.BlazorWasm.Client { public class Program { public static void Main(string[] args) { Task.Run(async () => { ConfigModel cfg = null; var host = BlazorWebAssemblyHost.CreateDefaultBuilder().Build(); using (var scope = host.Services.CreateScope()) { var nm = scope.ServiceProvider.GetRequiredService<NavigationManager>(); var uri = nm.BaseUri; Console.WriteLine($"BASE URI: {uri}"); cfg = await GetConfig($"{(uri.EndsWith('/') ? uri : uri + "/")}api/v1/config"); } await BlazorWebAssemblyHost .CreateDefaultBuilder() .ConfigureServices(x => x.AddScoped<ConfigModel>(y => cfg)) .UseBlazorStartup<Startup>() .Build() .StartAsync() .ContinueWith((a, b) => Console.WriteLine(a.Exception), null); }); Console.WriteLine("END MAIN"); } private static async Task<ConfigModel> GetConfig(string url) { using var client = new HttpClient(); var cfg = await client .GetJsonAsync<ConfigModel>(url); return cfg; } } }

चूँकि ब्लेज़र वासम, एस्क्वायड वेन मेन का समर्थन नहीं करता है, और टास्क से रिजल्ट प्राप्त करने का प्रयास गतिरोध की ओर ले जाता है क्योंकि हमारे पास केवल एक ही धागा होता है, हमें टास्क में सब कुछ लपेटना पड़ता था। (async () => {});

क्लाइंट पक्ष पर oidc (oauth2) लाइब्रेरी को सक्रिय करना

हम सेवाओं को कॉल करते हैं। हमें जो सेटिंग्स मिलती है, वह कॉन्फिगरेशन के अंदर सर्वर से प्राप्त होती है।

 using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; using Sotsera.Blazor.Oidc; using System; using System.Net.Http; using System.Threading.Tasks; using BlazorEShop.Shared.Presentation; using Microsoft.AspNetCore.Components; namespace BlazorEShop.Spa.BlazorWasm.Client { public class Startup { public async void ConfigureServices(IServiceCollection services) { var provider = services.BuildServiceProvider(); var cfg = provider.GetService<ConfigModel>(); services.AddOidc(new Uri(cfg.SsoUri), (settings, siteUri) => { settings.UseDefaultCallbackUris(siteUri); settings.ClientId = "spaBlazorClient"; settings.ResponseType = "code"; settings.Scope = "openid profile email api"; settings.UseRedirectToCallerAfterAuthenticationRedirect(); settings.UseRedirectToCallerAfterLogoutRedirect(); settings.MinimumLogeLevel = Microsoft.Extensions.Logging.LogLevel.Information; settings.LoadUserInfo = true; settings.FilterProtocolClaims = true; settings.MonitorSession = true; settings.StorageType = Sotsera.Blazor.Oidc.Configuration.Model.StorageType.LocalStorage; }); } public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } }

App.razor के मुख्य घटक को कॉन्फ़िगर करना

App.blazor -Change करें ताकि अधिकृत और अनधिकृत उपयोगकर्ता अलग-अलग पाठ देखें और पुस्तकालय से oCc के लिए मार्ग जुड़े हुए हैं

 @using BlazorEShop.Shared.Presentation @using Microsoft.AspNetCore.Components @using Microsoft.Extensions.DependencyInjection @using Sotsera.Blazor.Oidc @inject IUserManager UserManager <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(IUserManager).Assembly }"> <Found Context="routeData"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"> <NotAuthorized> <h3>Sorry</h3> <p>You're not authorized to reach this page.</p> <p>You may need to log in as a different user.</p> </NotAuthorized> <Authorizing> <h3>Authentication in progress</h3> </Authorizing> </AuthorizeRouteView> </Found> <NotFound> <CascadingAuthenticationState> <LayoutView Layout="@typeof(MainLayout)"> <h3>Sorry</h3> <p>Sorry, there's nothing at this address.</p> </LayoutView> </CascadingAuthenticationState> </NotFound> </Router>

उपयोगकर्ता लॉगिन और लॉगआउट

उपयोगकर्ता प्रबंधन IUserManager इंटरफ़ेस के माध्यम से किया जाता है। इसे DI कंटेनर से प्राप्त किया जा सकता है। उदाहरण के लिए:

 @inject IUserManager UserManager @using Sotsera.Blazor.Oidc @using Microsoft.Extensions.DependencyInjection <AuthorizeView> <Authorized> <span class="login-display-name mr-3"> Hello, @context.User.Identity.Name! </span> <button type="button" class="btn btn-primary btn-sm" @onclick="LogoutRedirect"> Log out </button> </Authorized> <NotAuthorized> <button type="button" class="btn btn-primary btn-sm" @onclick="LoginRedirect"> Log in </button> </NotAuthorized> </AuthorizeView> @code { public async void LoginRedirect() => await UserManager.BeginAuthenticationAsync(p => p.WithRedirect()); public async void LogoutRedirect() => await UserManager.BeginLogoutAsync(p => p.WithRedirect()); }

अधिकृत और गैर-अधिकृत उपयोगकर्ताओं के लिए विभिन्न सूचनाओं का प्रदर्शन

अब, प्राधिकरण के किसी भी भाग में, AuthorizeView का उपयोग करके, आप उन क्षेत्रों को निर्दिष्ट कर सकते हैं जो केवल अधिकृत उपयोगकर्ता देखेंगे। आप उपयोगकर्ताओं को यह निर्दिष्ट करने के लिए रोल्स का उपयोग कर सकते हैं कि वे किस भूमिका के साथ इस सामग्री को देख सकते हैं।

 <AuthorizeView Roles="admin, administrator"> <Authorized> <p>User Info</p> <p>@context.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)</p> @foreach (var c in context.User.Claims) { <p>@c.Type : @c.Value : @string.Join(";", c.Properties.Select(x => $"{x.Key} : {x.Value}"))</p> } </Authorized> <NotAuthorized> <p>       admin   administrator</p> </NotAuthorized> </AuthorizeView>

प्राधिकरण और उपयोगकर्ता भूमिकाओं के आधार पर विशिष्ट पृष्ठों तक पहुंच

सब कुछ मानक विशेषता अधिकृत हो जाता है। बेशक, आप सर्वर साइड पर भी उपयोगकर्ता अधिकारों की जांच बेहतर करते हैं।

एक पृष्ठ जो केवल किसी भी भूमिका के साथ एक अधिकृत उपयोगकर्ता द्वारा पहुँचा जा सकता है

 @page "/user" @attribute [Authorize] <h1>     </h1>

एक पृष्ठ जिसे केवल एक अधिकृत उपयोगकर्ता द्वारा एक्सेस किया जा सकता है जिसके पास व्यवस्थापक या बॉस की भूमिका है

 @page "/admin" @attribute [Authorize(Roles="admin, boss")] <h1>      admin  boss</h1>

एपीआई कॉल

ऐसा करने के लिए, OidcHttpClient का उपयोग करें जो DI कंटेनर से प्राप्त किया जा सकता है। यह अनुरोध में वर्तमान उपयोगकर्ता के टोकन को स्वचालित रूप से नीचे रखता है। उदाहरण के लिए:

 @page "/fetchdata" @inject Sotsera.Blazor.Oidc.OidcHttpClient Http @inject BlazorEShop.Shared.Presentation.ConfigModel Config @using BlazorEShop.Shared.Presentation <h1>Weather forecast</h1> <p>This component demonstrates fetching data from the server.</p> @if (products == null) { <p><em>Loading...</em></p> } else { <table class="table"> <thead> <tr> <th>Id</th> <th>Version</th> </tr> </thead> <tbody> @foreach (var product in products.Value) { <tr> <td>@product.Id</td> <td>@product.Version</td> </tr> } </tbody> </table> } @code { private PageResultModel<ProductModel> products; protected override async Task OnInitializedAsync() { var uri = Config.ApiUri; products = await Http.GetJsonAsync<PageResultModel<ProductModel>>($"{(uri.EndsWith('/') ? uri : uri + "/")}api/v1/products?take=100&skip;=0"); } }

ब्लेज़र क्लाइंट साइड ऑनलाइन स्टोर: भाग 1 - प्राधिकरण oidc (oauth2) + पहचान सर्वर 4