اشتراک‌ها
زمان پایان پشتیبانی از نگارش‌های قدیمی‌تر Visual Studio
Visual Studio version End of Mainstream Support End of Support
Visual Studio 2022, Current Channel January 2027 January 2032
   Visual Studio 2022, version 17.0 LTSC n/a July 2023
Visual Studio 2019, version 16.11 April 2024 April 2029
   Visual Studio 2019, version 16.9 n/a October 2022
   Visual Studio 2019, version 16.7 n/a April 2022
Visual Studio 2017, version 15.9 April 2022 April 2027
Visual Studio 2015, Update 3 including KB3165756 October 2020 October 2025
Visual Studio 2013, Update 5 April 2019 April 2024
Visual Studio 2012, Update 5 January 2018 January 2023
Visual Studio 2010 and earlier Out of support Out of support
زمان پایان پشتیبانی از نگارش‌های قدیمی‌تر Visual Studio
اشتراک‌ها
افزونه‌ی Text Sharp

The free Text Sharp extension lets you adjust text clarity in Visual Studio 2015, Visual Studio 2013, Visual Studio 2012 and Visual Studio 2010 IDEs (Professional, Premium, Ultimate and LightSwitch). You can select Aliased, Grayscale or ClearType text rendering mode for Visual Studio menu, tabs and editor windows. An easy way to turn off ClearType. (Aliased rendering looks terrible when text scale is changed from default 100% in text views, so Text Sharp doesn't override VS settings when Aliased+Display is selected and zoom level is not 100%.)

افزونه‌ی Text Sharp
اشتراک‌ها
ارتقاء JavaScript Editor در Visual Studio 2015
JavaScript is an important technology for development on many different platforms, including web, mobile app, and server programming. In Visual Studio 2013 we already support IntelliSense, Go to Definition, colorization, and formatting of JavaScript source, along with several other features. We’ve carried these forward into Visual Studio 2015 and we’ve improved the experience for JavaScript developers by focusing on three key areas:
  1. Improving the development experience when using popular JavaScript libraries
  2. Adding support for new JavaScript ECMAScript 2015 (also known as ES2015 and formerly ES6) language and web browser APIs
  3. Increasing your productivity in complex JavaScript code bases
ارتقاء JavaScript Editor در Visual Studio 2015
نظرات مطالب
اعتبارسنجی مبتنی بر JWT در ASP.NET Core 2.0 بدون استفاده از سیستم Identity
استاندارد آن به این صورت است:
 Its value MUST be a number containing a NumericDate value.
و این NumericDate به نحو زیر باید تعریف شود (Section 2. Terminology):
 A JSON numeric value representing the number of seconds from 1970-01-01T00:00:00Z UTC until the specified UTC date/time, ignoring leap seconds. This is equivalent to the IEEE Std 1003.1, 2013 Edition [POSIX.1] definition "Seconds Since the Epoch", in which each day is accounted for by exactly 86400 seconds, other than that non-integer values can be represented. See RFC 3339 [RFC3339] for details regarding date/times in general and UTC in particular.
نمونه‌ی استفاده‌ی از آن در متد getAccessTokenExpirationDateUtc ارائه شده‌است.  
مطالب
صفحه کلید مجازی برای ورود اطلاعات
همانگونه که اطلاع دارید یکی از روش‌های سرقت اطلاعات استفاده از نرم افزارهای جاسوس صفحه کلید (Key Logger) است، البته ثبت کلید‌های فشرده شده می‌تواند توسط سخت افزارهایی که سر راه سوکت صفحه کلید و کیس قرار می‌گیره، انجام بشه. در صورتی که چنین سخت افزاری (مخصوصا در کافی نت‌ها) روی کامپیوتر کاربر نصب باشه، یا توسط ویروس و بدافزارها اینگونه نرم‌افزارهایی روی سیستم کاربر قرار بگیره هر کلیدی که توسط کاربر روی صفحه کلید فشرده میشه توسط اینها ثبت شده و در موقع مناسب برای فرد سازنده به طریقی (ایمیل یا ارتباط از طریق برنامه‌های مبتنی بر سوکت) حتی بسیاری از این برنامه‌ها پا را فراتر گذاشته و عنوان پنجره ای که کلیدها در آن فشرده شده نیز ثبت می‌شود (توسط توابع API ویندوز- البته اگر دوستان مایل باشن و از نظر مدیریت سایت ایرادی نداشته باشه، نحوه طراحی این نوع برنامه‌های جاسوس سخت افزار، صفحه کلید، یا ماوس آموزش می‌دم توی همین سایت)، حال برای امنیت برنامه‌های تحت وب یا ویندوز چگونه می‌توان در زمان ورود اطلاعات حساس مانند کلمه عبور یا شماره کارت اعتباری این امنیت را برای کاربر ایجاد کرد که داده‌هایش توسط این سخت افزارها یا بدافزار‌ها جایی ثبت نشود؟
بله، حدس شما درست است استفاده از صفحه کلیدهای مجازی میشه گفت یکی از بهترین راه‌های ممکن هست، چون در این روش‌ها کلید به صورت سخت افزاری فشرده نمی‌شود (کلید فشرده شده به صف پیام‌های ویندوز نمی‌رود) در نتیجه نرم افزار‌ها یا سخت افزارهای جاسوس نمی‌توانند این اطلاعات را ثبت کنند. و کاربر با خیال راحت می‌تواند داده‌های خود را وارد نمایند (تاکید می‌کنم این روش فقط جلو این نرم افزارها یا سخت افزارها را می‌گیرد و تضمینی برای اینکه در زمان ارسال داده‌های شما لو نرود ندارد).
خوب حال چه باید کرد؟
یک راه می‌تواند پیاده‌سازی صفحه کلید مجازی با کدهای طرف کلاینت مانند جاوا اسکریپت و وی‌بی اسکریپت است، اما گروهی پلاگینی را توسعه داده‌اند که با چند خط کدنویسی ساده به راحتی می‌توانید یک صفحه کلید مجازی چندزبانه (با هر زبانی که دلتون می‌خواد) داشته باشید و از اون در برنامه‌های خودتون استفاده کنید.

نحوه‌ی نصب:
ایتدا فایل‌های مورد نیاز را از سایت سازنده که شامل فایل جاوا اسکریپت ، فایل استایل و یک تصویر (آخرین نسخه) یا از این آدرس به صورت کامل (در حال حاضر نسخه 1.49) دریافت کرده، پس از دریافت فایل‌ها آنها را در هاست خود بارگزاری (آپلود) نمائید. سپس کدهای زیر را در صفحه‌ای که می‌خواهید صفحه کلید نمایش یابد در بین تگ <head> ... و <head/> قرار دهید.
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
حالا فقط کافی است به inputbox‌ها و یا هر ورودی دیگر خود class=keyboardInput بدهید.
مثال:
<input type="text" value="" class="keyboardInput">
در نهایت کد صفحه شما باید اینگونه باشد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="keyboard.css"/>
</head>
<body>
    <input type="text" value="" class="keyboardInput"/>
</body>
</html>

با این کار پس از اجرای صفحه مورد نظر خروجی شما مانند تصویر زیر خواهد بود، جهت محدود کردن کلیدها و عملیات دلخواه و سفارشی سازی با پارامترهای دلخواه می‌تواند از دموهای موجود در سایت سازنده بهره بگیرید.

موفق وموید باشید.
مطالب
معرفی Selector های CSS - قسمت 7
61- :any-link
تمامی تگ‌هایی را انتخاب می‌کند که می‌توانند نقش لینک را در صفحه ایفا کنند. در واقع تگ‌های a، area و link را انتخاب می‌نماید که دارای ویژگی href هستند و به عنوان لینک عمل می‌کنند.
<style>
    :any-link {
        color: red;
    }
</style>
<a href="page1.htm">Link 1</a>
در مثال فوق، متن Link 1 به رنگ قرمز نمایش می‌یابد.
           Selector  نسخه CSS
No No
No
No No :any-link  4
62- :local-link
تمامی لینک هایی را انتخاب می‌کند که با آدرس صفحه‌ی جاری یکسان می‌باشند.
<style>
    :local-link {
        color: red;
    }
</style>
<a href="http://www.example.com/article/">Link 1</a>
<a href="http://www.example.com/article">Link 2</a>
<a href="http://www.example.com/article/">Link 3</a>
<a href="http://www.example.com/article/12">Link 4</a>
با فرض اینکه آدرس صفحه‌ی جاری http://www.example.com/article/   می باشد مثال فوق را بررسی می‌کنیم. متن Link 1 و Link3 به رنگ قرمز نمایش می‌یابند، زیرا مشابه آدرس صفحه‌ی جاری می‌باشند.
           Selector  نسخه CSS
No No
No
No No :local-link  4 
63- :local-link(n)
تمامی لینک هایی را انتخاب می‌کند که آدرس آنها با آدرس صفحه‌ی جاری یکسان بوده و n بخش از آدرس آنها با بخش‌های آدرس جاری یکسان باشند. در واقع n، تعداد بخش هایی از آدرس لینک را مشخص می‌کند که با بخش‌های آدرس صفحه‌ی جاری مطابقت داشته باشند. در مطابقت آدرس، از scheme، username، password، port، query string و fragment صرف نظر می‌شود تا یکسان بودن آدرس را تشخیص دهد. سپس تشخیص می‌دهد کدام بخش‌های آدرس با هم یکسان می‌باشند. جهت اطلاع باید عرض کنم که شکل کامل یک آدرس به صورت scheme:[//[user:password@]host[:port]][/]path[?querystring][#fragment] می‌باشد.
<style>
    :local-link {
        color: red;
    }
    :local-link(0) {
        text-decoration: none;
    }
    :local-link(1) {
        text-decoration: overline;
    }
    :local-link(2) {
        background: blue;
    }
</style>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com/2016">Link 2</a>
<a href="http://www.example.com/2016/01">Link 3</a>
<a href="http://www.example.com/2016/01/">Link 4</a>
<a href="http://www.example.com/2016/01/02">Link 5</a>
<a href="https://www.example.com/2016/01/">Link 6</a>
<a href="http://example.com/2016/01">Link 7</a>
با فرض اینکه آدرس صفحه‌ی جاری http://www.example.com/2016/01/ می باشد مثال فوق را بررسی میکنیم. Link 1 تحت تاثیر Selector دوم، بدون زیرخط نمایش می‌یابد. Link 2 تحت تاثیر Selector دوم و سوم، بدون زیرخط و با روخط نمایش می‌یابد. Link 3، Link 5 و Link 6 تحت تاثیر Selector دوم و سوم و چهارم، بدون زیرخط، با روخط و پس زمینه‌ی آبی نمایش می‌یابند. Link 6 به دلیل استفاده از https نمی‌تواند تحت تاثیر Selector اول قرار بگیرد. Link 4 تحت تاثیر Selector اول و دوم و سوم و چهارم، به رنگ قرمز، بدون زیرخط، با روخط و پس زمینه‌ی آبی نمایش می‌یابد. Link 7 هم بدون تاثیر هیچ Selector ی بر روی آن، بدون قالب باقی می‌ماند، زیرا قسمت host لینک با آدرس مطابقت ندارد.
           Selector  نسخه CSS
No No
No
No No :local-link(n)  4
64- :active-drop-target
تگی را انتخاب می‌کند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است. به عبارت دیگر، تگی را با عمل drag کشیده ایم و بر روی یک تگ مقصد قرار داده ایم، ولی هنوز عمل drop یا رها کردن صورت نگرفته است.
              Selector  نسخه CSS
No No
No
No No :active-drop-target   4 
65- :valid-drop-target
تگی را انتخاب می‌کند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است و برای عمل drop معتبر می‌باشد. به عبارت دیگر، تگ مقصد امکان پذیرش یک تگ را با عمل Drag & Drop دارد.
              Selector  نسخه CSS
No No
No
No No :valid-drop-target   4 
66- :invalid-drop-target
تگی را انتخاب می‌کند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است و برای عمل drop معتبر نمی‌باشد. به عبارت دیگر، تگ مقصد امکان پذیرش یک تگ را با عمل Drag & Drop ندارد.
              Selector  نسخه CSS
No No
No
No No :invalid-drop-target   4 
<style>
    :active-drop-target {
        background: blue;
    }
    :valid-drop-target {
        border: 1px solid green;
    }
    :invalid-drop-target {
        border: 1px solid red;
    }
    .container {
        width: 200px;
        height: 200px;
    }
</style>
<div class="container"></div>
<img src="image.jpg" draggable="true"/>
در مثال فوق، با Drag نمودن تصویر بر روی تگ div، تحت تاثیر Selector اول، رنگ پس زمینه‌ی div آبی می‌شود. اگر امکان پذیرش img توسط تگ div وجود داشته باشد، کادری سبز رنگ دور تگ div نمایش می‌یابد در غیر اینصورت کادر قرمز رنگ دور آن نمایش خواهد یافت.
67- :current
تگی را انتخاب می‌کند که در حال حاضر در حال نمایش یا ارائه می‌باشد. این Selector در زمان پردازش صوت، تصویر، نمایش زیر نویس و غیره در تگ canvas مورد استفاده قرار می‌گیرد.
              Selector  نسخه CSS
No No
No
No No :current   4 
68- :past
تگی را انتخاب می‌کند که قبل از :current نمایش یافته است.
              Selector  نسخه CSS
No No
No
No No :past   4 
69- :future
تگی را انتخاب می‌کند که بعد از :current نمایش یافته است.
              Selector  نسخه CSS
No No
No
No No :future   4 
هر سه Selector فوق می‌توانند با دریافت آرگومان به صورت مجموعه ای از Selector ها، تگ‌های خاصی را انتخاب کنند یا نتیجه‌ی انتخاب را محدود نمایند. اگر بدون آرگومان به کار روند، تک مورد نظر را بدون در نظر گرفتن محدویت انتخاب می‌نمایند.
<style>
    :past(div,p) {
        background: red;
    }
    :current(div,p) {
        background: green;
    }
    :future(div,p) {
        background: yellow;
    }
</style>
در مثال فوق، تگ‌های div یا p که در حال حاضر در حال نمایش می‌باشند، با پس زمینه‌ی سبز، تگی که قبل از :current نمایش یافته است با پس زمینه‌ی قرمز و تگی که بعد از :current نمایش خواهد یافت با پس زمینه‌ی زرد نمایش می‌یابد.
70- :placeholder-shown
تمامی تگ‌های input و textarea را انتخاب می‌کند که در حال نمایش یا حاوی placeholder می‌باشند و هنوز متنی در آنها وارد نشده است. در حال حاضر به صورت آزمایشی و با vendor prefix قابل استفاده است.
<style>
    :placeholder-shown {
        color: gray;
    }
</style>
<input placeholder="Enter Username"/>
<input placeholder="Enter Password"/>
در مثال فوق، اگر در هر کدام از تگ‌های input، هیچ متنی وارد نشده باشد، متن‌های Enter Username و Enter Password به رنگ طوسی نمایش می‌یابند.
              Selector  نسخه CSS
-webkit- -wekit-
-ms-
-moz- -webkit- :placeholder-shown   4 















مطالب
احراز هویت و اعتبارسنجی کاربران در برنامه‌های Angular - قسمت دوم - سرویس اعتبارسنجی
در قسمت قبل، ساختار ابتدایی کلاینت Angular را تدارک دیدیم. در این قسمت قصد داریم سرویسی که زیر ساخت کامپوننت لاگین و عملیات ورود به سیستم را تامین می‌کند، تکمیل کنیم.


تعریف تزریق وابستگی تنظیمات برنامه

در مطلب «تزریق وابستگی‌ها فراتر از کلاس‌ها در برنامه‌های Angular» با روش تزریق ثوابت برنامه آشنا شدیم. در این مثال، برنامه‌ی کلاینت بر روی پورت 4200 اجرا می‌شود و برنامه‌ی سمت سرور وب، بر روی پورت 5000. به همین جهت نیاز است این آدرس پایه سمت سرور را در تمام قسمت‌های برنامه که با سرور کار می‌کنند، در دسترس داشته باشیم و روش مناسب برای پیاده سازی آن همان قسمت «تزریق تنظیمات برنامه توسط تامین کننده‌ی مقادیر» مطلب یاد شده‌است. به همین جهت فایل جدید src\app\core\services\app.config.ts را در پوشه‌ی core\services برنامه ایجاد می‌کنیم:
import { InjectionToken } from "@angular/core";

export let APP_CONFIG = new InjectionToken<string>("app.config");

export interface IAppConfig {
  apiEndpoint: string;
  loginPath: string;
  logoutPath: string;
  refreshTokenPath: string;
  accessTokenObjectKey: string;
  refreshTokenObjectKey: string;
}

export const AppConfig: IAppConfig = {
  apiEndpoint: "http://localhost:5000/api",
  loginPath: "account/login",
  logoutPath: "account/logout",
  refreshTokenPath: "account/RefreshToken",
  accessTokenObjectKey: "access_token",
  refreshTokenObjectKey: "refresh_token"
};
در اینجا APP_CONFIG یک توکن منحصربفرد است که از آن جهت یافتن مقدار AppConfig که از نوع اینترفیس IAppConfig تعریف شده‌است، در سراسر برنامه استفاده خواهیم کرد.
سپس تنظیمات ابتدایی تزریق وابستگی‌های IAppConfig را در فایل src\app\core\core.module.ts به صورت ذیل انجام می‌دهیم:
import { AppConfig, APP_CONFIG } from "./app.config";

@NgModule({
  providers: [
    { provide: APP_CONFIG, useValue: AppConfig }
  ]
})
export class CoreModule {}
اکنون هر سرویس و یا کامپوننتی در سراسر برنامه که نیاز به تنظیمات AppConfig را داشته باشد، کافی است با استفاده از ویژگی Inject(APP_CONFIG)@ آن‌را درخواست کند.


طراحی سرویس Auth

پس از لاگین باید بتوان به اطلاعات اطلاعات کاربر وارد شده‌ی به سیستم، در تمام قسمت‌های برنامه دسترسی پیدا کرد. به همین جهت نیاز است این اطلاعات را در یک سرویس سراسری singleton قرار داد تا همواره یک وهله‌ی از آن در کل برنامه قابل استفاده باشد. مرسوم است این سرویس را AuthService بنامند. بنابراین محل قرارگیری این سرویس سراسری در پوشه‌ی Core\services و محل تعریف آن در قسمت providers آن خواهد بود. به همین جهت ابتدا ساختار این سرویس را با دستور ذیل ایجاد می‌کنیم:
 ng g s Core/services/Auth
با این خروجی:
   create src/app/Core/services/auth.service.ts (110 bytes)
و سپس تعریف آن‌را به مدخل providers ماژول Core اضافه می‌کنیم:
import { AuthService } from "./services/auth.service";

@NgModule({
  providers: [
    // global singleton services of the whole app will be listed here.
    BrowserStorageService,
    AuthService,
    { provide: APP_CONFIG, useValue: AppConfig }
  ]
})
export class CoreModule {}

در ادامه به تکمیل AuthService خواهیم پرداخت و قسمت‌های مختلف آن‌را مرور می‌کنیم.


اطلاع رسانی به کامپوننت Header در مورد وضعیت لاگین

در مطلب «صدور رخدادها از سرویس‌ها به کامپوننت‌ها در برنامه‌های Angular» با نحوه‌ی کار با BehaviorSubject آشنا شدیم. در اینجا می‌خواهیم توسط آن، پس از لاگین موفق، وضعیت لاگین را به کامپوننت هدر صادر کنیم، تا لینک لاگین را مخفی کرده و لینک خروج از سیستم را نمایش دهد:
import { BehaviorSubject } from "rxjs/BehaviorSubject";

@Injectable()
export class AuthService {

  private authStatusSource = new BehaviorSubject<boolean>(false);
  authStatus$ = this.authStatusSource.asObservable();

  constructor() {
    this.updateStatusOnPageRefresh();
  }

  private updateStatusOnPageRefresh(): void {
    this.authStatusSource.next(this.isLoggedIn());
  }
اکنون تمام کامپوننت‌های برنامه می‌توانند مشترک $authStatus شده و همواره آخرین وضعیت لاگین را دریافت کنند و نسبت به تغییرات آن عکس العمل نشان دهند (برای مثال قسمتی را نمایش دهند و یا قسمتی را مخفی کنند).
در اینجا در سازنده‌ی کلاس، بر اساس خروجی متد وضعیت لاگین شخص، برای اولین بار، متد next این BehaviorSubject فراخوانی می‌شود. علت قرار دادن این متد در سازنده‌ی کلاس سرویس، عکس العمل نشان دادن به refresh کامل صفحه، توسط کاربر است و یا عکس العمل نشان دادن به وضعیت به‌خاطر سپاری کلمه‌ی عبور، در اولین بار مشاهده‌ی سایت و برنامه. در این حالت متد isLoggedIn، کش مرورگر را بررسی کرده و با واکشی توکن‌ها و اعتبارسنجی آن‌ها، گزارش وضعیت لاگین را ارائه می‌دهد. پس از آن، خروجی آن (true/false) به مشترکین اطلاع رسانی می‌شود.
در ادامه، متد next این  BehaviorSubject را در متدهای login و logout نیز فراخوانی خواهیم کرد.


تدارک ذخیره سازی توکن‌ها در کش مرورگر

از طرف سرور، دو نوع توکن access_token و refresh_token را دریافت می‌کنیم. به همین جهت یک enum را جهت مشخص سازی آن‌ها تعریف خواهیم کرد:
export enum AuthTokenType {
   AccessToken,
   RefreshToken
}
سپس باید این توکن‌ها را پس از لاگین موفق در کش مرورگر ذخیره کنیم که با مقدمات آن در مطلب «ذخیره سازی اطلاعات در مرورگر توسط برنامه‌های Angular» پیشتر آشنا شدیم. از همان سرویس BrowserStorageService مطلب یاد شده، در اینجا نیز استفاده خواهیم کرد:
import { BrowserStorageService } from "./browser-storage.service";

export enum AuthTokenType {
  AccessToken,
  RefreshToken
}

@Injectable()
export class AuthService {

  private rememberMeToken = "rememberMe_token";

  constructor(private browserStorageService: BrowserStorageService) {  }

  rememberMe(): boolean {
    return this.browserStorageService.getLocal(this.rememberMeToken) === true;
  }

  getRawAuthToken(tokenType: AuthTokenType): string {
    if (this.rememberMe()) {
      return this.browserStorageService.getLocal(AuthTokenType[tokenType]);
    } else {
      return this.browserStorageService.getSession(AuthTokenType[tokenType]);
    }
  }

  deleteAuthTokens() {
    if (this.rememberMe()) {
      this.browserStorageService.removeLocal(AuthTokenType[AuthTokenType.AccessToken]);
      this.browserStorageService.removeLocal(AuthTokenType[AuthTokenType.RefreshToken]);
    } else {
      this.browserStorageService.removeSession(AuthTokenType[AuthTokenType.AccessToken]);
      this.browserStorageService.removeSession(AuthTokenType[AuthTokenType.RefreshToken]);
    }
    this.browserStorageService.removeLocal(this.rememberMeToken);
  }

  private setLoginSession(response: any): void {
    this.setToken(AuthTokenType.AccessToken, response[this.appConfig.accessTokenObjectKey]);
    this.setToken(AuthTokenType.RefreshToken, response[this.appConfig.refreshTokenObjectKey]);
  }

  private setToken(tokenType: AuthTokenType, tokenValue: string): void {
    if (this.rememberMe()) {
      this.browserStorageService.setLocal(AuthTokenType[tokenType], tokenValue);
    } else {
      this.browserStorageService.setSession(AuthTokenType[tokenType], tokenValue);
    }
  }
}
ابتدا سرویس BrowserStorageService به سازنده‌ی کلاس تزریق شده‌است و سپس نیاز است بر اساس گزینه‌ی «به‌خاطر سپاری کلمه‌ی عبور»، نسبت به انتخاب محل ذخیره سازی توکن‌ها اقدام کنیم. اگر گزینه‌ی rememberMe توسط کاربر در حین لاگین انتخاب شود، از local storage ماندگار و اگر خیر، از session storage فرار مرورگر برای ذخیره سازی توکن‌ها و سایر اطلاعات مرتبط استفاده خواهیم کرد.


- متد rememberMe مشخص می‌کند که آیا وضعیت به‌خاطر سپاری کلمه‌ی عبور توسط کاربر انتخاب شده‌است یا خیر؟ این مقدار را نیز در local storage ماندگار ذخیره می‌کنیم تا در صورت بستن مرورگر و مراجعه‌ی مجدد به آن، در دسترس باشد و به صورت خودکار پاک نشود.
- متد setToken، بر اساس وضعیت rememberMe، مقادیر توکن‌های دریافتی از سرور را در local storage و یا session storage ذخیره می‌کند.
- متد getRawAuthToken بر اساس یکی از مقادیر enum ارسالی به آن، مقدار خام access_token و یا refresh_token ذخیره شده را بازگشت می‌دهد.
- متد deleteAuthTokens جهت حذف تمام توکن‌های ذخیره شده‌ی توسط برنامه استفاده خواهد شد. نمونه‌ی کاربرد آن در متد logout است.
- متد setLoginSession پس از لاگین موفق فراخوانی می‌شود. کار آن ذخیره سازی توکن‌های دریافتی از سرور است. فرض آن نیز بر این است که خروجی json از طرف سرور، توکن‌ها را با کلیدهایی دقیقا مساوی access_token و refresh_token بازگشت می‌دهد:
 {"access_token":"...","refresh_token":"..."}
اگر این کلیدها در برنامه‌ی شما نام دیگری را دارند، محل تغییر آن‌ها در فایل app.config.ts است.


تکمیل متد ورود به سیستم

در صفحه‌ی لاگین، کاربر نام کاربری، کلمه‌ی عبور و همچنین گزینه‌ی «به‌خاطر سپاری ورود» را باید تکمیل کند. به همین جهت اینترفیسی را برای این کار به نام Credentials در محل src\app\core\models\credentials.ts ایجاد می‌کنیم:
export interface Credentials {
   username: string;
   password: string;
   rememberMe: boolean;
}
پس از آن در متد لاگین از این اطلاعات جهت دریافت توکن‌های دسترسی و به روز رسانی، استفاده خواهیم کرد:
@Injectable()
export class AuthService {
  constructor(
    @Inject(APP_CONFIG) private appConfig: IAppConfig,
    private http: HttpClient,
    private browserStorageService: BrowserStorageService   
  ) {
    this.updateStatusOnPageRefresh();
  }

  login(credentials: Credentials): Observable<boolean> {
    const headers = new HttpHeaders({ "Content-Type": "application/json" });
    return this.http
      .post(`${this.appConfig.apiEndpoint}/${this.appConfig.loginPath}`, credentials, { headers: headers })
      .map((response: any) => {
        this.browserStorageService.setLocal(this.rememberMeToken, credentials.rememberMe);
        if (!response) {
          this.authStatusSource.next(false);
          return false;
        }
        this.setLoginSession(response);
        this.authStatusSource.next(true);
        return true;
      })
      .catch((error: HttpErrorResponse) => Observable.throw(error));
  }
}
متد login یک Observable از نوع boolean را بازگشت می‌دهد. به این ترتیب می‌توان مشترک آن شد و در صورت دریافت true یا اعلام لاگین موفق، کاربر را به صفحه‌ای مشخص هدایت کرد.
در اینجا نیاز است اطلاعات شیء Credentials را به مسیر http://localhost:5000/api/account/login ارسال کنیم. به همین جهت نیاز به سرویس IAppConfig تزریق شده‌ی در سازنده‌ی کلاس وجود دارد تا با دسترسی به this.appConfig.apiEndpoint، مسیر تنظیم شده‌ی در فایل src\app\core\services\app.config.ts را دریافت کنیم.
پس از لاگین موفق:
- ابتدا وضعیت rememberMe انتخاب شده‌ی توسط کاربر را در local storage مرورگر جهت مراجعات آتی ذخیره می‌کنیم.
- سپس متد setLoginSession، توکن‌های دریافتی از شیء response را بر اساس وضعیت rememberMe در local storage ماندگار و یا session storage فرار، ذخیره می‌کند.
- در آخر با فراخوانی متد next مربوط به authStatusSource با پارامتر true، به تمام کامپوننت‌های مشترک به این سرویس اعلام می‌کنیم که وضعیت لاگین موفق بوده‌است و اکنون می‌توانید نسبت به آن عکس العمل نشان دهید.


تکمیل متد خروج از سیستم

کار خروج، با فراخوانی متد logout صورت می‌گیرد:
@Injectable()
export class AuthService {

  constructor(
    @Inject(APP_CONFIG) private appConfig: IAppConfig,
    private http: HttpClient,
    private router: Router
  ) {
    this.updateStatusOnPageRefresh();
  }

  logout(navigateToHome: boolean): void {
    this.http
      .get(`${this.appConfig.apiEndpoint}/${this.appConfig.logoutPath}`)
      .finally(() => {
        this.deleteAuthTokens();
        this.unscheduleRefreshToken();
        this.authStatusSource.next(false);
        if (navigateToHome) {
          this.router.navigate(["/"]);
        }
      })
      .map(response => response || {})
      .catch((error: HttpErrorResponse) => Observable.throw(error))
      .subscribe(result => {
        console.log("logout", result);
      });
  }
}
در اینجا در ابتدا متد logout سمت سرور که در مسیر http://localhost:5000/api/account/logout قرار دارد فراخوانی می‌شود. پس از آن در پایان کار در متد finally (چه عملیات فراخوانی logout سمت سرور موفق باشد یا خیر)، ابتدا توسط متد deleteAuthTokens تمام توکن‌ها و اطلاعات ذخیره شده‌ی در مرورگر حذف می‌شوند. در ادامه با فراخوانی متد next مربوط به authStatusSource با مقدار false، به تمام مشترکین سرویس جاری اعلام می‌کنیم که اکنون وقت عکس العمل نشان دادن به خروجی سیستم و به روز رسانی رابط کاربری است. همچنین اگر پارامتر navigateToHome نیز مقدار دهی شده بود، کاربر را به صفحه‌ی اصلی برنامه هدایت می‌کنیم.


اعتبارسنجی وضعیت لاگین و توکن‌های ذخیره شده‌ی در مرورگر

برای اعتبارسنجی access token دریافتی از طرف سرور، نیاز به بسته‌ی jwt-decode است. به همین جهت دستور ذیل را در خط فرمان صادر کنید تا بسته‌ی آن به پروژه اضافه شود:
 > npm install jwt-decode --save
در ادامه برای استفاده‌ی از آن، ابتدا بسته‌ی آن‌را import می‌کنیم:
 import * as jwt_decode from "jwt-decode";
و سپس توسط متد jwt_decode آن می‌توان به اصل اطلاعات توکن دریافتی از طرف سرور، دسترسی یافت:
  getDecodedAccessToken(): any {
    return jwt_decode(this.getRawAuthToken(AuthTokenType.AccessToken));
  }
این توکن خام، پس از decode، یک چنین فرمت نمونه‌ای را دارد که در آن، شماره‌ی کاربری (nameidentifier)، نام کاربری (name)، نام نمایشی کاربر (DisplayName)، نقش‌های او (قسمت role) و اطلاعات تاریخ انقضای توکن (خاصیت exp)، مشخص هستند:
{
  "jti": "d1272eb5-1061-45bd-9209-3ccbc6ddcf0a",
  "iss": "http://localhost/",
  "iat": 1513070340,
  "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier": "1",
  "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name": "Vahid",
  "DisplayName": "وحید",
  "http://schemas.microsoft.com/ws/2008/06/identity/claims/serialnumber": "709b64868a1d4d108ee58369f5c3c1f3",
  "http://schemas.microsoft.com/ws/2008/06/identity/claims/userdata": "1",
  "http://schemas.microsoft.com/ws/2008/06/identity/claims/role": [
    "Admin",
    "User"
  ],
  "nbf": 1513070340,
  "exp": 1513070460,
  "aud": "Any"
}
برای مثال اگر خواستیم به خاصیت DisplayName این شیء decode شده دسترسی پیدا کنیم، می‌توان به صورت ذیل عمل کرد:
  getDisplayName(): string {
    return this.getDecodedAccessToken().DisplayName;
  }
و یا خاصیت exp آن، بیانگر تاریخ انقضای توکن است. برای تبدیل آن به نوع Date، ابتدا باید به این خاصیت در توکن decode شده دسترسی یافت و سپس توسط متد setUTCSeconds آن‌را تبدیل به نوع Date کرد:
  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;
  }
اکنون که به این تاریخ انقضای توکن دسترسی یافتیم، می‌توان از آن جهت تعیین اعتبار توکن ذخیره شده‌ی در مرورگر، استفاده کرد:
  isAccessTokenTokenExpired(): boolean {
    const expirationDateUtc = this.getAccessTokenExpirationDateUtc();
    if (!expirationDateUtc) {
      return true;
    }
    return !(expirationDateUtc.valueOf() > new Date().valueOf());
  }
و در آخر متد isLoggedIn که وضعیت لاگین بودن کاربر جاری را مشخص می‌کند، به صورت ذیل تعریف می‌شود:
  isLoggedIn(): boolean {
    const accessToken = this.getRawAuthToken(AuthTokenType.AccessToken);
    const refreshToken = this.getRawAuthToken(AuthTokenType.RefreshToken);
    const hasTokens = !this.isEmptyString(accessToken) && !this.isEmptyString(refreshToken);
    return hasTokens && !this.isAccessTokenTokenExpired();
  }

  private isEmptyString(value: string): boolean {
    return !value || 0 === value.length;
  }
ابتدا بررسی می‌کنیم که آیا توکن‌های درخواست شده‌ی از کش مرورگر، وجود خارجی دارند یا خیر؟ پس از آن تاریخ انقضای access token را نیز بررسی می‌کنیم. تا همین اندازه جهت تعیین اعتبار این توکن‌ها در سمت کاربر کفایت می‌کنند. در سمت سرور نیز این توکن‌ها به صورت خودکار توسط برنامه تعیین اعتبار شده و امضای دیجیتال آن‌ها بررسی می‌شوند.

در قسمت بعد، از این سرویس اعتبارسنجی تکمیل شده جهت ورود به سیستم و تکمیل کامپوننت header استفاده خواهیم کرد.


کدهای کامل این سری را از اینجا می‌توانید دریافت کنید.
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کرده‌اید. سپس از طریق خط فرمان به ریشه‌ی پروژه‌ی ASPNETCore2JwtAuthentication.AngularClient وارد شده و دستور npm install را صادر کنید تا وابستگی‌های آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o، برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد (و یا همان اجرای فایل ng-serve.bat). همچنین باید به پوشه‌ی ASPNETCore2JwtAuthentication.WebApp نیز مراجعه کرده و فایل dotnet_run.bat را اجرا کنید، تا توکن سرور برنامه نیز فعال شود.
نظرات مطالب
اعتبارسنجی مبتنی بر JWT در ASP.NET Core 2.0 بدون استفاده از سیستم Identity
- در مقدمه مطلب «ذخیره سازی اطلاعات در مرورگر توسط برنامه‌های Angular» در مورد محدودیت حجم‌های حالت‌های مختلف ذخیره سازی اطلاعات در سمت کلاینت، بیشتر توضیح داده شده‌است.
- روش پیاده سازی dynamic permission شما و قرار دادن اطلاعات آن در توکن، در این حالت بی‌مورد است. از این جهت که به نظر قصد ندارید از اطلاعات آن در سمت کلاینت استفاده کنید (محدود کردن دسترسی به صفحات یک برنامه‌ی SPA و نه یک برنامه‌ی MVC). توکن و هرچیزی که در آن است جهت کاربردهای سمت کلاینت بیشتر باید مورد استفاده قرارگیرند تا سمت سرور. این بحث JWT برای برنامه‌های Angular و کلا SPA (تک صفحه‌ای وب) بیشتر استفاده می‌شود (سمت سرور Web API خالص، سمت کاربر SPA خالص). اگر برنامه‌ی شما چنین چیزی نیست، از آن استفاده نکنید.
چون اطلاعات دسترسی به صفحات به نظر سایت MVC شما مطلقا کاربردی در سمت کلاینت ندارند، آن‌را به توکن اضافه نکنید. در عوض در متد CanUserAccess، قسمت user.HasClaim را با کوئری گرفتن از بانک اطلاعاتی جایگزین کنید.
- مثال سمت کلاینت بحث جاری در سری «احراز هویت و اعتبارسنجی کاربران در برنامه‌های Angular» عمیق‌تر بررسی شده‌است و هدف از قسمت‌های مختلف توکن آن‌را جهت استفاده‌ی در سمت کلاینت (استفاده از نقش‌ها جهت دسترسی به صفحات برنامه‌ی سمت کلاینت Angular، استفاده از تاریخ انقضای توکن جهت بررسی اعتبار آن، استفاده از نام نمایشی قرار گرفته‌ی در توکن برای نمایش آن در سمت کلاینت و غیره)، بهتر درک خواهید کرد. در سمت سرور با داشتن Id شخص، مابقی را می‌توان از بانک اطلاعاتی کوئری گرفت و نیازی به سنگین کردن توکن نیست.
مطالب
سهولت کار با رشته‌ها‌ی پیچیده در C# 11 با معرفی Raw string literals
Raw String Literals، روشی ساده جهت تعریف یک قطعه‌ی متنی، بدون نیاز به escapeهای فراوان و یا تعریف ""‌های متعدد است؛ برای مثال نوشتن رشته‌های تشکیل شده‌ی از محتوای XML و یا JSON. به این صورت تعریف رشته‌های پیچیده، ساده‌تر شده و قابلیت نگهداری آن‌ها، بهبود خواهد یافت. Raw String Literal با حداقل سه عدد " متوالی، شروع شده و با حداقل سه عدد " متوالی، خاتمه پیدا می‌کنند:
string name = "Vahid", country = "Iran";
string jsonString =
    $$"""
    {
        "Name": {{name}},
        "Country": {{country}}
    }
    """;
Console.WriteLine(jsonString);
بدون وجود این قابلیت، معادل واقعی رشته‌ی فوق را باید به صورت زیر تشکیل داد:
"{\r\n \"Name\": Vahid,\r\n \"Country\": Iran\r\n}"

و یا امکان درج ساده‌تر عبارات XML، بدون نیاز به escape قسمتی از آن:
string html =
        """
        <body style="normal">
              <div class="book-content">
               This is information about the "C# 11" book.
           </body>
           <footer>
               This is information about the author of the "C# 11" book.
           </footer>
        </element>
        """;

سؤال: اگر در محتوای Raw String Literal تعریف شده، نیاز به سه عدد " متوالی وجود داشت، چه باید کرد؟

اگر به توضیحات فوق دقت کنید، عنوان شد که شروع و پایان Raw String Literals، با «حداقل» سه عدد " همراه است و به این صورت پیاده سازی می‌شود:
- اگر رشته‌ی شما نیاز به سه "" متوالی داشت، باید raw string literal را با حداقل چهار " شروع و خاتمه دهید.
- اگر رشته‌ی شما نیاز به چهار "" متوالی داشت، باید raw string literal را با حداقل پنج " شروع و خاتمه دهید.
و ... به همین ترتیب برای مابقی حالات.

var text1 = """" Hello World! """ """";
var text2 = """"" Hello World! """" """"";


کاهش فواصل سمت چپ رشته‌ها، با استفاده از Raw string literals

به مثال زیر که یک قطعه چند سطری SQL را به دو روش قدیم و جدید تعریف می‌کند، دقت کنید (فواصل سمت چپ در این مثال مهم هستند):
var sql1 =
        @"
        SELECT Name
        FROM Customers
        WHERE id = @id
        ";
Console.WriteLine(sql1);

var sql2 =
        """
        SELECT Name
        FROM Customers
        WHERE id = @id
        """;
Console.WriteLine(sql2);
آیا خروجی نمایشی این دو، یکی است؟
پاسخ: خیر! خروجی نمایشی این دو به صورت زیر است:
        SELECT Name
        FROM Customers
        WHERE id = @id
        
SELECT Name
FROM Customers
WHERE id = @id
در اینجا به فواصل سمت چپ رشته‌ها دقت کنید. همیشه فرمت کردن verbatim strings در زبان #C مشکل بوده‌است و در حین تعریف عبارات چند سطری، تنظیم فواصل سمت چپ، مساله ساز است. اما این مشکل با raw string literals وجود ندارد. در این حالت فقط کافی است رشته‌ی مدنظر را دقیقا ذیل جائیکه """ را تعریف کرده‌اید، شروع کنید (ستون شروع آن‌ها یکی باشد). به این ترتیب تمام فواصل سمت چپ آن، ندید گرفته می‌شوند.
خروجی واقعی رشته‌ی sql1 به صورت زیر است:
 "\r\n SELECT Name\r\n FROM Customers\r\n WHERE id = @id\r\n "
و رشته‌ی sql2 به این نحو تفسیر می‌شود (که حتی فواصل ابتدا و انتهای آن نیز Trim شده‌اند):
"SELECT Name\r\nFROM Customers\r\nWHERE id = @id"


استفاده  از string interpolation در raw string literals

همیشه عبارات ما از رشته‌های ثابت تشکیل نمی‌شوند. در این بین همواره نیاز به interpolation با مقادیر ثابت و یا متغیرها وجود خواهد داشت. انجام چنین کاری با raw string literals هم میسر است:
var name = "Vahid";
var text =
$"""
Hello {name1}!
Welcome to the Team!
""";

سؤال: اگر در این مثال نیاز بود تا از {} جهت مقاصد نمایشی استفاده شود، چه باید کرد؟ یعنی نیاز به درج {} صرفا متنی وجود داشت.
پاسخ: در اینجا تنها کاری را که باید انجام داد، استفاده از یک $ اضافه‌تر در ابتدای interpolated string است (مانند مثال ابتدای بحث):
var name1 = "Vahid";
var text =
$$"""
Hello {{{name1}}}!
Welcome to the Team!
""";
که در نهایت، معادل با رشته‌ی خروجی زیر است:
"Hello {Vahid}!\r\n\r\nWelcome to the Team!"

سؤال: اگر در این مثال نیاز بود تا از {{{}}} جهت مقاصد نمایشی استفاده شود، چه باید کرد؟
پاسخ: باید تعداد $‌های ابتدای رشته را افزایش داد. برای مثال اگر نیاز به درج سه { متوالی است، باید از 4 عدد $ در ابتدای رشته استفاده کرد:
var name4 = "Vahid";
var text4 =
$$$$"""
Hello {{{{{{{name4}}}}}}}!
Welcome to the Team!
""";
که خروجی آن، معادل رشته‌ی نهایی زیر است:
"Hello {{{Vahid}}}!\r\nWelcome to the Team!"
بنابراین تعداد $ مشخص می‌کند که چه تعداد از {{‌ها می‌توانند بدون اینکه عبارت interpolation را تشکیل دهند، در رشته حضور داشته باشند. برای مثال تمام ترکیب‌های زیر یک خروجی را دارند و آن هم همان name تعریف شده‌است:
string name = "Vahid";

var text1 = $"{name}";
var text2 = $"""{name}""";
var text3 = $$"""{{name}}""";
var text4 = $$$"""{{{name}}}""";
var text5 = $$$$"""{{{{name}}}}""";
در مثال فوق، تعداد $ها با تعداد جفت‌های {} یکی است. بنابراین تنها به عنوان یک interpolation expression delimiter تفسیر می‌شوند.
اما در مثال زیر، تعداد $ها با تعداد {}ها یکی نیست؛ برای مثال اگر از دو $ ابتدایی استفاده شود، ذکر یک جفت تکی {}، تنها به معنای وجود کاراکتری آن‌ها است و همینطور اگر از سه $ ابتدایی استفاده شود، ذکر یک جفت دو تایی {{}}، تنها به معنای وجود کاراکتری آن‌ها است و همینطور الی آخر. اما اگر معادل تعداد $ها، از جفت‌های {} استفاده شود، تمام آن‌ها با هم فقط یک interpolation expression delimiter را تشکیل می‌دهند.
string name = "Vahid";

var text6 = $$"""{name}"""; // = "{name}"
var text7 = $$"""{{{name}}}"""; // = "{Vahid}"

var text8 = $$$"""{{name}}"""; // = "{{name}}"
var text9 = $$$"""{{{{{name}}}}}"""; // = "{{Vahid}}"

var text10 = $$$$"""{{{name}}}"""; // = "{{{name}}}"
var text11 = $$$$"""{{{{{{{name}}}}}}}"""; // = "{{{Vahid}}}"
مطالب
ارسال عکس به stimulsoft و ایجاد گزارش
برنامه‌ی Stimulsoft designer را باز کرده و از قسمت سمت راست (Dictionary) بر روی Variable راست کلیک می‌کنیم. 


سپس بر روی گزینه‌ی New Variable کلیک می‌کنیم:



اکنون در قسمت Name، نام نمایشی را وارد می‌کنیم که با تبدیل کردن Alias نیز تغییر می‌کند و می‌تواند متفاوت باشد. در ادامه در قسمت Type ،Type را بر روی Image می‌گذاریم و سپس بر روی دکمه‌ی ok کلیک می‌کنیم. حال variable ایی را که ایجاد کرده‌ایم، بر روی صفحه می‌کشیم و در محل مورد نظر قرار می‌دهیم و پروژه را save می‌کنیم. تا اینجا توانسته‌ایم فایلی را به‌وسیله‌ی stimulsoft ایجاد کنیم که دارای یک مقدار variable هست.

حال باید بتوانیم آن را در پروژه‌ی خود استفاده کنیم. جهت استفاده‌ی از آن‌، یک پروژه‌ی از نوع برنامه‌ی ویندوز (Windows Application) را ایجاد می‌کنیم و بر روی آن یک دکمه را جهت ارسال (چاپ گزارش) قرار می‌دهیم.

سپس به قسمت #C رفته و یک متد را تحت عنوان imageToByteArray مانند کدهای زیر ایجاد می‌کنیم:

public byte[] imageToByteArray(System.Drawing.Image imageIn)
{
    MemoryStream ms =n ew MemoryStream();
    imageIn.Save(ms, imageIn.RawFormat);
    return ms.ToArray();
}
در ادامه در پشت دکمه‌ی چاپ، کدهای زیر را قرار می‌دهیم:
var img = new System.Drawing.Bitmap(@"C:\\Users\\Ali\\Desktop\\multipage_tif_example.tif");
byte[] array1 = imageToByteArray(img); 

MemoryStream ms = new MemoryStream(array1);
System.Drawing.Image image = System.Drawing.Image.FromStream(ms);

StiReport rpt = new StiReport();
rpt.Load(Application.StartupPath + "\\Report(image).mrt");
rpt.Dictionary.Variables.Add("Image1", image);
rpt.Compile();
rpt.Show();
که در اینجا آدرس فایل عکس به‌صورت دستی داده‌شده است:
var img = new System.Drawing.Bitmap(@"C:\\Users\\Ali\\Desktop\\multipage_tif_example.tif");
و مسیر فایل stimulsoft
  rpt.Load(Application.StartupPath + "\\Report(image).mrt");
حال پروژه‌ی خود را اجرا کرده و نتیجه را می‌بینیم.

باید دقت داشت جهت استفاده‌ی از برنامه Stimulsoft بایستی dll‌های مربوط به آن در پروژه قرارگرفته باشد و استفاده شده باشد.