【翻译】使用WebApi和Asp.Net Core Identity 认证 Blazor WebAssembly(Blazor客户端应用)

偶然间在更新jetbrains rider时候发现blazor这个框架。

研究下。

blazor webassembly应用中的授权

在文档中提到了

在 blazor webassembly 应用中，可以绕过授权检查，因为用户可以修改所有客户端代码。 所有客户端应用程序技术都是如此，其中包括 javascript spa 框架或任何操作系统的本机应用程序。

始终对客户端应用程序访问的任何 api 终结点内的服务器执行授权检查。

google 找到了本文(原地址:https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity/)

由于该框架已经有所更新，翻译中有些内容我根据实际情况做了更改。

设置：创建解决方案

选择blazor应用

项目名称

选择blazor webassembly app(这里要勾选asp.net core host),如果找不到blazor webassembly app,请先在命令行执行以下命令:

dotnet new -i microsoft.aspnetcore.blazor.templates::3.1.0-preview1.19508.20

解决方案创建之后，我们将开始对authenticationwithblazorwebassembly.server这个项目进行一些更改。

配置webapi

在配置webapi之前我先安装一些nuget包:

    <packagereference include="microsoft.aspnetcore.authentication.jwtbearer" version="3.0.0" />
    <packagereference include="microsoft.aspnetcore.blazor.server" version="3.0.0-preview9.19465.2" />
    <packagereference include="microsoft.aspnetcore.diagnostics.entityframeworkcore" version="3.0.0" />
    <packagereference include="microsoft.aspnetcore.identity.entityframeworkcore" version="3.0.0" />
    <packagereference include="microsoft.aspnetcore.identity.ui" version="3.0.0" />
    <packagereference include="microsoft.entityframeworkcore.sqlserver" version="3.0.0" />
    <packagereference include="microsoft.entityframeworkcore.tools" version="3.0.0">
    <packagereference include="microsoft.visualstudio.web.codegeneration.design" version="3.0.0" />

设置identity数据库：连接字符串

在进行任何设置之前，数据库方面需要一个连接字符串。这通常是保存在appsettings.json中的,但blazor托管模版并未提供此文件，所以我们需要手动添加此文件。

在authenticationwithblazorwebassembly.server项目右键添加 -> 新建项，然后选择应用设置文件。

{
  "connectionstrings": {
    "defaultconnection": "server=(localdb)\\mssqllocaldb;database=authenticationwithblazorwebassembly;trusted_connection=true;multipleactiveresultsets=true"
  }
}

该文件带有一个已经设置好的连接字符串，你可以随时将其指向需要的地方。我们只需要添加一个数据库名就可以了，其余的保持默认值。

设置identity数据库：dbcontext

在authenticationwithblazorwebassembly.server项目跟目录创建一个名为data的目录，然后使用下面代码添加一个名为applicationdbcontext的类文件。

    public class applicationdbcontext : identitydbcontext
    {
        public applicationdbcontext(dbcontextoptions options) : base(options) {
        }
    }

 因为我们使用identity需要将信息存储在数据库中，所以我们不是从dbcontext继承,而是从identitydbcontext继承。identitydbcontext基类包含ef配置管理identity数据库表需要的所有配置。

设置identity数据库：注册服务

在startup类中，我们需要添加一个构造函数，接收iconfiguration参数和一个属性来存储它。iconfiguration允许我们访问appsettings.json文件，如：连接字符串。

 

        public iconfiguration configuration { get; }

        public startup(iconfiguration configuration)
        {
            configuration = configuration;
        }

接下来我们将以下代码添加到configureservices方法的顶部。

        public void configureservices(iservicecollection services)
        {
            services.adddbcontext<applicationdbcontext>(options =>
                options.usesqlserver(configuration.getconnectionstring("defaultconnection")));

            services.adddefaultidentity<identityuser>()
                .addentityframeworkstores<applicationdbcontext>();

　　　　　　//这里省略掉其他代码
        }

这里两行代码将applicationdbcontext添加到服务集合中。然后为asp.net core identity注册各种服务并通过applicationdbcontext使用entity framework作为数据存储。

