Post
Ask Question

Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2

In the previous article, we discussed the implementation of an identity-based authentication model in ASP.NET Core application. But sometimes, clients or users do not want to create new login credentials for their applications. They simply want to use some existing user credentials related to other accounts like Gmail, Facebook, Microsoft, Twitter, etc. So, at that time, we need to authenticate those users with their existing user credentials and allow access to our own application. In this article, we will discuss how to implement an external authentication provider in an ASP.NET Core application. We will discuss the step by step implementation process of the below external providers using ASP.NET Core Application.
  1. Gmail
  2. Facebook
  3. Twitter
  4. Microsoft
In this article, we will discuss how to implement external provider authentication using Gmail and Facebook.

Prerequisites 

Before starting the implementation of external authentication providers, we first need to create an ASP.NET Core application with the Individual User Account Authentications. I have already discussed how to create a web application in ASP.NET Core in a step by step manner in the previous article. So, before starting this article, first read that article at 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 GMAIL Login Authentication

 
Step 1
 
If we want to implement Gmail Login authentication in our web application, then we first need to create a client-id into the Google Sign-In API Website. For that, let us go to the following Google website.
 
https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2 
 
Step 2
 
Now, click on the "Configure Project" button.
 
Step 3
 
Now, select Create --> New Project options.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 4
 
Provide a meaningful Project Name and click on the "Next" button.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 5
 
Provide the product name in the "Configure OAuth Client" window.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 6
 
Now, select Web Server from the List.
 
Step 7
 
Now, in the Authorized Redirect URL, provide the application URL. The redirect URL will be like this - https://localhost:2213/signin-google.
You just need to change the hosted URL in the above example.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 8
 
Click on the "Create" button.
 
Step 9
 
Now, the configuration is complete and we need to copy the Client Id and Client Secret from the popup window.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 10
 
Click the "Done" button.
 
Step 11
 
Now, open the appsettings.json file and create the two keys for client id and client secret id,
  1. {  
  2.   "ConnectionStrings": {  
  3.     "DefaultConnection": "Server=Deb;Database=DemoAuthentication;Trusted_Connection=True;MultipleActiveResultSets=true;user id=sa;password=xxxxxxxxxxxxxx;"  
  4.   },  
  5.   "Logging": {  
  6.     "LogLevel": {  
  7.       "Default": "Warning"  
  8.     }  
  9.   },  
  10.   "AllowedHosts": "*",  
  11.   "Authentication:Google:ClientId": "xxxxxxxxxxxxxx",  
  12.   "Authentication:Google:ClientSecret": "xxxxxxxxxxxxxx",  
  13. }  
Step 12
 
Now open the following URL https://console.developers.google.com/projectselector/apis/library and login with your Google account credentials.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 13
 
Now select the Project name mentioned in the above and then search Google+ API options.
 
Step 14
 
Now click on Google API options
 
Step 15
 
Now click on Enabled Button.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 16
 
Now return back to our visual studio and open the startup.cs file.
 
Step 17
 
Now the add the below code 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.              
  26.         }  
Step 18
 
Now run the application and click on Sign In Option.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 19
 
Now click on Google Button. 
 
Step 20
 
It will complete your registration with Gmail authentication.
 

IMPLEMENT FACEBOOK LOGIN AUTHENTICATION

 
If we want to implement Facebook Login authentication in your web application, then we first need to follow the below steps to implement Facebook authentication in your application.
 
Step 1
 
First, open the Facebook developer app URL https://developers.facebook.com/apps/. If you have already a Facebook account then log in with that credential or Sing Up in Facebook as a new user. 
 
Step 2
 
After a successful login, it will redirect to your home page of the Facebook developer app.
 
Step 3
 
Now click on the Create a New App Button.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 4
 
Now fill the New App create a form with necessary information like App Display Name, contact email id, etc. and then click on Create App Id.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 5
 
After successful creation of the App Id, it will redirect you to the Scenario UI.
 
Step 6
 
In the scenario list, select Integrate Facebook Login and click on the Confirm button.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 7
 
Now click on the Facebook Login option under Product category in the left panel of the page.
 
Step 8
 
Now click on the Settings options.
 
Step 9
 
It will open the Client OAuth Setting page
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 10
 
Now in the Valid OAuth Redirect URLs box provide the application host URL append with /signin-facebook (as for example:- https://localhost:4356/signin-facebook).
 
Step 11
 
Now click on the Save changes button.
 
Step 12
 
Now click on the Basic option under Setting in the Left Panel.
 
Step 13
 
Now copy the App Id and App Secret which is required to use the visual studio to configure the Facebook Authentication.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 14
 
Now add the App Id and App Secret key in the appsettings.json file.
  1. {  
  2.   "ConnectionStrings": {  
  3.     "DefaultConnection": "Server=Deb;Database=DemoAuthentication;Trusted_Connection=True;MultipleActiveResultSets=true;user id=sa;password=xxxxxxxxxxxxxx;"  
  4.   },  
  5.   "Logging": {  
  6.     "LogLevel": {  
  7.       "Default": "Warning"  
  8.     }  
  9.   },  
  10.   "AllowedHosts": "*",  
  11.   "Authentication:Google:ClientId": "xxxxxxxxxxxxxx",  
  12.   "Authentication:Google:ClientSecret": "xxxxxxxxxxxxxx",  
  13.   "Authentication:Facebook:AppId": "xxxxxxxxxxxxxx",  
  14.   "Authentication:Facebook:AppSecret": "xxxxxxxxxxxxxx"  
  15. }  
Step 15
 
In the Startup.cs file add the Facebook 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.         }  
Step 16
 
Now run the application and then click on the Login button.
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
 
Step 17
 
On clicking on the Facebook button, it will redirect to the Facebook Login Authentication URL where we need to provide Facebook credentials and then click on the Login Button. 
 
Implement Gmail And Facebook Based Authentication In ASP.NET Core 2.2
Step 18
 
After authenticating your credentials, Facebook will return to your applications. 
 

Conclusion


In this article, we discussed the implementation steps related to external authentication using Gmail and Facebook. I hope this will help the readers to understand how to implement Gmail or Facebook 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. In the next article, we will discuss how to implement external authentication using a Microsoft Account and Twitter Account in ASP.NET Core.


Similar Articles