معرفی DNTProfiler
- استثناءها را با تصویر ارائه ندهید. اصل متنی استثناء، بهتر قابلیت پیگیری دارد.
خطاهای برنامه در فایل متنی به نام ErrorsLog.Log در کنار فایل اجرایی برنامه ثبت میشوند.
- سورس را اجرا کردید یا اصل برنامهی توزیع شده را؟ به نظر سورس را اجرا کردهاید. آیا بستههای نیوگت آنرا به درستی بازیابی کردهاید؟ آیا از فایل Microsoft.SqlServer.TransactSql.ScriptDom با شماره نگارش صحیحی استفاده میکنید که پیام دادهاست متدهای آن یافت نشدند؟
<package id="Microsoft.SqlServer.TransactSql.ScriptDom" version="12.0.1" targetFramework="net40" />
struct چیست؟
structها مشابه classها هستند با این تفاوت که structها finalizer ندارند و از ارث بری پشتیبانی نمیکنند. structها کاملا مشابه classها تعریف میشوند و در تعریف آنها از کلمه کلیدی struct استفاده میشود. آنها شامل فیلدها، متدها، خصوصیتها نیز میشوند. در زیر نحوه تعریف آن را مشاهده میکنید:
struct Point { private int x, y; // private fields public Point (int x, int y) // constructor { this.x = x; this.y = y; } public int X // property { get {return x;} set {x = value;} } public int Y { get {return y;} set {y = value;} } }
value type و reference type
تفاوت دیگری که بین class و struct، از اهمیت ویژهای برخوردار است آن است که classها reference-type و structها value-type هستند و در زمان اجرا با آنها متفاوت رفتار میشود و در ادامه به تشریح آن میپردازیم.
Point p1 = new Point(); // Point is a *struct* Form f1 = new Form(); // Form is a *class*
Form f1; // Allocate the reference f1 = new Form(); // Allocate the object
Point p2 = p1; Form f2 = f1;
Point myPoint = new Point (0, 0); // a new value-type variable Form myForm = new Form(); // a new reference-type variable Test (myPoint, myForm); // Test is a method defined below void Test (Point p, Form f) { p.X = 100; // No effect on MyPoint since p is a copy f.Text = "Hello, World!"; // This will change myForm’s caption since // myForm and f point to the same object f = null; // No effect on myForm }
Point myPoint = new Point (0, 0); // a new value-type variable Form myForm = new Form(); // a new reference-type variable Test (ref myPoint, ref myForm); // pass myPoint and myForm by reference void Test (ref Point p, ref Form f) { p.X = 100; // This will change myPoint’s position f.Text = “Hello, World!”; // This will change MyForm’s caption f = null; // This will nuke the myForm variable! }
تخصیص حافظه
CLR اشیاء را در دو قسمت ذخیره میکند:
- stack یا پشته
- heap
void CreateNewTextBox() { TextBox myTextBox = new TextBox(); // TextBox is a class }
پشته همیشه برای ذخیره سازی موارد زیر استفاده میشود:
- قسمت reference متغیرهای محلی و پارامترهای از نوع reference-typed (مانند myTextBox)
- متغیرهای محلی و پارامترهای متد از نوع value-typed (مانند integer, bool, char, DateTime و ...)
- محتویات شیء از نوع reference-typed
- هر چیزی که قرار است در شیء از نوع reference-typed ذخیره شود.
آزادسازی حافظه در heap
در کد بالا وقتی اجرای متد CreateNewTextBox به اتمام برسد متغیر myTextBox از دید (Scope) خارج میشود. بنابراین از پشته نیز خارج میشود ولی با خارج شدن myTextBox از پشته چه اتفاقی برای TextBox object رخ خواهد داد؟! پاسخ در garbage-collector نهفته است. garbage-collector بصورت خودکار عملیات پاکسازی heap را انجام میدهد و اشیائی که اشاره گر معتبر ندارند را حذف مینماید. در حالت کلی اگر شیء از حافظه خارج شد باید منابع سایر قسمتهای اشغال شده توسط آن هم آزاد شود، که این آزاد سازی بعهده garbage-collector است.
حال آزاد سازی برای کلاسهایی که اینترفیس IDisposable را پیاده سازی میکنند به دو صورت انجام میشود:
- دستی: با فراخوانی متد Dispose میسر است.
- خودکار: افزودن شیء به Net Container. مانند Form, Panel, TabPage یا UserControl. این نگهدارندها این اطمینان را به ما میدهند در صورتیکه آنها از حافظه خارج شدند کلیه عضوهای آن هم از حافظه خارج شوند.
برای آزادسازی دستی میتوانیم مانند کدهای زیر عمل کنیم:
using (Stream s = File.Create ("myfile.txt")) { ... }
Stream s = File.Create ("myfile.txt"); try { ... } finally { if (s != null) s.Dispose(); }
مثالی از Windows Forms
فرض کنید قصد داریم فونت و اندازه یک ویندوز فرم را تغییر دهیم.
Size s = new Size (100, 100); // struct = value type Font f = new Font (“Arial”,10); // class = reference type Form myForm = new Form(); myForm.Size = s; myForm.Font = f;
همانطور که مشاهد میکنید محتویات s و آدرس f را در Form object ذخیره کرده ایم که نشان میدهد تغییر در s برروی فرم تغییر ایجاد نمیکند ولی تغییر در f باعث ایجاد تغییر فرم میشود. Form object دو اشاره گر به Font object دارد.
In-Line Allocation (تخصیص درجا)
در قبل گفته شد برای ذخیره متغیرهای محلی از نوع value-typed از پشته استفاده میشود آیا شیء Size جدید هم در پشته ذخیره میشود؟ خیر، بدلیل اینکه آن متغیر محلی نیست و در شیء دیگر ذخیره میشود (در مثال بالا در یک فرم ذخیره شده است) که آن شیء هم در heap ذخیره شده است پس شیء جدید Size هم در heap ذخیر میشود که به این نوع ذخیره سازی In-Line گفته میشود.
تله (Trap)
فرض کنید کلاس Form بشکل زیر تعریف شده است:
class Form { // Private field members Size size; Font font; // Public property definitions public Size Size { get { return size; } set { size = value; fire resizing events } } public Font Font { get { return font; } set { font = value; } } }
myForm.ClientSize.Height = myForm.ClientSize.Height * 2;
Cannot modify the return value of 'System.Windows.Forms.Form.ClientSize' because it is not a variable
برای توضیح بیشتر میتوانید به این سوال مراجعه کنید و در تکمیل آن این لینک را هم بررسی کنید.
پس بنابراین کد بالا را به کد زیر اصلاح میکنیم:
myForm.ClientSize = new Size (myForm.ClientSize.Width, myForm.ClientSize.Height * 2);
- یک اپلیکیشن جدید ASP.NET MVC با تنظیمات Individual User Accounts بسازید.
- احراز هویت فیسبوک را توسط کلید هایی که از Facebook دریافت کرده اید فعال کنید. برای اطلاعات بیشتر در این باره میتوانید به این لینک مراجعه کنید.
- برای درخواست اطلاعات بیشتر از فیسبوک، فایل Startup.Auth.cs را مطابق لیست زیر ویرایش کنید.
List<string> scope = newList<string>() { "email", "user_about_me", "user_hometown", "friends_about_me", "friends_photos" }; var x = newFacebookAuthenticationOptions(); x.Scope.Add("email"); x.Scope.Add("friends_about_me"); x.Scope.Add("friends_photos"); x.AppId = "636919159681109"; x.AppSecret = "f3c16511fe95e854cf5885c10f83f26f"; x.Provider = newFacebookAuthenticationProvider() { OnAuthenticated = async context => { //Get the access token from FB and store it in the database and //use FacebookC# SDK to get more information about the user context.Identity.AddClaim( new System.Security.Claims.Claim("FacebookAccessToken", context.AccessToken)); } }; x.SignInAsAuthenticationType = DefaultAuthenticationTypes.ExternalCookie; app.UseFacebookAuthentication(x);
<li> @Html.ActionLink("FacebookInfo", "FacebookInfo","Account") </li>
// // GET: /Account/LinkLoginCallback publicasyncTask<ActionResult> LinkLoginCallback() { var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync(XsrfKey, User.Identity.GetUserId()); if (loginInfo == null) { return RedirectToAction("Manage", new { Message = ManageMessageId.Error }); } var result = await UserManager.AddLoginAsync(User.Identity.GetUserId(), loginInfo.Login); if (result.Succeeded) { var currentUser = await UserManager.FindByIdAsync(User.Identity.GetUserId()); //Add the Facebook Claim await StoreFacebookAuthToken(currentUser); return RedirectToAction("Manage"); } return RedirectToAction("Manage", new { Message = ManageMessageId.Error }); }
[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl) { if (User.Identity.IsAuthenticated) { return RedirectToAction("Manage"); } if (ModelState.IsValid) { // Get the information about the user from the external login provider var info = await AuthenticationManager.GetExternalLoginInfoAsync(); if (info == null) { return View("ExternalLoginFailure"); } var user = newApplicationUser() { UserName = model.Email }; var result = await UserManager.CreateAsync(user); if (result.Succeeded) { result = await UserManager.AddLoginAsync(user.Id, info.Login); if (result.Succeeded) { await StoreFacebookAuthToken(user); await SignInAsync(user, isPersistent: false); return RedirectToLocal(returnUrl); } } AddErrors(result); } ViewBag.ReturnUrl = returnUrl; return View(model); }
// // GET: /Account/ExternalLoginCallback [AllowAnonymous] publicasyncTask<ActionResult> ExternalLoginCallback(string returnUrl) { var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync(); if (loginInfo == null) { return RedirectToAction("Login"); } // Sign in the user with this external login provider if the user already has a login var user = await UserManager.FindAsync(loginInfo.Login); if (user != null) { //Save the FacebookToken in the database if not already there await StoreFacebookAuthToken(user); await SignInAsync(user, isPersistent: false); return RedirectToLocal(returnUrl); } else { // If the user does not have an account, then prompt the user to create an account ViewBag.ReturnUrl = returnUrl; ViewBag.LoginProvider = loginInfo.Login.LoginProvider; return View("ExternalLoginConfirmation", newExternalLoginConfirmationViewModel { Email = loginInfo.Email }); } }
privateasyncTask StoreFacebookAuthToken(ApplicationUser user) { var claimsIdentity = await AuthenticationManager.GetExternalIdentityAsync(DefaultAuthenticationTypes.ExternalCookie); if (claimsIdentity != null) { // Retrieve the existing claims for the user and add the FacebookAccessTokenClaim var currentClaims = await UserManager.GetClaimsAsync(user.Id); var facebookAccessToken = claimsIdentity.FindAll("FacebookAccessToken").First(); if (currentClaims.Count() <=0 ) { await UserManager.AddClaimAsync(user.Id, facebookAccessToken); }
public class FacebookViewModel { [Required] [Display(Name = "Friend's name")] public string Name { get; set; } public string ImageURL { get; set; } }
//GET: Account/FacebookInfo [Authorize] publicasyncTask<ActionResult> FacebookInfo() { var claimsforUser = await UserManager.GetClaimsAsync(User.Identity.GetUserId()); var access_token = claimsforUser.FirstOrDefault(x => x.Type == "FacebookAccessToken").Value; var fb = newFacebookClient(access_token); dynamic myInfo = fb.Get("/me/friends"); var friendsList = newList<FacebookViewModel>(); foreach (dynamic friend in myInfo.data) { friendsList.Add(newFacebookViewModel() { Name = friend.name, ImageURL = @"https://graph.facebook.com/" + friend.id + "/picture?type=large" }); } return View(friendsList); }
@model IList<WebApplication96.Models.FacebookViewModel> @if (Model.Count > 0) { <h3>List of friends</h3> <div class="row"> @foreach (var friend in Model) { <div class="col-md-3"> <a href="#" class="thumbnail"> <img src=@friend.ImageURL alt=@friend.Name /> </a> </div> } </div> }
این یک مثال ساده از کار کردن با تامین کنندگان اجتماعی بود. همانطور که مشاهده میکنید، براحتی میتوانید دادههای بیشتری برای کاربر جاری درخواست کنید و تجربه کاربری و امکانات بسیار بهتری را در اپلیکیشن خود فراهم کنید.
AngularJS #2
Install-Package angularjs
<!DOCTYPE html> <html ng-app> <head> <title>Sample 1</title> </head> <body> <div ng-controller="GreetingController"> <p>{{greeting.text}}, World!</p> </div> <script src="../Scripts/angular.js"></script> <script> function GreetingController($scope) { $scope.greeting = { text: "Hello" }; } </script> </body> </html>
پیشنیاز: ایجاد یک برنامهی خالی React و ASP.NET Core
یک پوشهی خالی را ایجاد کرده و در آن دستور dotnet new react را صادر کنید، تا قالب خاص پروژههای React یکی سازی شدهی با پروژههای ASP.NET Core، یک پروژهی جدید را ایجاد کند.
همانطور که در تصویر فوق نیز مشاهده میکنید، این پروژه از دو برنامه تشکیل شدهاست:
الف) برنامهی SPA که در پوشهی ClientApp قرار گرفتهاست و شامل کدهای کامل یک برنامهی React است.
ب) برنامهی سمت سرور ASP.NET Core که یک برنامهی متداول وب، به همراه فایل Startup.cs و سایر فایلهای مورد نیاز آن است.
در ادامه نکات ویژهی ساختار این پروژه را بررسی خواهیم کرد.
تجربهی توسعهی برنامهها توسط این قالب ویژه
اکنون اگر این پروژهی وب را برای مثال با فشردن دکمهی F5 و یا اجرای دستور dotnet run، اجرا کنیم، چه اتفاقی رخ میدهد؟
- به صورت خلاصه برنامهی ASP.NET Core شروع به کار کرده و سبب ارائه همزمان برنامهی SPA نیز خواهد شد.
- پورتی که برنامهی وب بر روی آن قرار دارد، با پورتی که برنامهی React بر روی روی آن ارائه میشود، یکی است. یعنی نیازی به تنظیمات CORS را ندارد.
- در این حالت اگر در برنامهی React تغییری را ایجاد کنیم (در هر قسمتی از آن)، hot reloading آن هنوز هم برقرار است و سبب بارگذاری مجدد برنامهی SPA در مرورگر خواهد شد و برای اینکار نیازی به توقف و راه اندازی مجدد برنامهی ASP.NET Core نیست.
اما این تجربهی روان کاربری و توسعه، چگونه حاصل شدهاست؟
بررسی ساختار فایل Startup.cs یک پروژهی مبتنی بر dotnet new react
برای درک نحوهی عملکرد این قالب ویژه، نیاز است از فایل Startup.cs آن شروع کرد.
// ... using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; namespace dotnet_template_sample { public class Startup { // ... public void ConfigureServices(IServiceCollection services) { services.AddControllersWithViews(); // In production, the React files will be served from this directory services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/build"; }); }
<ItemGroup> <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.2" /> </ItemGroup>
در متد ConfigureServices، ثبت سرویسهای مرتبط با فایلهای استاتیک پروژهی SPA، توسط متد AddSpaStaticFiles صورت گرفتهاست. در اینجا RootPath آن، به پوشهی ClientApp/build اشاره میکند. البته این پوشه هنوز در این ساختار، قابل مشاهده نیست؛ اما زمانیکه پروژهی ASP.NET Core را برای ارائهی نهایی، publish کردیم، به صورت خودکار ایجاد شده و حاوی فایلهای قابل ارائهی برنامهی React نیز خواهد بود.
قسمت مهم دیگر کلاس آغازین برنامه، متد Configure آن است:
// ... using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; namespace dotnet_template_sample { public class Startup { // ... public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { // ... app.UseStaticFiles(); app.UseSpaStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller}/{action=Index}/{id?}"); }); app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; if (env.IsDevelopment()) { spa.UseReactDevelopmentServer(npmScript: "start"); } }); } } }
- متد UseSpaStaticFiles، سبب ثبت میانافزاری میشود که امکان دسترسی به فایلهای استاتیک پوشهی ClientApp حاوی برنامهی React را میسر میکند؛ مسیر این پوشه را در متد ConfigureServices تنظیم کردیم.
- متد UseSpa، سبب ثبت میانافزاری میشود که دو کار مهم را انجام میدهد:
1- کار اصلی آن، ثبت مسیریابی معروف catch all است تا مسیریابیهایی را که توسط کنترلرهای برنامهی ASP.NET Core مدیریت نمیشوند، به سمت برنامهی React هدایت کند. برای مثال مسیر https://localhost:5001/api/users به یک کنترلر API برنامهی سمت سرور ختم میشود، اما سایر مسیرها مانند https://localhost:5001/login قرار است صفحهی login برنامهی سمت کلاینت SPA را نمایش دهند و متناظر با اکشن متد خاصی در کنترلرهای برنامهی وب ما نیستند. در این حالت، کار این مسیریابی catch all، نمایش صفحهی پیشفرض برنامهی SPA است.
2- بررسی میکند که آیا شرایط IsDevelopment برقرار است؟ آیا در حال توسعهی برنامه هستیم؟ اگر بله، میانافزار دیگری را به نام UseReactDevelopmentServer، اجرا و ثبت میکند.
برای درک عملکرد میانافزار ReactDevelopmentServer نیاز است به سورس آن مراجعه کرد. این میانافزار بر اساس پارامتر start ای که دریافت میکند، سبب اجرای npm run start خواهد شد. به این ترتیب دیگر نیازی به اجرای جداگانهی این دستور نخواهد بود و همچنین این اجرا، به همراه تنظیمات proxy مخصوصی نیز هست تا پورت اجرایی برنامهی React و برنامهی ASP.NET Core یکی شده و دیگر نیازی به تنظیمات CORS مخصوص برنامههای React نباشد. بنابراین hot reloading ای که از آن صحبت شد، توسط ASP.NET Core مدیریت نمیشود. در پشت صحنه همان npm run start اصلی برنامههای React، در حال اجرای وب سرور آزمایشی React است که از hot reloading پشتیبانی میکند.
یک مشکل: با این تنظیم، هربار که برنامهی ASP.NET Core اجرا میشود (به علت تغییرات در کدها و فایلهای پروژه)، سبب اجرای مجدد و پشت صحنهی react development server نیز خواهد شد که ... آغاز برنامه را در حالت توسعه، کند میکند. برای رفع این مشکل میتوان این وب سرور توسعهی برنامههای React را به صورت جداگانهای اجرا کرد و فقط تنظیمات پروکسی آنرا در اینجا ذکر نمود:
// replace spa.UseReactDevelopmentServer(npmScript: "start"); // with spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
تغییرات ویژهی فایل csproj برنامه
اگر به فایل csproj برنامه دقت کنیم، دو تغییر جدید نیز در آن قابل مشاهده هستند:
الف) نصب خودکار وابستگیهای برنامهی client
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') "> <!-- Ensure Node.js is installed --> <Exec Command="node --version" ContinueOnError="true"> <Output TaskParameter="ExitCode" PropertyName="ErrorCode" /> </Exec> <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." /> <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." /> <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" /> </Target>
ب) یکی کردن تجربهی publish برنامهی ASP.NET Core با publish پروژههای React
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish"> <!-- As part of publishing, ensure the JS resources are freshly built in production mode --> <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" /> <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" /> <!-- Include the newly-built files in the publish output --> <ItemGroup> <DistFiles Include="$(SpaRoot)build\**" /> <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)"> <RelativePath>%(DistFiles.Identity)</RelativePath> <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory> <ExcludeFromSingleFile>true</ExcludeFromSingleFile> </ResolvedFileToPublish> </ItemGroup> </Target>
- ابتدا npm install را جهت اطمینان از به روز بودن وابستگیهای برنامه مجددا اجرا میکند.
- سپس npm run build را برای تولید فایلهای قابل ارائهی برنامهی React اجرا میکند.
- در آخر تمام فایلهای پوشهی ClientApp/build تولیدی را به بستهی نهایی توزیعی برنامهی ASP.NET Core، اضافه میکند.
احراز هویت و اعتبارسنجی کاربران در برنامههای 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 را اجرا کنید، تا توکن سرور برنامه نیز فعال شود.