OAuth 2.0 — Social Login implementation

OAuth — Social Login implementation

Oauth 2.0 provides data from web servers with limited access to third-party sites on behalf of resource owners.
There are several grant types to get data from resource servers.
  • Authorization code grant type — for web apps that have back end servers
  • Resource owner password credentials grant type — for official apps like facebook mobile app, etc
  • Implicit grant type — for client-side scripts in web apps
  • Client credentials grant type — server to server communications
in this example, we use the authorization code grant type.





Let's begin for coding.

Step 1 — create a new Facebook app

go to the https://developers.facebook.com/ and create an app as follow.



My Apps->Create App
then fill the Display name and Email.



Now you create a new app with new app id. (app id in 1)
Next go to Facebook login setup - ( 2 )



you will navigate to below page
In our project we use web platform, because of that select www (web) option



now you need to define what is the app domain . we are not going to host this app any ware so our app domain is localhost fill it.
set site URL for like below and save then continue.



Then you will navigate to a quick start page with some codes.



Now go to xampp->htdocs in your pc.
Then create a folder with name you use in site url. like this,


create a file with index.html
now lets code.
first, copy the code in section 2 and paste inside the script tag in index.html

This code will give the basic version of the Facebook SDK for JavaScript where the options are set to their most common defaults.



like this ,



then set your app id and latest version.version in the end of section 2 description.
then for the statusChangeCallback function write below code,
Including the Login Button into your page is easy. Visit the documentation for the login button and set the button up the way you want. Then click Get Code and it will show you the code you need to display the button on your page.
for FB button Copy the code 1 in section 4 and paste inside the body tag in index.html.
and copy code 2 and paste inside the script tag.


inside body tag

inside script tag
Now you almost done... go to your web browser and type URL you use in above site URL.
before you click the fb button you are not authenticated. you can see it from your console.



after click fb log in button u can see you are authenticated.
after click fb log in button you have to set permission





after continue you can access data from graph api.
below code snippet show how to get name,email,profile picture and the location.
after getting data from api you can handle in side your project.
now the thing is over. we successfully simulate the social login function that almost all modern web applications used. lest see what the output look like ;)


Comments

Post a Comment