IdentityServer4使用教程2--搭建ID4的MVC客户端

前言

看了教程1以后，很多人问道Client的里面那些配置项是什么意思，希望了解更多的理论知识。但是我觉得IT虽然是理工科，确是一个实践科学，需要很多感性认识。学习IT最好的办法是动手去做，所谓守破离(Shu Ha Ri)，首先要模仿得到足够的实践知识，然后是了解理论，然后是突破！ 当然，如果现在就想知道理论，可以参看Identity Server3 教程目录(http://www.jianshu.com/p/398b226e41ed),虽然是ID3的介绍，但是理论没什么变化。

按照IdentityServer4使用教程1，我们已经得到了一个ID4的服务器了。如果不想按照前面的步骤创建工程，可以用下面的代码clone出step-1代码：git clone -b step-1 https://github.com/miemengniao/ID4.Learn.git
当然，也可以直接clone出本教程完成后的代码git clone -b step-2 https://github.com/miemengniao/ID4.Learn.git

准备工作

我们首先创建一个MVC客户端，然后创建一个solution，把之前的ID4 Server和这个MVC 客户端加入到这个解决方案中。

1. 创建一个MVC客户端 dotnet new mvc --auth None -o ID4.MvcClient,注意：我们这里面选则--auth None
2. 转到ID4.MvcClient目录并添加所需要的包

cd ID4.MvcClient
dotnet add package Microsoft.AspNetCore.Authentication.Cookies --version 1.1.2
dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConnect --version 1.1.2

3. 我们回到根目录，创建一个solution，并添加ID4.Server和ID4.MvcClient到这个解决方案中,并编译这个工程

cd ..
dotnet new sln -n ID4.Learn
dotnet sln add .\ID4.Server\ID4.Server.csproj
dotnet sln add .\ID4.MvcClient\ID4.MvcClient.csproj
dotnet restore
dotnet build

修改MVC客户端支持ID4

增加一个受控页面

1. 在.\ID4.MvcClient\Views\Home目录下创建一个Auth.cshtml文件，来显示将来登陆用户的声明(claims)信息。

  @foreach (var claim in User.Claims)
    {
        
@claim.Type
        
@claim.Value
    }

可以通过curl -k -O https://raw.githubusercontent.com/miemengniao/ID4.Learn/step-2/ID4.MvcClient/Views/Home/Auth.cshtml 直接下载

2. 修改.\ID4.MvcClient\Views\Shared\_Layout.cshtml文件，在导航栏增加Auth的超链接
   
3. Auth

可以通过curl -k -O https://raw.githubusercontent.com/miemengniao/ID4.Learn/step-2/ID4.MvcClient/Views/Shared/_Layout.cshtml下载更新后的_Layout文件

3. 修改```.\ID4.MvcClient\Controllers\HomeController.cs文件，增加Auth对应的Action

 [Authorize]
        public IActionResult Auth()
        {
            return View();
        }

可以通过curl -k -O https://raw.githubusercontent.com/miemengniao/ID4.Learn/step-2/ID4.MvcClient/Controllers/HomeController.cs下载更新后的HomeController.cs文件

修改Startup文件，增加ID4的授权认证

1. 在startup的Configure方法的UseStaticFiles的调用后面，加上如下代码,访问ID4.Server进行认证：

app.UseCookieAuthentication(new CookieAuthenticationOptions
{
    AuthenticationScheme = "Cookies"
});

JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();

app.UseOpenIdConnectAuthentication(new OpenIdConnectOptions
{
    AuthenticationScheme = "oidc",
    SignInScheme = "Cookies",

    Authority = "http://localhost:5000",
    RequireHttpsMetadata = false,

    ClientId = "mvc",
    ClientSecret = "secret",
    ResponseType = "code id_token",

    GetClaimsFromUserInfoEndpoint = true,
    SaveTokens = true
});

可以通过curl -k -O https://raw.githubusercontent.com/miemengniao/ID4.Learn/step-2/ID4.MvcClient/Startup.cs下载更新后的Startup.cs文件. 如果是手动添加代码，注意要添加using语句来导入命名空间

2. 更新Program.cs文件，来指定启动端口为5002.

.UseUrls("http://localhost:5002/")

可以通过curl -k -O https://raw.githubusercontent.com/miemengniao/ID4.Learn/step-2/ID4.MvcClient/Program.cs下载更新后的Startup.cs文件. 如果是手动添加代码，注意要添加using语句来导入命名空间

3. 启动ID4 Server和MVC客户端
   因为dotnet CLI不能通过solution文件同时启动两个项目，所以需要打开两个cmd界面，分别进入到ID4.Server和ID4.MvcClient目录，运行dotnet run
   启动好以后，在浏览器重输入http://localhost:5002,并点击Auth链接，浏览器跳转到localhost:5000要求登陆。登陆后，即可看到如下页面，登陆用户的所有claim（声明）信息将列出。

如果之前没有再localhost:5000创建用户，可能需要预先在localhost:5000创建好测试用户

登陆用户的声明信息

下一节，我们会配置一个Web API来使用这个ID4认证服务器，敬请期待