设置identity数据库：创建数据库

现在可以为数据库创建初始迁移。在程序包管理器控制台运行以下命令。

add-migration createidentityschema -o data/migations

命令运行完成，你应该能在data > migrations文件夹中看到迁移文件。在控制台中运行命令update-database将迁移应用到数据库。

在运行迁移命令时遇到任何问题，请确保在程序包管理器中选择authenticationwithblazorwebassembly.server项目作为默认项目。

启用身份验证：注册服务

接下来在api中启用身份验证。同样，在configureservices中，在上一节添加的代码之后添加以下代码。

public void configureservices(iservicecollection services)
{
　　//这里省略到其他代码
　　services.addauthentication(jwtbearerdefaults.authenticationscheme)
                .addjwtbearer(options =>
                {
                    options.tokenvalidationparameters = new tokenvalidationparameters
                    {
                        validateissuer = true,
                        validateaudience = true,
                        validatelifetime = true,
                        validateissuersigningkey = true,
                        validissuer = configuration["jwtissuer"],
                        validaudience = configuration["jwtaudience"],
                        issuersigningkey = new symmetricsecuritykey(encoding.utf8.getbytes(configuration["jwtsecuritykey"]))
                    };
                });

　　//这里省略掉其他代码

}

上面代码想服务容器添加和设置一些身份验证所需的服务。然后为json web tokens(jwt)添加处理程序，并配置接收到的jwts应该如何验证。你可以根据需求调整这些设置。

启用身份验证：应用程序设置

有一些设置要从appsettings.json文件中加载。

• configuration["jwtissuer"]
• configuration["jwtaudience"]
• configuration["jwtsecuritykey"]

我们还未将它们添加到appsettings文件中。现在添加它们并添加一个设置用来控制令牌的持续时间，稍后我们会使用这个设置。

"jwtsecuritykey": "random_key_must_not_be_shared",
"jwtissuer": "https://localhost",
"jwtaudience": "https://localhost",
"jwtexpiryindays": 1,

保证jwtsecuritykey 的安全是非常重要的，因为这是用来对api产生的令牌签名的，如果泄露那么你的应用程序将不在安全。

由于我们在本地运行所有内容，所以我将issuer和audience设置为localhost。如果在生产环境使用它，我们需要将issuer 设置为api运行的域名，将audience设置为客户端应用程序运行的域名。

启用身份验证：添加中间件

最后，我们需要在configure 方法中将必要的中间件添加到管道中。这将在api中启用身份验证和授权功能。将以下代码添加到app.useendpoints中间件前面。

app.useauthentication();
app.useauthorization();

这就是startup类所需要的所有东西。现在api已经启用了身份验证。

你可以通过向weatherforecastcontroller中的get方法添加[authorize]属性来测试一切是否正常。然后启用应用程序并导航到fetch data页面，应该不会加载任何数据，应该会在控制台中看到401错误。

添加账户(account)控制器

为了让人们登录到我们的应用程序，他们需要能够注册。我们将添加一个帐户控制器，它将负责创建新帐户。

    [route("api/[controller]")]
    [apicontroller]
    public class accountscontroller : controllerbase
    {
        //private static usermodel loggedoutuser = new usermodel { isauthenticated = false };

        private readonly usermanager<identityuser> _usermanager;

        public accountscontroller(usermanager<identityuser> usermanager)
        {
            _usermanager = usermanager;
        }

        [httppost]
        public async task<iactionresult> post([frombody]registermodel model)
        {
            var newuser = new identityuser { username = model.email, email = model.email };

            var result = await _usermanager.createasync(newuser, model.password);

            if (!result.succeeded)
            {
                var errors = result.errors.select(x => x.description);

                return badrequest(new registerresult { successful = false, errors = errors });

            }

            return ok(new registerresult { successful = true });
        }
    }

 

post操作使用asp.net core identity从registermodel来创建系统的新用户。

