<script type="text/javascript"> var allCheckBoxSelector = '#<%=GridView_CashList.ClientID%> input[id*="CheckAll"]:checkbox'; var checkBoxSelector = '#<%=GridView_CashList.ClientID%> input[id*="CheckBox_Delete"]:checkbox'; function ToggleCheckUncheckAllOptionAsNeeded() { var totalCheckboxes = $(checkBoxSelector), checkedCheckboxes = totalCheckboxes.filter(":checked"), noCheckboxesAreChecked = (checkedCheckboxes.length === 0), allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length); $(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked); $('#<%=Button_Delete.ClientID%>').attr('disabled', noCheckboxesAreChecked); } $(document).ready(function () { $(allCheckBoxSelector).live('click', function () { $(checkBoxSelector).attr('checked', $(this).is(':checked')); ToggleCheckUncheckAllOptionAsNeeded(); }); $(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded); ToggleCheckUncheckAllOptionAsNeeded(); }); </script>
نگاهی به محتوای JSON Web Token تولیدی
اگر مطلب قسمت قبل را پیگیری کرده باشید، پس از لاگین، یک چنین خروجی را در کنسول توسعه دهندگان مرورگر میتوان مشاهده کرد که همان return Ok(new { access_token = jwt }) دریافتی از سمت سرور است:
اکنون این رشتهی طولانی را در حافظه کپی کرده و سپس به سایت https://jwt.io/#debugger-io مراجعه و در قسمت دیباگر آن، این رشتهی طولانی را paste میکنیم تا آنرا decode کند:
برای نمونه payload آن حاوی یک چنین اطلاعاتی است:
{ "jti": "b2921057-32a4-fbb2-0c18-5889c1ab8e70", "iss": "https://localhost:5001/", "iat": 1576402824, "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier": "1", "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name": "Vahid N.", "DisplayName": "Vahid N.", "http://schemas.microsoft.com/ws/2008/06/identity/claims/userdata": "1", "http://schemas.microsoft.com/ws/2008/06/identity/claims/role": "Admin", "nbf": 1576402824, "exp": 1576402944, "aud": "Any" }
استخراج اطلاعات کاربر وارد شدهی به سیستم، از JSON Web Token دریافتی
همانطور که در payload توکن دریافتی از سرور نیز مشخص است، اطلاعات ارزشمندی از کاربر، به همراه آن ارائه شدهاند و مزیت کار با آن، عدم نیاز به کوئری گرفتن مداوم از سرور و بانک اطلاعاتی، جهت دریافت مجدد این اطلاعات است. بنابراین اکنون در برنامهی React خود، قصد داریم مشابه کاری را که سایت jwt.io انجام میدهد، پیاده سازی کرده و به این اطلاعات دسترسی پیدا کنیم و برای مثال DisplayName را در Navbar نمایش دهیم. برای این منظور فایل app.js را گشوده و تغییرات زیر را به آن اعمال میکنیم:
- میخواهیم اطلاعات کاربر جاری را در state کامپوننت مرکزی App قرار دهیم. سپس زمانیکه کار رندر کامپوننت NavBar درج شدهی در متد رندر آن فرا میرسد، میتوان این اطلاعات کاربر را به صورت props به آن ارسال کرد؛ و یا به هر کامپوننت دیگری در component tree برنامه.
- بنابراین ابتدا کامپوننت تابعی بدون حالت App را تبدیل به یک کلاس کامپوننت استاندارد مشتق شدهی از کلاس پایهی Component میکنیم. اکنون میتوان state را نیز به آن اضافه کرد:
class App extends Component { state = {};
- برای decode کردن توکن، نیاز به نصب کتابخانهی زیر را داریم:
> npm install --save jwt-decode
import jwtDecode from "jwt-decode"; // ... class App extends Component { state = {}; componentDidMount() { try { const jwt = localStorage.getItem("token"); const currentUser = jwtDecode(jwt); console.log("currentUser", currentUser); this.setState({ currentUser }); } catch (ex) { console.log(ex); } }
- اکنون میتوان شیء currentUser را به صورت props، به کامپوننت NavBar ارسال کرد:
render() { return ( <React.Fragment> <ToastContainer /> <NavBar user={this.state.currentUser} /> <main className="container">
نمایش اطلاعات کاربر وارد شدهی به سیستم در NavBar
پس از ارسال شیء کاربر به صورت props به کامپوننت src\components\navBar.jsx، کدهای این کامپوننت را به صورت زیر جهت نمایش نام کاربر جاری وارد شدهی به سیستم تغییر میدهیم:
const NavBar = ({ user }) => {
سپس میتوان لینکهای Login و Register را به صورت شرطی رندر کرد و نمایش داد:
{!user && ( <React.Fragment> <NavLink className="nav-item nav-link" to="/login"> Login </NavLink> <NavLink className="nav-item nav-link" to="/register"> Register </NavLink> </React.Fragment> )}
شبیه به همین حالت را برای هنگامیکه کاربر، تعریف شدهاست، جهت نمایش نام او و لینک به Logout، نیاز داریم:
{user && ( <React.Fragment> <NavLink className="nav-item nav-link" to="/logout"> Logout </NavLink> <NavLink className="nav-item nav-link" to="/profile"> {user.DisplayName} </NavLink> </React.Fragment> )}
فعلا تا پیش از پیاده سازی Logout، برای آزمایش آن، به کنسول توسعه دهندگان مرورگر مراجعه کرده و توکن ذخیره شدهی در ذیل قسمت application->storage را دستی حذف کنید. سپس صفحه را ریفرش کنید. اینبار لینکهای به Login و Register نمایان میشوند.
یک مشکل! در این حالت (زمانیکه توکن حذف شدهاست)، از طریق قسمت Login به برنامه وارد شوید. هرچند این قسمتها به درستی کار خود را انجام میدهند، اما هنوز در منوی بالای سایت، نام کاربری و لینک به Logout ظاهر نشدهاند. علت اینجا است که در کامپوننت App، کار دریافت توکن در متد componentDidMount انجام میشود و این متد نیز تنها یکبار در طول عمر برنامه فراخوانی میشود. برای رفع این مشکل به src\components\loginForm.jsx مراجعه کرده و بجای استفاده از history.push برای هدایت کاربر به صفحهی اصلی برنامه، نیاز خواهیم داشت تا کل برنامه را بارگذاری مجدد کنیم. یعنی بجای:
this.props.history.push("/");
window.location = "/";
پیاده سازی Logout کاربر وارد شدهی به سیستم
برای logout کاربر تنها کافی است توکن او را از local storage حذف کنیم. به همین جهت مسیریابی جدید logout را که به صورت لینکی به NavBar اضافه کردیم:
<NavLink className="nav-item nav-link" to="/logout"> Logout </NavLink>
import Logout from "./components/logout"; // ... class App extends Component { render() { return ( // ... <Switch> // ... <Route path="/logout" component={Logout} />
import { Component } from "react"; class Logout extends Component { componentDidMount() { localStorage.removeItem("token"); window.location = "/"; } render() { return null; } } export default Logout;
بهبود کیفیت کدهای نوشته شده
اگر به کامپوننت App دقت کنید، کلید token استفاده شدهی در آن، در چندین قسمت برنامه مانند login و logout، تکرار و پراکنده شدهاست. بنابراین بهتر است جزئیات پیاده سازی مرتبط با اعتبارسنجی کاربران، به ماژول مختص به آنها (src\services\authService.js) منتقل شود تا سایر قسمتهای برنامه، به صورت یکدستی از آن استفاده کنند و اگر در این بین نیاز به تغییری بود، فقط یک ماژول نیاز به تغییر، داشته باشد.
برای این منظور، ابتدا متد login قبلی را طوری تغییر میدهیم که کار ذخیره سازی توکن را نیز در authService.js انجام دهد:
const tokenKey = "token"; export async function login(email, password) { const { data: { access_token } } = await http.post(apiEndpoint + "/login", { email, password }); console.log("JWT", access_token); localStorage.setItem(tokenKey, access_token); }
const { data } = this.state; await auth.login(data.username, data.password); window.location = "/";
همینکار را برای logout نیز در authService انجام داده:
export function logout() { localStorage.removeItem(tokenKey); }
import * as auth from "../services/authService"; class Logout extends Component { componentDidMount() { auth.logout();
import jwtDecode from "jwt-decode"; //... export function getCurrentUser() { try { const jwt = localStorage.getItem(tokenKey); const currentUser = jwtDecode(jwt); console.log("currentUser", currentUser); return currentUser; } catch (ex) { console.log(ex); return null; } }
import * as auth from "./services/authService"; class App extends Component { state = {}; componentDidMount() { const currentUser = auth.getCurrentUser(); this.setState({ currentUser }); }
جای دیگری که از localStorage استفاده شده، متد doSumbit کامپوننت ثبت نام کاربران است. این قسمت را نیز به صورت زیر به authService اضافه میکنیم:
export function loginWithJwt(jwt) { localStorage.setItem(tokenKey, jwt); }
import * as auth from "../services/authService"; // ... const response = await userService.register(this.state.data); auth.loginWithJwt(response.headers["x-auth-token"]);
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-27-backend.zip و sample-27-frontend.zip
var d = new Date(); $.jCookies({ name: 'dotnettips.info', value: { Title: 'ساخت کوکی با jcookie', Author: 'علی یگانه مقدم', Seen: d.getDate(), Favorite: true } });
$.jCookies ({ name : 'User', value : { username : 'Bob' , level : 5 }, minutes : 60 });
$.jCookies.defaults = { name : '', value : '', days : 27 }
var values = $.jCookies ({ get: 'dotnettips.info' });
var values = $.jCookies({ get: 'Rutabaga', error: true });
Error : { arguments : undefined, message : "Invalid base64 data", stack : "—", type : undefined }
var values = $.jCookies({ get: '*' }); alert(values["dotnettips.info"].Title); alert(values["data2"].Title);
var value = $.jCookies({ erase: 'dotnettips.info' });
- برگشت دادهها از حالت رمزگذاری base64
- دادهها در فرمت json هستند و باید به حالتی قابل استفاده در محیط شی گرا تبدیل شوند.
Title | ایجاد کوکی با jcookie |
Author | علی یگانه مقدم |
Seen | 2015/1/14 |
Favorite | true |
byte[] from64 = Convert.FromBase64String(Page.Request.Cookies["dotnettips.info"].Value); string json = Encoding.UTF8.GetString(from64); Dictionary<string, object> article =new JavaScriptSerializer().Deserialize<Dictionary<string, object>>(json); Page.Response.Write("Title: "+ (string)article["Title"]);
byte[] from64 = Convert.FromBase64String(Page.Request.Cookies["dotnettips.info"].Value); string json = Encoding.Unicode.GetString(from64); Dictionary<string, object> article =new JavaScriptSerializer().Deserialize<Dictionary<string, object>>(json); Page.Response.Write("Title: "+ (string)article["Title"]);
<script> let src = 'https://svelte.dev/tutorial/image.gif'; let name = 'Rick Astley'; </script> <img src={src} alt="{name} dancing">
- نکته اول : اگر در تگ img مقدار alt را وارد نکنیم و یا alt در این تگ وجود نداشته باشد، یک هشدار توسط کامپایلر svelte برای ما با عنوان <img> element should have an alt attribute> ایجاد میشود. زمان ساخت یک برنامه بسیار مهم است تا قوانین نوشتن یک کد html خوب را رعایت کنیم تا برای تمامی کاربران احتمالی برنامه قابل استفاده باشد. در همین مثال با ایجاد یک هشدار Svelte تلاش میکند که ما را از اشتباه در نوشتن کد html مطلع سازد.
- نکته دوم : اگر نام یک آبجکت تعریف شده و یک attribute، برابر باشد میتوانیم از نسخه کوتاه شده یا Shorthand attributes در svelte استفاده کنیم. به طور مثال در مثال بالا میتوانیم از کد زیر در خط 6 استفاده کنیم.
<img {src} alt="{name} dancing">
<script> export let siteName = "dotnettips"; </script> <p>this is a nested component for third tutorial on {siteName}</p>
<script> import Nested from "./Nested.svelte"; export let name; </script> <h1>Hello {name}!</h1> <Nested siteName="dotnettips.info" />
Hello world! this is a nested component for third tutorial on dotnettips.info
در مثال بالا ما یک کامپوننت جدید را ایجاد کرده و از طریق دستور import به App.svelte اضافه کردیم. نکتهای که در اینجا وجود دارد، نحوه مقدار دهی props در کامپوننتها است. اگر به خط 9 دقت کنیم، کامپوننت ما از طریق تگ جدیدی با نام (Nested) به بدنه html برنامه اضافه شده است که یک attribute به نام siteName دارد. siteName متغیر export شده در کامپوننت Nested.svelte است که در کامپوننتها به این صورت مقدار دهی میشود. قبلا نحوه مقدار دهی این خصیصهها را در فایلهای جاوا اسکریپت مشاهده کرده بودیم. نکته دیگری که باید به آن دقت داشت این است که خصیصه siteName مقدار پیش فرض dotnettips را در Nested.svelte به خود اختصاص داده بود. به همین جهت اگر ما siteName را هنگام استفاده از کامپوننت مقدار دهی نکنیم، از مقدار پیش فرض خود استفاده خواهد کرد. ولی اینجا ما با مقدار دهی آن، siteName را به dotnettips.info تغییر دادهایم.
نکته مهم : دقت داشته باشید کامپوننتهای شما همیشه باید با حروف بزرگ شروع شوند؛ به طور مثال در صورت نوشتن <nested/> محتوای کامپوننت نمایش داده نخواهد شد. svelte، از طریق زیر نظر گرفتن حروف کوچک و بزرگ در ابتدای تگها، بین تگهای html و کامپوننتها تمایز قائل میشود.
Spread props :
تا اینجا به صورت خلاصه با props یا خصیصهها آشنا شدهاید و دیدیم که با export کردن یک متغیر در یک کامپوننت، میتوانیم آن را هنگام استفاده مقدار دهی نماییم. برای اینکه تمرینی هم باشد با توجه به مطالبی که تاکنون گفته شده، پروژهی جدیدی را ایجاد کنید و محتوای App.svelte را مانند کد زیر تغییر دهید.
<script> import Info from './Info.svelte'; const pkg = { name: 'svelte', version: 3, speed: 'blazing', website: 'https://svelte.dev' }; </script> <Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
همانطور که در خط دوم کد میبینید، کامپوننتی به نام Info.svelte به این بخش اضافه شدهاست. این کامپوننت را با محتوای زیر ایجاد نمایید:
<script> export let name; export let version; export let speed; export let website; </script> <p> The <code>{name}</code> package is {speed} fast. Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a> and <a href={website}>learn more here</a> </p>
اگر برنامه را اجرا کنید یک چنین خروجی را مشاهده خواهید کرد:
The svelte package is blazing fast. Download version 3 from npm and learn more here
<Info {...pkg}/>
<script> let count = 0; function handleClick() { count += 1; } </script> <p>Count : {count}</p> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button>
<script> let count = 0; let doubled = count * 2; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p>
$: doubled = count * 2;
$: console.log(`the count is ${count}`);
$: { console.log(`the count is ${count}`); alert(`I SAID THE COUNT IS ${count}`); }
$: if (count >= 10) { alert(`count is dangerously high!`); count = 9; }
<script> let numbers = [1, 2, 3, 4]; function addNumber() { let newNumber = numbers.length + 1; numbers.push(newNumber); } $: sum = numbers.reduce((t, n) => t + n, 0); </script> <p>{numbers.join(' + ')} = {sum}</p> <button on:click={addNumber}>Add a number</button>
function addNumber() { let newNumber = numbers.length + 1; numbers.push(newNumber); numbers = numbers; }
function addNumber() { let newNumber = numbers.length + 1; numbers = [...numbers, newNumber]; }
مروری بر Two way bindings :
<script> let name = ""; function updateName(event) { name = event.target.value; } </script> <h4>My Name Is {name}</h4> <input value={name} on:input={updateName} />
<script> let name = ""; </script> <h4>My Name Is {name}</h4> <input bind:value={name} />
{#if condition} <!-- you html codes ... --> {/if}
<script> let user = { loggedIn: false }; function toggle() { user.loggedIn = !user.loggedIn; } </script> {#if user.loggedIn} <button on:click={toggle}> Log out </button> {/if} {#if !user.loggedIn} <button on:click={toggle}> Log in </button> {/if}
{#if condition} <!-- you html code when condition is true --> {:else} <!-- you html code when condition is false --> {/if}
{#if user.loggedIn} <button on:click={toggle}> Log out </button> {:else} <button on:click={toggle}> Log in </button> {/if}
{#if condition} <!-- you html code when condition is true --> {:else if condition2} <!-- you html code when condition2 is true --> {:else} <!-- you html code when condition and condition2 are false --> {/if}
{#each list as item} <!-- you html code per each item in list --> {/each}
<script> let cats = [ { id: 'J---aiyznGQ', name: 'Keyboard Cat' }, { id: 'z_AbfPXTKms', name: 'Maru' }, { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' } ]; </script> <h1>The Famous Cats of YouTube</h1> <ul> {#each cats as cat} <li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}"> {cat.name} </a></li> {/each} </ul>
<ul> {#each cats as {id,name}} <li><a target="_blank" href="https://www.youtube.com/watch?v={id}"> {name} </a></li> {/each} </ul>
<ul> {#each cats as { id, name }, i} <li><a target="_blank" href="https://www.youtube.com/watch?v={id}"> {i + 1}: {name} </a></li> {/each} </ul>
نکته : در این بخش من سعی کردم تا حدودی به ترتیب بخش آموزشی خود وبسایت Svelte، موارد را بیان کنم؛ ولی با توجه به اینکه شاید دوستان ترجیح بدهند روش آموزشی خود آن وبسایت که امکان تغییر و نوشتن کد را هم محیا کرده است، امتحان کنند لینک آن را به اشتراک میگذارم.
public abstract class ResourceProviderFactory { public abstract IResourceProvider CreateGlobalResourceProvider(string classKey); public abstract IResourceProvider CreateLocalResourceProvider(string virtualPath); }
public interface IResourceProvider { IResourceReader ResourceReader { get; } object GetObject(string resourceKey, CultureInfo culture); }
// Type: System.Web.Compilation.ResXResourceProviderFactory // Assembly: System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a // Assembly location: C:\Windows\Microsoft.NET\assembly\GAC_32\System.Web\v4.0_4.0.0.0__b03f5f7f11d50a3a\System.Web.dll using System.Runtime; using System.Web; namespace System.Web.Compilation { internal class ResXResourceProviderFactory : ResourceProviderFactory { [TargetedPatchingOptOut("Performance critical to inline this type of method across NGen image boundaries")] public ResXResourceProviderFactory() { } public override IResourceProvider CreateGlobalResourceProvider(string classKey) { return (IResourceProvider) new GlobalResXResourceProvider(classKey); } public override IResourceProvider CreateLocalResourceProvider(string virtualPath) { return (IResourceProvider) new LocalResXResourceProvider(VirtualPath.Create(virtualPath)); } } }
internal class GlobalResXResourceProvider : BaseResXResourceProvider { private string _classKey; internal GlobalResXResourceProvider(string classKey) { _classKey = classKey; } protected override ResourceManager CreateResourceManager() { string fullClassName = BaseResourcesBuildProvider.DefaultResourcesNamespace + "." + _classKey; // If there is no app resource assembly, return null if (BuildManager.AppResourcesAssembly == null) return null; ResourceManager resourceManager = new ResourceManager(fullClassName, BuildManager.AppResourcesAssembly); resourceManager.IgnoreCase = true; return resourceManager; } public override IResourceReader ResourceReader { get { // App resources don't support implicit resources, so the IResourceReader should never be needed throw new NotSupportedException(); } } }
internal const string DefaultResourcesNamespace = "Resources";
internal class LocalResXResourceProvider : BaseResXResourceProvider { private VirtualPath _virtualPath; internal LocalResXResourceProvider(VirtualPath virtualPath) { _virtualPath = virtualPath; } protected override ResourceManager CreateResourceManager() { ResourceManager resourceManager = null; Assembly pageResAssembly = GetLocalResourceAssembly(); if (pageResAssembly != null) { string fileName = _virtualPath.FileName; resourceManager = new ResourceManager(fileName, pageResAssembly); resourceManager.IgnoreCase = true; } else { throw new InvalidOperationException(SR.GetString(SR.ResourceExpresionBuilder_PageResourceNotFound)); } return resourceManager; } public override IResourceReader ResourceReader { get { // Get the local resource assembly for this page Assembly pageResAssembly = GetLocalResourceAssembly(); if (pageResAssembly == null) return null; // Get the name of the embedded .resource file for this page string resourceFileName = _virtualPath.FileName + ".resources"; // Make it lower case, since GetManifestResourceStream is case sensitive resourceFileName = resourceFileName.ToLower(CultureInfo.InvariantCulture); // Get the resource stream from the resource assembly Stream resourceStream = pageResAssembly.GetManifestResourceStream(resourceFileName); // If this page has no resources, return null if (resourceStream == null) return null; return new ResourceReader(resourceStream); } } [PermissionSet(SecurityAction.Assert, Unrestricted = true)] private Assembly GetLocalResourceAssembly() { // Remove the page file name to get its directory VirtualPath virtualDir = _virtualPath.Parent; // Get the name of the local resource assembly string cacheKey = BuildManager.GetLocalResourcesAssemblyName(virtualDir); BuildResult result = BuildManager.GetBuildResultFromCache(cacheKey); if (result != null) { return ((BuildResultCompiledAssembly)result).ResultAssembly; } return null; } }
نکته: باتوجه به استفاده از عبارات بومیسازی ضمنی در استفاده از ورودیهای منابع محلی، خاصیت ResourceReader در این کلاس نمونهای متناظر برای درخواست جاری از کلاس ResourceReader با استفاده از Stream استخراج شده از اسمبلی یافته شده، تولید میکند.
internal abstract class BaseResXResourceProvider : IResourceProvider { private ResourceManager _resourceManager; ///// IResourceProvider implementation public virtual object GetObject(string resourceKey, CultureInfo culture) { // Attempt to get the resource manager EnsureResourceManager(); // If we couldn't get a resource manager, return null if (_resourceManager == null) return null; if (culture == null) culture = CultureInfo.CurrentUICulture; return _resourceManager.GetObject(resourceKey, culture); } public virtual IResourceReader ResourceReader { get { return null; } } ///// End of IResourceProvider implementation protected abstract ResourceManager CreateResourceManager(); private void EnsureResourceManager() { if (_resourceManager != null) return; _resourceManager = CreateResourceManager(); } }
System.Resources.ResourceManager(string baseName, Assembly assemblyName)
var manager = new System.Resources.ResourceManager("Resources.Resource1", typeof(Resource1).Assembly)
var manager = new System.Resources.ResourceManager("Resources.Resource1", Assembly.LoadFile(@"c:\MyResources\MyGlobalResources.dll"))
public static ResourceManager CreateFileBasedResourceManager(string baseName, string resourceDir, Type usingResourceSet)
resgen d:\MyResources\MyResource.fa.resx
private ResourceManager CreateGlobalResourceManager(string classKey) { var baseName = "Resources." + classKey; var buildManagerType = typeof(BuildManager); var property = buildManagerType.GetProperty("AppResourcesAssembly", BindingFlags.Static | BindingFlags.NonPublic | BindingFlags.GetField); var appResourcesAssembly = (Assembly)property.GetValue(null, null); return new ResourceManager(baseName, appResourcesAssembly) { IgnoreCase = true }; }
var manager = CreateGlobalResourceManager("Resource1"); Label1.Text = manager.GetString("String1");
private ResourceManager CreateLocalResourceManager(string virtualPath) { var virtualPathType = typeof(BuildManager).Assembly.GetType("System.Web.VirtualPath", true); var virtualPathInstance = Activator.CreateInstance(virtualPathType, BindingFlags.NonPublic | BindingFlags.Instance, null, new object[] { virtualPath }, CultureInfo.InvariantCulture); var buildResultCompiledAssemblyType = typeof(BuildManager).Assembly.GetType("System.Web.Compilation.BuildResultCompiledAssembly", true); var propertyResultAssembly = buildResultCompiledAssemblyType.GetProperty("ResultAssembly", BindingFlags.NonPublic | BindingFlags.Instance); var methodGetLocalResourcesAssemblyName = typeof(BuildManager).GetMethod("GetLocalResourcesAssemblyName", BindingFlags.NonPublic | BindingFlags.Static); var methodGetBuildResultFromCache = typeof(BuildManager).GetMethod("GetBuildResultFromCache", BindingFlags.NonPublic | BindingFlags.Static, null, new Type[] { typeof(string) }, null); var fileNameProperty = virtualPathType.GetProperty("FileName"); var virtualPathFileName = (string)fileNameProperty.GetValue(virtualPathInstance, null); var parentProperty = virtualPathType.GetProperty("Parent"); var virtualPathParent = parentProperty.GetValue(virtualPathInstance, null); var localResourceAssemblyName = (string)methodGetLocalResourcesAssemblyName.Invoke(null, new object[] { virtualPathParent }); var buildResultFromCache = methodGetBuildResultFromCache.Invoke(null, new object[] { localResourceAssemblyName }); Assembly localResourceAssembly = null; if (buildResultFromCache != null) localResourceAssembly = (Assembly)propertyResultAssembly.GetValue(buildResultFromCache, null); if (localResourceAssembly == null) throw new InvalidOperationException("Unable to find the matching resource file."); return new ResourceManager(virtualPathFileName, localResourceAssembly) { IgnoreCase = true }; }
نحوه استفاده از متد فوق نیز به صورت زیر است:
var manager = CreateLocalResourceManager("~/Default.aspx"); Label1.Text = manager.GetString("Label1.Text");
کلمههای عبور کاربران فعلی سیستم با الگوریتمی متفاوت از الگوریتم مورد استفاده Identity هش شدهاند. برای اینکه کاربرانی که قبلا ثبت نام کرده بودند بتوانند با کلمههای عبور خود وارد سایت شوند، باید الگوریتم هش کردن Identity را با الگوریتم فعلی مورد استفاده Iris جایگزین کرد.
برای تغییر روش هش کردن کلمات عبور در Identity باید اینترفیس IPasswordHasher را پیاده سازی کنید:
public class IrisPasswordHasher : IPasswordHasher { public string HashPassword(string password) { return Utilities.Security.Encryption.EncryptingPassword(password); } public PasswordVerificationResult VerifyHashedPassword(string hashedPassword, string providedPassword) { return Utilities.Security.Encryption.VerifyPassword(providedPassword, hashedPassword) ? PasswordVerificationResult.Success : PasswordVerificationResult.Failed; } }
سپس باید وارد کلاس ApplicationUserManager شده و در سازندهی آن اینترفیس IPasswordHasher را به عنوان وابستگی تعریف کنید:
public ApplicationUserManager(IUserStore<ApplicationUser, int> store, IUnitOfWork uow, IIdentity identity, IApplicationRoleManager roleManager, IDataProtectionProvider dataProtectionProvider, IIdentityMessageService smsService, IIdentityMessageService emailService, IPasswordHasher passwordHasher) : base(store) { _store = store; _uow = uow; _identity = identity; _users = _uow.Set<ApplicationUser>(); _roleManager = roleManager; _dataProtectionProvider = dataProtectionProvider; this.SmsService = smsService; this.EmailService = emailService; PasswordHasher = passwordHasher; createApplicationUserManager(); }
برای اینکه کلاس IrisPasswordHasher را به عنوان نمونه درخواستی IPasswordHasher معرفی کنیم، باید در تنظیمات StructureMap کد زیر را نیز اضافه کنید:
x.For<IPasswordHasher>().Use<IrisPasswordHasher>();
پیاده سازی اکشن متد ثبت نام کاربر با استفاده از Identity
در کنترلر UserController، اکشن متد Register را به شکل زیر بازنویسی کنید:
[HttpPost] [ValidateAntiForgeryToken] [CaptchaVerify("تصویر امنیتی وارد شده معتبر نیست")] public virtual async Task<ActionResult> Register(RegisterModel model) { if (ModelState.IsValid) { var user = new ApplicationUser { CreatedDate = DateAndTime.GetDateTime(), Email = model.Email, IP = Request.ServerVariables["REMOTE_ADDR"], IsBaned = false, UserName = model.UserName, UserMetaData = new UserMetaData(), LastLoginDate = DateAndTime.GetDateTime() }; var result = await _userManager.CreateAsync(user, model.Password); if (result.Succeeded) { var addToRoleResult = await _userManager.AddToRoleAsync(user.Id, "user"); if (addToRoleResult.Succeeded) { var code = await _userManager.GenerateEmailConfirmationTokenAsync(user.Id); var callbackUrl = Url.Action("ConfirmEmail", "User", new { userId = user.Id, code }, protocol: Request.Url.Scheme); _emailService.SendAccountConfirmationEmail(user.Email, callbackUrl); return Json(new { result = "success" }); } addErrors(addToRoleResult); } addErrors(result); } return PartialView(MVC.User.Views._Register, model); }
برای این کار متد زیر را به کلاس EmailService اضافه کنید:
public SendingMailResult SendAccountConfirmationEmail(string email, string link) { var model = new ConfirmEmailModel() { ActivationLink = link }; var htmlText = _viewConvertor.RenderRazorViewToString(MVC.EmailTemplates.Views._ConfirmEmail, model); var result = Send(new MailDocument { Body = htmlText, Subject = "تایید حساب کاربری", ToEmail = email }); return result; }
@model Iris.Model.EmailModel.ConfirmEmailModel <div style="direction: rtl; -ms-word-wrap: break-word; word-wrap: break-word;"> <p>با سلام</p> <p>برای فعال سازی حساب کاربری خود لطفا بر روی لینک زیر کلیک کنید:</p> <p>@Model.ActivationLink</p> <div style=" color: #808080;"> <p>با تشکر</p> <p>@Model.SiteTitle</p> <p>@Model.SiteDescription</p> <p><span style="direction: ltr !important; unicode-bidi: embed;">@Html.ConvertToPersianDateTime(DateTime.Now, "s,H")</span></p> </div> </div>
اصلاح پیام موفقیت آمیز بودن ثبت نام کاربر جدید
سیستم IRIS از ارسال ایمیل تایید حساب کاربری استفاده نمیکند و به محض اینکه عملیات ثبت نام تکمیل میشد، صفحه رفرش میشود. اما در سیستم Identity یک ایمیل حاوی لینک فعال سازی حساب کاربری به او ارسال میشود.
برای اصلاح پیغام پس از ثبت نام، باید به فایل myscript.js درون پوشهی Scripts مراجعه کرده و رویداد onSuccess شیء RegisterUser را به شکل زیراصلاح کنید:
RegisterUser.Form.onSuccess = function (data) { if (data.result == "success") { var message = '<div id="alert"><button type="button" data-dismiss="alert">×</button>ایمیلی حاوی لینک فعال سازی، به ایمیل شما ارسال شد؛ لطفا به ایمیل خود مراجعه کرده و بر روی لینک فعال سازی کلیک کنید.</div>'; $('#registerResult').html(message); } else { $('#logOnModal').html(data); } };
[AllowAnonymous] public virtual async Task<ActionResult> ConfirmEmail(int? userId, string code) { if (userId == null || code == null) { return View("Error"); } var result = await _userManager.ConfirmEmailAsync(userId.Value, code); return View(result.Succeeded ? "ConfirmEmail" : "Error"); }
@{ ViewBag.Title = "حساب کاربری شما تایید شد"; } <h2>@ViewBag.Title.</h2> <div> <p> با تشکر از شما، حساب کاربری شما تایید شد. </p> <p> @Ajax.ActionLink("ورود / ثبت نام", MVC.User.ActionNames.LogOn, MVC.User.Name, new { area = "", returnUrl = Html.ReturnUrl(Context, Url) }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "logOnModal", LoadingElementDuration = 300, LoadingElementId = "loadingMessage", OnSuccess = "LogOnForm.onSuccess" }, new { role = "button", data_toggle = "modal", data_i_logon_link = "true", rel = "nofollow" }) </p> </div>
اصلاح اکشن متد ورود به سایت
[HttpPost] [ValidateAntiForgeryToken] public async virtual Task<ActionResult> LogOn(LogOnModel model, string returnUrl) { if (!ModelState.IsValid) { if (Request.IsAjaxRequest()) return PartialView(MVC.User.Views._LogOn, model); return View(model); } const string emailRegPattern = @"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"; string ip = Request.ServerVariables["REMOTE_ADDR"]; SignInStatus result = SignInStatus.Failure; if (Regex.IsMatch(model.Identity, emailRegPattern)) { var user = await _userManager.FindByEmailAsync(model.Identity); if (user != null) { result = await _signInManager.PasswordSignInAsync (user.UserName, model.Password, model.RememberMe, shouldLockout: true); } } else { result = await _signInManager.PasswordSignInAsync(model.Identity, model.Password, model.RememberMe, shouldLockout: true); } switch (result) { case SignInStatus.Success: if (Request.IsAjaxRequest()) return JavaScript(IsValidReturnUrl(returnUrl) ? string.Format("window.location ='{0}';", returnUrl) : "window.location.reload();"); return redirectToLocal(returnUrl); case SignInStatus.LockedOut: ModelState.AddModelError("", string.Format("حساب شما قفل شد، لطفا بعد از {0} دقیقه دوباره امتحان کنید.", _userManager.DefaultAccountLockoutTimeSpan.Minutes)); break; case SignInStatus.Failure: ModelState.AddModelError("", "نام کاربری یا کلمه عبور اشتباه است."); break; default: ModelState.AddModelError("", "در ورود شما خطایی رخ داده است."); break; } if (Request.IsAjaxRequest()) return PartialView(MVC.User.Views._LogOn, model); return View(model); }
اصلاح اکشن متد خروج کاربر از سایت
[HttpPost] [ValidateAntiForgeryToken] [Authorize] public virtual ActionResult LogOut() { _authenticationManager.SignOut(); if (Request.IsAjaxRequest()) return Json(new { result = "true" }); return RedirectToAction(MVC.User.ActionNames.LogOn, MVC.User.Name); }
پیاده سازی ریست کردن کلمهی عبور با استفاده از ASP.NET Identity
مکانیزم سیستم IRIS برای ریست کردن کلمهی عبور به هنگام فراموشی آن، ساخت GUID و ذخیرهی آن در دیتابیس است. سیستم Identity با استفاده از یک توکن رمز نگاری شده و بدون استفاده از دیتابیس، این کار را انجام میدهد و با استفاده از قابلیتهای تو کار سیستم Identity، تمهیدات امنیتی بهتری را نسبت به سیستم کنونی در نظر گرفته است.
برای این کار کدهای کنترلر ForgottenPasswordController را به شکل زیر ویرایش کنید:
using System.Threading.Tasks; using System.Web.Mvc; using CaptchaMvc.Attributes; using Iris.Model; using Iris.Servicelayer.Interfaces; using Iris.Web.Email; using Microsoft.AspNet.Identity; namespace Iris.Web.Controllers { public partial class ForgottenPasswordController : Controller { private readonly IEmailService _emailService; private readonly IApplicationUserManager _userManager; public ForgottenPasswordController(IEmailService emailService, IApplicationUserManager applicationUserManager) { _emailService = emailService; _userManager = applicationUserManager; } [HttpGet] public virtual ActionResult Index() { return PartialView(MVC.ForgottenPassword.Views._Index); } [HttpPost] [ValidateAntiForgeryToken] [CaptchaVerify("تصویر امنیتی وارد شده معتبر نیست")] public async virtual Task<ActionResult> Index(ForgottenPasswordModel model) { if (!ModelState.IsValid) { return PartialView(MVC.ForgottenPassword.Views._Index, model); } var user = await _userManager.FindByEmailAsync(model.Email); if (user == null || !(await _userManager.IsEmailConfirmedAsync(user.Id))) { // Don't reveal that the user does not exist or is not confirmed return Json(new { result = "false", message = "این ایمیل در سیستم ثبت نشده است" }); } var code = await _userManager.GeneratePasswordResetTokenAsync(user.Id); _emailService.SendResetPasswordConfirmationEmail(user.UserName, user.Email, code); return Json(new { result = "true", message = "ایمیلی برای تایید بازنشانی کلمه عبور برای شما ارسال شد.اعتبارایمیل ارسالی 3 ساعت است." }); } [AllowAnonymous] public virtual ActionResult ResetPassword(string code) { return code == null ? View("Error") : View(); } [AllowAnonymous] public virtual ActionResult ResetPasswordConfirmation() { return View(); } // // POST: /Account/ResetPassword [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public virtual async Task<ActionResult> ResetPassword(ResetPasswordViewModel model) { if (!ModelState.IsValid) { return View(model); } var user = await _userManager.FindByEmailAsync(model.Email); if (user == null) { // Don't reveal that the user does not exist return RedirectToAction("Error"); } var result = await _userManager.ResetPasswordAsync(user.Id, model.Code, model.Password); if (result.Succeeded) { return RedirectToAction("ResetPasswordConfirmation", "ForgottenPassword"); } addErrors(result); return View(); } private void addErrors(IdentityResult result) { foreach (var error in result.Errors) { ModelState.AddModelError("", error); } } } }
همچنین برای اکشن متدهای اضافه شده، Viewهای زیر را نیز باید اضافه کنید:
- View با نام ResetPasswordConfirmation.cshtml را اضافه کنید.
@{ ViewBag.Title = "کلمه عبور شما تغییر کرد"; } <hgroup> <h1>@ViewBag.Title.</h1> </hgroup> <div> <p> کلمه عبور شما با موفقیت تغییر کرد </p> <p> @Ajax.ActionLink("ورود / ثبت نام", MVC.User.ActionNames.LogOn, MVC.User.Name, new { area = "", returnUrl = Html.ReturnUrl(Context, Url) }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "logOnModal", LoadingElementDuration = 300, LoadingElementId = "loadingMessage", OnSuccess = "LogOnForm.onSuccess" }, new { role = "button", data_toggle = "modal", data_i_logon_link = "true", rel = "nofollow" }) </p> </div>
- View با نام ResetPassword.cshtml
@model Iris.Model.ResetPasswordViewModel @{ ViewBag.Title = "ریست کردن کلمه عبور"; } <h2>@ViewBag.Title.</h2> @using (Html.BeginForm("ResetPassword", "ForgottenPassword", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken() <h4>ریست کردن کلمه عبور</h4> <hr /> @Html.ValidationSummary("", new { @class = "text-danger" }) @Html.HiddenFor(model => model.Code) <div> @Html.LabelFor(m => m.Email, "ایمیل", new { @class = "control-label" }) <div> @Html.TextBoxFor(m => m.Email) </div> </div> <div> @Html.LabelFor(m => m.Password, "کلمه عبور", new { @class = "control-label" }) <div> @Html.PasswordFor(m => m.Password) </div> </div> <div> @Html.LabelFor(m => m.ConfirmPassword, "تکرار کلمه عبور", new { @class = "control-label" }) <div> @Html.PasswordFor(m => m.ConfirmPassword) </div> </div> <div> <div> <input type="submit" value="تغییر کلمه عبور" /> </div> </div> }
همچنین این View و Controller متناظر آن، احتیاج به ViewModel زیر دارند که آن را به پروژهی Iris.Models اضافه کنید.
using System.ComponentModel.DataAnnotations; namespace Iris.Model { public class ResetPasswordViewModel { [Required] [EmailAddress] [Display(Name = "ایمیل")] public string Email { get; set; } [Required] [StringLength(100, ErrorMessage = "کلمه عبور باید حداقل 6 حرف باشد", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "کلمه عبور")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "تکرار کلمه عبور")] [Compare("Password", ErrorMessage = "کلمه عبور و تکرارش یکسان نیستند")] public string ConfirmPassword { get; set; } public string Code { get; set; } } }
حذف سیستم قدیمی احراز هویت
برای حذف کامل سیستم احراز هویت IRIS، وارد فایل Global.asax.cs شده و سپس از متد Application_AuthenticateRequest کدهای زیر را حذف کنید:
var principalService = ObjectFactory.GetInstance<IPrincipalService>(); var formsAuthenticationService = ObjectFactory.GetInstance<IFormsAuthenticationService>(); context.User = principalService.GetCurrent()
فارسی کردن خطاهای ASP.NET Identity
سیستم Identity، پیامهای خطاها را از فایل Resource موجود در هستهی خود، که به طور پیش فرض، زبان آن انگلیسی است، میخواند. برای مثال وقتی ایمیلی تکراری باشد، پیامی به زبان انگلیسی دریافت خواهید کرد و متاسفانه برای تغییر آن، راه سر راست و واضحی وجود ندارد. برای تغییر این پیامها میتوان از سورس باز بودن Identity استفاده کنید و قسمتی را که پیامها را تولید میکند، خودتان با پیامهای فارسی باز نویسی کنید.
راه اول این است که از این پروژه استفاده کرد و کلاسهای زیر را به پروژه اضافه کنید:
public class CustomUserValidator<TUser, TKey> : IIdentityValidator<ApplicationUser> where TUser : class, IUser<int> where TKey : IEquatable<int> { public bool AllowOnlyAlphanumericUserNames { get; set; } public bool RequireUniqueEmail { get; set; } private ApplicationUserManager Manager { get; set; } public CustomUserValidator(ApplicationUserManager manager) { if (manager == null) throw new ArgumentNullException("manager"); AllowOnlyAlphanumericUserNames = true; Manager = manager; } public virtual async Task<IdentityResult> ValidateAsync(ApplicationUser item) { if (item == null) throw new ArgumentNullException("item"); var errors = new List<string>(); await ValidateUserName(item, errors); if (RequireUniqueEmail) await ValidateEmailAsync(item, errors); return errors.Count <= 0 ? IdentityResult.Success : IdentityResult.Failed(errors.ToArray()); } private async Task ValidateUserName(ApplicationUser user, ICollection<string> errors) { if (string.IsNullOrWhiteSpace(user.UserName)) errors.Add("نام کاربری نباید خالی باشد"); else if (AllowOnlyAlphanumericUserNames && !Regex.IsMatch(user.UserName, "^[A-Za-z0-9@_\\.]+$")) { errors.Add("برای نام کاربری فقط از کاراکترهای مجاز استفاده کنید "); } else { var owner = await Manager.FindByNameAsync(user.UserName); if (owner != null && !EqualityComparer<int>.Default.Equals(owner.Id, user.Id)) errors.Add("این نام کاربری قبلا ثبت شده است"); } } private async Task ValidateEmailAsync(ApplicationUser user, ICollection<string> errors) { var email = await Manager.GetEmailStore().GetEmailAsync(user).WithCurrentCulture(); if (string.IsNullOrWhiteSpace(email)) { errors.Add("وارد کردن ایمیل ضروریست"); } else { try { var m = new MailAddress(email); } catch (FormatException) { errors.Add("ایمیل را به شکل صحیح وارد کنید"); return; } var owner = await Manager.FindByEmailAsync(email); if (owner != null && !EqualityComparer<int>.Default.Equals(owner.Id, user.Id)) errors.Add("این ایمیل قبلا ثبت شده است"); } } }
public class CustomPasswordValidator : IIdentityValidator<string> { #region Properties public int RequiredLength { get; set; } public bool RequireNonLetterOrDigit { get; set; } public bool RequireLowercase { get; set; } public bool RequireUppercase { get; set; } public bool RequireDigit { get; set; } #endregion #region IIdentityValidator public virtual Task<IdentityResult> ValidateAsync(string item) { if (item == null) throw new ArgumentNullException("item"); var list = new List<string>(); if (string.IsNullOrWhiteSpace(item) || item.Length < RequiredLength) list.Add(string.Format("کلمه عبور نباید کمتر از 6 کاراکتر باشد")); if (RequireNonLetterOrDigit && item.All(IsLetterOrDigit)) list.Add("برای امنیت بیشتر از حداقل از یک کارکتر غیر عددی و غیر حرف برای کلمه عبور استفاده کنید"); if (RequireDigit && item.All(c => !IsDigit(c))) list.Add("برای امنیت بیشتر از اعداد هم در کلمه عبور استفاده کنید"); if (RequireLowercase && item.All(c => !IsLower(c))) list.Add("از حروف کوچک نیز برای کلمه عبور استفاده کنید"); if (RequireUppercase && item.All(c => !IsUpper(c))) list.Add("از حروف بزرک نیز برای کلمه عبور استفاده کنید"); return Task.FromResult(list.Count == 0 ? IdentityResult.Success : IdentityResult.Failed(string.Join(" ", list))); } #endregion #region PrivateMethods public virtual bool IsDigit(char c) { if (c >= 48) return c <= 57; return false; } public virtual bool IsLower(char c) { if (c >= 97) return c <= 122; return false; } public virtual bool IsUpper(char c) { if (c >= 65) return c <= 90; return false; } public virtual bool IsLetterOrDigit(char c) { if (!IsUpper(c) && !IsLower(c)) return IsDigit(c); return true; } #endregion }
سپس باید کلاسهای فوق را به Identity معرفی کنید تا از این کلاسهای سفارشی شده به جای کلاسهای پیش فرض خودش استفاده کند. برای این کار وارد کلاس ApplicationUserManager شده و درون متد createApplicationUserManager کدهای زیر را اضافه کنید:
UserValidator = new CustomUserValidator< ApplicationUser, int>(this) { AllowOnlyAlphanumericUserNames = false, RequireUniqueEmail = true }; PasswordValidator = new CustomPasswordValidator { RequiredLength = 6, RequireNonLetterOrDigit = false, RequireDigit = false, RequireLowercase = false, RequireUppercase = false };
ایجاد SecurityStamp برای کاربران فعلی سایت
سیستم Identity برای لحاظ کردن یک سری موارد امنیتی، به ازای هر کاربر، فیلدی را به نام SecurityStamp درون دیتابیس ذخیره میکند و برای این که این سیستم عملکرد صحیحی داشته باشد، باید این مقدار را برای کاربران فعلی سایت ایجاد کرد تا کاربران فعلی بتوانند از امکانات Identity نظیر فراموشی کلمه عبور، ورود به سیستم و ... استفاده کنند.
برای این کار Identity، متدی به نام UpdateSecurityStamp را در اختیار قرار میدهد تا با استفاده از آن بتوان مقدار فیلد SecurityStamp را به روز رسانی کرد.
معمولا برای انجام این کارها میتوانید یک کنترلر تعریف کنید و درون اکشن متد آن کلیهی کاربران را واکشی کرده و سپس متد UpdateSecurityStamp را بر روی آنها فراخوانی کنید.
public virtual async Task<ActionResult> UpdateAllUsersSecurityStamp() { foreach (var user in await _userManager.GetAllUsersAsync()) { await _userManager.UpdateSecurityStampAsync(user.Id); } return Content("ok"); }
انتقال نقشهای کاربران به جدول جدید و برقراری رابطه بین آنها
در سیستم Iris رابطهی بین کاربران و نقشها یک به چند بود. در سیستم Identity این رابطه چند به چند است و من به عنوان یک حرکت خوب و رو به جلو، رابطهی چند به چند را در سیستم جدید انتخاب کردم. اکنون با استفاده از دستورات زیر به راحتی میتوان نقشهای فعلی و رابطهی بین آنها را به جداول جدیدشان منتقل کرد:
public virtual async Task<ActionResult> CopyRoleToNewTable() { var dbContext = new IrisDbContext(); foreach (var role in await dbContext.Roles.ToListAsync()) { await _roleManager.CreateAsync(new CustomRole(role.Name) { Description = role.Description }); } var users = await dbContext.Users.Include(u => u.Role).ToListAsync(); foreach (var user in users) { await _userManager.AddToRoleAsync(user.Id, user.Role.Name); } return Content("ok"); }
قبل از بررسی این پنل اجازه دهید نگاهی به تعریف DOM بیندازیم.
DOM چیست؟
مدل شیءگرای سند یا دام (DOM - Document Object Model) عنوان یکی از دو ساختوارۀ (architecture) اصلی است (در کنار اساِیاکس) که بر اساس آن سندهای اکسامال را به اشیایی که در بردارندهٔ آن است، تجزیه نموده، و آنها را بهصورت یک ساختار درختی دادهها در فضای حافظه اصلی پهن میکند. ساختوارۀ دام، نه به زبان برنامهنویسی خاصّی وابستگی دارد و نه به سکّوی برنامهنویسی ویژهای، بلکه، به منظور اجراء و پیادهسازی آن باید از یک زبان برنامهنویسی بلندتراز همچون جاوا، سیشارپ، جاوااسکریپت یا مشابه آنها سود بجوییم. آنسوی رابط کاربر سند با مدلی شیءگرا نمایانده میشود.
Options Menu
این منو با راست کلیک کردن بروی نام پنل یا کلیک کردن بروی مثلثی که روی پنل قرار دارد، نمایش داده میشود.
- Show User-defined Properties
در صورت فعال بودن، پراپرتی هایی که توسط کاربر به صفحه اضافه شده اند را نمایش میدهد. - Show User-defined Functions
در صورت فعال بودن، توابعی که توسط کاربر به صفحه اضافه شده اند را نمایش میدهد.
- Show DOM Properties
در صورت فعال بودن، پراپرتی هایی که بصورت پیشفرض در DOM وجود دارند را نمایش میدهد. - Show DOM Functions
در صورت فعال بودن، توابعی که بصورت پیشفرض در DOM وجود دارند را نمایش میدهد. - Show DOM Constants
در صورت فعال بودن، const هایی که بصورت پیشفرض در DOM وجود دارند را نمایش میدهد. - Show Inline Event Handlers
در صورت فعال بودن، رویدادهایی که بصورت خطی در تگها تعریف شده اند را نمایش میدهد. - Show Closures
در صورت فعال بودن، Closureها را نمایش میدهد. - Show Own Properties Only
در صورت فعال بودن، فقط پراپرتی هایی که بروی خود شئ تعریف شده اند را نمایش میدهد. - Show Enumerable Properties Only
در صورت فعال بودن، فقط پراپرتیهای شمارشی را نمایش میدهد. - Refresh
محتویات پنل را بروزرسانی میکند.
Property Path
این قسمت در بالاترین بخش پنل قرار دارد و وظیفهی آن نمایش مسیر شئ از خود شئ تا window است.
همچنین با راست کلیک کردن بروی این قسمت دو گزینه نمایش داده میشود. Refresh برای بروزسازی آدرس نمایش داده شده و Use in Command Line هم برای استفاده از شئ در خط فرمان است. پس از راست کلیک کردن بروی یک شئ و انتخاب گزینهی Use in Command Line فایرباگ تمرکز برنامه را به خط فرمان منتقل میکند و شئ را تحت متغییری به نام $p در خط فرمان کپی میکند.
رنگ ها
برای مشخص کردن نوع متغییرهای این پنل، فایرباگ برای هر نوع متغییر از یک رنگ استفاده میکند.
اشیاء ، اشیاء DOM ، توابع Getter ، توابع تعریفی کاربر ، توابع DOM ، توابع Constructor ، پراپرتیهای Read-only
Auto-Completion
مشابه پنلهای Console, CSS, HTML در این پنل هم امکان اعمال تغییرات همراه با قابلیت تکمیل خودکار وجود دارد.
localStorage
در HTML5 سیستمی برای ذخیره مقادیر در سمت کاربر، به نام localStorage معرفی شد. در این پنل میتوانید محتویات آن را بررسی/ویرایش کنید. برای کار با توابع آن هم میتوانید از پنل Console استفاده کنید. ( همچنین میتوانید از پنل Console بصورت Popup در این پنل و پنلهای دیگر هم استفاده کنید. به تصویر زیر توجه فرمایید. )
توجه کنید که برای مشاهدهی این شئ، باید گزینهی Show DOM Properties فعال باشد و همیچنین در Property Path، شئ window فعال باشد.
Breakpoint Column
شما میتوانید با کلیک بروی ستون سمت چپ پراپرتی ها، آن پراپرتی را تحت نظر گرفته و در صورت تغییر یافتن مقدار آن پراپرتی، کنترل روند اجرای برنامه از همان نقطه را بدست بگیرید. به این صورت که زمانی که کدی پراپرتی موردنظر را تغییر دهد، پنل Script روند اجرای کد را در همان قسمت متوقف میکند.
( ممکن است فایرباگ بصورت خودکار به پنل Script سوئیچ نکند و بعد از متوقف شدن برنامه هم اگر به پنل Script سوئیچ کنید نتیجه را نبینید. پس بهتر است قبل از تغییر یافتن پراپرتی مورد نظر و بعد از قرار دادن Breakpoint به پنل Script بروید. )
Context Menu
با راست کلیک کردن در قسمتهای مختلف پنل، منوهای متفاوتی را خواهید دید. همچنین با راست کلیک کردن بروی مقادیر پراپرتی ها، منوی متناسب با آن مقدار را خواهید دید. مثلا اگر بروی یک تگ HTML در این پنل راست کلیک کنید، منویی که خواهید دید همان منویی است که در پنل HTML مشاهده میکردید.
گزینه | Context | توضیحات |
Copy Name | Property List | نام پراپرتی را در حافظه کپی میکند. |
Copy Path | Property List | آدرس پراپرتی را در حافظه کپی میکند. |
Copy Value | String and Number values | محتوای پراپرتی را در حافظه کپی میکند. |
Edit Property... | Property List ( پراپرتی و توابع کاربر ) | پراپرتی را به حالت ویرایش میآورد. |
Delete Property | Property List ( پراپرتی و توابع کاربر ) | پراپرتی را حذف میکند. |
Break On Property Change | Property List ( پراپرتی و توابع کاربر ) | مشابه پاراگرف قبلی. |
Refresh | Property List, Property Path | محتویات پنل را بروزرسانی میکند. |
برای توابع هم دو منوی اضافی وجود دارد:
- Log Calls to "<function name>"
فراخوانیهای تابع مورد نظر را Log میکند. ( برای توضیحات بیشتر دستور monitor که از توابع خط فرمان است را ملاحظه بفرمایید. ) - Copy Function
نام و بندهی تابع را در حافظه کپی میکند.
JQuery Plugins #1
jQuery.fn.myPlugin = function() { //محتویات پلاگین را اینجا مینویسیم };
(function( $ ) { $.fn.myPlugin = function() { //محتویات پلاگین را اینجا مینویسیم }; })( jQuery );
محتوای پلاگین
(function($){ $.fn.underline= function() { this.hover(function(){ $(this).css( { text-decoration : underline }) }, function(){ $(this).css( { text-decoration : none } ) }); }; })(jQuery); $("p").underline();
(function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; }; })( jQuery );
var tallest = $('div').maxHeight(); // بیشترین ارتفاع عنصر را برمی گرداند
حفظ خاصیت زنجیرهای پلاگین ها
(function( $ ){ $.fn.lockDimensions = function( type ) { return this.each(function() { var $this = $(this); if ( !type || type == 'width' ) { $this.width( $this.width() ); } if ( !type || type == 'height' ) { $this.height( $this.height() ); } }); }; })( jQuery );
$('div').lockDimensions('width').css('color', 'red');
(function( $ ){ $.fn.tooltip = function( options ) { var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here }); }; })( jQuery );
$('div').tooltip({ 'location' : 'left' });
ASP.NET MVC
- ASP.NET MVC #1
- ASP.NET MVC #2
- ASP.NET MVC #3
- ASP.NET MVC #4
- ASP.NET MVC #5
- ASP.NET MVC #6
- ASP.NET MVC #7
- ASP.NET MVC #8
- ASP.NET MVC #9
- ASP.NET MVC #10
- ASP.NET MVC #11
- ASP.NET MVC #12
- ASP.NET MVC #13
- ASP.NET MVC #14
- ASP.NET MVC #15
- ASP.NET MVC #16
- ASP.NET MVC #17
- ASP.NET MVC #18
- ASP.NET MVC #19
- ASP.NET MVC #20
- ASP.NET MVC #21
- ASP.NET MVC #22
- ASP.NET MVC #23
- ASP.NET MVC #24
- نحوه ارتقاء برنامههای موجود MVC3 به MVC4
- تغییرات بوجود آمده در Bundling and Minification -MVC4
- تغییرات بوجود آمده در Mobile Features-MVC4
- تغییرات بوجود آمده در Single Page Application (SPA)-MVC4
- تغییرات بوجود آمده در Razor -MVC4
- Globalization در ASP.NET MVC
- Globalization در ASP.NET MVC - قسمت دوم
- Globalization در ASP.NET MVC - قسمت سوم
- Globalization در ASP.NET MVC - قسمت چهارم
- Globalization در ASP.NET MVC - قسمت پنجم
- Globalization در ASP.NET MVC - قسمت ششم
- Globalization در ASP.NET MVC - قسمت هفتم
- بررسی تغییرات ASP.NET MVC 5 beta1
- مسیریابی (Routing) در ASP.NET MVC 5.x
- Attribute Routing در ASP.NET MVC 5
- قابلیت Attribute Routing در ASP.NET MVC 5
- یک تکنیک جالب در نحوه نام گذاری فیلدهای دیتابیس به منظور استفاده بهینه از فایلهای T4 در MVC 5
- نگاهی به هویت سنجی کاربران در ASP.NET MVC 5
- سفارشی کردن ASP.NET Identity در MVC 5
- افزودن تصدیق ایمیل به ASP.NET Identity در MVC 5
- ایجاد کپچایی (captcha) سریع و ساده در ASP.NET MVC 5
- توزیع یک اپلیکیشن ASP.NET MVC 5 روی Windows Azure
- معماری لایه بندی نرم افزار #1
- معماری لایه بندی نرم افزار #2
- معماری لایه بندی نرم افزار #3
- معماری لایه بندی نرم افزار #4
- CheckBoxList در ASP.NET MVC
- RadioButtonList در ASP.NET MVC
- مدیریت محل اعمال Google analytics در ASP.NET MVC
- استفاده از HttpGet در ASP.NET MVC، آری یا خیر؟!
- اثر وجود سشن بر پردازش موازی در ASP.NET
- استفاده از دکمههای CSS توئیتر در ASP.NET MVC
- نحوه صحیح تولید Url در ASP.NET MVC
- استفاده از OpenID در وب سایت جهت احراز هویت کاربران
- متدهای کمکی مفید در پروژههای asp.net mvc
- T4MVC : یکی از الزامات مدیریت پروژههای ASP.NET MVC
- مقدمه ای بر AutoMapper
- بهبود سرعت نمایش صفحات در ASP.NET MVC با حذف View Engines اضافی
- محدود کردن کاربرها به آپلود فایلهایی خاص در ASP.NET MVC
- ارسال فایل در ASP.NET MVC و اعتبار سنجی سمت کاربر
- فعال سازی قسمت ارسال فایل و تصویر ویرایشگر آنلاین RedActor در ASP.NET MVC
- معرفی پروژه Orchard
- مباحث تکمیلی مدلهای خود ارجاع دهنده در EF Code first
- سازگار کردن لینکهای قدیمی یک سایت با ساختار جدید آن در ASP.NET MVC
- CAPTCHAfa
- نکتهای در استفاده از AutoMapper
- یکپارچه سازی CKEditor با Lightbox
- تهیه خروجی RSS در برنامههای ASP.NET MVC
- ایجاد Helper سفارشی جهت نمایش ویدئو در ASP.NET MVC
- ساخت DropDownListهای مرتبط به کمک jQuery Ajax در MVC
- استفاده از دکمههای CSS توئیتر در ASP.NET MVC - قسمت دوم
- با ASP.MVC چه مزایایی را به دست خواهیم آورد
- نحوه اضافه کردن Auto-Complete به جستجوی لوسین در ASP.NET MVC و Web forms
- مقابله با پسوردهایی که ساده حدس زده میشوند
- غیرفعال کردن کش مرورگر در MVC
- Best Practice هایی برای ASP.NET MVC - قسمت اول
- چک لیست تهیه یک برنامه ASP.NET MVC
- استفاده از FluentValidation در ASP.NET MVC
- نحوه اجباری کردن استفاده از WWW در ASP.NET MVC
- نمایش رکوردها به ترتیب اولویت به کمک jQuery UI sortable در ASP.NET MVC
- کنترل عمومی فایلهای آپلودی در ASP.NET MVC
- هدایت خودکار کاربر به صفحه لاگین در حین اعمال Ajax ایی
- مدیریت سفارشی سطوح دسترسی کاربران در MVC
- بهبود SEO در ASP.NET MVC
- ایجاد قسمتهای Toggle در سایت با jQuery
- آشنایی و بررسی ابزار MiniProfiler
- استفاده از Flash Uploader در ASP.NET MVC
- استایل دهی به ستونهای header در WebGrid
- ELMAH و حملات XSS
- آموزش MEF#2(استفاده از MEF در Asp.Net MVC)
- نحوه استفاده از ViewModel در ASP.NET MVC
- مخفی کردن کوئری استرینگها در ASP.NET MVC توسط امکانات Routing
- توزیع پروژههای ASP.NET MVC بدون ارائه فایلهای View آن
- حذف هدرهای مربوط به وب سرور از طریق برنامه نویسی
- ایجاد helper برای Nivo Slider در Asp.net Mvc
- آشنایی با Fluent Html Helpers در MVC
- نحوه استفاده از افزونه Firebug برای دیباگ برنامههای ASP.NET مبتنی بر jQuery
- عدم امکان تغییر اطلاعات مدل در HTML Helpers پس از Postback در ASP.NET MVC
- اضافه کردن Watermark به تصاویر یک برنامه ASP.NET MVC در صورت لینک شدن در سایتی دیگر
- چگونگی رسیدگی به Null property در AutoMapper
- return File در ASP.NET MVC و نامهای یونیکد
- تولید SiteMap استاندارد و ایجاد یک ActionResult اختصاصی برای Return کردن SiteMap تولید شده
- نحوه ایجاد یک تصویر امنیتی (Captcha) با حروف فارسی در ASP.Net MVC
- الگوی PRG در ASP.NET MVC
- اعتبارسنجی سایتهای چند زبانه در ASP.NET MVC - قسمت اول
- آغاز به کار با Twitter Bootstrap در ASP.NET MVC
- استفاده از Twitter Bootstrap در کارهای روزمره طراحی وب
- نگاهی به اجزای تعاملی Twitter Bootstrap
- اعمال کلاسهای ویژه اعتبارسنجی Twitter bootstrap به فرمهای ASP.NET MVC
- ویرایش قالب پیش فرض Add View در ASP.NET MVC برای سازگار سازی آن با Twitter bootstrap
- استفاده از افزونه Typeahead مجموعه Twitter Bootstrap در ASP.NET MVC
- استفاده از modal dialogs مجموعه Twitter Bootstrap برای گرفتن تائید از کاربر
- Bundling and Minifying Inline Css and Js
- نمایش فرمهای مودال Ajax ایی در ASP.NET MVC به کمک Twitter Bootstrap
- MVC vs 3-Tier Pattern
- پلاگین جستجو با jquery و twitter bootstrap
- نمایش خطاهای اعتبارسنجی سمت کاربر ASP.NET MVC به شکل Tooltip به کمک Twitter bootstrap
- نمایش خطاهای اعتبارسنجی سمت کاربر ASP.NET MVC به شکل Popover به کمک Twitter bootstrap
- ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC
- پیاده سازی Open Search در ASP.NET MVC
- Best Practice ی برای تأیید اعتبار کردن کاربران در ASP.NET MVC 4
- هدایت درخواست فایلهای استاتیک در ASP.NET MVC به یک کنترلر
- ModelBinder سفارشی در ASP.NET MVC
- ایجاد لینک با یک تصویر بوسیله Html Helper
- بارگزاری PartialView با استفاده از jQuery در زمان اجرا
- یافتن اکشن متدهای به اشتباه کش شده در ASP.NET MVC
- مروری مقدماتی بر ساخت برنامههای موبایل در MVC4
- اجرای برنامههای ASP.NET توسط Mono در Ubuntu
- اجرای برنامههای ASP.NET به کمک وب سرور Apache توسط Mono در Ubuntu
- فعالسازی استفاده از Session در ASP.NET MVC 4 API Controller ها
- ساخت منوهای چند سطحی در ASP.NET MVC
- طراحی ValidationAttribute دلخواه و هماهنگ سازی آن با ASP.NET MVC
- بهینه سازی برنامههای وب ASP.NET برای موتورهای جستجو (SEO)
- CheckBoxList برای فیلد Enum Flags مدل در ASP.Net MVC
- چطور مسیریابیهای ASP.NET MVC را دیباگ کنیم؟
- ذخیره TreeView ساخته شده توسط KendoUI در Asp.net MVC
- تنظیمات امنیتی Glimpse
- سفارشی سازی Binding یک خصوصیت از طریق Attributes
- Bundle کردن فایلهای LESS در MVC
- TwitterBootstrapMVC
- بررسی خطای Circular References در ASP.NET MVC Json Serialization
- ایجاد یک فیلتر سفارشی جهت تعیین Layout برای کنترلر و یا اکشن متد
- حذف فضاهای خالی در خروجی صفحات ASP.NET MVC
- جلوگیری از درج صفحات سایت در سایتی دیگر از طریق iframeها
- مشکل اعتبار سنجی jQuery validator در Bootstrap tabs
- افزودن هدرهای Content Security Policy به برنامههای ASP.NET
- امکان اعتبارسنجی با تاخیر در ASP.NET 4.5
- معرفی ASP.NET Identity
- متدهای احراز هویت در VS 2013
- توسعه اپلیکیشنهای ASP.NET با Windows Azure Active Directory
- ساخت یک اپلیکیشن ساده ToDo با ASP.NET Identity
- دریافت اطلاعات بیشتر از Social Providerها در VS 2013
- معرفی کتابخانه Postal برای ASP.NET MVC
- استفاده از Web Fonts در اپلیکیشنهای ASP.NET MVC
- استفاده از Awesomium.NET در برنامههای وب
- خواندن اطلاعات از سرور و نمایش آن توسط Angular در ASP.NET MVC
- آموزش Backload (آپلود چندین فایل به طور همزمان با آجاکس )
- یافتن اکشن متدهای Post ایی در ASP.NET MVC که فیلتر CSRF ندارند
- ایجاد سیستم وضعیت آب و هوا مانند گوگل (بخش اول)
- استفاده از #F در پروژههای MVC4
- توسعه کنترلر و مدل در F# MVC4
- تعامل با پایگاه داده با استفاده از EntityFramework در پروژههای F# MVC 4
- انجام کارهای زمانبندی شده در برنامههای ASP.NET توسط DNT Scheduler
- بررسی خروجی IsAjaxRequest در درخواستهای http$ توسط AngularJS
- بارگذاری فایلهای ایستا از پوشهی Views در ASP.NET MVC
- هدایت خودکار آدرسهای یافت نشد در یک سایت ASP.NET MVC به جستجوی سایت
- راههای متفاوت رندر لایهها در ASP.NET MVC
- پروژه Microsoft.AspNet.Mvc.Futures و تولید مسیرهای Strongly typed
- ASP.NET MVC و Identity 2.0 : مفاهیم پایه
- ارسال PingBack در ASP.NET
- Identity 2.0 : تایید حسابهای کاربری و احراز هویت دو مرحله ای
- مدیریت درخواستهای شرطی در ASP.NET MVC
- استفاده از Froala WYSIWYG Editor در ASP.NET
- استفاده از نگارش سوم Google Analytics API در سرویسهای ویندوز یا برنامههای وب
- بهینه سازی فایلهای js و css در برنامههای ASP.NET با استفاده از Combres - قسمت اول
- استفاده از pjax بجای ajax در ASP.NET MVC
- استفاده از افزونهی jsTree در ASP.NET MVC
- تفاوت ViewData و ViewBag و TempData و Session در MVC
- استفاده از چند فرم در کنار هم در ASP.NET MVC
- انجام کارهای پس زمینه در ASP.NET 4.5.2
- نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC
- صفحه بندی و مرتب سازی خودکار اطلاعات به کمک jqGrid در ASP.NET MVC
- فرمت کردن اطلاعات نمایش داده شده به کمک jqGrid در ASP.NET MVC
- فعال سازی و پردازش جستجوی پویای jqGrid در ASP.NET MVC
- استفاده از چند Routing در یک پروژه ASP.NET MVC بدون درد و خونریزی
- فعال سازی و پردازش صفحات پویای افزودن، ویرایش و حذف رکوردهای jqGrid در ASP.NET MVC
- رمزنگاری خودکار فیلدهای مخفی در ASP.NET MVC
- استفاده ازExpressionها جهت ایجاد Strongly typed view در ASP.NET MVC
- سفارشی سازی عناصر صفحات پویای افزودن و ویرایش رکوردهای jqGrid در ASP.NET MVC
- تهیه خروجی PDF و اکسل از حاصل جستجوی پویای jqGrid به کمک PDF Report
- Ajax.BeginForm و ارسال فایل به سرور در ASP.NET MVC
- آپلود فایل توسط فرمهای پویای jqGrid
- اختصاصی کردن Razor برای #C در MVC با استفاده از Extension Method
- روشی سریع برای ایجاد RSS و Sitemap در ASP.NET MVC
- اعتبارسنجی سفارشی سمت کاربر و سمت سرور در jqGrid
- OutputCache در ASP.NET MVC
- فعال سازی و پردازش Inline Add در jqGrid
- بهینه سازی سرعت یافت ویوها با سفارشی سازی Lookup Caching در Razor View Engine
- گروه بندی اطلاعات در jqGrid
- نمایش Subgrid در jqGrid
- ایجاد زیر گریدهای چند سطحی در jqGrid
- نمایش ساختارهای درختی توسط jqGrid
- سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC
- اعتبارسنجی در فرمهای ASP.NET MVC با Remote Validation
- قالبهای سفارشی برای HtmlHelperها
- ارسال ویدیو بصورت Async توسط Web Api
- اعتبار سنجی سمت کاربر wysiwyg-editorها در ASP.NET MVC
- بررسی مقدمات کتابخانهی JSON.NET
- تنظیمات و نکات کاربردی کتابخانهی JSON.NET
- استفاده از JSON.NET در ASP.NET MVC
- LINQ to JSON به کمک JSON.NET
- آشنایی با چالشهای امنیتی در توسعه برنامههای تحت وب، بخش اول
- نمایش بلادرنگ اعلامی به تمام کاربران در هنگام درج یک رکورد جدید
- پیاده سازی Template تو در تو در AngularJS و ASP.NET MVC
- یکپارچه سازی سیستم اعتبارسنجی ASP.NET MVC با Kendo UI validator
- ساخت یک Form Generator ساده در MVC
- آشنایی با WebDav و نحوه استفاده از آن
- قابلیت Templated Razor Delegate
- اعمال تزریق وابستگیها به مثال رسمی ASP.NET Identity
- ثبت جزئیات استثناهای Entity framework توسط ELMAH
- نمایش بلادرنگ اعلامی به تمام کاربران در هنگام درج یک رکورد جدید به صورت notification
- کار با وب سرویس جاوایی تشخیص ایمیلهای موقتی در دات نت
- فراخوانی متدهای Controllerها در Viewهای ASP.NET MVC
- لغو اجرای یک اکشن فیلتر برای یک اکشن خاص در MVC
- کار با اسکنر در برنامههای تحت وب (قسمت اول)
- کار با اسکنر در برنامههای تحت وب (قسمت دوم و آخر)
- تبدیل یک View به رشته و بازگشت آن به همراه نتایج JSON حاصل از یک عملیات Ajax ایی در ASP.NET MVC
- آشنایی با ساختار ViewBag
- مدیریت سشنها در برنامههای وب به کمک تزریق وابستگیها
- خلاصهای از روشهای ارسال دادههای سمت سرور به کدهای جاوا اسکریپتی در ASP.NET MVC
- یکدست کردن "ی" و "ک" در ASP.NET MVC با پیادهسازی یک Model Binder
- حذف پردازش درخواستهای فایلهای استاتیک در متد Application_AuthenticateRequest
- دریافت خطاهای موجود در Viewهای ASP.NET MVC در زمان کامپایل
- پیاده سازی یک متد الحاقی برای تبدیل آدرس فیزیکی به آدرس مجازی (آدرس سرور)
- استفاده از Razor در فایلهای JavaScript و CSS
- عمومی سازی الگوریتمها با استفاده از Reflection
شروع به کار با Postman
پس از نصب و اجرای Postman، در ابتدا درخواست میکند که اکانتی را در سایت آنها ایجاد کنید. البته این مورد اختیاری است و امکان ذخیره سازی بهتر کارها را فراهم میکند. همچنین در اولین بار اجرای برنامه، یک صفحهی دیالوگ انتخاب گزینههای مختلف را نمایش میدهد که میتوانید نمایش آتی آنرا با برداشتن تیک Show this window on launch، غیرفعال کنید.
رابط کاربری Postman، از چندین قسمت تشکیل میشود:
1) Request builder
در قسمت سمت راست و بالای رابط کاربری Postman میتوان انواع و اقسام درخواستها را جهت ارسال به یک Web API، ساخت و ایجاد کرد. توسط آن میتوان HTTP method، آدرس، بدنه، هدرها و کوکیهای یک درخواست را تنظیم کرد. برای مثال در اینجا httpbin.org را وارد کرده و بر روی دکمهی send کلیک کنید:
2) قسمت نمایش Response
پس از ارسال درخواست، بلافاصله، نتیجهی نهایی را در ذیل قسمت ساخت درخواست، میتوان مشاهده کرد:
در اینجا status code بازگشتی از سرور و همچنین response body را مشاهده میکنید. به علاوه نوع خروجی را نیز HTML تشخیص دادهاست و با توجه به اینکه این درخواست، به یک وب سایت معمولی بودهاست، طبیعی میباشد.
همچنین در این خروجی، سه برگهی pretty/raw/preview نیز قابل مشاهده هستند. حالت pretty آنرا که به همراه syntax highlighting است، مشاهده میکنید. اگر حالت نمایش raw را انتخاب کنید، حالت متنی و اصل خروجی بازگشتی از سمت سرور را مشاهده خواهید کرد. برگهی preview آن، این خروجی را شبیه به یک مرورگر نمایش میدهد.
3) قسمت History
با ارسال این درخواست، در سمت چپ صفحه، تاریخچهی این عملیات نیز درج میشود:
4) رابط کاربری چند برگهای
برای ارسال یک درخواست جدید، یا میتوان مجددا یکی از گزینههای History را انتخاب کرد و آنرا ارسال نمود و یا میتوان در همان قسمت سمت راست و بالای رابط کاربری، بر روی دکمهی + کلیک و برگهی جدیدی را جهت ایجاد درخواستی جدید، باز کرد:
در اینجا درخواستی را به endpoint جدید https://httpbin.org/get ارسال کردهایم که در آن نوع پروتکل HTTPS نیز صریحا ذکر شدهاست. اگر به خروجی دریافتی از سرور دقت کنید، اینبار نوع بازگشتی را JSON تشخیص دادهاست که خروجی متداول بسیاری از HTTP Restful APIs است. در این حالت، انتخاب نوع نمایش pretty/raw/preview آنچنان تفاوتی را ایجاد نمیکند و همان حالت pretty که syntax highlighting را نیز به همراه دارد، مناسب است.
ارسال کوئری استرینگها توسط Postman
برای ارسال درخواستی به همراه کوئری استرینگها مانند https://httpbin.org/get?param1=val1¶m2=val2، میتوان به صورت زیر عمل کرد:
یا میتوان مستقیما URL فوق را وارد کرد و سپس بر روی دکمهی send کلیک نمود و یا در ذیل این قسمت، در برگهی Params نیز این کوئری استرینگها به صورت key/valueهایی ظاهر میشوند که وارد کردن آنها به این نحو سادهتر است؛ خصوصا اگر تعداد این پارامترها زیاد باشد، تغییر پارامترها و آزمایش آنها توسط این رابط کاربری گرید مانند، به سهولت قابل انجام است. همچنین جائیکه علامت check-mark را مشاهده میکنید، میتوان اشارهگر ماوس را قرار داد تا آیکن تغییر ترتیب پارامترها نیز ظاهر شود. به این ترتیب توسط drag & drop میتوان ترتیب این ردیفها را تغییر داد:
اگر نیازی به پارامتری ندارید، میتوانید با عبور اشارهگر ماوس از روی یک ردیف، علامت ضربدر حذف کلی آن ردیف را نیز مشاهده کنید و یا با برداشتن تیک هر کدام میتوان به سادگی و بسیار سریع، بجای حذف یک پارامتر، آنرا غیرفعال و یک URL جدید را تولید و آزمایش کرد که برای آزمایش دستی حالتهای مختلف یک API، صرفهجویی زمانی قابل توجهی را فراهم میکند.
ذخیره سازی عملیات انجام شده
تا اینجا اگر به رابط کاربری تولید شده دقت کنید، بالای هر برگه، یک علامت دایرهای نارنجی رنگ، قابل مشاهدهاست که به معنای عدم ذخیره سازی آن برگهاست.
در همینجا بر روی دکمهی Save کنار دکمهی Send کلیک کنید. اگر دقت کنید، دکمهی Save دیالوگ ظاهر شده غیرفعال است:
علت اینجا است که در Postman نمیتوان یک تک درخواست را به صورت مستقل ذخیره کرد. Postman درخواستها را در مجموعههای خاص خودش (collections) مدیریت میکند؛ چیزی شبیه به پوشهی bookmarks، در یک مرورگر. بنابراین در همینجا بر روی لینک Create collection کلیک کرده و برای مثال نام گروه دلخواهی را مانند httpbin وارد کنید. سپس بر روی دکمهی check-mark کنار آن کلیک نمائید تا این مجموعه ایجاد شود.
اکنون پس از ایجاد این مجموعه و انتخاب آن، دکمهی Save to httpbin در پایین صفحه ظاهر میشود.
به صورت پیشفرض، نام فیلد درخواست، در این صفحهی دیالوگ، همان آدرس درخواست است که قابلیت ویرایش را نیز دارد. بنابراین برای مثال فیلد request name را به Get request تغییر داده و سپس بر روی دکمهی Save to httpbin کلیک کنید.
نتیجهی این عملیات را در برگهی Collections سمت چپ صفحه میتوان مشاهده کرد. در این حالت اگر درخواست مدنظری را انتخاب کنید و سپس جزئیات آنرا ویرایش کنید، مجددا همان علامت دایرهای نارنجی رنگ، بالای برگهی ساخت درخواست ظاهر میشود که بیانگر حالت ذخیره نشدهی این درخواست است. اکنون اگر بر روی دکمهی Save کنار Send کلیک کنید، در همان آیتم گروه جاری انتخابی، به صورت خودکار ذخیره و بازنویسی خواهد شد.
ارسال درخواستهایی از نوع POST
برای آزمایش ارسال یک درخواست از نوع Post، مجددا بر روی دکمهی + کنار آخرین برگهی باز شده کلیک میکنیم تا یک برگهی جدید باز شود. سپس در ابتدا، نوع درخواست را از Get پیشفرض، به Post تغییر میدهیم:
در این حالت آدرس https://httpbin.org/post را وارد کرده و سپس برگهی body را که پس از انتخاب حالت Post فعال شدهاست، انتخاب میکنیم:
در اینجا برای مثال گزینهی x-www-form-urlencoded، همان حالتی است که اطلاعات را از طریق یک فرم واقع در صفحات وب به سمت سرور ارسال میکنیم. اما اگر برای مثال نیاز باشد تا اطلاعات را با فرمت JSON، به سمت Web API ای ارسال کنیم، نیاز است گزینهی raw را انتخاب کرد و سپس قالب پیشفرض آنرا که text است به JSON تغییر داد:
در اینجا برای مثال یک payload ساده را ایجاد کرده و سپس بر روی دکمهی send کلیک کنید تا به عنوان بدنهی درخواست، به سمت Web API ارسال شود:
که نتیجهی آن چنین خروجی از سمت سرور خواهد بود:
در یک قسمت آن، raw data ما مشخص است و در قسمتی دیگر، اطلاعات با فرمت JSON، به درستی تشخیص دادهاست.
در ادامه بر روی دکمهی Save این برگه کلیک کنید. در صفحهی باز شده، نام پیشفرض آنرا که آدرس درخواست است، به Post request تغییر داده، گروه httpbin را انتخاب و سپس بر روی دکمهی Save to httpbin کلیک کنید:
اکنون مجموعهی httpbin به همراه دو درخواست است:
برای آزمایش آن، تمام برگههای باز را با کلیک بر روی دکمهی ضربدر آنها ببندید. در ادامه اگر بر روی هر کدام از آیتمهای این مجموعه کلیک کنید، جزئیات آن قابل بازیابی خواهد بود.