Post
Ask Question

Implement Microsoft And Twitter Based Authentication In ASP.NET Core 2.2

In the previous article, we discussed the implementation of external authentication by using Facebook and Gmail accounts in ASP.NET Core applications. Today, we will discuss the remaining part related to the external authentication in ASP.NET Core 2.2. Now, in this article, we will discuss the process to implement authentication using Microsoft email account and Twitter account.
 

Prerequisites

 
For implementing the authentication using Microsoft Email Account and Twitter Account, we will use the same project structure which we used in the previous article. If you have not checked the previous article yet, you can from the below link.
If you want, you can download the source code provided in the above article and then try external authentication provider-based implementation as mentioned in this article.
 

Implement Microsoft Email Login Authentication

 
Step 1

If we want to implement Microsoft Email Login authentication in our web application, then we first need to create a client-id into the Microsoft Developer Portal Web site. For that, first, we need to go to the following Microsoft developer portal website - https://apps.dev.microsoft.com/
 
Step 2

It will redirect us to the Microsoft Account Login Form for sign-in with the existing Microsoft account. 
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 3 
 
After a successful login, it will redirect us to the application portal's homepage.
 
Step 4

Now, click on the "Add an app" button.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 5 
 
In the "New Application Registration" window, provide the application name and click the "Create application" button.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 6 
 
After successful creation of the application, it will redirect to the Application Registration page.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 7 
 
Now, click on "Add Platform" button and select a Web option.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 8 
 
Now in the Redirect URLs box, provide the redirect URL appended with /signin-microsoft (as, for an example:- https://localhost:4356/signin-microsoft).
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2 
Step 9
 
Now, click on the "Save" button.
 
Step 10 
 
Now, click on "Generate New Password" button and store the generated new password.
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 11 
 
Also, store the Application Id mentioned above the generated New Password button.
 
Step 12

Click "Save".
 
Step 13

Now, open the appSettings.json file and store the Application Id and Password in that file.
  1. {  
  2.   "ConnectionStrings": {  
  3.     "DefaultConnection": "Server=.;Database=DemoAuthentication;Trusted_Connection=True;MultipleActiveResultSets=true;user id=sa;password=xxx;"  
  4.   },  
  5.   "Logging": {  
  6.     "LogLevel": {  
  7.       "Default": "Warning"  
  8.     }  
  9.   },  
  10.   "AllowedHosts": "*",  
  11.   "Authentication:Google:ClientId": "xxxxxxxxxxxxxxx.apps.googleusercontent.com",  
  12.   "Authentication:Google:ClientSecret": "xxxxxxxxxxxxxx",  
  13.   "Authentication:Facebook:AppId": "111111111111111111",  
  14.   "Authentication:Facebook:AppSecret": "2222222222222",  
  15.   "Authentication:Microsoft:AppId": "sswswsswsssssss",  
  16.   "Authentication:Microsoft:AppSecret": "yyyyyyyyyyyyyyyyyyyy"  
  17. }    
Step 14

Now, open the NuGet Package Manager Console and install the package called Microsoft.AspNetCore.Authentication.MicrosoftAccount.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 15 
 
In the Startup.cs file, add the Microsoft authentication in the ConfigureService() method. 
  1. public void ConfigureServices(IServiceCollection services)  
  2.         {  
  3.             services.Configure<CookiePolicyOptions>(options =>  
  4.             {  
  5.                 // This lambda determines whether user consent for non-essential cookies is needed for a given request.  
  6.                 options.CheckConsentNeeded = context => true;  
  7.                 options.MinimumSameSitePolicy = SameSiteMode.None;  
  8.             });  
  9.   
  10.             services.AddDbContext<ApplicationDbContext>(options =>  
  11.                 options.UseSqlServer(  
  12.                     Configuration.GetConnectionString("DefaultConnection")));  
  13.             services.AddDefaultIdentity<IdentityUser>()  
  14.                 .AddDefaultUI(UIFramework.Bootstrap4)  
  15.                 .AddEntityFrameworkStores<ApplicationDbContext>();  
  16.   
  17.             services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);  
  18.   
  19.             services.AddAuthentication().AddGoogle(googleOptions =>  
  20.             {  
  21.                 googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];  
  22.                 googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];  
  23.             });  
  24.   
  25.             services.AddAuthentication().AddFacebook(facebookOptions =>  
  26.             {  
  27.                 facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];  
  28.                 facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];  
  29.             });  
  30.               
  31.             services.AddAuthentication().AddMicrosoftAccount(microsoftOptions =>  
  32.             {  
  33.                 microsoftOptions.ClientId = Configuration["Authentication:Microsoft:AppId"];  
  34.                 microsoftOptions.ClientSecret = Configuration["Authentication:Microsoft:AppSecret"];  
  35.             });  
  36.         }  
Step 16

Now, run the application and then click on the "Login" button.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
Step 17 
 
Now, click on "Microsoft" button.
 
Step 18

It will complete your registration with Microsoft Email Account based authentication.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2

