Tuesday 27 September 2016

Login with facebook

Here in This Article I am going to explain you how to implement Login with facebook in your website. first of all you need to create a new App in facebook developers. https://developers.facebook.com/apps/

1- Click On Add a New App button. a pop window will be open.
2- Select WWW (Website) Link.

3- Provide App Name and click on "Create New Facebook AppID" Button.

4- In the Opened pop window, Provide Display Name, Contact EmailId and Category.
     For Category Choose "Apps for Pages" option
Then Click on Create App ID button.



5-  Continue with Security Check window. Now, your app hes been created. you need to do some setting now.
6- Open the facebook apps home Page. https://developers.facebook.com/apps/
     You will see your App "socialLogin" in the list.


7- Click on your app. it'll redirect you on the new Page.


Now you have App ID and App Secret Key.

8- In the Settings menu on the left side, You can set other information's like Site Url, App logo and others.

9- Now, Go to Roles -> Test Users Option.
     Click On Add button to add a Test User.


A popup will be open. Just Click on Create Test Users button. 
A Test User will be created. see the below Image.


10- Now, Come to App Review Section.


Select the radio button to Yes. Now your App is Live to use.

11- Now, Come to Dashboard Basic Settings option. see the below.


Click On Quick Start button. it'll redirect you to the new page.
On the new Page Under Site Url Section you will see Next button. Click on the Next button. 
 A new section will be open. just Click On Login Option in that section. it'll open a new window again.

you don't need to follow the above red colored steps.


12- Copy the entire Html Code from Full Code Example Section. Create a new Html file named index.html in your any directory. Paste the Code in newly created file.

Note: for detailed knowledge please go through the Url https://developers.facebook.com/docs/facebook-login/web/

13- Open the html file and Add the AppId generated from your App.


14- You Can Change graph Api version based on your requirements. I've used 2.7.


15- Now Save your Html File. 

Now it's time to run the html. but before this you need to host your html on IIS server.

So, goto inetmgr and add a new Website. Provide Html file path and port that you have provided in facebook app and Host name as "localhost". Click on Ok button.



now browse the website from IIS.

Click On Log In button. facebook login window will be open. provide your user name and password., and click on Login button. 


Click on Continue button.

You will see your Username from facebook. now you're logged in with facebook.

Download html file here

Take more help from below video





1 comment:

  1. Hi There,


    Gasping at your brilliance! Thanks a tonne for sharing all that content. Can’t stop reading. Honestly!

    Am a newbie to UI development. I don't know angularjs but I want to learn Angular 4. So, can anyone suggest the best resources to learn Angular 4?
    Super likes !!! for this amazing post. I thinks everyone should bookmark this.


    Thank you,
    Ansy

    ReplyDelete

Topics

ADFS (1) ADO .Net (1) Ajax (1) Angular (43) Angular Js (15) ASP .Net (14) Authentication (4) Azure (3) Breeze.js (1) C# (47) CD (1) CI (2) CloudComputing (2) Coding (7) CQRS (1) CSS (2) Design_Pattern (6) DevOps (4) DI (3) Dotnet (8) DotnetCore (16) Entity Framework (2) ExpressJS (4) Html (4) IIS (1) Javascript (17) Jquery (8) Lamda (3) Linq (11) microservice (3) Mongodb (1) MVC (46) NodeJS (8) React (11) SDLC (1) Sql Server (32) SSIS (3) SSO (1) TypeScript (1) UI (1) UnitTest (1) WCF (14) Web Api (15) Web Service (1) XMl (1)

Dotnet Guru Archives