Skip to content
sampath1619 edited this page Feb 9, 2017 · 3 revisions

Class Id: 26

Student Id: 16231927

Student Name: Sampath Gattu

Objective:

The main aim of this tutorial is to allow user to access application with Social logins (Facebook,Google,Twitter etc.) by using OAuth 2.0 Service. Also to develop a Mashup application using atleast two Web Services.

Application Description:

  • Initially this application contains a home page where the user has to login.

Index

  • On clicking Login button the user is redirected to Login page.
  • The User can Login by giving UserName and Password from where he will be redirected to Home Page.

Login

  • If user doesn't provide any information, validation is done and popup is shown to user.

Js error

Oauth Social Logins

  • Apart from the above ways to validate user, he can also redirect to application using Social Logins such as Google and Facebook.

  • To do so initially developer account is created for both facebook and google plus where a client_id and secret_key will be generated.

  • This id's are appended in Google API and Facebook API URL which used in implementing social login.

  • Also the redirect URL also has to be specified, which is the destination page that is redirected once the user is logged in successfully.

  • In the Login Page on clicking Google Plus button, the google login page will pop-up to the user where he has to enter email id and password for successful login and it asks to allow for basic information from google plus.

google+

  • On clicking Facebook button in login page, the Facebook login page will pop-up to the user where he has to enter email id and password for successful login.

Facebook

Mashup Application:

  • Once the user is logged in successfully he will be redirected to home page.

Home

  • The two API's that are used here to perform Mashup are Face++ and Flickr Image Search API.
  • First, the user text input is passed to Flickr Image Search API and image is fetched. For example, if user gives "Donald Trump" as input, it fetches the image from the text.
  • Next, the data is sent to Face++ API, where the image is taken and age and gender is calculated.

Mashup

Clone this wiki locally