@attribute [ProtectedPage(GroupName = "Feature 1", Title = "Page 1", GlyphIcon = "bi bi-dot", GroupOrder = 1, ItemOrder = 1)]
بعنوان مثال میتوان با ترکیب تصاویر و آدرس‌های مختلف دانشگاه‌های تهران، یک map Mashup درست کرد.
برای Photo Mashup ابزار Color Picker هم هست که امکان جستجوی تصاویر را بر اساس رنگ فراهم میکند و از سرویس اشتراک گذاری عکس Flickr استفاده میکند که در این آدرس قابل استفاده است.
معماری Mashup هم مثل معماری MVC (البته با تفاوت‌های فاحش) سه لایه‌ای است :
لایه نمایش / تعامل کاربر (همان رابط کاربری است)
تکنولوژی‌ها : HTML/XHTML, CSS, Javascript, Asynchronous JS and Xml (Ajax).
وب سرویس‌ها : عملکرد محصول از طریق سرویسهای API هم قابل دسترسی است
تکنولوژی‌ها : XMLHTTPRequest, XML-RPC, JSON-RPC, SOAP, REST
داده : فراهم آوردن امکان ارسال ، مرتب سازی و دریافت داده
تکنولوژی‌ها : XML , JSON , KML
از نظر معماری Mashup دارای 2 سبک است : الف) مبتنی بر وب – ب) مبتنی بر سرور
در ادامه با هم نمونه ای از استقرار معماری وب گرا WOA را در سازمان، بصورت شماتیک می‌بینیم. با هم مشاهده می‌کنیم با این پیاده سازی، موانع سر راه ما کاهش پیدا میکنند و سرعت یکپارچگی افزایش پیدا میکند. بدین صورت که میتوان از قدرت شبکه جهانی وب در جهت انتقال محتوای مورد نیازمان به هر جا و در هر زمانی بهره جست.
شاید برای شما سوال پیش بیاید که ما در معماری وب گرا بحث می‌کردیم، اصلا چرا وارد مفهوم Mashup شدیم؟
به‌عبارت فنی‌تر چرا معماری وب گرا (WOA) برای Mashups اهمیت دارد ؟
پاسخ یک کلمه است : REST . همانطور که بالاتر نیز اشاره کردم، Mashup از REST بهره می‌برد. به منظور افزایش اطلاعات در رابطه با REST باید گفت Roy Fielding آنرا بنیان نهاده‌است. میخواهید او را بهتر معرفی کنم؟ وی یکی از خالقان HTTP است و مگر میتوان وب را بدون HTTP فرض کرد که مهمترین پروتکل انتقال ابر متن در جهان و پروتکل زیربنایی وب است؟!
REST به خوبی با معماری اینترنت عجین شده است! بپرسید چرا؟ چون پروتکل اصلی اینترنت HTTP است و هر دوی اینها از یک ذهن نشات گرفته و او کسی نیست جز Roy Fielding. اما باید بگویم REST یک استاندارد نیست؛ با وجود سادگی بسیار زیاد، تنها یک سبک استفاده از HTTP است.
REST همچنین از متدهای اختصاصی HTTP نظیر GET, PUT , POST , DELETE در بالای یک URL استفاده میکند تا نشان دهد چه رویدادی رخ میدهد.
در پایان گفته‌ها در رابطه با REST باید بگویم ATOM همان REST است. منظورم از ATOM ویرایشگر معروف متنی نیست که برای نوشتن کدهای برنامه نویسی استفاده قرار می‌گیرد؛ آنرا غالبا به شکل Atom می‌نویسند چرا که مخفف چند کلمه نیست و یک کلمه خاص است اما ATOM یک استاندارد وب به زبان XML است که برای خوراک وب بعنوان جایگزینی برای RSS استفاده میشود. ATOM را با AtomPub یا APP اشتباه نگیرید؛ چرا که APP پروتکل انتشاری است مبتنی بر پروتکل انتقال ابرمتن (HTTP) و برای به روزرسانی محتوی وب مورد استفاده قرار می‌گیرد.
در ادامه مباحث دررابطه با معماری وب گرا باید گفت WOA امروزه بعنوان مدل حاکم برنامه‌های تحت شبکه مطرح است. اما متاسفانه فروشندگان بزرگی در پشت آن حضور ندارند به همین دلیل آنچنان که باید عمومیت نیافته است. WOA همچنان میتواند بیشترین سود حاصل را از طریق شبکه فراهم کند. شاید بتوان گفت کوتاه‌ترین مسیر برای رسیدن به چنین نتیجه‌ای همین معماری وب گرا است.
فرمول جالبی هم برای تعریف وب ارائه شده‌است که با هم می‌بینیم :
HTTP + URIs = Web
ظرافت فرمول بالا به اهمیت پروتکل زیربنایی وب یعنی HTTP اشاره دارد. URI هم مجموعه‌ای از رشته‌هاست که برای شناسایی یک منبع خاص تحت وب به کار می‌روند. در شکل زیر رابطه بین URI , URN , URL را بررسی می‌کنیم. URI تشکیل شده‌است از URL و URN .URL متد دسترسی به منبع را مشخص میکند، در حالیکه URN تنها مشخص کننده نام منبع میباشد و هیچگونه روشی را برای دسترسی به ما ارائه نمی‌دهد. بعنوان مثال یک شماره ISBN کتاب، یک نوع URN است.
پی نوشت: سیستم به اسمبلی هایی که از روی ماشین یا از طریق شبکه به اشتراک گذاشته میشوند اعتماد کامل میکند که این اعتماد شامل کدهای ناامن هم میشود ولی به طور پیش فرض به اسمبلی هایی از طریق اینترنت اجرا میشوند اجازه اجرای کدهای ناامن را نمی‌دهد و اگر شامل کدهای ناامن شود یکی از خطاهایی که در بالا به آن اشاره کردیم را صادر میکنند. در صورتی که مدیر یا کاربر سیستم اجازه اجرای آن را بدهد تمامی مسئولیت‌های این اجرا بر گردن اوست.
List<string> scope = newList<string>() { "email", "user_about_me", "user_hometown", "friends_about_me", "friends_photos" };
var x = newFacebookAuthenticationOptions();
x.Scope.Add("email");
x.Scope.Add("friends_about_me");
x.Scope.Add("friends_photos");
x.AppId = "636919159681109";
x.AppSecret = "f3c16511fe95e854cf5885c10f83f26f";
x.Provider = newFacebookAuthenticationProvider()
{
OnAuthenticated = async context =>
{
//Get the access token from FB and store it in the database and
//use FacebookC# SDK to get more information about the user
context.Identity.AddClaim(
new System.Security.Claims.Claim("FacebookAccessToken",
context.AccessToken));
}
};
x.SignInAsAuthenticationType = DefaultAuthenticationTypes.ExternalCookie;
app.UseFacebookAuthentication(x); <li>
@Html.ActionLink("FacebookInfo", "FacebookInfo","Account")
</li> //
// GET: /Account/LinkLoginCallback
publicasyncTask<ActionResult> LinkLoginCallback()
{
var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync(XsrfKey, User.Identity.GetUserId());
if (loginInfo == null)
{
return RedirectToAction("Manage", new { Message = ManageMessageId.Error });
}
var result = await UserManager.AddLoginAsync(User.Identity.GetUserId(), loginInfo.Login);
if (result.Succeeded)
{
var currentUser = await UserManager.FindByIdAsync(User.Identity.GetUserId());
//Add the Facebook Claim
await StoreFacebookAuthToken(currentUser);
return RedirectToAction("Manage");
}
return RedirectToAction("Manage", new { Message = ManageMessageId.Error });
} [HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl)
{
if (User.Identity.IsAuthenticated)
{
return RedirectToAction("Manage");
}
if (ModelState.IsValid)
{
// Get the information about the user from the external login provider
var info = await AuthenticationManager.GetExternalLoginInfoAsync();
if (info == null)
{
return View("ExternalLoginFailure");
}
var user = newApplicationUser() { UserName = model.Email };
var result = await UserManager.CreateAsync(user);
if (result.Succeeded)
{
result = await UserManager.AddLoginAsync(user.Id, info.Login);
if (result.Succeeded)
{
await StoreFacebookAuthToken(user);
await SignInAsync(user, isPersistent: false);
return RedirectToLocal(returnUrl);
}
}
AddErrors(result);
}
ViewBag.ReturnUrl = returnUrl;
return View(model);
} //
// GET: /Account/ExternalLoginCallback
[AllowAnonymous]
publicasyncTask<ActionResult> ExternalLoginCallback(string returnUrl)
{
var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync();
if (loginInfo == null)
{
return RedirectToAction("Login");
}
// Sign in the user with this external login provider if the user already has a login
var user = await UserManager.FindAsync(loginInfo.Login);
if (user != null)
{
//Save the FacebookToken in the database if not already there
await StoreFacebookAuthToken(user);
await SignInAsync(user, isPersistent: false);
return RedirectToLocal(returnUrl);
}
else
{
// If the user does not have an account, then prompt the user to create an account
ViewBag.ReturnUrl = returnUrl;
ViewBag.LoginProvider = loginInfo.Login.LoginProvider;
return View("ExternalLoginConfirmation", newExternalLoginConfirmationViewModel { Email = loginInfo.Email });
}
} privateasyncTask StoreFacebookAuthToken(ApplicationUser user)
{
var claimsIdentity = await AuthenticationManager.GetExternalIdentityAsync(DefaultAuthenticationTypes.ExternalCookie);
if (claimsIdentity != null)
{
// Retrieve the existing claims for the user and add the FacebookAccessTokenClaim
var currentClaims = await UserManager.GetClaimsAsync(user.Id);
var facebookAccessToken = claimsIdentity.FindAll("FacebookAccessToken").First();
if (currentClaims.Count() <=0 )
{
await UserManager.AddClaimAsync(user.Id, facebookAccessToken);
} public class FacebookViewModel
{
[Required]
[Display(Name = "Friend's name")]
public string Name { get; set; }
public string ImageURL { get; set; }
} //GET: Account/FacebookInfo
[Authorize]
publicasyncTask<ActionResult> FacebookInfo()
{
var claimsforUser = await UserManager.GetClaimsAsync(User.Identity.GetUserId());
var access_token = claimsforUser.FirstOrDefault(x => x.Type == "FacebookAccessToken").Value;
var fb = newFacebookClient(access_token);
dynamic myInfo = fb.Get("/me/friends");
var friendsList = newList<FacebookViewModel>();
foreach (dynamic friend in myInfo.data)
{
friendsList.Add(newFacebookViewModel()
{
Name = friend.name,
ImageURL = @"https://graph.facebook.com/" + friend.id + "/picture?type=large"
});
}
return View(friendsList);
} @model IList<WebApplication96.Models.FacebookViewModel>
@if (Model.Count > 0)
{
<h3>List of friends</h3>
<div class="row">
@foreach (var friend in Model)
{
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src=@friend.ImageURL alt=@friend.Name />
</a>
</div>
}
</div>
} 
این یک مثال ساده از کار کردن با تامین کنندگان اجتماعی بود. همانطور که مشاهده می‌کنید، براحتی میتوانید داده‌های بیشتری برای کاربر جاری درخواست کنید و تجربه کاربری و امکانات بسیار بهتری را در اپلیکیشن خود فراهم کنید.
به طور کل ، سه مورد از موارد فوق استفاده بیشتری از بقیه دارند : Full Control ، Contribute و Read .
(برای مثال Design سطحی بین Full Control و Contribute است )
در سطح Contribute ، کاربر میتواند در حد انجام عملیات CRUD روی یک لیست یا کتابخانه موجود دسترسی داشته باشد (امکان تعریف کتابخانه یا لیست جدیدی را ندارد)
در سطح Full Control ، کاربر امکان انجام هر گونه عملیاتی را دارد .
همانطور که مشاهده می‌کنید ، Unique Permission بودن سایت در بالای سایت نمایش داده شده و دکمه Inherite Permission فعال شده است .
در زیر مجموعه آن یک سایت با عنوان meeting Workspace ایجاد می‌کنیم که Security Group آن از IT ارث بری کرده است :
و در این قسمت ارث بری سایت از والد نمایش داده شده و دکمه Stop Inheriting Permission فعال شده است .
همچنین در صورتی که تمایل به ایحاد یک گروه جدید داشته باشید میتوانید از طریق ریبون بالای صفحه روی Create Group کلیک کرده و گروه خود را ایجاد نمایید
>ng g m Dashboard -m app.module --routing >ng g c Dashboard/ProtectedPage
import { DashboardModule } from "./dashboard/dashboard.module";
@NgModule({
imports: [
//...
DashboardModule,
AppRoutingModule
]
})
export class AppModule { } import { ProtectedPageComponent } from "./protected-page/protected-page.component";
const routes: Routes = [
{ path: "protectedPage", component: ProtectedPageComponent }
]; export class LoginComponent implements OnInit {
model: Credentials = { username: "", password: "", rememberMe: false };
error = "";
returnUrl: string; constructor(
private authService: AuthService,
private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
// reset the login status
this.authService.logout(false);
// get the return url from route parameters
this.returnUrl = this.route.snapshot.queryParams["returnUrl"];
} submitForm(form: NgForm) {
this.error = "";
this.authService.login(this.model)
.subscribe(isLoggedIn => {
if (isLoggedIn) {
if (this.returnUrl) {
this.router.navigate([this.returnUrl]);
} else {
this.router.navigate(["/protectedPage"]);
}
}
},
(error: HttpErrorResponse) => {
console.log("Login error", error);
if (error.status === 401) {
this.error = "Invalid User name or Password. Please try again.";
} else {
this.error = `${error.statusText}: ${error.message}`;
}
});
} <div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Login</h2>
</div>
<div class="panel-body">
<form #form="ngForm" (submit)="submitForm(form)" novalidate>
<div class="form-group" [class.has-error]="username.invalid && username.touched">
<label for="username">User name</label>
<input id="username" type="text" required name="username" [(ngModel)]="model.username"
#username="ngModel" class="form-control" placeholder="User name">
<div *ngIf="username.invalid && username.touched">
<div class="alert alert-danger" *ngIf="username.errors['required']">
Name is required.
</div>
</div>
</div>
<div class="form-group" [class.has-error]="password.invalid && password.touched">
<label for="password">Password</label>
<input id="password" type="password" required name="password" [(ngModel)]="model.password"
#password="ngModel" class="form-control" placeholder="Password">
<div *ngIf="password.invalid && password.touched">
<div class="alert alert-danger" *ngIf="password.errors['required']">
Password is required.
</div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="rememberMe" [(ngModel)]="model.rememberMe"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="form.invalid ">Login</button>
</div>
<div *ngIf="error" class="alert alert-danger " role="alert ">
{{error}}
</div>
</form>
</div>
</div> 
export class HeaderComponent implements OnInit, OnDestroy {
title = "Angular.Jwt.Core";
isLoggedIn: boolean;
subscription: Subscription;
displayName: string;
constructor(private authService: AuthService) { } ngOnInit() {
this.subscription = this.authService.authStatus$.subscribe(status => {
this.isLoggedIn = status;
if (status) {
this.displayName = this.authService.getDisplayName();
}
});
} ngOnDestroy() {
// prevent memory leak when component is destroyed
this.subscription.unsubscribe();
} logout() {
this.authService.logout(true);
} <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" [routerLink]="['/']">{{title}}</a>
</div>
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link" [routerLink]="['/welcome']">Home</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item" routerLinkActive="active">
<a class="nav-link" queryParamsHandling="merge" [routerLink]="['/login']">Login</a>
</li>
<li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active">
<a class="nav-link" (click)="logout()">Logoff [{{displayName}}]</a>
</li>
<li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/protectedPage']">Protected Page</a>
</li>
</ul>
</div>
</nav> import { Component, OnInit } from "@angular/core";
import { AuthService } from "../../core/services/auth.service";
@Component({
selector: "app-protected-page",
templateUrl: "./protected-page.component.html",
styleUrls: ["./protected-page.component.css"]
})
export class ProtectedPageComponent implements OnInit {
decodedAccessToken: any = {};
accessTokenExpirationDate: Date = null;
constructor(private authService: AuthService) { }
ngOnInit() {
this.decodedAccessToken = this.authService.getDecodedAccessToken();
this.accessTokenExpirationDate = this.authService.getAccessTokenExpirationDate();
}
} <h1>
Decoded Access Token
</h1>
<div class="alert alert-info">
<label> Access Token Expiration Date:</label> {{accessTokenExpirationDate}}
</div>
<div>
<pre>{{decodedAccessToken | json}}</pre>
</div>