Using External Authentication in ASP.Net Web Pages 2

Introduction

There are various types of External Authentication services like Google, Facebook, Twitter and Microsoft available to provide membership in ASP.NET Web Pages 2. These OAuth and OpenID providers are also available in the ASP.NET Web Application and I've already explained it in External Authentication in MVC.

In that context, I am describing here to authenticate the website by using these external providers in the WebMatrix using ASP.NET Web Pages 2. You'll learn to enable the OpenID and OAuth provider in the WebMatrix here. So, let's proceed with the following sections:

Create Starter Site in WebMatrix
Enable Google Provider
Enable Facebook Provider

Create Starter Site in WebMatrix

At first we need to have a Starter Site in the WebMatrix to authorize and work with the external providers. Use the following procedure to do that.

Step 1: Open the Microsoft WebMatrix and click on "New" to select a Template Gallery.

Creating New Template in WebMatrix

Step 2: Select the "Starter Site" and enter the site name.

Creating StarterSite in WebMatrix

It automatically creates the starter site and installs the DotNetAuth services with its default settings and you can see the newly added files and folders in your WebMatrix.

Installing External Authentication in WebMatrix

Step 3: Now launch the Default.cshtml page in the browser.

Opening Default Page in WebMatrix

The home page of your website will open and it'll look like this:

Home Page of StarterSite in WebMatrix

Enable Google Provider

There are no external login services provided in the website until now. You can login with your local account. Have a look at the following screenshot:

WebSite without External Login Provider

You can enable the OAuth and OpenID external providers in the application with some editing in the code. It is recommended by Microsoft to use the Starter Site Template to get started with the external providers. It includes a full membership infrastructure, complete with a login page and a membership database.

So, let's work with Google which is the OpenID provider. You do not have to worry about creating an app on Google and Yahoo. Use the following procedure.

Step 1: Open the _AppStart.cshtml page and enable the Google provider exist at the end:

OAuthWebSecurity.RegisterGoogleClient();

Step 2: Run the Default.cshtml page in the browser and click on "Login".

Step 3: Now in the login page click on the Google as shown below:

SignIn With Google in WebMatrix

Step 4: It redirects you to the Google login page where you enter the credentials:

Google Credentials in WebMatrix

Step 5: Now Google asks to authenticate the Localhost for the website, click on "Accept".

Localhost Authorization in WebMatrix

Step 6: Now the Google token authenticates the user and with the following registration page you can associate with the Google service.

Registering Google in WebMatrix

Step 7: Enter the name or email and click on register with which you are logged in with the Google account.

Enable Facebook Provider

In this section we'll authenticate the website with the Facebook service provider. So, use the following procedure to do that.

Step 1: Create the new Facebook app on the Facebook developer site.

Step 2: Copy your Website URL like http://localhost:12345.

Step 3: Now paste this URL in the Site URL of your Facebook app and click on the "Save Changes".

Note: For the complete procedure of creating an app on Facebook, you can refer to Working with Facebook App.

Step 4: Now copy your App ID and App Secret for the application that we'll use in a minute.

Step 5: Exit from the application.

The app creation part is now finished and now we can move to the next section.

Step 6: Open the _AppStart.cshtml page and enable the Facebook provider that is at the end and paste the App ID and App Secret in it as shown below:

Step 7: Now save and close the file and run the Default.cshtml page in the browser and click on "Login".

Step 8: Now in the login page click on the Facebook as shown below:

Step 9: It redirects you to the Faebook login page where you enter the credentials. You'll be prompted to authenticate the app to the confirmation as shown below.

Fb App Authorization for Localhost

Step 10: Now you can associate the Facebook with the site as shown below.

After the registeration you can see the user name in the Home page.

That's it.

Summary

This article has described the external authentication services for websites in the ASP.NET Web Pages 2 using Microsoft WebMatrix. Thanks for reading.