Adding an external Microsoft login to IdentityServer4

This article shows how to implement a Microsoft Account as an external provider in an IdentityServer4 project using ASP.NET Core Identity with a SQLite database.

Setting up the App Platform for the Microsoft Account

To setup the app, login using your Microsoft account and open the My Applications link

https://apps.dev.microsoft.com/?mkt=en-gb#/appList

id4-microsoft-apps

Click the Add an app button. Give the application a name and add your email. This app is called microsoft_id4_enrico.

id4-microsoft-apps-registration

After you clicked the create button, you need to generate a new password. Save this somewhere for the application configuration. This will be the client secret when configuring the application.

id4-microsoft-apps-myapp

Now Add a new platform. Choose a Web type.

id4-microsoft-apps-platform

Now add the redirect URL for you application. This will be the https://YOUR_URL/signin-microsoft

id4-microsoft-apps-platform2

Add the Permissions as required

id4-microsoft-apps-permission

id4-microsoft-apps-permission-list

pplication configuration

Note: The samples are at present not updated to ASP.NET Core 2.0

Clone the IdentityServer4 samples and use the 6_AspNetIdentity project from the quickstarts.
Add the Microsoft.AspNetCore.Authentication.MicrosoftAccount package using Nuget as well as the ASP.NET Core Identity and EFCore packages required to the IdentityServer4 server project.

The application uses SQLite with Identity. This is configured in the Startup class in the ConfigureServices method.

services.AddDbContext<ApplicationDbContext>(options =>
       options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
 
services.AddIdentity<ApplicationUser, IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddDefaultTokenProviders()
    .AddIdentityServer();

Now the AddMicrosoftAccount extension method can be use to add the Microsoft Account external provider middleware in the Configure method in the Startup class. The SignInScheme is set to “Identity.External” because the application is using ASP.NET Core Identity. The ClientId is the Id from the app ‘microsoft_id4_damienbod’ which was configured on the my applications website. The ClientSecret is the generated password.

services.AddAuthentication()
     .AddMicrosoftAccount(options => {
          options.ClientId = _clientId;
          options.SignInScheme = "Identity.External";
          options.ClientSecret = _clientSecret;
      });
 
services.AddMvc();
 
...
 
services.AddIdentityServer()
     .AddSigningCredential(cert)
     .AddInMemoryIdentityResources(Config.GetIdentityResources())
     .AddInMemoryApiResources(Config.GetApiResources())
     .AddInMemoryClients(Config.GetClients())
     .AddAspNetIdentity<ApplicationUser>()
     .AddProfileService<IdentityWithAdditionalClaimsProfileService>();

And the Configure method also needs to be configured correctly.

If you receive an error like "unauthorize_access", remember that RedirectUri is required in IdentityServer configuration and clients.

Adding MVC 5 Identity to our Existing Project

First of all to your solution from NuGet you have to execute the following command:

  • Install-Package EntityFramework (Entity Framework)
  • Install-Package EntityFramework.SqlServerCompact (Entity Framework SQL Server Compact)
  • Install-Package Microsoft.AspNet.Identity.Core (ASP.NET Identity Core)
  • Install-Package Microsoft.AspNet.Identity.EntityFramework (ASP.NET Identity EntityFramework)
  • Install-Package Microsoft.AspNet.Identity.Owin (ASP.NET Identity Owin)
  • Install-Package Microsoft.Owin.Security.Facebook (Owin.Security.Facebook)
  • Install-Package Microsoft.Owin.Security.Google (Owin.Security.Google)
  • Install-Package Microsoft.Owin.Security.MicrosoftAccount (Owin.Security.MicrosoftAccount)
  • Install-Package Microsoft.Owin.Security.Twitter (Owin.Security.Twitter)
  • Install-Package Microsoft.AspNet.WebApi.Client (ASP.NET Web API 2 Client)
  • Install-Package Microsoft.Owin.Host.SystemWeb (Owin.Host.SystemWeb)

That should be all the NuGet references you need to install. Now let’s create the files that make up Visual Studio 2013’s MVC 5 Web Application’s Account Login and Registration System.

We will start in the App_Start folder and make our way down.

Right click on App_Start folder and Add > Class. Name it: FilterConfig.cs
place the following code in your file:

using System.Web;
using System.Web.Mvc;
  
namespace PSC
{
   public class FilterConfig
   {
      public static void RegisterGlobalFilters(GlobalFilterCollection filters)
      {
         filters.Add(new HandleErrorAttribute());
      }
   }
}

Right click on App_Start folder and Add > Class. Name it: Startup.Auth.cs
Dont forget the dot between Startup & Auth “Startup.Auth.cs”
place the following code in your file:

using System.Web;
using System.Web.Mvc;
using Microsoft.AspNet.Identity;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Owin;

namespace PSC
{
    public partial class Startup
    {
        // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
        public void ConfigureAuth(IAppBuilder app)
        {
            // Enable the application to use a cookie to store information for the signed in user
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/Account/Login")
            });
            // Use a cookie to temporarily store information about a user logging in with a third party login provider
            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

            // Uncomment the following lines to enable logging in with third party login providers
            //app.UseMicrosoftAccountAuthentication(
            // clientId: "",
            // clientSecret: "");

            //app.UseTwitterAuthentication(
            // consumerKey: "",
            // consumerSecret: "");

            //app.UseFacebookAuthentication(
            // appId: "",
            // appSecret: "");

            //app.UseGoogleAuthentication();
        }
    }
}

The rest of the code for this project I am going to simply put in a .Zip file and let you install manually, because it is too much code to put on the tutorial. Simply extract the .zip file and copy the files from the Controllers folder to the controllers folder in your project, and so on.

So I simply opened up the folder of this Zip File and drag & Dropped them into the solution. I did not have to include the files, Visual Studio made them available upon dropping them in.

Ok we should have all of those files in the project now, go through each one and open them one by one and make sure there are no errors or squiggly lines. If we did our job at providing all of the right references before dropping these files in there should be no errors.

We still need to add one more file, we can do this manually. Right Click on the root directory and add a class. Name it Startup.cs Inside that file put the following code:

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(PSC.Shorturl.Web.Startup))]
 namespace PSC
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);
        }
    }
}

That should allow us to build and run our project.

Now our project is working with Identity, OWIN, the account pages work, but we need a link in our navigation to them.

Remember to add _LoginPartial.cshtml somewhere in the layout!

PSC_Identity_Files.zip (10.8KB)

Advertsing

125X125_06





TagCloud

MonthList

CommentList