You can download and get started with .NET Core 2.2, on Windows, macOS, and Linux:
The Xamarin Live Player helps you get started with Xamarin.Forms development by learning to build mobile apps that you can test on your Android or iOS device
نسخه بعدی Visual Studio چیست؟
احراز هویت و اعتبارسنجی کاربران در برنامههای Angular - قسمت چهارم - به روز رسانی خودکار توکنها
ایجاد یک تایمر برای مدیریت دریافت و به روز رسانی توکن دسترسی
در مطلب «ایجاد تایمرها در برنامههای Angular» با روش کار با تایمرهای reactive آشنا شدیم. در اینجا قصد داریم از این امکانات جهت پیاده سازی به روز کنندهی خودکار access_token استفاده کنیم. در مطلب «احراز هویت و اعتبارسنجی کاربران در برنامههای Angular - قسمت دوم - سرویس اعتبارسنجی»، زمان انقضای توکن را به کمک کتابخانهی jwt-decode، از آن استخراج کردیم:
getAccessTokenExpirationDateUtc(): Date { const decoded = this.getDecodedAccessToken(); if (decoded.exp === undefined) { return null; } const date = new Date(0); // The 0 sets the date to the epoch date.setUTCSeconds(decoded.exp); return date; }
private refreshTokenSubscription: Subscription; scheduleRefreshToken() { if (!this.isLoggedIn()) { return; } this.unscheduleRefreshToken(); const expiresAtUtc = this.getAccessTokenExpirationDateUtc().valueOf(); const nowUtc = new Date().valueOf(); const initialDelay = Math.max(1, expiresAtUtc - nowUtc); console.log("Initial scheduleRefreshToken Delay(ms)", initialDelay); const timerSource$ = Observable.timer(initialDelay); this.refreshTokenSubscription = timerSource$.subscribe(() => { this.refreshToken(); }); } unscheduleRefreshToken() { if (this.refreshTokenSubscription) { this.refreshTokenSubscription.unsubscribe(); } }
- در ابتدا بررسی میکنیم که آیا کاربر لاگین کردهاست یا خیر؟ آیا اصلا دارای توکنی هست یا خیر؟ اگر خیر، نیازی به شروع این تایمر نیست.
- سپس تایمر قبلی را در صورت وجود، خاتمه میدهیم.
- در مرحلهی بعد، کار محاسبهی میزان زمان تاخیر شروع تایمر Observable.timer را انجام میدهیم. پیشتر زمان انقضای توکن موجود را استخراج کردهایم. اکنون این زمان را از زمان جاری سیستم برحسب UTC کسر میکنیم. مقدار حاصل، initialDelay این تایمر خواهد بود. یعنی این تایمر به مدت initialDelay صبر خواهد کرد و سپس تنها یکبار اجرا میشود. پس از اجرا، ابتدا متد refreshToken ذیل را فراخوانی میکند تا توکن جدیدی را دریافت کند.
در متد unscheduleRefreshToken کار لغو تایمر جاری در صورت وجود انجام میشود.
متد درخواست یک توکن جدید بر اساس refreshToken موجود نیز به صورت ذیل است:
refreshToken() { const headers = new HttpHeaders({ "Content-Type": "application/json" }); const model = { refreshToken: this.getRawAuthToken(AuthTokenType.RefreshToken) }; return this.http .post(`${this.appConfig.apiEndpoint}/${this.appConfig.refreshTokenPath}`, model, { headers: headers }) .finally(() => { this.scheduleRefreshToken(); }) .map(response => response || {}) .catch((error: HttpErrorResponse) => Observable.throw(error)) .subscribe(result => { console.log("RefreshToken Result", result); this.setLoginSession(result); }); }
در آخر چون این تایمر، خود متوقف شوندهاست (متد Observable.timer بدون پارامتر دوم آن فراخوانی شدهاست)، یکبار دیگر کار زمانبندی دریافت توکن جدید بعدی را در متد finally انجام میدهیم (متد scheduleRefreshToken را مجددا فراخوانی میکنیم).
تغییرات مورد نیاز در سرویس Auth جهت زمانبندی دریافت توکن دسترسی جدید
تا اینجا متدهای مورد نیاز شروع زمانبندی دریافت توکن جدید، خاتمهی زمانبندی و دریافت و به روز رسانی توکن جدید را پیاده سازی کردیم. محل قرارگیری و فراخوانی این متدها در سرویس Auth، به صورت ذیل هستند:
الف) در سازندهی کلاس:
constructor( @Inject(APP_CONFIG) private appConfig: IAppConfig, private browserStorageService: BrowserStorageService, private http: HttpClient, private router: Router ) { this.updateStatusOnPageRefresh(); this.scheduleRefreshToken(); }
ب) پس از لاگین موفقیت آمیز
در متد لاگین، پس از دریافت یک response موفقیت آمیز و تنظیم و ذخیره سازی توکنهای دریافتی، کار زمانبندی دریافت توکن دسترسی بعدی بر اساس refresh_token فعلی انجام میشود:
this.setLoginSession(response); this.scheduleRefreshToken();
ج) پس از خروج از سیستم
در متد logout، پس از حذف توکنهای کاربر از کش مرورگر، کار لغو تایمر زمانبندی دریافت توکن بعدی نیز صورت خواهد گرفت:
this.deleteAuthTokens(); this.unscheduleRefreshToken();
در این حالت اگر برنامه را اجرا کنید، یک چنین خروجی را که بیانگر دریافت خودکار توکنهای جدید است، پس از مدتی در کنسول developer مرورگر مشاهده خواهید کرد:
ابتدا متد scheduleRefreshToken اجرا شده و تاخیر آغازین تایمر محاسبه شدهاست. پس از مدتی متد refreshToken توسط تایمر فراخوانی شدهاست. در آخر مجددا متد scheduleRefreshToken جهت شروع یک زمانبندی جدید، اجرا شدهاست.
اعداد initialDelay محاسبه شدهای را هم که ملاحظه میکنید، نزدیک به همان 2 دقیقهی تنظیمات سمت سرور در فایل appsettings.json هستند:
"BearerTokens": { "Key": "This is my shared key, not so secret, secret!", "Issuer": "http://localhost/", "Audience": "Any", "AccessTokenExpirationMinutes": 2, "RefreshTokenExpirationMinutes": 60 }
کدهای کامل این سری را از اینجا میتوانید دریافت کنید.
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس از طریق خط فرمان به ریشهی پروژهی ASPNETCore2JwtAuthentication.AngularClient وارد شده و دستور npm install را صادر کنید تا وابستگیهای آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o، برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد (و یا همان اجرای فایل ng-serve.bat). همچنین باید به پوشهی ASPNETCore2JwtAuthentication.WebApp نیز مراجعه کرده و فایل dotnet_run.bat را اجرا کنید، تا توکن سرور برنامه نیز فعال شود.
.NET MAUI for Beginners
8 videos
.NET Multi-platform App UI (.NET MAUI) is a framework for building modern, multi-platform, natively compiled iOS, Android, macOS, and Windows apps using C# and XAML in a single codebase. In this video series you will learn how to get started with .NET MAUI, C#, and Visual Studio to build your very first cross-platform desktop and mobile app.
We are proud to present the first beta release of Kendo UI for Angular 2. It’s been designed specifically for Angular 2. Written in Typescript, built as native Query-free components and distributed as NPM packages, Kendo UI for Angular 2 makes integrating UI components into ng2 a piece of cake for developers. In this beta release, you’ll find the business application essential building blocks — form elements, grid and data visualization components.
Blazor 5x - قسمت 31 - احراز هویت و اعتبارسنجی کاربران Blazor WASM - بخش 1 - انجام تنظیمات اولیه
using System; using System.Collections.Generic; using System.Linq; using System.Security.Claims; using System.Text.Json; namespace BlazorWasm.Client.Utils { public class JwtInfo { public IEnumerable<Claim> Claims { set; get; } public DateTime? ExpirationDateUtc { set; get; } public bool IsExpired { set; get; } public IEnumerable<string> Roles { set; get; } } /// <summary> /// From the Steve Sanderson’s Mission Control project: /// https://github.com/SteveSandersonMS/presentation-2019-06-NDCOslo/blob/master/demos/MissionControl/MissionControl.Client/Util/ServiceExtensions.cs /// </summary> public static class JwtParser { public static JwtInfo ParseClaimsFromJwt(string jwt) { var claims = new List<Claim>(); var payload = jwt.Split('.')[1]; var jsonBytes = getBase64WithoutPadding(payload); foreach (var keyValue in JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes)) { if (keyValue.Value is JsonElement element && element.ValueKind == JsonValueKind.Array) { foreach (var itemValue in element.EnumerateArray()) { claims.Add(new Claim(keyValue.Key, itemValue.ToString())); } } else { claims.Add(new Claim(keyValue.Key, keyValue.Value.ToString())); } } var roles = getRoles(claims); var expirationDateUtc = getDateUtc(claims, "exp"); var isExpired = getIsExpired(expirationDateUtc); return new JwtInfo { Claims = claims, Roles = roles, ExpirationDateUtc = expirationDateUtc, IsExpired = isExpired }; } private static IList<string> getRoles(IList<Claim> claims) => claims.Where(c => c.Type == ClaimTypes.Role).Select(c => c.Value).ToList(); private static byte[] getBase64WithoutPadding(string base64) { switch (base64.Length % 4) { case 2: base64 += "=="; break; case 3: base64 += "="; break; } return Convert.FromBase64String(base64); } private static bool getIsExpired(DateTime? expirationDateUtc) => !expirationDateUtc.HasValue || !(expirationDateUtc.Value > DateTime.UtcNow); private static DateTime? getDateUtc(IList<Claim> claims, string type) { var exp = claims.SingleOrDefault(claim => claim.Type == type); if (exp == null) { return null; } var expValue = getTimeValue(exp.Value); if (expValue == null) { return null; } var dateTimeEpoch = new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc); return dateTimeEpoch.AddSeconds(expValue.Value); } private static long? getTimeValue(string claimValue) { if (long.TryParse(claimValue, out long resultLong)) return resultLong; if (float.TryParse(claimValue, out float resultFloat)) return (long)resultFloat; if (double.TryParse(claimValue, out double resultDouble)) return (long)resultDouble; return null; } } }
پروژه Smart Table
Smart table is an Angularjs module to easily display data in a table