All docs
V21.1
21.2 (EAP/Beta)
21.1
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
.NET Framework 4.5.2+
.NET Framework 4.5.2+
.NET Standard 2.0+
.NET Core 3.0+

How to: Assign an Image to a User

  • 3 minutes to read

This topic describes how to assign an avatar or icon to an application user. ASP.NET Core Blazor and ASP.NET Web Forms applications display this image in the top right corner of an application page.

ASP.NET Core Blazor

Current user image in a Blazor application

ASP.NET Web Forms

CurrentUserImage

Apply the CurrentUserDisplayImage Attribute

Platforms: ASP.NET Core Blazor and ASP.NET Web Forms with the New Web UI.

You can pass the name of a property that stores a user image to the CurrentUserDisplayImage attribute to display this image in the application toolbar.

Follow the steps below to extend a user class with a property that stores a user image:

  1. In a user business class, declare a property of the MediaDataObject, Image, or byte[] type.
  2. Apply CurrentUserDisplayImageAttribute to the user class and pass the new property name as its parameter.

    XPO

    using DevExpress.Persistent.Base;
    using DevExpress.Persistent.BaseImpl;
    // ...
    [CurrentUserDisplayImage(nameof(Photo))]
    public class MyAppUser : PermissionPolicyUser, IObjectSpaceLink, ISecurityUserWithLoginInfo {
        // ...
        private MediaDataObject photo;
        public MediaDataObject Photo {
            get { return photo; }
            set { SetPropertyValue(nameof(Photo), ref photo, value); }
        }
    }
    

    EF Core

    using DevExpress.Persistent.Base;
    using DevExpress.Persistent.BaseImpl;
    // ...
    [CurrentUserDisplayImage(nameof(Photo))]
    public class MyAppUser : PermissionPolicyUser, IObjectSpaceLink, ISecurityUserWithLoginInfo {
        // ...
        private MediaDataObject photo;
        public virtual MediaDataObject Photo {
            get { return photo; }
            set { SetReferencePropertyValue(ref photo, value); }
        }
    }
    
  3. In ASP.NET Web Forms applications, invoke the Model Editor, navigate to the Application node, and set the CurrentUserDisplayMode property to CaptionAndImage or Image.

    The CurrentUserDisplayMode property in the Model Editor

Add the XafClaimTypes.UserImageUrl Claim

Platform: ASP.NET Core Blazor.

In ASP.NET Core Blazor applications with OAuth authentication, you can add a claim of the XafClaimTypes.UserImageUrl type to read a user image on sign in. The following example configures the Google authentication provider and creates the XafClaimTypes.UserImageUrl claim from the picture key in Google user data:

File: MySolution.Blazor.Server\Startup.cs.

using DevExpress.ExpressApp.Security;
using Microsoft.AspNetCore.Authentication.OAuth;
using Microsoft.AspNetCore.Authentication;
using Microsoft.Extensions.DependencyInjection;
// ...
public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
        .AddCookie(options => options.LoginPath = "/LoginPage")
        .AddGoogle(options => {
            // ...
            options.ClaimActions.MapJsonKey(XafClaimTypes.UserImageUrl, "picture");
        });
    }
}

Register an IUserProfileInfoProvider Service

Platform: ASP.NET Core Blazor.

You can register a service that implements the IUserProfileInfoProvider interface to specify a custom user image and name. Follow the steps below to implement this technique in your application:

  1. In the Blazor application project, create a new class that implements the IUserProfileInfoProvider interface:

    File: MySolution.Blazor.Server\Services\MyUserProfileInfoProvider.cs.

    using DevExpress.ExpressApp.Blazor.Services;
    using DevExpress.ExpressApp.Security;
    using System;
    // ...
    public class MyUserProfileInfoProvider : IUserProfileInfoProvider {
        private readonly IPrincipalProvider principalProvider;
        private readonly ISecurityStrategyBase securitySystem;
        public MyUserProfileInfoProvider(IPrincipalProvider principalProvider, ISecurityStrategyBase securitySystem) {
            this.principalProvider = principalProvider;
            this.securitySystem = securitySystem;
        }
        public string GetUserImageUrl(Func<string> defaultUrlAccessor) {
            //or: securitySystem.UserName == "Admin"
            if(principalProvider.User.Identity.Name == "Admin") {
                return @"https://github.com/DevExpress.png";
            }
            return defaultUrlAccessor();
    
        }
        public string GetUserName(Func<string> defaultNameAccessor) {
            //or: principalProvider.User.Identity.Name == "Admin"
            if(securitySystem.UserName == "Admin") {
                return @"Custom Admin Name";
            }
            return defaultNameAccessor();
        }
    }
    
  2. Add this scoped service to your Blazor application service collection:

    File: MySolution.Blazor.Server\Startup.cs.

    public class Startup {
        // ...
        public void ConfigureServices(IServiceCollection services) {
            // ...
            services.AddScoped<IUserProfileInfoProvider, MyUserProfileInfoProvider>();
        }
    }