Recommended
Recommended
More Related Content
Similar to DF22-UmbracoWithExternalLoginProviders-JeroenBreuer.pptx
Similar to DF22-UmbracoWithExternalLoginProviders-JeroenBreuer.pptx (20)
Recently uploaded
Recently uploaded (20)
DF22-UmbracoWithExternalLoginProviders-JeroenBreuer.pptx
- 1. Umbraco with external login providers Jeroen Breuer DF22 7 October, 2022
- 2. Who am I? Umbraco with external login providers 2 Senior Software Developer at iO Working with Umbraco for 14 years 3 x Umbraco MVP Jeroen Breuer
- 3. Session overview Umbraco with external login providers 3 OpenID Connect Umbraco example Conclusion Quick intro to OpenID Connect Implementation and demo Why you should use it 1 2 3
- 4. OpenID Connect Umbraco with external login providers 4 • Protocol • Verify the identity of the user
- 5. Flow Umbraco with external login providers 5
- 6. External login providers Umbraco with external login providers 6 • Umbraco supports users and members • Could by any OpenID Connect provider • Part of Umbraco core since 9.3
- 7. Umbraco with external login providers 7 Auto linking • Users of members need to exist in Umbraco • Auto linking creates users or members in Umbraco • Uses events to give extra roles/groups
- 8. Using OpenID Connect in Umbraco Umbraco with external login providers 8
- 9. Auto link options Umbraco with external login providers 9
- 10. Umbraco with external login providers 10 OpenID Connect configuration
- 11. Umbraco with external login providers 11 OnTokenValidated event
- 12. Umbraco with external login providers 12 OnRedirectToIdentityProviderForSignOut event
- 13. Umbraco with external login providers 13 Logout controller
- 14. Umbraco with external login providers 14 App settings
- 15. Umbraco with external login providers 15 Demo time
- 16. Umbraco with external login providers 16 • Tokens not stored in table: https://github.com/umbraco/Umbraco-CMS/issues/12749 • Update member before it’s created: https://github.com/umbraco/Umbraco-CMS/issues/12853 • Cannot delete a member: https://github.com/umbraco/Umbraco-CMS/issues/12864 • Claims are not transferred: https://github.com/umbraco/Umbraco-CMS/issues/12873 Issues fixed in Umbraco 10.2
- 17. Umbraco with external login providers 17 Virtual users/members • Not supported at the moment • Users/members need to exist in Umbraco • Feature request: https://github.com/umbraco/Umbraco-CMS/discussions/12741
- 18. Why you should use external login providers Umbraco with external login providers 18
- 19. Umbraco with external login providers 19 https://github.com/jbreuer/Umbraco-OpenIdConnect-Example
- 20. Umbraco with external login providers 20 • Getting started • https://www.youtube.com/watch?v=cklH7DtRDIQ Video
- 21. @j_breuer jeroenbreuer.nl Umbraco with external login providers 21 Jeroen Breuer Get in touch!
- 22. Thank you! Until next time!
Editor's Notes
- 1 I will start with an intro about OpenID Connect. 2 Next I will show how to implement it in Umbraco and how you can easily do an external login on the front of the website with members and SSO. This is not about users. 3 Finally I will tell why you should use external login providers.
- OpenID Connect is a protocol. It allows Clients to verify the identity of the User based on the authentication performed by an Authorization Server.
- Example where Azure AD is the external login provider. Go through all the steps. We will also follow these steps when we use external login providers in Umbraco. Id_token is important. We’re going to need that in our application later. The external login provider can also return user attributes. For example an address or role. Those are called claims.
- Both the Umbraco backoffice users and website members supports external login providers for performing authentication of your users or members. This could be any OpenIDConnect provider such as Azure Active Directory, Identity Server, or Google. Since 9.3 the Umbraco core has APIs available to connect with external login providers. No external packages required anymore. The demo of today will connect with Auth0 as the external login provider and will also use these new APIs. The users or members exist in the external login provider. The external login provider has all the features that you need. For example a register page, forgot password feature and two factor authentication (2FA). You no longer need to create that yourself.
- Umbraco requires the users or members to exist in Umbraco. With auto linking when you login on the external login provider the user or member will be created in Umbraco. It has events to change groups based on claims. So you can use roles from the external login provider and that way give users or members in Umbraco different rights.
- There is some great documentation about implementing external login providers in Umbraco. I have created an open source example package based on this documentation. It has a few extras which aren’t in the documentation. For example logout. I will now explain how this example package works. So the next 6 slides are going be code examples. The code is also on Github and I made a video about it too. So if I go too fast, you can watch it later.
- Options when a member is created in Umbraco and linked to the member from the external login provider. Can give a default member group. Based on claims you can give extra member groups in the events. OpenIdConnectMemberExternalLoginProviderOptions.cs https://github.com/jbreuer/Umbraco-OpenIdConnect-Example/blob/main/Umbraco-OpenIdConnect-Example.Core/Provider/OpenIdConnectMemberExternalLoginProviderOptions.cs#L23 public void Configure(MemberExternalLoginProviderOptions options) { options.AutoLinkOptions = new MemberExternalSignInAutoLinkOptions( // Must be true for auto-linking to be enabled autoLinkExternalAccount: true, defaultCulture: null, // Optionally specify the default "IsApprove" status. Must be true for auto-linking. defaultIsApproved: true, // Optionally specify the member type alias. Default is "Member" defaultMemberTypeAlias: "Member", // Optionally specify the member groups names to add the auto-linking user to. defaultMemberGroups: new List<string> { "example-group" } ) { // Optional callback OnAutoLinking = (autoLinkUser, loginInfo) => { // You can customize the user before it's linked. }, OnExternalLogin = (user, loginInfo) => { // You can customize the user before login. return true; //returns a boolean indicating if sign in should continue or not. } }; }
- On line 3 we can see the auto link options from the previous slide. Your external login provider has data like clientId and clientSecret. Those need to be configured here. This is a pretty default OpenID Connect configuration. This demo connects to Auth0. It’s using a free account. UmbracoBuilderExtensions.cs https://github.com/jbreuer/Umbraco-OpenIdConnect-Example/blob/main/Umbraco-OpenIdConnect-Example.Core/Extensions/UmbracoBuilderExtensions.cs#L13 public static IUmbracoBuilder AddOpenIdConnectAuthentication(this IUmbracoBuilder builder) { builder.Services.ConfigureOptions<OpenIdConnectMemberExternalLoginProviderOptions>(); builder.AddMemberExternalLogins(logins => { logins.AddMemberLogin( memberAuthenticationBuilder => { memberAuthenticationBuilder.AddOpenIdConnect( // The scheme must be set with this method to work for the umbraco members memberAuthenticationBuilder.SchemeForMembers(OpenIdConnectMemberExternalLoginProviderOptions.SchemeName), options => { var config = builder.Config; options.ResponseType = "code"; options.Scope.Add("openid"); options.Scope.Add("profile"); options.Scope.Add("email"); options.Scope.Add("phone"); options.Scope.Add("address"); options.RequireHttpsMetadata = true; options.MetadataAddress = config["OpenIdConnect:MetadataAddress"]; options.ClientId = config["OpenIdConnect:ClientId"]; // Normally the ClientSecret should not be in the Github repo. // These settings are valid and only used for this example. // So it's ok these are public. options.ClientSecret = config["OpenIdConnect:ClientSecret"]; options.SaveTokens = true; options.TokenValidationParameters.SaveSigninToken = true;
- Once you’re logged in on the external login provider you will be redirected back to Umbraco. There you have the data of the external login and you can map it to the data Umbraco needs. For example add some extra claims. Like I mentioned before claims are user attributes. They can be an email, name or role for example. Umbraco needs certain claims so we transform them here. UmbracoBuilderExtensions.cs https://github.com/jbreuer/Umbraco-OpenIdConnect-Example/blob/main/Umbraco-OpenIdConnect-Example.Core/Extensions/UmbracoBuilderExtensions.cs#L43 options.Events.OnTokenValidated = async context => { var claims = context?.Principal?.Claims.ToList(); var email = claims?.SingleOrDefault(x => x.Type == ClaimTypes.NameIdentifier); if (email != null) { // The email claim is required for auto linking. // So get it from another claim and put it in the email claim. claims?.Add(new Claim(ClaimTypes.Email, email.Value)); } var name = claims?.SingleOrDefault(x => x.Type == "user_displayname"); if (name != null) { // The name claim is required for auto linking. // So get it from another claim and put it in the name claim. claims?.Add(new Claim(ClaimTypes.Name, name.Value)); } if (context != null) { // Since we added new claims create a new principal. var authenticationType = context.Principal?.Identity?.AuthenticationType; context.Principal = new ClaimsPrincipal(new ClaimsIdentity(claims, authenticationType)); } await Task.FromResult(0); };
- Login is easy. Logout is hard. Logout needs to happen on 2 domains. The website and the external login provider. So you first logout on the website and then redirect to the external login provider to logout there as well. In this event you can send data to the external login provider when you logout. Most external login providers require some additional data. For example the id_token. This way the external login provider knows that the person that tries to logout is the same person that logged in before. If the id_token is valid you’ll be redirected back to the website. UmbracoBuilderExtensions.cs https://github.com/jbreuer/Umbraco-OpenIdConnect-Example/blob/main/Umbraco-OpenIdConnect-Example.Core/Extensions/UmbracoBuilderExtensions.cs#L71 options.Events.OnRedirectToIdentityProviderForSignOut = async notification => { var protocolMessage = notification.ProtocolMessage; // Since we're in a static extension method we need this approach to get the member manager. var memberManager = notification.HttpContext.RequestServices.GetService<IMemberManager>(); if (memberManager != null) { var currentMember = await memberManager.GetCurrentMemberAsync(); // On the current member we can find all their login tokens from the external login provider. // These tokens are stored in the umbracoExternalLoginToken table. var idToken = currentMember?.LoginTokens.FirstOrDefault(x => x.Name == "id_token"); if (idToken != null && !string.IsNullOrEmpty(idToken.Value)) { // Some external login providers need the IdTokenHint. // By setting the IdTokenHint the user can be redirected back from the external login provider to this website. protocolMessage.IdTokenHint = idToken.Value; } } await Task.FromResult(0); };
- Like I just mentioned you need to be redirected to the external login provider if you want to logout. The default Umbraco logout controller does not support this. Because it uses RedirectToCurrentUmbracoPage it overrides the redirect to the external login provider. So only use that if the members are only in Umbraco and not in an external login provider. Use this custom logout controller to trigger logout on the external login provider. If you’re not logged out on the external login provider it will login you again automatically. ExternalLogoutController.cs https://github.com/jbreuer/Umbraco-OpenIdConnect-Example/blob/main/Umbraco-OpenIdConnect-Example.Core/Controllers/ExternalLogoutController.cs#L36 [HttpPost] [ValidateAntiForgeryToken] [ValidateUmbracoFormRouteString] public async Task<IActionResult> HandleLogout([Bind(Prefix = "logoutModel")]PostRedirectModel model) { if (ModelState.IsValid == false) { return CurrentUmbracoPage(); } var isLoggedIn = HttpContext.User?.Identity?.IsAuthenticated ?? false; if (isLoggedIn) { // Trigger logout on the external login provider. await this.HttpContext.SignOutAsync("UmbracoMembers.OpenIdConnect"); // Trigger logout on this website. await _signInManager.SignOutAsync(); } // Don't return RedirectToCurrentUmbracoPage. // That will override the location header which is set by the external login provider logout. // So by returning EmptyResult() this will still redirect to the external login provider to logout there. return new EmptyResult(); }
- In the appsettings.json file below the ConnectionStrings you will find the OpenIdConnect settings. These are the only setting you need to change to connect to a different external login provider. You now see the settings for connecting to Auth0. Normally the ClientSecret should not be public. These settings are only used for this example. So it’s ok. appsettings.json https://github.com/jbreuer/Umbraco-OpenIdConnect-Example/blob/main/Umbraco-OpenIdConnect-Example.Web/appsettings.json#L30 "ConnectionStrings": { "umbracoDbDSN": "Data Source=|DataDirectory|/Umbraco.sqlite.db;Cache=Shared;Foreign Keys=True;Pooling=True", "umbracoDbDSN_ProviderName": "Microsoft.Data.Sqlite" }, "OpenIdConnect": { "MetadataAddress": "https://dev-i92inbjg.us.auth0.com/.well-known/openid-configuration", "ClientId": "AOXaiUSRn6IH0aX7BKAFY7G7QIDI7HUx", "ClientSecret": "pj_MFOHSVKOb8e13q5h5FItQbdQKT-vlQ9oD8t1XOIwkBd4sJe2_AJJVYTEshqrb", "LogoutUrl": "https://dev-i92inbjg.us.auth0.com/v2/logout", "ReturnAfterLogout": "https://localhost:44342/" }
- The external login provider is the bridge between Umbraco and Sitecore. They don’t know about each other. Enexis login page is configured in the external login provider. SSO support. Only need to manage members in the external login provider. They can login into both websites. This is the power of a composable DXP setup. Demo 1 https://localhost:44342/ Show network tab. Lots of redirects. Login Logout Logout also redirects. Login Clear cookies. Logged in automatically because you did not logout on the external login provider. All the Umbraco way. Can use protected pages and groups. Demo 2 https://umbraco-openidconnect-example.local/ Different app settings. Only thing that has changed. Login Umbraco with Enexis (powered by Sitecore) page. Back to Umbraco. Logout Umbraco login Enexis login auto Enexis logout Umbraco logout Enexis login Umbraco login auto
- While developing the Umbraco OpenID Connect example package I ran into some issues. All the issues that I reported are fixed in Umbraco 10.2. It took me a few nights of debugging. Tokens not stored in table: https://github.com/umbraco/Umbraco-CMS/issues/12749 Values like the id_token and access_token are stored in the umbracoExternalLoginToken table. These values were only saved on the first login. Not if you login again and have new tokens. These tokens are required for logout for example. The id_token I needed for logout was outdated. Now the tokens are always up to date in the table. Update member before it’s created: https://github.com/umbraco/Umbraco-CMS/issues/12853 Some changes were made in Umbraco 10 which caused a member to be updated before it was created. It tried to run some queries with the member id being 0. Could not login on Umbraco 10 with external login provider. Now it only updates if a member already exists. Cannot delete a member: https://github.com/umbraco/Umbraco-CMS/issues/12864 A member could not be deleted if it had any rows in the umbracoExternalLoginToken table. When a member is deleted it now also deletes the rows in the umbracoExternalLoginToken table. Claims are not transferred: https://github.com/umbraco/Umbraco-CMS/issues/12873 The external login member is transformed to an Umbraco member. But claims from the external member could not be transferred to the Umbraco member. So if you had some external data like an address you could not get that in Umbraco. Claims can now be transferred from the external login member to the Umbraco member. I discovered some of these bugs because I already did an OpenID Connect implementation in Sitecore. So I’m using my Sitecore knowledge to help improve Umbraco. And it happens the other way around too.
- The auto link features creates the member in Umbraco and links the external login member. The member is created the first time they login with the external login provider. The problem with the current solution is that users/members need to exist in 2 systems. Umbraco and the external login provider. This makes it harder to use the external login provider as a single source of truth for all users/members. If the external login provider has thousands of users/members you don't want them inside Umbraco as well. When you authenticate users/members through external providers, Umbraco could create and authenticate a virtual user/member with proper access rights. This user/member exists only as long as the user session lasts. Doesn’t exist yet, but is a feature request. https://github.com/umbraco/Umbraco-CMS/discussions/12741
- No need to create login, register and forgot password yourself. Members are stored outside of Umbraco. Can also be used for other systems with SSO. Fits perfect in a composable DXP world. Members only in Umbraco are free. External login providers usually have a free tier, but can get expensive if you have a lot of members.
- https://github.com/jbreuer/Umbraco-OpenIdConnect-Example Github repo Free and open source Complete solution with SQLite database. Download and run. Works out of the box. Not a NuGet package because each OpenID Connect implementation is different. So copy this example to your own project and make the changes that you need.
- The video is also on the github page. Shows how run the project and goes through all the files. Just like this presentation. https://www.youtube.com/watch?v=cklH7DtRDIQ