Authentication Using External Providers (Hotmail)

In my previous article, I wrote about how to authenticate by creating new user accounts. Now, what if anyone doesn’t want to add another pair of user id passwords to his memory and wants to use the existing ones which he/she is using very frequently in his/her day-to-day life. Well, here comes the external providers into the picture.

In this article, I won’t be covering the basics on how to create a website from scratch as it is already covered in an earlier article. So, let’s quickly jump on to the login screen and on the right-hand side, you will see the text as ‘Use another service to log in.’ as shown in below image:

 

The above screenshot also provides a hyperlink, which will guide us on how to set up the authentication using external providers.

What are the external providers?

There is a huge list of authentication providers. The most common ones are Twitter, Facebook, Google, and Microsoft. This list is not restricted here as it can be any other custom provider. Throughout this article, I’ll be driving you to set up the authentication with a Hotmail account.

Steps to setup authentication with Hotmail account

Navigate to https://apps.dev.microsoft.com and do login using existing Hotmail id, as shown below.

 

On successful login, you will land on the below page.

 

Next is to click on ‘Add an app’ button, which is shown on the top right corner. This will take you to,

 

In the above dialog, provide the application name and click on ‘Create’ button. Here, you can also take a path of guidance by clicking on checkbox ‘Let us help you get started’. Once you click on the Create button, an Application Id will be generated for you, as shown below.

 

 

Next, we have to work on adding application secrets.

Adding Application Secrets

Now, click on ‘Generate New Password’ button. On click of this button, a password will be generated by you.
 

Copy this newly generated password and temporarily save it somewhere as you will need this password during application configuration along with Application Id.

Adding Platform

Click on App platform on the Registration screen. Here for demo purposes, I'm choosing Web. You can choose others too.

Next is to construct a URL, which is a combination of our application URL and signin host. This is how it looks,

 

Click on Save button and you are done with configuration. Next, we have to associate this configuration with our application. So, let’s quickly go ahead and update our application using User Secrets as shown below,

 

 

and place the following code in secrets.json,

{
  "Authentication:Microsoft:ApplicationId": "654e030a-a10b-40ee-82db-1bf0185aebc0",
  "Authentication:Microsoft:Password": "XXXXXX"
}

You can write  the same line of code in Startup.cs also but we are maintaining the secrets in different files so that it can be changed easily while moving to production.

Next is to configure the identity in Startup.cs,

public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

            services.AddIdentity<ApplicationUser, IdentityRole>()
                .AddEntityFrameworkStores<ApplicationDbContext>()
                .AddDefaultTokenProviders();

            services.AddAuthentication().AddMicrosoftAccount(options =>
            {
                options.ClientId = Configuration["Authentication:Microsoft:ApplicationId"];
                options.ClientSecret = Configuration["Authentication:Microsoft:Password"];
            });

            services.AddMvc()
                .AddRazorPagesOptions(options =>
                {
                    options.Conventions.AuthorizeFolder("/Account/Manage");
                    options.Conventions.AuthorizePage("/Account/Logout");
                });

            services.AddSingleton<IEmailSender, EmailSender>();
        }

If you want to know more on setting up authentication, this official Microsoft article can also be referred to.  

We are almost there. Save your application and click on Login button. You will notice that the Microsoft button is appearing on the right side. Click on that, provide your Hotmail credentials and on successful login you will land on the below screen:

 

On clicking yes, the below screen will be shown,

 

Quickly click on register and see the magic. You will notice that you are now logged in with your Hotmail id as shown below,

 

Summary

Whatever we did can also be done through a guided process which we came across during our configuration process in the form of a hyperlink. Additionally, you can also follow this link.

Hope you enjoyed learning.