我们还没用添加注册模型，现在使用以下代码添加到authenticationwithblazorwebassembly.shared项目中，稍后我们的blazor应用程序将会使用到它。

    public class registermodel
    {
        [required]
        [emailaddress]
        [display(name = "email")]
        public string email { get; set; }

        [required]
        [stringlength(100, errormessage = "the {0} must be at least {2} and at max {1} characters long.", minimumlength = 6)]
        [datatype(datatype.password)]
        [display(name = "password")]
        public string password { get; set; }

        [datatype(datatype.password)]
        [display(name = "confirm password")]
        [compare("password", errormessage = "the password and confirmation password do not match.")]
        public string confirmpassword { get; set; }
    }

如果一切顺利，则会返回一个成功的registerresult，否则会返回一个失败的registerresult，我们一样将它添加到authenticationwithblazorwebassembly.shared项目中。

    public class registerresult
    {
        public bool successful { get; set; }
        public ienumerable<string> errors { get; set; }
    }

添加登录(login)控制器

现在我们有了用户注册的方式，我们还需要用户登录方式。

 [route("api/[controller]")]
    [apicontroller]
    public class logincontroller : controllerbase
    {
        private readonly iconfiguration _configuration;
        private readonly signinmanager<identityuser> _signinmanager;

        public logincontroller(iconfiguration configuration,
            signinmanager<identityuser> signinmanager)
        {
            _configuration = configuration;
            _signinmanager = signinmanager;
        }

        [httppost]
        public async task<iactionresult> login([frombody] loginmodel login)
        {
            var result = await _signinmanager.passwordsigninasync(login.email, login.password, false, false);

            if (!result.succeeded) return badrequest(new loginresult { successful = false, error = "username and password are invalid." });

            var claims = new[]
            {
                new claim(claimtypes.name, login.email)
            };

            var key = new symmetricsecuritykey(encoding.utf8.getbytes(_configuration["jwtsecuritykey"]));
            var creds = new signingcredentials(key, securityalgorithms.hmacsha256);
            var expiry = datetime.now.adddays(convert.toint32(_configuration["jwtexpiryindays"]));

            var token = new jwtsecuritytoken(
                _configuration["jwtissuer"],
                _configuration["jwtaudience"],
                claims,
                expires: expiry,
                signingcredentials: creds
            );

            return ok(new loginresult { successful = true, token = new jwtsecuritytokenhandler().writetoken(token) });
        }
    }

登录控制器(login controller)使用asp.net core identity signinmanger验证用户名和密码。如果它们都正确，则生成一个新的json web token并在loginresult返回给客户端。

像之前一样,我们需要将loginmodel和loginresult添加到authenticationwithblazorwebassembly.shared项目中。

    public class loginmodel
    {
        [required]
        public string email { get; set; }

        [required]
        public string password { get; set; }

        public bool rememberme { get; set; }
    }

    public class loginresult
    {
        public bool successful { get; set; }
        public string error { get; set; }
        public string token { get; set; }
    }

这就是api需要的所有东西。我们现在已经将其配置为通过json web tokens进行身份验证。接下来我们需要为blazor webassembly(客户端)应用程序添加注册新用户和登录控制器。

配置blazor客户端

接下来我们关注blazor。首先需要安装blazored.localstorage，我们稍后将需要它在登录时从api中持久化验证令牌。

我们还需要在app组件中使用authorizerouteview组件替换routeview组件(这里需要使用microsoft.aspnetcore.components.authorization nuget包并在_imports.razor添加@using microsoft.aspnetcore.components.authorization)。

<router appassembly="@typeof(program).assembly">
    <found context="routedata">
        <authorizerouteview routedata="@routedata" defaultlayout="@typeof(mainlayout)" />
    </found>
    <notfound>
        <layoutview layout="@typeof(mainlayout)">
            <p>sorry, there's nothing at this address.</p>
        </layoutview>
    </notfound>
</router>

此组件提供类型为task<authenticationstate>的级联参数。authorizeview通过使用它来确定当前用户的身份验证状态。

但是任何组件都可以请求参数并使用它来执行过程逻辑，例如：

@page "/"

<button @onclick="@logusername">log username</button>