Implement Twitter Login Authentication

 
Step 1
 
If we want to implement Twitter Login authentication in our web application, then we first need to create a client-id into the Twitter Application Management Web site. For that, first, we need to go to the following Twitter Application Management website - https://apps.twitter.com/
 
Step 2

If you don’t have any Twitter account, then first sign-up for the account. Or if have an existing account, then just simply sign-in that account. After that, it will redirect to the Twitter Application Management Page.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 3

Now, click on "Create an app" button.
 
Step 4

On the App Details page, provide the following details.
  • Application Name
  • Application Description
  • Website URL
Step 5

Click on "Enable Sign In with Twitter" checkbox.
 
Step 6

Now, in the Callback URLs box, provide the redirect URL appended with /signin-twitter (as, for an example:- https://localhost:4356/signin-twitter).
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 7

After filling up the form, click on the "Create" button.
 
Step 8

Now, our app has been created.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 9

Now, click on the "Key and tokens" tab and store the Consume API Key and API Secret Key.
  
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 10

Now, return back to the Microsoft Visual Studio and open the appSettings.json file.
  1. {  
  2.   "ConnectionStrings": {  
  3.     "DefaultConnection": "Server=.;Database=DemoAuthentication;Trusted_Connection=True;MultipleActiveResultSets=true;user id=sa;password=xxx;"  
  4.   },  
  5.   "Logging": {  
  6.     "LogLevel": {  
  7.       "Default": "Warning"  
  8.     }  
  9.   },  
  10.   "AllowedHosts": "*",  
  11.   "Authentication:Google:ClientId": "xxxxxxxxxxxxxxx.apps.googleusercontent.com",  
  12.   "Authentication:Google:ClientSecret": "xxxxxxxxxxxxxx",  
  13.   "Authentication:Facebook:AppId": "111111111111111111",  
  14.   "Authentication:Facebook:AppSecret": "2222222222222",  
  15.   "Authentication:Microsoft:AppId": "sswswsswsssssss",  
  16.   "Authentication:Microsoft:AppSecret": "yyyyyyyyyyyyyyyyyyyy",  
  17.   "Authentication:Twitter:AppId": "zzzzzzzzzzzzzzzzzzzzzzz",  
  18.   "Authentication:Twitter:AppSecret": "xxxxxxxxxxxxxxxxxx"  
  19. }   
Step 11

In this file, store the Twitter Consumer API Key and API Secret Key as a key.
 
Step 12

Open the NuGet Package Manager and install the Microsoft.AspNetCore.Authentication.Twitter package from there.
 
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
 
Step 13

In the Startup.cs file, add the Twitter authentication in the ConfigureService() method.
  1. public void ConfigureServices(IServiceCollection services)  
  2.         {  
  3.             services.Configure<CookiePolicyOptions>(options =>  
  4.             {  
  5.                 // This lambda determines whether user consent for non-essential cookies is needed for a given request.  
  6.                 options.CheckConsentNeeded = context => true;  
  7.                 options.MinimumSameSitePolicy = SameSiteMode.None;  
  8.             });  
  9.   
  10.             services.AddDbContext<ApplicationDbContext>(options =>  
  11.                 options.UseSqlServer(  
  12.                     Configuration.GetConnectionString("DefaultConnection")));  
  13.             services.AddDefaultIdentity<IdentityUser>()  
  14.                 .AddDefaultUI(UIFramework.Bootstrap4)  
  15.                 .AddEntityFrameworkStores<ApplicationDbContext>();  
  16.   
  17.             services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);  
  18.   
  19.             services.AddAuthentication().AddGoogle(googleOptions =>  
  20.             {  
  21.                 googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];  
  22.                 googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];  
  23.             });  
  24.   
  25.             services.AddAuthentication().AddFacebook(facebookOptions =>  
  26.             {  
  27.                 facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];  
  28.                 facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];  
  29.             });  
  30.               
  31.             services.AddAuthentication().AddMicrosoftAccount(microsoftOptions =>  
  32.             {  
  33.                 microsoftOptions.ClientId = Configuration["Authentication:Microsoft:AppId"];  
  34.                 microsoftOptions.ClientSecret = Configuration["Authentication:Microsoft:AppSecret"];  
  35.             });  
  36.   
  37.             services.AddAuthentication().AddTwitter(twitterOptions =>  
  38.             {  
  39.                 twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:AppId"];  
  40.                 twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:AppSecret"];  
  41.             });  
  42.         }   
Step 14

Now, run the application and then click on the "Login" button.
Implement Microsoft and Twitter Based Authentication in Asp.Net Core 2.2
Step 15
 
Just click on the "Twitter" button.
 
Step 16

It will complete your registration with Twitter Account-based authentication.
 

Conclusion

 
In this article, we discussed the implementation steps related to external authentication using Microsoft and Twitter accounts. I hope this will help the readers to understand how to implement Microsoft or Twitter authentication in any application. If anybody has any queries or doubts related to this article, please let me know. Feedback is most welcome related to this article.


Similar Articles