Here I demonstrate How to Success Oauth2.0 Authentication for SNS (Social Network Site) api access like google api , dropbox api , facebook api in Tizen .
//developers.google.com/accounts/docs/OAuth2InstalledApp.. Here Google Server == Any Server
Structure As Follows --
Fllowing the Structure , First We have to Make a request for authorization Code .Which means to user logic process for paricular Sites and get authorization code .To make Authorization Request Parameter as follows .
endpoint : " Authorizaton URL" example : accounts.google.com/o/oauth2/auth , dropbox.com/1/oauth2/authorize
Client id : "The client ID you obtain from the Developers Console." example : zhdmh11ciuza4z9 (dropbox)
Response Type : "Code" , which means return value will be code ="abcdefgz"
Scope : (Optional) Needed for google api access not for others example : //googleapis.com/auth/drive
redirect_uri : "After login process where code will be sent " example: //dropbox.com/1/oauth2/redirect_receiver (dropbox)
Here is the code example
authorize: function() { var authUri = endpoint + '?' + 'scope=' + encodeURIComponent(scope) + '&' + 'redirect_uri=' + encodeURIComponent(redirect_uri) + '&' + 'response_type=' + encodeURIComponent(response_type) + '&' + 'client_id=' + encodeURIComponent(client_id) // @TODO - check if we really need this param window.authCount=0; //open logic process window.authWin= window.open(authUri,"blank","",true); // check for authorization complete this.watchOAuth(); // Now open new brows }
See , In the last line i add this.watchOauth() for url monitoring . Beacuse it will open in browser and my app has to monitor the Url change information to get authorization code . Here is the example of Url monitor
watchOAuth: function () { window.int = setInterval(function() { window.authCount = window.authCount + 1; console.log( window.authWin); if (window.authWin && window.authWin.location) { var currentURL = window.authWin.location.href; console.log(currentURL); var inCallback = currentURL.indexOf("code="); if (inCallback >= 0) { window.clearInterval(window.int); window.authWin.close(); var parts = currentURL.split("code="); console.log(parts[1]); alert('Authenticated' + parts[1]); // End of 1st Part Authorization complete // for getting token 2nd step . this.getoken(parts[1]); // process here } } }, 500); }
From the code we get authorization code and in last line we called for gettoken () function to start 2nd process . Which is Token Request .
Token Request : it will be a Post method . ,
Parameters Needed ---
endtoken: "Requset Token url" example: "accounts.google.com/o/oauth2/token" , "api.dropbox.com/1/oauth2/token"
client_id : As discuess before , id from developer console .
client_secret : secrect key from developer console example:"jUf3KQUdtp5sd37hJuzpTH8Z" (google developer console)
code : "Authorization code taken from 1st step "
redirect_uri : Discussed earlier
grant_type : "authorization_code"
Now the example code :
getoken: function(code) { $.ajax({ type: "POST", url: endtoken, data: { client_id : client_id, client_secret: client_secret, code : code, redirect_uri : redirect_uri, grant_type : grantTypes } }) .done(function(data) { console.log("Refresh Token Received / Found? >> " + JSON.stringify(data)); /* upon sucess, do a callback with the data received */ console.log(data.access_token); // End of Second step // now you can store access token for later use . if it expried u can request for request token // Now Api access /* now invoke the callback */ // callback(data); }) .fail(function(xhr, textStatus) { console.log("Token request error ?? >>" + xhr.responseText); callback({ error: true, message: xhr.responseText }); }) .always(function() { //console.log("Token request complete"); }); }
When you get token . Server authentication is finished . and call whatever api you want to call . I put a example below to get 1st file name of stored google drive api . example --
var url1="https://www.googleapis.com/drive/v2/files?access_token="+data.access_token; /* set the error of data to false, as it was successful */ $.get(url1,function(data,status){ console.log("dATA Received / Found? >> " + JSON.stringify(data)); console.log("FILENAME: " + data.items[0].title + "\nStatus: " + status); // });
Volla . File name will be there . See , I heard Tizen 3.0 will be great . May b they will integrate some api for access this sites for support us developers. My Sample is for all the device which support javascript and it is simple . So Happy Coding to all of you out there :) . and please put http in all links :)