@code {
    [cascadingparameter]
    private task<authenticationstate> authenticationstatetask { get; set; }

    private async task logusername()
    {
        var authstate = await authenticationstatetask;
        var user = authstate.user;

        if (user.identity.isauthenticated)
        {
            console.writeline($"{user.identity.name} is authenticated.");
        }
        else
        {
            console.writeline("the user is not authenticated.");
        }
    }
}

创建自定义authenticationstateprovider

因为我们使用blazor webassembly，所以我们需要为authenticationstateprovider提供自定义实现。因为在客户端应用程序有太多的选项，所以无法设计一个适用于所有人的默认类。

我们需要重写getauthenticationstateasync方法。在此方法中，我们需要确定当前用户是否经过身份验证。我们还将添加两个辅助方法，当用户登录或注销时，我们将使用这些方法更新身份验证状态。

public class apiauthenticationstateprovider : authenticationstateprovider
    {
        private readonly httpclient _httpclient;
        private readonly ilocalstorageservice _localstorage;

        public apiauthenticationstateprovider(httpclient httpclient, ilocalstorageservice localstorage)
        {
            _httpclient = httpclient;
            _localstorage = localstorage;
        }

        public override async task<authenticationstate> getauthenticationstateasync()
        {
            var savedtoken = await _localstorage.getitemasync<string>("authtoken");

            if (string.isnullorwhitespace(savedtoken))
            {
                return new authenticationstate(new claimsprincipal(new claimsidentity()));
            }

            _httpclient.defaultrequestheaders.authorization = new authenticationheadervalue("bearer", savedtoken);

            return new authenticationstate(new claimsprincipal(new claimsidentity(parseclaimsfromjwt(savedtoken), "jwt")));
        }

        public void markuserasauthenticated(string token)
        {
            var authenticateduser = new claimsprincipal(new claimsidentity(parseclaimsfromjwt(token), "jwt"));
            var authstate = task.fromresult(new authenticationstate(authenticateduser));
            notifyauthenticationstatechanged(authstate);
        }

        public void markuserasloggedout()
        {
            var anonymoususer = new claimsprincipal(new claimsidentity());
            var authstate = task.fromresult(new authenticationstate(anonymoususer));
            notifyauthenticationstatechanged(authstate);
        }

        private ienumerable<claim> parseclaimsfromjwt(string jwt)
        {
            var claims = new list<claim>();
            var payload = jwt.split('.')[1];
            var jsonbytes = parsebase64withoutpadding(payload);
            var keyvaluepairs = jsonserializer.deserialize<dictionary<string, object>>(jsonbytes);

            keyvaluepairs.trygetvalue(claimtypes.role, out object roles);

            if (roles != null)
            {
                if (roles.tostring().trim().startswith("["))
                {
                    var parsedroles = jsonserializer.deserialize<string[]>(roles.tostring());

                    foreach (var parsedrole in parsedroles)
                    {
                        claims.add(new claim(claimtypes.role, parsedrole));
                    }
                }
                else
                {
                    claims.add(new claim(claimtypes.role, roles.tostring()));
                }

                keyvaluepairs.remove(claimtypes.role);
            }

            claims.addrange(keyvaluepairs.select(kvp => new claim(kvp.key, kvp.value.tostring())));

            return claims;
        }

        private byte[] parsebase64withoutpadding(string base64)
        {
            switch (base64.length % 4)
            {
                case 2: base64 += "=="; break;
                case 3: base64 += "="; break;
            }
            return convert.frombase64string(base64);
        }
    }

这里有很多代码，让我们一步一步来分析。

cascadingauthenticationstate组件调用getauthenticationstateasync方法来确定当前用户是否经过验证。

上面的代码，我们检查local storge是否有验证令牌。如果local storge中没有令牌，那么我们将返回一个新的authenticationstate，其中包含一个空的claimsprincipal。这就说明当前用户用户没有经过身份验证。

