In this blog we will see how to build an Asp.net MVC5 Web application that enables user to log in using OAuth 2.0 credentials from an external authentication provider.
Few names of external authentication provider such as Facebook, Twitter, LinkedIn, Microsoft, or Google. Facebook and Google credentials used with your web sites have a significant advantage because millions of users already have accounts with these external providers. These users can easily signup with your site if they do not have to create and remember a new set of credentials.
Let’s understand what is OAuth 2.0?
OAuth 2 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub and Google
Google APIs use the OAuth 2.0 protocol for authentication and authorization.
Steps to implement web application with OAuth2
Step 1: Click File menu choose new project.
Click new project then choose visual c# on left panel then choose Web template and then choose ASP.NET Web Application. Name your project "Authentication" and then click OK.
In the New ASP.NET Project dialog, click MVC. If the Authentication is not Individual User Accounts, click the Change Authentication button and select Individual User Accounts. If you checked Host in the cloud, then the app will be very easy to host in Azure.
If you choose Host in the cloud then enter mandatory details require to host on the cloud.
Step 2: Update Microsoft.Owin NuGet package.
Step 3: Configure up SSL in the project
SSL use to connect to authentication providers like Google and Facebook, for that first you need to Configure IIS express.
To set SSL go to project properties and change SSL enable to True.
Copy the SSL URL
In solution explorer right click the project select properties
Select web tab and paste SSL URL into project URL box save the file you need this URL to configure the Facebook and Google authentication apps.
Step 4: In Home controller add RequireHttps attribute, i.e all request must use HTTPS.
[RequireHttps]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
If you have install the certificate in past skip this process and jump to create google application for OAuth 2 and connect application to project.
Else follow below steps to trust the self-signed certificate that IIS Express has generated.
Step 5: Read above warning message and click yes if you want to install the certificate representing local- host.
Step 6: To create Google app for OAuth 2 and connecting the app to the project
Go to Google Developers Console. (https://console.developers.google.com/)
Select Credentials in the left tab, and then select Create.
In the left tab, click Credentials.
Steps 7: Click create credentials, click OAuth client ID
In application type choose web application then enter Authorized JavaScript origins to the SSL URL.
Step 8: Field Authorized redirect URI configure to “SSL URL/signin-google”
Configure OAuth Consent screen menu, then configure email address and product name once done save details.
Click library search Google+ API, click on it then enable it.
Get Client ID and ClientSecret from Credentials tab.
Step 9: copy paste this id’s in UseGoogleAuthentication methos found in App_Start folder in Startup.Auth.cs file.
Step 10: Run the application
Once you click on Google it will redirect you to Google site
With your Google credentials you able to login
This way we have built asp.net MVC5 web application sign-on with OAuth 2 credentials.
Please leave comment/feedback on how you liked this blog and any improvements I should make.
