Oauth - Social Login implementation

Social Login with Oauth 2.0

Oauth 2.0 framework enable to get data from web servers with limited access to the 3rd party websites behalf of the 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
• Implicit grant type -  for client side scripts in web apps
• Client credentials grant type - server to server communications
• Resource owner password credentials grant type - for official apps like facebook mobile app etc....

in this example we use authorization code grant type

lets starts the coding now.

Step 1 - create facebook app

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

fill the relevant information

go through the security check

go tot the settings -> basic and copy the appID and the App secrete

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.

now you need to add the web site URLto the facebook app page.  this define the URL that client app will run. we run this app on localhost so then you need to put it on the field.

 Now we can go for the developing our application. in this application we are not going to use any predefined frameworks such as Facebook_sdk . we are going to do this on manual way.

so lets begin,

   first of all you need to create this project name as "Social-Login" on your local host. this app will only work with this configurations. so follow this exactly.

you need to create a file name config.php to implement all the functions that we need for the coding.

in config.php -> implement function named "AUTH_URL" to send request to the trusted identity provider to get the request.

 above function accept client id of the facebook app and redirected url (should encoded with url encoder).  also in this function you need to define what is the scope of resources that you request.

no create a file named "index.php" and write bellow code

as above, you need to call the "AUTH_URL" function where that need social login function.in the code,

1.  link the configure file that we coded to use the functions
2. app id of your app that creates on facebook
3. redirection url of the app ( if you follow exact steps this vale should work. if you change directory structure, you need to put url of redirect.php )

now we need to handle redirection part of the process for that we need to develop function for capture the authentication code and exchange it for access token.

ok now we are going to call the function to get access token, for that
create -> redirect.php  and code as follow,

in the code,

1. link the configure file that we coded to use the functions
2. for display until exchange token for authentication code
3. app id of the Facebook app
4. redirection url (where the redirect.php)
5. authentication code that we received
6. base64 encoded app id + app secrete of your Facebook application 
7. in this line it stores the token in json token.
8. in this code block we store our access token in a cookie for easy access when it needed. and it will redirect the page to a new page named "server.php"

now we are going to display the data that we able to get with access token received.

for that we need more functions in config.php, lets go to it and code those function.

now, we need to get user id and user basics from the access token so we implement above two functions.

the we can display user resources on server.php page.

 lest create->server.php and code as follow

same as other pages we need to link the configure file that we coded to use the functions.
then we need more functions to get those data

in the code,

1. functions is for get the user id to session variable
2. functions to get the user basics for the user id 

now we can use these 2 functions to display data as followed.

 

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 ;)