如果有令牌，读取并设置httpclient的默认authorization header，并返回一个包含claimsprincipal新的authenticationstate的令牌声明。该声明(claims)使用parseclaimsfromjwt方法从令牌中提取。此方法解码令牌并返回其中包含的声明。

markuserasauthenticated辅助方法用于登录时调用notifyauthenticationstatechanged方法，该方法触发authenticationstatechanged事件。这将通过cascadingauthenticationstate组件级联新的身份验证状态。

markuserasloggedout用于用户注销时。

auth service

auth service将在组件中注册用户并登录到应用程序和用户注销使用。

public class authservice : iauthservice
    {
        private readonly httpclient _httpclient;
        private readonly authenticationstateprovider _authenticationstateprovider;
        private readonly ilocalstorageservice _localstorage;

        public authservice(httpclient httpclient,
            authenticationstateprovider authenticationstateprovider,
            ilocalstorageservice localstorage)
        {
            _httpclient = httpclient;
            _authenticationstateprovider = authenticationstateprovider;
            _localstorage = localstorage;
        }

        public async task<registerresult> register(registermodel registermodel)
        {
            var result = await _httpclient.postjsonasync<registerresult>("api/accounts", registermodel);

            return result;
        }

        public async task<loginresult> login(loginmodel loginmodel)
        {
            var loginasjson = jsonserializer.serialize(loginmodel);
            var response = await _httpclient.postasync("api/login", new stringcontent(loginasjson, encoding.utf8, "application/json"));
            var loginresult = jsonserializer.deserialize<loginresult>(await response.content.readasstringasync(), new jsonserializeroptions { propertynamecaseinsensitive = true });

            if (!response.issuccessstatuscode)
            {
                return loginresult;
            }

            await _localstorage.setitemasync("authtoken", loginresult.token);
            ((apiauthenticationstateprovider)_authenticationstateprovider).markuserasauthenticated(loginresult.token);
            _httpclient.defaultrequestheaders.authorization = new authenticationheadervalue("bearer", loginresult.token);

            return loginresult;
        }

        public async task logout()
        {
            await _localstorage.removeitemasync("authtoken");
            ((apiauthenticationstateprovider)_authenticationstateprovider).markuserasloggedout();
            _httpclient.defaultrequestheaders.authorization = null;
        }
    }

register方法提交registermodel给accounts controller并返回registerresult给调用者。

login 方法类似于register 方法，它将loginmodel 发送给login controller。但是，当返回一个成功的结果时，它将返回一个授权令牌并持久化到local storge。

最后我们调用apiauthenticationstateprovider上的方法markuserasauthenticated ，设置httpclient的默认authorization header。

logout 这个方法就是执行与login 方法相反的操作。

注册组件(register component)

我们已经到了最后阶段了。现在我们可以将注意力转向ui，并创建一个允许人们在站点注册的组件。

@page "/register"
@inject iauthservice authservice
@inject navigationmanager navigationmanager

<h1>register</h1>

@if (showerrors) {
    <div class="alert alert-danger" role="alert">
        @foreach (var error in errors) {
            <p>@error</p>
        }
    </div>
}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">please enter your details</h5>
        <editform model="registermodel" onvalidsubmit="handleregistration">
            <dataannotationsvalidator />
            <validationsummary />

            <div class="form-group">
                <label for="email">email address</label>
                <inputtext id="email" class="form-control" @bind-value="registermodel.email" />
                <validationmessage for="@(() => registermodel.email)" />
            </div>
            <div class="form-group">
                <label for="password">password</label>
                <inputtext id="password" type="password" class="form-control" @bind-value="registermodel.password" />
                <validationmessage for="@(() => registermodel.password)" />
            </div>
            <div class="form-group">
                <label for="confirmpassword">confirm password</label>
                <inputtext id="confirmpassword" type="password" class="form-control" @bind-value="registermodel.confirmpassword" />
                <validationmessage for="@(() => registermodel.confirmpassword)" />
            </div>
            <button type="submit" class="btn btn-primary">submit</button>
        </editform>
    </div>
</div>

