Thinktecture Identity Server v3登录页面使用加载程序进行自定义

Question

我已经覆盖了登录的默认视图，因为我在这里添加了自己的文件：

我所做的只是从repo资产中获取基本文件并稍微调整一下，以便更适合我的项目。我已经改变了一些颜色，删除了一些东西并添加了一些javascript。

我现在想要做的是添加一个加载器（微调器），当我点击＆＃34;登录＆＃34;按钮，如果最终消失，我会得到某种错误（错误的凭据或其他东西）。显而易见的是它使用角度并绑定模型：

<div class="row" ng-show="model.errorMessage">
    <div class="col-md-12 col-sm-12">
        <div class="alert alert-danger">
            <strong>Error:</strong>
            {{model.errorMessage}}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 col-sm-12" ng-show="model.loginUrl">
        <div class="panel panel-default">
            <div class="panel-body">
                <form name="form" method="post" action="{{model.loginUrl}}">
...

由于我对此不是很有经验，所以我决定向你征求意见。

首先，是否可以覆盖模型本身，以便我可以完全控制它？与 _login.html

类似

我想知道将我的加载器（微调器）置于 div 中是否一个好主意， ng-show 依赖于 model.errorMessage < / strong>所以每次出现错误我们都会隐藏加载程序或类似的东西。我也可以直接使用 errorMessage 属性。

只是想看看你的意见，因为我想到的所有解决方案似乎都非常优雅。

Answer 1

如果您实现IViewService，您将能够在IViewService.Login中访问模型本身，并可以将任何内容输出到登录页面。

文档在这里：https://identityserver.github.io/Documentation/docsv2/advanced/customViewService.html