Create MVC 4 App With Google OAuth Provider

In this article, we will look into integration of the OAuth Google provider for authentication within MVC 4 applications. In MVC 4, we can authenticate a user with his Facebook, Google, Live or Twitter account and so on instead of registering with our website. Providing this feature within a website will have significant advantages, because users do not need to register and remember a new set of credentials. Let's create a sample Internet MVC 4 application and name it GoogleAuthSample. Go to: "App_Start\AuthConfig.cs" and uncomment the following line of code:

OAuthWebSecurity.RegisterGoogleClient();

We have integrated Google OAuth with the application. Run the application, there will a button added automatically in the Login page as shown below:



Clicking on the Google button will redirect to Google's login page to enter our credentials. After successful authentication, it will redirect to the following page, click on Accept:



It will redirect to a page where we can register the email address:



When we click on Register, it will store the user's details in Defaultconnection in the web.config:



Let's look at the database structure storing user's details in Server Explorer:



Once a user registers with his Google credentials, he can sign in with it into our website. Let's customize the Google button on the login page with the following code:
Go to "View\Account\ _ExternalLoginsListPartial.cshtml" and add the following code:



The Login page looks such as shown below:



We can customize the UI of External providers (Twitter, Facebook, Google and so on) by modifying following views under the Account folder:



I will end here with the previous explanation and explain OAuth providers in future articles.