@code {

    private registermodel registermodel = new registermodel();
    private bool showerrors;
    private ienumerable<string> errors;

    private async task handleregistration() {
        showerrors = false;

        var result = await authservice.register(registermodel);

        if (result.successful) {
            navigationmanager.navigateto("/login");
        } else {
            errors = result.errors;
            showerrors = true;
        }
    }

}

注册组件包含一个表单让用户输入他们的电子邮件和密码。提交表单时，会调用authservice 的方法register 。如果注册成功那么用户会被导航到登录页，否则，会将错误显示给用户。

登录组件(login component)

现在我们可以注册一个新的帐户，我们需要能够登录。登录组件将用于此。

@page "/login"
@inject iauthservice authservice
@inject navigationmanager navigationmanager

<h1>login</h1>

@if (showerrors) {
    <div class="alert alert-danger" role="alert">
        <p>@error</p>
    </div>
}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">please enter your details</h5>
        <editform model="loginmodel" onvalidsubmit="handlelogin">
            <dataannotationsvalidator />
            <validationsummary />

            <div class="form-group">
                <label for="email">email address</label>
                <inputtext id="email" class="form-control" @bind-value="loginmodel.email" />
                <validationmessage for="@(() => loginmodel.email)" />
            </div>
            <div class="form-group">
                <label for="password">password</label>
                <inputtext id="password" type="password" class="form-control" @bind-value="loginmodel.password" />
                <validationmessage for="@(() => loginmodel.password)" />
            </div>
            <button type="submit" class="btn btn-primary">submit</button>
        </editform>
    </div>
</div>

@code {

    private loginmodel loginmodel = new loginmodel();
    private bool showerrors;
    private string error = "";

    private async task handlelogin() {
        showerrors = false;

        var result = await authservice.login(loginmodel);

        if (result.successful) {
            navigationmanager.navigateto("/");
        } else {
            error = result.error;
            showerrors = true;
        }
    }

}

与注册组件类似的设计，我们也提供一个表单用于用户输入电子邮件和密码。表单提交时，将调用authservice的方法login。如果登录成功，用户将被重定向到主页，否则将显示错误消息。

注销组件(logout component)

我们现在可以注册和登录，但我们也需要注销的功能。我用了一个页面组件来做这个，但是你也可以通过点击某个地方的按钮来实现。

@page "/logout"
@inject iauthservice authservice
@inject navigationmanager navigationmanager


@code {

    protected override async task oninitializedasync() {
        await authservice.logout();
        navigationmanager.navigateto("/");
    }

}

这个组件没有用户界面，当用户导航到它时，将调用authservice上的方法logout，然后将用户重定向回主页。

添加一个logindisplay组件并更新mainlayout组件

最后的任务是添加一个logindisplay组件并更新mainlayout 组件。

logindisplay 组件与blazor server模版一样，如果未经验证，它将显示登录与注册链接，否则显示电子邮件和注销链接。

<authorizeview>
    <authorized>
        hello, @context.user.identity.name!
        <a href="/logout">log out</a>
    </authorized>
    <notauthorized>
        <a href="/register">register</a>
        <a href="/login">log in</a>
    </notauthorized>
</authorizeview>

我们现在只需要更新mainlayout组件。

@inherits layoutcomponentbase

<div class="sidebar">
    <navmenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <logindisplay />
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">about</a>
    </div>

    <div class="content px-4">
        @body
    </div>
</div>

注册服务(registering services)

最后在startup类中注册服务。

            services.addblazoredlocalstorage();
            services.addauthorizationcore();
            services.addscoped<authenticationstateprovider, apiauthenticationstateprovider>();
            services.addscoped<iauthservice, authservice>();

如果一切都按计划进行，那么你应该得到这样的结果。

总结

这篇文章展示了如何webapi和asp.net core identity创建一个带有身份验证的blazor webassembly(blazor客户端)应用程序。

展示webapi如何处理和签发令牌(json web tokens)。以及如何设置各种控制器操作来为客户端应用程序提供服务。最后，展示如何配置blazor来使用api和它签发的令牌来设置应用的身份验证状态。

最后也提供我学习本文跟随作者所写的源码(github)。