Blazor SSR/WASM IDS/OIDC 单点登录授权实例2-登录信息组件wasm

目录:

1. OpenID 与 OAuth2 基础知识
2. Blazor wasm Google 登录
3. Blazor wasm Gitee 码云登录
4. Blazor SSR/WASM IDS/OIDC 单点登录授权实例1-建立和配置IDS身份验证服务
5. Blazor SSR/WASM IDS/OIDC 单点登录授权实例2-登录信息组件wasm
6. Blazor SSR/WASM IDS/OIDC 单点登录授权实例3-服务端管理组件
7. Blazor SSR/WASM IDS/OIDC 单点登录授权实例4 - 部署服务端/独立WASM端授权
8. Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Blazor hybird app 端授权
9. Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Winform 端授权

源码

BlazorOIDC/Shared

1. 编辑 BlazorOIDC.Shared 项目配置文件

    
        net7.0
        enable
        enable
    

    
        
        
        
        
        
        
        
        
    

    
        
        
        
        
    

2. 共享工程添加登录信息组件

Pages/LogInfo.razor

@page "/logInfo"
@namespace Densen.Identity.Shared 
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Identity

@inject NavigationManager Navigation

登录信息

登录信息

检查登录信息

@authMessage

@code
{
    [Inject]
    [NotNull]
    protected IJSRuntime? jsRuntime { get; set; }

    private string LoginUrl = "Identity/Account/Login";
    private string LogoutUrl = "Identity/Account/Register";
    private string RegisterUrl = "Identity/Account/Register";

    private string? claimInfo;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            if (this.jsRuntime is IJSInProcessRuntime)
            {
                LoginUrl = "authentication/login";
                LogoutUrl= "authentication/logout";
                RegisterUrl = "authentication/register";
                StateHasChanged();
            }
        }
    }

    /// 

    /// 级联参数获取身份验证状态数据
    /// 
    [CascadingParameter]
    private Task? authenticationStateTask { get; set; }

    private string? authMessage;

    private async Task LogUsername()
    {
        var authState = await authenticationStateTask!;
        var user = authState.User;

        if (user!.Identity!.IsAuthenticated)
        {
            authMessage = $"{user.Identity.Name} is authenticated.";
        }
        else
        {
            authMessage = "The user is NOT authenticated.";
        }
    }

    private void BeginLogOut()
    {
        Navigation.NavigateTo(LogoutUrl, forceLoad: true);
    } 

}



AuthorizeView 组件根据用户是否获得授权来选择性地显示 UI 内容。 如果只需要为用户显示数据，而不需要在过程逻辑中使用用户的标识，那么此方法很有用


    

        你好, @context.User.Identity?.Name

        [
        @if (@context.User.IsInRole(AuthorizeRoles.Admin.ToString()))
        {
            管理员 
        }
        @if (@context.User.IsInRole(AuthorizeRoles.Superuser.ToString()))
        {
            超级用户 
        }
        @if (@context.User.IsInRole(AuthorizeRoles.User.ToString()))
        {
            用户 
        }
        @if (@context.User.IsInRole(AuthorizeRoles.R110.ToString()))
        {
            R110用户 
        }
        @if (@context.User.IsInRole(AuthorizeRoles.R120.ToString()))
        {
            R120用户 
        }
        @if (@context.User.IsInRole(AuthorizeRoles.R130.ToString()))
        {
            R130用户 
        }
        @if (@context.User.IsInRole(AuthorizeRoles.R140.ToString()))
        {
            R140用户 
        }
        ]

        



        
以下是用户的声明


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

        
@claimInfo


        注销

    
    
        看起来你还没登录
        注册
        登录
    




以下是基于角色或基于策略的授权,未登录不显示 


    
只有管理员或超级用户才能看到.

3. 添加共享引用文件

_Imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using System.Diagnostics.CodeAnalysis
@using Densen.Identity
@using Densen.Identity.Shared

4. 编辑功能菜单

BlazorOIDC.Client 项目 Shared/NavMenu.razor 文件

源码

BlazorOIDC/Client

  
     登录信息
  

5. 添加 Shared 工程的页面路由

BlazorOIDC.Client 项目 App.razor 文件

Router 添加 BlazorOIDC.Shared 工程的页面路由

6. 运行项目

点击登录, 然后点击新添加的页面, 测试有效

7. 其他

其他页面参考以前文章或者源码

BlazorOIDC/Client