ASP.NET Core 1.0 靜態檔案、路由、自定義中介軟體、身份驗證簡介
概述
ASP.NET Core 1.0是ASP.NET的一個重要的重新設計。 例如,在ASP.NET Core中,使用Middleware編寫請求管道。 ASP.NET Core中介軟體對HttpContext執行非同步邏輯,然後可選地呼叫序列中的下一個中介軟體或直接終止請求。 您通常通過在Configure方法中對IApplicationBuilder呼叫相應的擴充套件方法來使用中介軟體。 中介軟體元件的示例可以是路由和安全認證(Identity)。
在本文中,將探討一些ASP.NET Core 1.0功能,包括如何使用中介軟體元件甚至建立自定義元件。
目錄
- 使用靜態檔案
- 使用路由
- 編寫自定義中介軟體
- 向Web應用程式新增身份驗證
先決條件
完成此模組需要以下內容:
- Visual Studio Community 2015或更高版本
- ASP.NET Core 1.0
練習
此模組包括以下練習:
- 使用靜態檔案
- 路由和MVC簡介
- 構建中介軟體類
- 向Web應用程式新增身份驗證
估計完成此模組的時間:60分鐘
注意:首次啟動Visual Studio時,必須選擇一個預定義的設定集合。 每個預定義集合旨在匹配特定的開發樣式,並確定視窗布局,編輯器行為,智慧感知程式碼片段和對話方塊選項。 本模組中的過程描述了在使用“常規開發設定”集合時,在Visual Studio中完成給定任務所需的操作。 如果為開發環境選擇不同的設定集合,那麼您應該考慮的步驟可能會有所不同。
練習1:使用靜態檔案
靜態檔案(包括HTML檔案,CSS檔案,影像檔案和JavaScript檔案)是應用程式將直接提供給客戶端的資產。
在本練習中,您將配置專案以提供靜態檔案。
任務1 – 提供靜態檔案
為了提供靜態檔案,您必須配置中介軟體以向管道新增靜態檔案。 這是通過從Startup.Configure方法呼叫UseStaticFiles擴充套件方法來實現的。
在此任務中,您將建立一個空的ASP.NET Core 1.0專案並將其配置為提供靜態檔案。
1. 開啟Visual Studio 2015並選擇檔案| 新專案…開始一個新的解決方案。
2. 在“新建專案”對話方塊中,選擇Visual C#|下的ASP.NET Web應用程式 Web選項卡,並確保選擇.NET Framework 4.6。 將專案命名為MyWebApp,選擇一個位置,然後單擊確定。
建立新的ASP.NET Web應用程式專案
3. 在“新建ASP.NET專案”對話方塊中,選擇“ASP.NET 5模板下的空模板”。 單擊“確定”。
使用ASP.NET Core空模板建立新專案
4. 將Microsoft.AspNet.StaticFiles包新增為project.json的依賴項。
"dependencies": { "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final" },
5. 開啟Startup.cs檔案,並在Hello中介軟體之前的Configure方法中新增UseStaticFiles方法呼叫。
public void Configure(IApplicationBuilder app) { app.UseIISPlatformHandler(); app.UseStaticFiles(); app.Run(async (context) => { await context.Response.WriteAsync("Hello World!"); }); }
6. 在wwwroot資料夾中建立一個名為index.html的檔案,其中包含以下內容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello static world!</title> </head> <body> <h1>Hello from ASP.NET Core!</h1> </body> </html>
7. 執行應用程式並導航到根。 它應該顯示Hello World中介軟體。
8. 導航到index.html,它應該顯示wwwroot中的靜態頁面。
任務2 – 新增預設文件支援
為了讓您的Web應用程式提供預設頁面,而使用者不必完全限定URI,就可以使用UseDefaultFiles擴充套件方法。 此方法是實際上不提供檔案的URL重寫程式。
除了UseStaticFiles和UseDefaultFiles擴充套件方法之外,還有一個方法 - UseFileServer - 組合這兩種方法的功能以及UseDirectoryBrowser擴充套件方法。
在此任務中,您將使用UseFileServer啟用服務靜態和預設檔案。
1. 開啟Startup.cs檔案,將Configure方法中的靜態檔案中介軟體從app.UseStaticFiles()更改為app.UseFileServer()。
public void Configure(IApplicationBuilder app) { app.UseIISPlatformHandler(); app.UseFileServer(); app.Run(async (context) => { await context.Response.WriteAsync("Hello World!"); }); }
2. 再次執行應用程式。 導航到網站根目錄時,應顯示預設頁面index.html。
練習2:路由和MVC簡介
路由是對映到處理程式的URL模式。 處理程式可以是物理檔案,例如Web Forms應用程式中的.aspx檔案。 處理程式也可以是處理請求的類,例如MVC應用程式中的控制器。
ASP.NET路由使您能夠使用不必對映到網站中特定檔案的URL。 由於網址不必對映到檔案,因此您可以使用描述使用者操作的網址,因此使用者更容易理解。
在本練習中,您將瞭解如何在應用程式中配置路由。
任務1 – 新增MVC
ASP.NET MVC為您提供了一個強大的,基於模式的方式來構建動態網站,使清晰分離的問題,並讓您完全控制標記的愉快,敏捷開發。 ASP.NET MVC包括許多功能,建立使用最新的Web標準的複雜應用程式。
在此任務中,您將配置專案以使用ASP.NET MVC並配置示例路由。
1. 開啟project.json檔案並將Microsoft.AspNet.Mvc新增到依賴關係部分。
"dependencies": { "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final", "Microsoft.AspNet.Mvc": "6.0.0-rc1-final" },
2. 在解決方案資源管理器中,右鍵單擊MyWebApp專案,然後選擇新增| 新資料夾,並將資料夾命名為控制器。
3. 右鍵單擊新資料夾,然後選擇新增| 新專案…,選擇MVC控制器類,命名檔案HomeController.cs並單擊新增。
4. 使用以下程式碼段替換檔案的內容。
namespace MyWebApp.Controllers { using Microsoft.AspNet.Mvc; public class HomeController : Controller { [HttpGet()] public string Index() => "Hello from MVC!"; } }
5. 現在,開啟Startup.cs檔案,將MVC服務和中介軟體新增到配置中,新增services.AddMvc()並使用UseMvc方法替換Configure方法中的app.Run方法呼叫,如下面的程式碼片段所示。
public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app) { app.UseIISPlatformHandler(); app.UseFileServer(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); }
6. 執行網站並通過導航到/ home端點驗證從MVC控制器返回的訊息。
注意:ASP.NET Core MVC還包括一個方便的新實用程式方法,app.UseMvcWithDefaultRoute,因此您不必記住模板字串。
練習3:編寫自定義中介軟體
可以合併到HTTP請求管道中的小應用程式元件統稱為中介軟體。 ASP.NET Core 1.0具有對中介軟體的整合支援,它們在應用程式啟動期間在應用程式的Configure方法中連線。
在本練習中,您將建立一個基於查詢字串值設定當前文化的中介軟體類。
注意:我們在本練習中使用本地化相關中介軟體作為示例場景,但在大多數應用程式中,您將使用ASP.NET Core的內建支援本地化支援。
任務1 – 編寫一個基於查詢字串值設定當前文化的中介軟體類
中介軟體是組裝到應用程式管道中以處理請求和響應的元件。 每個元件可以選擇是否將請求傳遞到管道中的下一個元件,並且可以在管道中的下一個元件之前和之後執行某些操作。 請求代理用於構建此請求管道,然後用於處理對應用程式的每個HTTP請求。
請求代理使用傳遞到啟動類中的配置方法的IApplicationBuilder型別上的Run(執行),Map(對映)和Use(使用)擴充套件方法進行配置。 單個請求委託可以作為匿名方法線上指定,也可以在可重用類中定義。 這些可重用的類是中介軟體或中介軟體元件。 請求管道中的每個中介軟體元件負責呼叫鏈中的下一個元件,或者如果適當,選擇將鏈短路。
在此任務中,您將建立內聯中介軟體。
1. 開啟Visual Studio 2015並選擇檔案| 新專案…使用ASP.NET Web應用程式模板啟動一個新的解決方案,將其命名為MiddlewareApp,單擊確定,然後在ASP.NET 5模板下選擇空模板。
2. 開啟Startup.cs檔案,並使用以下程式碼片段替換Configure方法的內容,該程式碼片段建立在hello world代理之前執行的內聯中介軟體,hello world代理為查詢字串中的當前請求設定文化。
public void Configure(IApplicationBuilder app) { app.UseIISPlatformHandler(); app.Use((context, next) => { var cultureQuery = context.Request.Query["culture"]; if (!string.IsNullOrWhiteSpace(cultureQuery)) { var culture = new CultureInfo(cultureQuery); #if !DNXCORE50 Thread.CurrentThread.CurrentCulture = culture; Thread.CurrentThread.CurrentUICulture = culture; #else CultureInfo.CurrentCulture = culture; CultureInfo.CurrentUICulture = culture; #endif } // Call the next delegate/middleware in the pipeline return next(); }); app.Run(async (context) => { await context.Response.WriteAsync($"Hello {CultureInfo.CurrentCulture.DisplayName}"); }); }
3. 解決丟失的using語句。
4. 執行應用程式。 要在操作中檢視中介軟體,請通過新增文化查詢字串來設定文化,例如 http://localhost:64165/?culture=no
任務2 – 將中介軟體移動到自己的型別
在此任務中,您將中介軟體移動到一個單獨的檔案。
1. 右鍵單擊MiddlewareApp專案,然後選擇新增| 類…,將檔案命名為RequestCultureMiddleware.cs,然後單擊新增。
2. 新增一個建構函式,它接受一個RequestDelegate引數並使用以下程式碼段將其分配給一個私有欄位。 在需要時繼續解析丟失的using語句。
RequestCultureMiddleware.cs
public class RequestCultureMiddleware { private readonly RequestDelegate next; public RequestCultureMiddleware(RequestDelegate next) { this.next = next; } }
3. 新增以下方法與先前新增到Startup.cs檔案的內聯中介軟體委派的內容。
RequestCultureMiddleware.cs
public Task Invoke(HttpContext context) { var cultureQuery = context.Request.Query["culture"]; if (!string.IsNullOrWhiteSpace(cultureQuery)) { var culture = new CultureInfo(cultureQuery); #if !DNXCORE50 Thread.CurrentThread.CurrentCulture = culture; Thread.CurrentThread.CurrentUICulture = culture; #else CultureInfo.CurrentCulture = culture; CultureInfo.CurrentUICulture = culture; #endif } // 呼叫管道中的下一個代理/中介軟體 return this.next(context); }
4. 在檔案的底部(也可單獨出來),新增一個類,通過IApplicationBuilder上的擴充套件方法公開中介軟體。
RequestCultureMiddleware.cs的檔案底部
public static class RequestCultureMiddlewareExtensions { public static IApplicationBuilder UseRequestCulture(this IApplicationBuilder builder) { return builder.UseMiddleware<RequestCultureMiddleware>(); } }
5. 回到應用程式的Startup.cs檔案中,使用對app.UseRequestCulture()方法的呼叫替換內聯中介軟體委託,以將新的中介軟體類新增到HTTP管道。 完成後,您的Configure方法應如下所示:
public void Configure(IApplicationBuilder app) { app.UseIISPlatformHandler(); app.UseRequestCulture(); app.Run(async (context) => { await context.Response.WriteAsync($"Hello {CultureInfo.CurrentCulture.DisplayName}"); }); }
6. 執行應用程式,並驗證中介軟體現在作為類執行。
任務3 – 向中介軟體新增選項
在此任務中,您將更新RequestCultureMiddleware實現以支援將預設文化設定為配置值。
1. 右鍵單擊MiddlewareApp專案並選擇新增| 類...,將檔案命名為RequestCultureOptions.cs,然後單擊新增。
2. 在新類中,將具有CultureInfo的名為DefaultCulture的屬性新增為型別,解析丟失的依賴關係。
public class RequestCultureOptions { public CultureInfo DefaultCulture { get; set; } }
3. 開啟RequestCultureMiddleware.cs檔案,並更新RequestCultureMiddleware建構函式以接受RequestCultureOptions引數,如以下程式碼段所示。
public class RequestCultureMiddleware { private readonly RequestDelegate next; private readonly RequestCultureOptions options; public RequestCultureMiddleware(RequestDelegate next, RequestCultureOptions options) { this.next = next; this.options = options; } //... }
4. 如果在查詢字串中未指定任何內容,請更新中介軟體的Invoke方法以使用選項中的DefaultCulture屬性,如以下程式碼段所示。
public Task Invoke(HttpContext context) { CultureInfo requestCulture = null; var cultureQuery = context.Request.Query["culture"]; if (!string.IsNullOrWhiteSpace(cultureQuery)) { requestCulture = new CultureInfo(cultureQuery); } else { requestCulture = this.options.DefaultCulture; } if (requestCulture != null) { #if !DNXCORE50 Thread.CurrentThread.CurrentCulture = requestCulture; Thread.CurrentThread.CurrentUICulture = requestCulture; #else CultureInfo.CurrentCulture = requestCulture; CultureInfo.CurrentUICulture = requestCulture; #endif } return this.next(context); }
5. 在同一檔案中,使用以下程式碼片段替換RequestCultureMiddlewareExtensions類實現,該程式碼片段向使用RequestCultureOptions的UseRequestCulture方法新增了一個過載,並將它們傳遞到UseMiddleware <RequestCultureMiddleware>呼叫中。
public static IApplicationBuilder UseRequestCulture(this IApplicationBuilder builder) { return builder.UseRequestCulture(new RequestCultureOptions()); } public static IApplicationBuilder UseRequestCulture(this IApplicationBuilder builder, RequestCultureOptions options) { return builder.UseMiddleware<RequestCultureMiddleware>(options); }
6. 開啟Startup.cs檔案,並將配置方法中的後備文化設定為某些預設值,例如。 “zh-cn”。
app.UseRequestCulture(new RequestCultureOptions { DefaultCulture = new CultureInfo("zh-cn") });
7. 執行應用程式,並驗證當沒有指定查詢字串時,預設文化與配置的匹配。
任務4 – 從檔案讀取請求文化配置
ASP.NET Core的配置系統已經從早期版本的ASP.NET重新構建,後者依賴於System.Configuration和XML配置檔案,如web.config。 新的配置模型提供了可以從各種提供程式檢索的基於鍵/值的設定的簡化訪問。 然後,應用程式和框架可以使用新的選項模式訪問已配置的設定。
在此任務中,您將使用從JSON檔案載入RequestCultureOptions的預設文化值的新配置系統。
1. 開啟Startup.cs檔案並新增一個名為配置型別IConfiguration的新的私有類欄位,解析IConfiguration的丟失依賴關係。
public class Startup { private readonly IConfiguration configuration; // ... }
2. 新增一個新的建構函式,使用ConfigurationBuilder在建構函式中建立一個新的Configuration物件,並將其分配給您在上一步中建立的配置類欄位。
public Startup() { var configuration = new ConfigurationBuilder() .Build(); this.configuration = configuration; }
3. 開啟project.json檔案,並在依賴關係節點中新增對Microsoft.Extensions.Configuration.Json包的引用。
"dependencies": { "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", "Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final" },
4. 回到Startup.cs檔案中,在作為連結方法建立ConfigurationBuilder物件之後立即新增對.AddJsonFile(“config.json”)的呼叫。
public class Startup { private readonly IConfiguration configuration; public Startup() { var configuration = new ConfigurationBuilder() .AddJsonFile("config.json") .Build(); this.configuration = configuration; } // ... }
5. 右鍵單擊MiddlewareApp專案並選擇新增| 新建專案…,選擇JSON檔案作為模板,將檔案命名為config.json,然後單擊新增。
6. 在新的config.json檔案中,新增一個新的鍵/值對“culture”:“zh-cn”。
{ "culture": "zh-cn" }
7. 開啟Startup.cs檔案並更新程式碼以使用新的配置系統設定預設文化。
app.UseRequestCulture(new RequestCultureOptions { DefaultCulture = new CultureInfo(this.configuration["culture"] ?? "zh-cn") });
8. 執行應用程式並驗證預設文化是配置檔案中配置的檔案。
9. 在config.json檔案中將文化值更新為“zh”,並重新整理頁面(不更改任何其他程式碼)。 請注意,訊息未更改,因為僅在應用程式啟動時讀取配置。
10. 回到Visual Studio並按Ctrl + Shift + F5重新啟動Web伺服器。
11. 返回瀏覽器並重新整理頁面; 它應該顯示更新的訊息。
任務5 – 從依賴注入系統到中介軟體的流程選項
ASP.NET Core是從根本上設計的,支援和利用依賴注入。 ASP.NET Core應用程式可以通過將它們注入到Startup類中的方法中來利用內建框架服務,並且應用程式服務也可以配置為注入。 ASP.NET Core提供的預設服務容器提供了一個最小的功能集,並不用於替換其他容器。
在此任務中,您將使用依賴注入系統配置RequestCultureMiddleware選項。
1. 開啟project.json檔案,並在依賴關係節點中新增對Microsoft.Extensions.OptionsModel包的引用。
"dependencies": { "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", "Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final", "Microsoft.Extensions.OptionsModel": "1.0.0-rc1-final" },
2. 更改RequestCultureMiddleware建構函式以使用IOptions <RequestCultureOptions>而不是RequestCultureOptions並獲取options引數的值。 解決丟失的依賴關係。
public RequestCultureMiddleware(RequestDelegate next, IOptions<RequestCultureOptions> options) { this.next = next; options = options.Value; }
3. 更新RequestCultureMiddlewareExtensions類,刪除帶有options引數的方法,並在另一個方法中呼叫UseMiddleware <RequestCultureMiddleware>,如下面的程式碼片段所示。
public static class RequestCultureMiddlewareExtensions { public static IApplicationBuilder UseRequestCulture(this IApplicationBuilder builder) { return builder.UseMiddleware<RequestCultureMiddleware>(); } }
4. 在Startup.cs中,將UseRequestCulture中介軟體更改為不接受任何引數。
app.UseRequestCulture();
5. 在位於同一檔案中的ConfigureServices方法中,使用services.Configure <RequestCultureOptions>方法新增一行配置文化,並新增對AddOptions方法的呼叫,如下面的程式碼片段所示。
public void ConfigureServices(IServiceCollection services) { // DI的設定選項 services.AddOptions(); services.Configure<RequestCultureOptions>(options => { options.DefaultCulture = new CultureInfo(this.configuration["culture"] ?? "zh-cn"); }); }
6. 執行應用程式並驗證是否正在從依賴注入系統中配置選項。
練習4:向Web應用程式新增身份驗證
ASP.NET Identity是一個成員資格系統,它允許您嚮應用程式新增登入功能。 使用者可以使用使用者名稱和密碼建立帳戶和登入,也可以使用Facebook,Google,Microsoft帳戶,Twitter等外部登入提供程式。
在本練習中,您將瞭解使用ASP.NET Identity的ASP.NET Core專案模板的預設配置,以及將Facebook配置為應用程式中的外部登入提供程式。
任務1 – ASP.NET Identity簡介
在此任務中,您將瞭解ASP.NET Core專案模板如何使用ASP.NET Identity新增註冊,登入和登出使用者的功能。
1. 開啟Visual Studio 2015並選擇檔案| 新| 專案…建立一個新的解決方案。
2. 在“新建專案”對話方塊中,選擇Visual C#|下的ASP.NET Web應用程式 Web選項卡,並確保選擇.NET Framework 4.6。 將專案命名為MyWebApp,選擇一個位置,然後單擊確定。
建立新的ASP.NET Web應用程式專案
3. 在“新建ASP.NET專案”對話方塊中,選擇ASP.NET 5模板下的Web應用程式模板。 此外,請確保“身份驗證”選項設定為“個人使用者帳戶”。 單擊“確定”繼續。
使用Web應用程式模板建立新專案
4. 專案建立後,開啟project.json檔案並找到Microsoft.AspNet.Identity.EntityFramework軟體包。 此包具有實體框架實現的ASP.NET Identity,將持久化ASP.NET身份資料和模式到SQL Server。
Microsoft.AspNet.Identity.EntityFramework包
5. 展開解決方案資源管理器中的References節點,然後展開DNX 4.5.1中的Microsoft.AspNet.Identity.EntityFramework包。 注意,它取決於Microsoft.AspNet.Identity,它是ASP.NET Identity系統的主要參考彙編。 此程式集包含ASP.NET Identity的核心介面集。
Microsoft.AspNet.Identity.EntityFramework包依賴項
6. 開啟Startup.cs檔案並找到ConfigureServices方法。 在此方法中,身份服務由以下程式碼配置。
public void ConfigureServices(IServiceCollection services) { // ... services.AddIdentity<ApplicationUser, IdentityRole>() .AddEntityFrameworkStores<ApplicationDbContext>() .AddDefaultTokenProviders(); // ... }
7. 在同一檔案中,找到在啟動執行流程中呼叫ConfigureServices方法後呼叫的Configure方法。 在此方法中,當呼叫UseIdentity方法時,將為應用程式啟用ASP.NET Identity。 這會向請求管道新增基於Cookie的身份驗證。
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { // ... app.UseIdentity(); // ... }
8. 開啟位於Controllers資料夾的AccountController.cs檔案,並找到具有HttpPost屬性的Register操作。 此操作呼叫UserManager服務根據RegisterViewModel資訊建立和登入使用者。
[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public async Task<IActionResult> Register(RegisterViewModel model) { if (ModelState.IsValid) { var user = new ApplicationUser { UserName = model.Email, Email = model.Email }; var result = await _userManager.CreateAsync(user, model.Password); if (result.Succeeded) { // ... await _signInManager.SignInAsync(user, isPersistent: false); // ...
9. 使用HttpPost屬性找到Login操作。 此操作使用SignInManager服務的PasswordSignInAsync方法對使用者進行簽名。
[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public async Task<IActionResult> Login(LoginViewModel model, string returnUrl = null) { ViewData["ReturnUrl"] = returnUrl; if (ModelState.IsValid) { var result = await _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, lockoutOnFailure: false); if (result.Succeeded) { // ...
10. 現在,找到LogOff操作。 此操作呼叫SignInManager服務的SignOutAsync方法,清除儲存在Cookie中的使用者宣告。
[HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> LogOff() { await _signInManager.SignOutAsync(); _logger.LogInformation(4, "User logged out."); return RedirectToAction(nameof(HomeController.Index), "Home"); }
11. 執行解決方案並通過單擊註冊以檢視ASP.NET Identity系統的操作來建立新使用者。 您可以除錯AccountController中的不同操作。
帳戶註冊檢視
12. 註冊第一個使用者後,您會看到一條錯誤訊息,提示您應用現有遷移。 單擊應用遷移。 您現在將看到您以新使用者身份登入。
13. 停止應用程式並瀏覽資料庫,方法是導航到SQL Server物件資源管理器檢視中的(localdb)MSSQLLocalDB / Databases / aspnet5-MyWebApp- / Tables。 右鍵單擊dbo.AspNetUsers表並選擇“檢視資料”以檢視建立的使用者的屬性。
在SQL Server物件資源管理器中檢視使用者資料
任務2 – 使用外部提供程式啟用身份驗證
ASP.NET Core支援使用OAuth 2.0使用來自外部認證提供程式(如Facebook,Twitter,LinkedIn,Microsoft或Google)的憑據登入。 在您的網站中啟用社交登入憑據提供了顯著的優勢,因為數百萬使用者已經擁有這些外部提供商的帳戶。 如果他們不必建立和記住一組新的憑據,這些使用者可能更傾向於註冊您的網站。
在此任務中,您將建立一個Facebook應用程式並配置您的Web應用程式專案(需要翻個牆),以使使用者能夠使用其Facebook帳戶作為外部提供商登入。
1. 在瀏覽器中,導航到https://developers.facebook.com/apps,然後通過輸入您的Facebook憑據登入。如果您尚未註冊為Facebook開發人員,請單擊註冊為開發人員,並按照說明註冊。
2. 在Facebook的開發人員主頁上,通過單擊新增新應用程式並從平臺選擇中選擇網站新增新的應用程式。
3. 在“網站快速入門”頁面上,選擇“跳過並建立應用程式ID”。
4. 設定顯示名稱,例如ASP.NET社交登入,並選擇類別,例如業務,然後按建立應用程式ID。
5. 在設定頁面的基本部分中,單擊新增平臺以指定要新增網站應用程式。
6. 從平臺選項中選擇網站,新增您的網站網址(例如https:// localhost:44300 /),然後點選下面的儲存更改。
7. 記下您的應用程式ID和應用程式金鑰,以便您以後可以將它們新增到您的ASP.NET核心網站。
8. 切換回Visual Studio,右鍵單擊MyWebApp專案並選擇管理使用者祕密。
選擇管理使用者祕密
9. 在secrets.json檔案中新增以下程式碼,將佔位符替換為從Facebook獲取的值。
{ "Authentication": { "Facebook": { "AppId": "<your-app-id>", "AppSecret": "<your-app-secret>" } } }
10. 開啟project.json檔案並新增Microsoft.AspNet.Authentication.Facebook包作為依賴關係
"dependencies": { ... "Microsoft.AspNet.Authentication.Facebook": "1.0.0-rc1-final" },
11. 開啟startup.cs檔案,並在Configure方法中新增Facebook中介軟體,如以下程式碼段所示。
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { // ... app.UseIdentity(); app.UseFacebookAuthentication(options => { options.AppId = Configuration["Authentication:Facebook:AppId"]; options.AppSecret = Configuration["Authentication:Facebook:AppSecret"]; }); // ... }
12. 執行應用程式並導航到登入頁面,您將看到Facebook按鈕。
使用Facebook按鈕登入頁面
原始碼下載地址:https://github.com/smallprogram/CodeLabs-WebDev
備註
本文章所提及的Asp.NET Core RC1,可能比目前版本低一些,但是不影響文中所述的結構和知識點。希望本文對你有所幫助。
相關文章
- ASP.NET Core - 自定義中介軟體ASP.NET
- .Net Core 中介軟體之靜態檔案(StaticFiles)
- Asp.Net Core入門之自定義中介軟體ASP.NET
- 啟動靜態檔案中介軟體
- asp.net core 自定義中介軟體【以dapper為例】ASP.NETAPP
- .NET Core 自定義中介軟體 Middleware
- .NET Core 1.0、ASP.NET Core 1.0和EF Core 1.0簡介ASP.NET
- 15.ASP.NET Core 應用程式中的靜態檔案中介軟體ASP.NET
- asp.net core 系列之靜態檔案ASP.NET
- ASP.NET Core - 實現自定義WebApi模型驗證ASP.NETWebAPI模型
- 【asp.net core】自定義模型繫結及其驗證ASP.NET模型
- ASP .Net Core 中介軟體的使用(一):搭建靜態檔案伺服器/訪問指定檔案伺服器
- Asp.Net Core入門之靜態檔案ASP.NET
- Express檔案表單解析中介軟體 Multer簡介Express
- ASP.NET Core 中介軟體基本用法ASP.NET
- [譯]ASP.NET Core 2.0 中介軟體ASP.NET
- ASP.NET Core靜態檔案處理原始碼探究ASP.NET原始碼
- gRPC(七)進階:自定義身份驗證RPC
- lazarus中介軟體簡介
- ASP.NET Core 中介軟體(Middleware)(一)ASP.NET
- asp.net core mvc 管道之中介軟體ASP.NETMVC
- 掌握 ASP.NET 之路:自定義實體類簡介ASP.NET
- django-驗證碼/靜態檔案處理Django
- 【asp.net core 系列】13 Identity 身份驗證入門ASP.NETIDE
- ASP.NET Core 中介軟體詳解及專案實戰ASP.NET
- 驗證裡,PHP 檔案中指定自定義值PHP
- 重新整理 .net core 實踐篇—————靜態中介軟體[二十一]
- 自定義 ocelot 中介軟體輸出自定義錯誤資訊
- 作業系統身份驗證和口令檔案身份驗證總結作業系統
- ASP.NET Core中介軟體初始化探究ASP.NET
- ASP.NET Core - 請求管道與中介軟體ASP.NET
- gin使用BasicAuth()(驗證)中介軟體
- Go語言中介軟體框架 Negroni 的靜態檔案處理原始碼分析Go框架原始碼
- 自定義身份證鍵盤(Swift)Swift
- 靜態密碼已經”OUT”探索身份驗證新方式密碼
- 如何在ASP.NET Core自定義中介軟體中讀取Request.Body和Response.Body的內容?ASP.NET
- 換個角度學習ASP.NET Core中介軟體ASP.NET
- ASP.NET Core中介軟體與HttpModule有何不同ASP.NETHTTP