BlazorWASM中使用现有JWT授权添加Google认证存在问题。 _编程开发

BlazorWASM中使用现有JWT授权添加Google认证存在问题。

创始人

2024-12-21 22:31:00

0次

首先需要在Google Cloud Console中创建OAuth 2.0客户端ID，并添加回调URI。
在Blazor WASM项目中安装以下NuGet包：
- Microsoft.AspNetCore.Authentication.Google
- Microsoft.AspNetCore.Components.Authorization

创建AuthService类，从AuthenticationStateProvider接口继承并实现GetAuthenticationStateAsync方法。在此方法中，可以使用JWT令牌从服务器检索用户的身份验证状态。

public class AuthService : AuthenticationStateProvider
{
    private readonly HttpClient httpClient;
    private readonly ILocalStorageService localStorage;

    public AuthService(HttpClient httpClient, ILocalStorageService localStorage)
    {
        this.httpClient = httpClient;
        this.localStorage = localStorage;
    }

    public override async Task GetAuthenticationStateAsync()
    {
        var accessToken = await localStorage.GetItemAsync("access_token");

        // 如果访问令牌未过期，从服务器检索用户信息
        if (!string.IsNullOrEmpty(accessToken))
        {
            httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);

            var userData = await httpClient.GetFromJsonAsync("api/UserData");

            if (userData != null && !string.IsNullOrEmpty(userData.Email))
            {
                var claims = new[] { new Claim(ClaimTypes.Name, userData.Email) };
                var identity = new ClaimsIdentity(claims, "GoogleAuth");
                return new AuthenticationState(new ClaimsPrincipal(identity));
            }
        }

        // 如果没有登录，返回未认证的AuthenticationState
        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
    }
}

在startup.cs文件中，配置Google认证模式和服JWT令牌。

private const string GoogleClientId = "";
private const string GoogleClientSecret = "";

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(o =>
    {
        o.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        o.DefaultChallengeScheme = GoogleDefaults.AuthenticationScheme;
    })
    .AddCookie()
    .AddGoogle(options =>
    {
        options.ClientId = GoogleClientId;
        options.ClientSecret = GoogleClientSecret;
    });

    // 添加Jwt验证
    services.AddAuthorizationCore(options =>
    {
        options.AddPolicy("JwtAuth", policy =>
        {
            policy.AuthenticationSchemes.Add(JwtBearerDefaults.AuthenticationScheme);
            policy.RequireAuthenticatedUser();
        });
    });

    services.AddControllers();
    services.AddHttpClient();
    services.AddHttpContextAccessor();
    services.Add BlazoredLocalStorage();
    services.AddScoped();
    services.AddScoped();

}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseHttpsRedirection();
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    });
}

在组件中使用AuthService和AuthorizeView组件。

@inject AuthService authService
...

    
        Hello, @context.User.Identity.Name!
    
    
        Please log in.
        Login
    

...
@code {
    private AuthenticationState authState;

    protected override async Task OnInitializedAsync()
    {
        authState = await authService.GetAuthenticationStateAsync();
        authService.AuthStateChanged

上一篇：BlazorWASM中List对象返回的项比原始数据集多一个的问题

下一篇：BlazorWASM中为类似EditForm属性创建可重复的RenderFragment

BlazorWASM中使用现有JWT授权添加Google认证存在问题。

相关内容

热门资讯