Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  ASP.NET

Using OpenID connect in asp.net for login via Facebook

  edwardbrooks      2016-11-07 05:09:58      2,550    0

This post is shared by asp.net development India experts to explain OpenID support and OAuth providers support in asp.net. Through this article, you will learn the best way to use OpenId in asp.net development for login through different accounts including Facebook. Read this article and discover how experts of asp.net do it.

Web pages of Asp.Net have support for OpenID and OAuth providers. These providers allow users to log in to the web application with their credentials from Microsoft, Google, Twitter, Facebook etc.  As an example, in order to log in with Facebook credentials, users just needs to click on the Facebook icon. It will open the login page of Facebook. Facebook login can be associated with the account in the site.  Also now it is possible to link multiple logins with one account on the web application. 

Below image shows the login page template where user has the option to choose from Google, Microsoft, and Facebook or twitter account to log into the site.

For sites using OAuth provider, application is created on the external site. It provides application keys that are needed to invoke login functionality for these sites.

For sites using OpenID provider, there is no need to create an application. For such sites,  developers should have an account for login and creating developer applications. 

ENABLE GOOGLE LOGIN

To enable the feature of Google login, perform the following steps:

1. Create an Asp.Net web site that is based on WebMatrix starter template.

2. Go to _AppStart.cshtml  file and uncomment the below code:

OAuthWebSecurity.RegisterGoogleClient();

TEST GOOGLE LOGIN

To test the Google login, perform the following steps:

1.  Execute default.cshtml page and select the Log In icon.

2.  Go to 'Use another service to log in' area and click on Yahoo or Google button. Let us suppose that user will click on Google submit button.

3. User will be redirected to the login page of Google.

4. Enter the username and password for your Google account.

5. In case Google asks to allow localhost for using account information, click on OK. On doing so, it will use the Google token for authenticating user and will redirect to the below page on website. There is an associate button in this that will allow user to associate their Google account information with the site. 

6. Click on the associate button. The home page of the application will get opened up.

ENABLE FACEBOOK LOGINS

Perform the following steps in order to enable facebook logins:

1. Login your facebook account and open facebook developers site.

2. Select on 'Create New App'. Follow the instructions and prompts for naming and creating the new application.

3. Select the Website option from the section of 'Select how your app will integrate with Facebook '.

4. Enter your site URL in the Site URL field. It is not mandatory to fill the Domain field.  It can be used for providing domain authentication. 

5. Click on button of Save Changes.

6. Select on Apps tab and then look at the start page of application. 

7. Copy the values of AppSecret and AppID values of application in a temporary file. These values will be passed to the facebook providers in the website code.

8. Exit from the site of facebook developers.

Now change following two pages in the application to allow users to login with their Google or Facebook accounts. 

1.  Open/Create the Asp.Net page site using WebMatrix starter template. 

2.  Open _AppStart.cshtml file. Uncomment the following for OAuth Facebook provider. 

3.  Copy the value of AppID from the web application as appId parameter value.

4. Copy the value of AppSecret as the value of AppSecret parameter.

5. Close and save the file.  

TEST FACEBOOK LOGIN

1. Open the site and run its default.cshtml page. Select the Login button. 

2. Select the facebook icon on login page in the section of 'Use another service to login'.

3. User will be redirected to the facebook login page as shown below:

4. Now log in the facebook account.

The Facebook token will be used by the code to authenticate user and will thereafter return on a page that will allow user to associate his facebook id with the account settings of the site. 

5. Click on Associate button. You will be logged in the application and home page of application will get opened up.

ENABLE TWITTER LOGIN

To enable Twitter login, perform the following steps:

1. Open the developers page of Twitter.

2. Select the link of Create an App. Now log in the site.

3. Fill the description and name fields on Create Application form.

4. Enter the site's URL in the WebSite field.

5. Fill the Callback URL.

6. Accept all terms and click on Create Twitter Application.

7. Select your application on My Applications page.

8. Select on Create My Access button on details tab.

9. Copy values of Consumer Secret and Consumer Keys in a temporary file.

10. Exit from the site.

Now change following two pages in the application to allow users to login with their Twitter accounts. 

1.  Open/Create the Asp.Net page site using WebMatrix starter template. 

2.  Open _AppStart.cshtml file. Uncomment the following for OAuth Twitter provider. 

3.  Copy the value of Consumer Key from the web application as consumerKey parameter value.

4. Copy the value of ConsumerSecret as the value of consumerSecret parameter.

5. Close and save the file.  

TEST TWITTER LOGIN

1. Open the site and run its default.cshtml page. Select the Login button. 

2. Select the Twitter icon on login page in the section of 'Use another service to login'.

3. User will be redirected to the Twitter login page as shown below:

4. Now log in the Twitter account.

The Twitter token will be used by the code to authenticate user and will thereafter return on a page that will allow user to associate his facebook id with the account settings of the site. 

5. Click on Associate button. You will be logged in the application and home page of application will get opened up.

This post is intended by experts of asp.net development India to let people know about the use of OpenId in asp.net development for login via distinct accounts. You can follow the instructions shared in this post and use OpenId for login via Facebook, twitter, and other accounts. 

 

 

ASP.NET DEVELOPMENT INDIA

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Visual Studio feedback

By sonic0002