diff --git a/docs/zh-Hans/How-To/Azure-Active-Directory-Authentication-MVC.md b/docs/zh-Hans/How-To/Azure-Active-Directory-Authentication-MVC.md new file mode 100644 index 0000000000..92b8596ee3 --- /dev/null +++ b/docs/zh-Hans/How-To/Azure-Active-Directory-Authentication-MVC.md @@ -0,0 +1,3 @@ +# 如何对MVC / Razor页面应用程序使用Azure Active Directory身份验证 + +TODO... \ No newline at end of file diff --git a/docs/zh-Hans/How-To/Customize-Login-Page-MVC.md b/docs/zh-Hans/How-To/Customize-Login-Page-MVC.md new file mode 100644 index 0000000000..fdb3c292f6 --- /dev/null +++ b/docs/zh-Hans/How-To/Customize-Login-Page-MVC.md @@ -0,0 +1,113 @@ +# 如何为MVC / Razor页面应用程序自定义登录页面 + +当你使用[应用程序启动模板](../Startup-Templates/Application.md)创建了一个新的应用程序, 登录页面的源代码并不在你的解决方案中,所以你不能直接更改. 它来自[账户模块](../Modules/Account.md),使用[NuGet包](https://www.nuget.org/packages/Volo.Abp.Account.Web)引用. + +本文介绍了如何为自己的应用程序自定义登录页面. + +## 创建登录 PageModel + +创建一个新的类继承账户模块的[LoginModel](https://github.com/abpframework/abp/blob/037ef9abe024c03c1f89ab6c933710bcfe3f5c93/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml.cs). + +````csharp +public class CustomLoginModel : LoginModel +{ + public CustomLoginModel( + Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider schemeProvider, + Microsoft.Extensions.Options.IOptions accountOptions) + : base(schemeProvider, accountOptions) + { + } +} +```` + +> 在这里命令约定很重要. 如果你的类名不是以 `LoginModel` 结束,你需要手动在[依赖注入](../Dependency-Injection.md)系统替换 `LoginModel`. + +然后你可以覆盖任何方法并添加用户界面需要的新方法和属性. + +## 重写登录页面UI + +在 **Pages** 目录下创建名为 **Account** 的文件夹,并在这个文件夹中创建 `Login.cshtml` ,借助[虚拟文件系统](../Virtual-File-System.md)它会自动覆盖账户模块的页面文件. + +自定义页面一个很好的开始是复制它的源代码. [点击这里](https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml)找到登录页面的源码. 在编写本文档时,源代码如下: + +````xml +@page +@using Volo.Abp.Account.Settings +@using Volo.Abp.Settings +@model Acme.BookStore.Web.Pages.Account.CustomLoginModel +@inherits Volo.Abp.Account.Web.Pages.Account.AccountPage +@inject Volo.Abp.Settings.ISettingProvider SettingProvider +@if (Model.EnableLocalLogin) +{ +
+
+

@L["Login"]

+ @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled)) + { + + @L["AreYouANewUser"] + @L["Register"] + + } +
+ + +
+ + + +
+
+ + + +
+
+ +
+ @L["Login"] +
+
+ +
+ @L["Cancel"] @* TODO: Only show if identity server is used *@ +
+
+} + +@if (Model.VisibleExternalProviders.Any()) +{ +
+

@L["UseAnotherServiceToLogIn"]

+
+ + + @foreach (var provider in Model.VisibleExternalProviders) + { + + } +
+
+} + +@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any()) +{ +
+ @L["InvalidLoginRequest"] + @L["ThereAreNoLoginSchemesConfiguredForThisClient"] +
+} +```` + +只需更改 `@model` 为 `Acme.BookStore.Web.Pages.Account.CustomLoginModel` 使用自定义的 `PageModel` 类. 你可以做任何应用程序需要的更改. + +## 本文的源代码 + +你可以在[这里](https://github.com/abpframework/abp-samples/tree/master/aspnet-core/Authentication-Customization)找到已完成的示例源码. + +## 另请参阅 + +* [ASP.NET Core (MVC / Razor Pages) 用户界面自定义指南](../UI/AspNetCore/Customization-User-Interface.md). \ No newline at end of file diff --git a/docs/zh-Hans/How-To/Customize-SignIn-Manager.md b/docs/zh-Hans/How-To/Customize-SignIn-Manager.md new file mode 100644 index 0000000000..2667509aca --- /dev/null +++ b/docs/zh-Hans/How-To/Customize-SignIn-Manager.md @@ -0,0 +1,3 @@ +# 如何为ABP应用程序定制SignIn Manager + +TODO... \ No newline at end of file diff --git a/docs/zh-Hans/How-To/Index.md b/docs/zh-Hans/How-To/Index.md new file mode 100644 index 0000000000..3190ced7ca --- /dev/null +++ b/docs/zh-Hans/How-To/Index.md @@ -0,0 +1,9 @@ +# "如何" 指南 + +本部分包含一些常见问题的 "如何" 指南. 尽管其中是一些常见的开发任务和ABP并不直接相关,但我们认为有一些具体的示例可以直接与基于ABP的应用程序一起使用. + +## Authentication + +* [如何为MVC / Razor页面应用程序自定义登录页面](Customize-Login-Page-MVC.md) +* [如何对MVC / Razor页面应用程序使用Azure Active Directory身份验证](Azure-Active-Directory-Authentication-MVC.md) +* [如何为ABP应用程序定制SignIn Manager](Customize-SignIn-Manager.md) \ No newline at end of file diff --git a/docs/zh-Hans/docs-nav.json b/docs/zh-Hans/docs-nav.json index c1aa2be23d..f01ce04bc9 100644 --- a/docs/zh-Hans/docs-nav.json +++ b/docs/zh-Hans/docs-nav.json @@ -64,6 +64,10 @@ } ] }, + { + "text": "\"如何\" 指南", + "path": "How-To/Index.md" + }, { "text": "从ASP.NET Boilerplate迁移", "path": "AspNet-Boilerplate-Migration-Guide.md" diff --git a/docs/zh-Hans/images/angular-folder-structure.png b/docs/zh-Hans/images/angular-folder-structure.png new file mode 100644 index 0000000000..e17eb135ce Binary files /dev/null and b/docs/zh-Hans/images/angular-folder-structure.png differ diff --git a/docs/zh-Hans/images/angular-template-structure-diagram.png b/docs/zh-Hans/images/angular-template-structure-diagram.png new file mode 100644 index 0000000000..d27d75bf7f Binary files /dev/null and b/docs/zh-Hans/images/angular-template-structure-diagram.png differ diff --git a/docs/zh-Hans/images/react-native-folder-structure.png b/docs/zh-Hans/images/react-native-folder-structure.png new file mode 100644 index 0000000000..cf703ea061 Binary files /dev/null and b/docs/zh-Hans/images/react-native-folder-structure.png differ diff --git a/docs/zh-Hans/images/react-native-navigation-structure.png b/docs/zh-Hans/images/react-native-navigation-structure.png new file mode 100644 index 0000000000..9f17375b68 Binary files /dev/null and b/docs/zh-Hans/images/react-native-navigation-structure.png differ diff --git a/docs/zh-Hans/images/react-native-store-folder.png b/docs/zh-Hans/images/react-native-store-folder.png new file mode 100644 index 0000000000..e90ae9debb Binary files /dev/null and b/docs/zh-Hans/images/react-native-store-folder.png differ