# Consent视图制作

#### 任务19：Consent视图制作 <a href="#ren-wu-19consent-shi-tu-zhi-zuo" id="ren-wu-19consent-shi-tu-zhi-zuo"></a>

按照上一节 Consent 的思路

在 mvcCookieAuthSample 项目的 Controllers 文件夹下新建一个 ConsentController

在 Views 文件夹下新建一个 Consent 文件夹，然后在该文件夹下新建一个 Index 视图

在 ViewModels 文件夹下新建一个 ConsentViewModel

在 ViewModels 文件夹下新建一个 ScopeViewModel

**ScopeViewModel.cs**

```
namespace mvcCookieAuthSample.ViewModels
{
    public class ScopeViewModel
    {
        public string Name { get; set; }
        public string DisplayName { get; set; }
        public string Description { get; set; }
        public string Emphasize { get; set; }
        public string Required { get; set; }
        public bool Checked { get; set; }
    }
}
```

这个定义来自于 IdentityServer4 官方文档中 Identity Resource 和 API Resource 的模型\
<https://identityserver4.readthedocs.io/en/latest/reference/identity_resource.html>

![](/files/byraM9AKxS1obRBpv6xB)

**ConsentViewModel.cs**

```
namespace mvcCookieAuthSample.ViewModels
{
    public class ConsentViewModel
    {
        public string ClientId { get; set; }
        public string ClientName { get; set; }
        public string ClientLogoUrl { get; set; }

        /// <summary>
        /// 是否允许第二次登录不需要再次授权
        /// </summary>
        public bool AllowRemeberConsent { get; set; }

        // 对两种用户分别做出选择
        public IEnumerable<ScopeViewModel> IdentityScopes { get; set; }
        public IEnumerable<ScopeViewModel> ResourceScopes { get; set; }
    }
}
```

接下来需要把两个 ViewModel 的信息显示在 Index 里面，实现类似微博授权页面

![](/files/763DBtHz6Lu88sNGHBrE)

**\_ScopeListitem.cshtml**

```
@using mvcCookieAuthSample.ViewModels;
@model ScopeViewModel

<li>

</li>
```

**Index.cshtml**

```
@using mvcCookieAuthSample.ViewModels;
@model ConsentViewModel

<p>Consent Page</p>
<div class="row page-header">
    <div class="col-sm-10">
        @if (string.IsNullOrWhiteSpace(Model.ClientLogoUrl))
        {
            <div><img src="@Model.ClientLogoUrl"/></div>
        }

        <h1>
            @Model.ClientName
            <small>希望使用您的账户</small>
        </h1>
    </div>
</div>

<div class="row">
    <div class="col-sm-8">
        <form asp-action="Index">

            @if (Model.IdentityScopes.Any())
            {
                <ul class="list-group">
                    @foreach (var scope in Model.IdentityScopes)
                    {
                        @Html.Partial("_ScopeListitem", scope)
                    }
                </ul>
            }

            @if (Model.ResourceScopes.Any())
            {
                <ul class="list-group">
                    @foreach (var scope in Model.IdentityScopes)
                    {
                        @Html.Partial("_ScopeListitem", scope)
                    }
                </ul>
            }
        </form>
    </div>
</div>
```

上半部分展示图标和提示，下半部分分为三部分，分别列出 IdentityScopes 和 ResourceScopes，以及选择是否记住，最后实现授权


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mingsonzheng.gitbook.io/aspnetcore-distributed-project-combat/consent-shi-tu-zhi-zuo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.