ASP.NET MVC 4 web application project template includes support
for authentication using Open Authentication Protocol (OAuth). This
functionality is based on DotNetOpenAuth open source library (see www.dotnetopenauth.net). The project template includes all necessary pieces to enable
user with Twitter, Facebook, Google, or Microsoft accounts to use his accounts to
authenticate.
Providing ability to authenticate
users using these established services are great for web applications because:
• Users do not need to
authenticate themselves (separately) in web application.
• Users therefore do not need
to remember a separate set of user name and password details in order to use
the web application which means they are more likely to use it.
• We do not have to worry
about storing and securing the credentials for all these users in web application.
The right section of the page is an area where we can host the available external sources for
authentication. It describes the steps we have to follow us to configure
external authentication sources in the web application.
To enable our application to support authentication with external
sources, we first need to tell application that which sources we will be using.
We do this in the App_Start/AuthConfig.cs file. The initial content of the file (generated
by Visual Studio) is provided in Figure 1.
Figure 1. Content of the App_Start/AuthConfig.cs
File
To
enable an external source, we just need to uncomment the source in the AuthConfig.cs file
and add the appropriate credentials. We are going to use the four external
sources. For Google accounts, we do not need any configuration setting. We
simply need to uncomment the last line in the file. For Microsoft, Facebook and
Twitter, we need to obtain identification keys.
Getting Keys from Facebook
and Twitter for OAuth
Following information for getting keys from Facebook and Twitter
is based on the Microsoft Development Network (MSDN) article “OAuth/OpenID and
support for Web Forms, MVC and Web Pages are available at http://bit.ly/MVC-OAuth-Config.
Steps to Get Keys
for Facebook
Follow below steps to get keys for Facebook:
1. Go to the Facebook
Developers site (http://developers.facebook.com/apps).
2. If we have a Facebook
account then log in with the credentials (if not already logged in). If we do
not have an account then we need to create an account.
3. Click the “Create New App”
button in the top right corner as shown in Figure 2 and then follow the prompts
to name and create the new application.
Figure 2. Creating New
App button in Facebook developer site
4. In the section “Select how
your app will integrate with Facebook,” choose “Website with Facebook Login”
section as shown in figure 3.
Figure 3. Website with Facebook Login option
5.
Fill the Site URL field with the URL of
our site (for example, http://www.xyz.com).
Domain
field is optional, we can use this to provide authentication for the entire
domain
(such as xyz.com).
6.
Click “Save Changes” button.
7.
Click Apps tab again and then view the
start page of our application.
8.
Copy the App ID and App Secret values
for our application and paste them into a text file. We will pass these values
to Facebook provider from our website code.
9.
Exit the Facebook developer site.
Steps to Get Keys
for Twitter
Follow steps below to get keys for Twitter:
1. Go to the Twitter developer
site at https://dev.twitter.com/apps.
2. Sign in with username and
password. If don’t have a Twitter account then must create an account.
3. Click “Create a new
application” button as shown in Figure 4.
Figure 4. Creating new
application in Twitter
4. In Create Application form,
fill the Name and Description fields.
6.
In Callback URL field, enter URL for of
the page of web site that we want users to return after logging in Twitter. For
example, to send users to the home page of the
Starter
Site (which will recognize logged in status), enter the same URL which was
entered in the Website field.
7.
Accept the terms and click “Create your
Twitter application” button.
8.
On My Applications landing page, choose
created application.
9.
On details tab, scroll to bottom and
click “Create My Access Token” button.
10.
On Details tab, copy the Consumer Key
and Consumer Secret values for the application and paste them into a temporary
text file. We need to pass these values to Twitter provider from website code.
11.
Exit the Twitter developer site.
Steps to Get Keys of
Microsoft for OAuth
The following instructions are based on the MSDN article
“Configuring your ASP.NET application for Microsoft OAuth account:
1. Create new ASP.NET MVC/Web
Forms or Web Pages application.
• Build and run the web site.
2. Use a test domain.
• We need to use a domain
other than local sites since Microsoft do not redirect back to localhost.
• Some people have graciously
reserved localtest.me for local testing of domains so we do not have
to mess with host files.
• We can use abc.localtest.me as a test domain. (Make sure abc is unique.
• Pinging abc.localtest.me should revert to the local machine.
3. Edit firewall rules for
port 80 to receive external requests.
• Follow the guidelines at http://maximumpcguides.com/windows-7/open-a-port-inwindows-7s-firewall/
(these work for Windows 8
as well).
4. Configure Microsoft
Application Management portal:
a. Open the link https://manage.dev.live.com/AddApplication.aspx. Log in using
the Microsoft account. If we do not have a Microsoft account then we
must create one.
b. Type the application name and select the application’s
language.
c. Read terms of use and privacy statement and click “I accept.”
d. We should be now in the API Settings page of our application.
If we are not in the
Live Connect Developer Center:
• Click My Apps at top of the
page.
• Click in name of our
application.
• Click on Edit Settings.
• Click on API Settings.
e. In Redirect domain field, enter the domain name we previously
created
f. Click “Save” and changes should be saved.
5. Map test domain to our
application.
We need to add mapping for the domain name to be redirected to our
application created in step 1. Steps given for IIS Express first then for IIS
(7.0 and later).
For IIS Express:
a.
Open applicationHost.config in %Documents%\IISExpress\config.
b.
Locate binding for the web application in the file. It will be defined in <site> tag.
For
example:
<site
name="WebApplication5" id="6">
<application path="/"
applicationPool="Clr4IntegratedAppPool">
<virtualDirectory path="/"
physicalPath="pathtoapplication\WebApplication5" />
</application>
<bindings>
<binding protocol="http"
bindingInformation="*:46178:localhost" />
</bindings>
</site>
c.
Add new binding for port 80 and domain name to this web application under the <bindings>:
<binding
protocol="http" bindingInformation="*:80:Foo.localtest.me "
/>
d.
Restart IIS Express and relaunch web site. Test above setting by opening
abc.localtest.me
in browser. It should open the web
application we created.
For IIS (7.0 and later):
a.
Host our application in IIS.
b.
Open IIS Manager, locate and select the web application under the Sites list and
select “Bindings” from Actions menu on the right. Add a binding for the chosen host
name (e.g., abc.localtest.me).
6.
Run the site to see it in action.
a.
Make sure we are running Visual Studio as administrator which is required for it
to work.
b.
Launch the application either hosted in IIS Express or hosted in IIS.
c.
Browse test domain abc.localtest.me.
d.
Navigate to Login page and log in using the Microsoft account. Login should be successful.
Configuring Application to Use the Keys
Once
we have the keys of all the external sources then we need to add them to the AuthConfig.cs file,
as shown in Figure 5:
Figure 5. App_Start/AuthConfig.cs file with keys to connecting external
sources
Now build and run the application and we should see our login
screen similar as shown in Figure 6 below:
Figure 6. Login page after enabling and
configuring external sources
No comments:
Post a Comment