Add User Profile Menu for OpenID Connect login #3443

tlmii · 2024-04-05T22:28:19Z

Resolves #3194
Resolves #3197

Introduces the FluentProfileMenu to the upper-right of the site header when the user is authenticated with OpenID Connect.
Displays the user's full name and user id (often, but not always, an email) as well as their initials.
Adds two config settings - Dashboard:Frontend:OpenIdConnect:NameClaimType and Dashboard:Frontend:OpenIdConnect:UsernameClaimType to allow for customization of which claims determine the values displayed in the profile menu
Provides a sign out button on the profile menu allowing the user to sign out - this clears the cookie and redirects them to the IdP where they can also sign out if they wish.

A couple screenshots:

TODO:

Figure out what the header of the profile menu should be. Currently says OpenID Connect since that's the auth mode we're in. Could maybe find a way to tie it to the name of the IdP?
Test with another IdP (so far: Entra ID and Keycloak)
Figure out if there's anything we can do (another config setting? more docs?) to make the OpenIdConnect code we use interoperate with Keycloak's logout better (right now it gets an error because post_logout_redirect_uri is passed but id_token_hint is not, which they consider an error even though the spec doesn't appear to).

Note: Testing this PR will require you to use your own Idp since this will only appear with OpenID Connect auth enabled. If you want to test it with TestShop (or other playground apps) you'll also need to disable the automatic setting of the authmode. Easiest way I could find to do that was to comment out this line:

aspire/src/Aspire.Hosting/Dashboard/DashboardLifecycleHook.cs

Line 126 in 29e2b57

    
                           context.EnvironmentVariables[DashboardConfigNames.DashboardFrontendAuthModeName.EnvVarName] = "BrowserToken";

But maybe there's a better way.

Microsoft Reviewers: Open in CodeFlow

tlmii · 2024-04-05T22:28:46Z

src/Aspire.Dashboard/Extensions/StringExtensions.cs

-    /// </summary>
-    /// <param name="text">The string to shorten</param>
-    /// <param name="maxLength">The max length of the result</param>
-    public static string TrimMiddle(this string text, int maxLength)


This hasn't been used for a while, so I deleted it and the unit test cases.

tlmii · 2024-04-05T22:29:58Z

src/Aspire.Dashboard/Components/Controls/UserProfile.razor

+                                   FooterLink="">
+                    <HeaderTemplate>
+                        <FluentStack VerticalAlignment="VerticalAlignment.Center">
+                            <FluentLabel>OpenID Connect</FluentLabel>


This is what I referenced in one of the TODOs in the description. We can:

Leave it as-is

Set it to something else constant

Set it to something else constant and localize it

Figure out some way to get an appropriate value from an IdP

Remove it altogether

Another option is just to remove the text. I think it's pretty clear what the popup means in context:

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.css

tlmii · 2024-04-05T22:30:59Z

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.css

-::deep.layout > header fluent-button[appearance=stealth]:not(:hover)::part(control),
-::deep.layout > header fluent-anchor[appearance=stealth]:not(:hover)::part(control),
-::deep.layout > header fluent-anchor[appearance=stealth].logo::part(control),
+::deep.layout > header > .header-gutters > fluent-button[appearance=stealth]:not(:hover)::part(control),


Made a bunch of these header styles more specific to the elements we were trying to impact so they wouldn't change the style of things within the FluentProfileMenu

src/Aspire.Dashboard/Configuration/DashboardOptions.cs

tlmii · 2024-04-05T22:34:30Z

src/Aspire.Dashboard/Components/Controls/UserProfile.razor.cs

+                if (string.IsNullOrWhiteSpace(_name))
+                {
+                    // Make sure there's always a name, even if that name is a placeholder
+                    _name = Loc[nameof(Login.AuthorizedUser)];


Open to suggestions on what, if anything, we should display in this case. I've seen this type of placeholder before so I went with it for now.

kvenkatrajan · 2024-04-05T22:43:55Z

f igure out what the header of the profile menu should be. Currently says OpenID Connect since that's the auth mode we're in.

Can we update to "Signed in as:" Or "Profile" for now? @leslierichardson95 thoughts?

kvenkatrajan · 2024-04-05T22:45:01Z

Looks wonderful by the way - great job 👍

leslierichardson95 · 2024-04-05T23:39:47Z

f igure out what the header of the profile menu should be. Currently says OpenID Connect since that's the auth mode we're in.

Can we update to "Signed in as:" Or "Profile" for now? @leslierichardson95 thoughts?

@kvenkatrajan I like "Signed in as:".

davidfowl · 2024-04-08T01:10:10Z

src/Aspire.Dashboard/Extensions/ClaimsIdentityExtensions.cs

+
+namespace Aspire.Dashboard.Extensions;
+
+public static class ClaimsIdentityExtensions


Whoops. Fixed.

tlmii · 2024-04-08T04:43:15Z

f igure out what the header of the profile menu should be. Currently says OpenID Connect since that's the auth mode we're in.

Can we update to "Signed in as:" Or "Profile" for now? @leslierichardson95 thoughts?

@kvenkatrajan I like "Signed in as:".

Updated:

Sign Out being on the same line as "Signed in as:" feels a little off to me now. But it still makes more sense than what was there before I think.

JamesNK · 2024-04-08T05:25:39Z

FYI the browser token auth uses Logged in and Login in its UI. Consider changing text here to be consistent.

mitchdenny · 2024-04-08T12:39:51Z

What are we doing around authorization?

kvenkatrajan · 2024-04-08T15:58:32Z

What are we doing around authorization?

We have #808 tracking this.

tlmii · 2024-04-08T19:36:13Z

FYI the browser token auth uses Logged in and Login in its UI. Consider changing text here to be consistent.

Switched to "Logged in as:"

If we can't find a way to pull the name of the IdP from somewhere, maybe we can make it an option. I'd like that better than this (and it'd be consistent with Teams, Azure Portal, etc). But I don't want to hold this PR up for that.

mitchdenny · 2024-04-09T13:21:03Z

808 seemed related to project templates?

kvenkatrajan · 2024-04-09T13:30:49Z

Ah its 808 on the other board: https://github.com/dotnet/aspire-private-planning/issues/808

drewnoakes

Looks great.

Approving, though as I mentioned above I think the popup could be simplified:

src/Aspire.Dashboard/README.md

src/Aspire.Dashboard/Configuration/DashboardOptions.cs

src/Aspire.Dashboard/Configuration/ValidateDashboardOptions.cs

src/Aspire.Dashboard/Configuration/DashboardOptions.cs

src/Aspire.Dashboard/DashboardWebApplication.cs

src/Aspire.Dashboard/Extensions/ClaimsIdentityExtensions.cs

src/Aspire.Dashboard/Extensions/StringExtensions.cs

Co-authored-by: Drew Noakes <[email protected]>

src/Aspire.Dashboard/Extensions/StringExtensions.cs

tests/Aspire.Dashboard.Tests/StringExtensionsTests.cs

Co-authored-by: Drew Noakes <[email protected]>

tlmii · 2024-04-10T13:55:04Z

/backport to release/8.0

github-actions · 2024-04-10T13:55:15Z

Started backporting to release/8.0: https://github.com/dotnet/aspire/actions/runs/8632467352

At some point during development of dotnet#3443 the configuration key was changed and these error messages were missed.

At some point during development of #3443 the configuration key was changed and these error messages were missed.

tlmii added the area-dashboard label Apr 5, 2024

tlmii requested review from JamesNK, drewnoakes, mitchdenny, adamint and kvenkatrajan April 5, 2024 22:28

tlmii commented Apr 5, 2024

View reviewed changes

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.css Outdated Show resolved Hide resolved

tlmii commented Apr 5, 2024

View reviewed changes

src/Aspire.Dashboard/Configuration/DashboardOptions.cs Outdated Show resolved Hide resolved

tlmii commented Apr 5, 2024

View reviewed changes

davidfowl reviewed Apr 8, 2024

View reviewed changes

tlmii force-pushed the dev/login-details branch from 03c84cf to 0f3fe1d Compare April 8, 2024 04:23

tlmii force-pushed the dev/login-details branch from ff0d075 to 7e7cc0d Compare April 8, 2024 19:33

drewnoakes approved these changes Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/README.md Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Configuration/DashboardOptions.cs Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Configuration/ValidateDashboardOptions.cs Outdated Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Configuration/DashboardOptions.cs Outdated Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Configuration/DashboardOptions.cs Outdated Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/DashboardWebApplication.cs Outdated Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Extensions/ClaimsIdentityExtensions.cs Outdated Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Extensions/StringExtensions.cs Outdated Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Extensions/StringExtensions.cs Show resolved Hide resolved

tlmii and others added 8 commits April 9, 2024 23:47

Add User Profile Menu for OpenID Connect login

3648519

CR feedback

85be6ca

Signed in as -> Logged in as

566867b

Nest OpenIdConnect options under Frontend

afdbc98

Update src/Aspire.Dashboard/Configuration/DashboardOptions.cs

db73a49

Co-authored-by: Drew Noakes <[email protected]>

Update src/Aspire.Dashboard/Configuration/DashboardOptions.cs

d5f4d8d

Co-authored-by: Drew Noakes <[email protected]>

Update src/Aspire.Dashboard/Configuration/DashboardOptions.cs

8996a54

Co-authored-by: Drew Noakes <[email protected]>

CR feedback

222bedd

tlmii force-pushed the dev/login-details branch from 8452f61 to 222bedd Compare April 10, 2024 06:47

drewnoakes reviewed Apr 10, 2024

View reviewed changes

src/Aspire.Dashboard/Extensions/StringExtensions.cs Show resolved Hide resolved

drewnoakes reviewed Apr 10, 2024

View reviewed changes

tests/Aspire.Dashboard.Tests/StringExtensionsTests.cs Show resolved Hide resolved

tlmii and others added 2 commits April 10, 2024 00:05

CR feedback

56bf361

Update tests/Aspire.Dashboard.Tests/StringExtensionsTests.cs

750321e

Co-authored-by: Drew Noakes <[email protected]>

tlmii enabled auto-merge (squash) April 10, 2024 07:10

tlmii merged commit 2a8886a into dotnet:main Apr 10, 2024
8 checks passed

github-actions bot mentioned this pull request Apr 10, 2024

[release/8.0] Add User Profile Menu for OpenID Connect login #3557

Merged

tlmii deleted the dev/login-details branch April 11, 2024 03:18

drewnoakes added a commit to drewnoakes/aspire that referenced this pull request Apr 12, 2024

Fix configuration key in error messages

b22ac49

At some point during development of dotnet#3443 the configuration key was changed and these error messages were missed.

drewnoakes mentioned this pull request Apr 12, 2024

Fix configuration key in error messages #3630

Merged

drewnoakes added a commit that referenced this pull request Apr 12, 2024

Fix configuration key in error messages (#3630)

fbdd392

At some point during development of #3443 the configuration key was changed and these error messages were missed.

github-actions bot locked and limited conversation to collaborators May 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add User Profile Menu for OpenID Connect login #3443

Add User Profile Menu for OpenID Connect login #3443

tlmii commented Apr 5, 2024 •

edited

Loading

tlmii Apr 5, 2024

tlmii Apr 5, 2024

drewnoakes Apr 10, 2024

tlmii Apr 5, 2024

tlmii Apr 5, 2024

kvenkatrajan commented Apr 5, 2024 •

edited

Loading

kvenkatrajan commented Apr 5, 2024

leslierichardson95 commented Apr 5, 2024

davidfowl Apr 8, 2024

tlmii Apr 8, 2024

tlmii commented Apr 8, 2024

JamesNK commented Apr 8, 2024

mitchdenny commented Apr 8, 2024

kvenkatrajan commented Apr 8, 2024 •

edited

Loading

tlmii commented Apr 8, 2024

mitchdenny commented Apr 9, 2024

kvenkatrajan commented Apr 9, 2024

drewnoakes left a comment

tlmii commented Apr 10, 2024

github-actions bot commented Apr 10, 2024


		namespace Aspire.Dashboard.Extensions;

		public static class ClaimsIdentityExtensions

Add User Profile Menu for OpenID Connect login #3443

Add User Profile Menu for OpenID Connect login #3443

Conversation

tlmii commented Apr 5, 2024 • edited Loading

Microsoft Reviewers: Open in CodeFlow

tlmii Apr 5, 2024

Choose a reason for hiding this comment

tlmii Apr 5, 2024

Choose a reason for hiding this comment

drewnoakes Apr 10, 2024

Choose a reason for hiding this comment

tlmii Apr 5, 2024

Choose a reason for hiding this comment

tlmii Apr 5, 2024

Choose a reason for hiding this comment

kvenkatrajan commented Apr 5, 2024 • edited Loading

kvenkatrajan commented Apr 5, 2024

leslierichardson95 commented Apr 5, 2024

davidfowl Apr 8, 2024

Choose a reason for hiding this comment

tlmii Apr 8, 2024

Choose a reason for hiding this comment

tlmii commented Apr 8, 2024

JamesNK commented Apr 8, 2024

mitchdenny commented Apr 8, 2024

kvenkatrajan commented Apr 8, 2024 • edited Loading

tlmii commented Apr 8, 2024

mitchdenny commented Apr 9, 2024

kvenkatrajan commented Apr 9, 2024

drewnoakes left a comment

Choose a reason for hiding this comment

tlmii commented Apr 10, 2024

github-actions bot commented Apr 10, 2024

tlmii commented Apr 5, 2024 •

edited

Loading

kvenkatrajan commented Apr 5, 2024 •

edited

Loading

kvenkatrajan commented Apr 8, 2024 •

edited

Loading