语言

Menu
Sites
Language
Oauth2.0 Authentication for SNS (Social Network Site) api access like google api , dropbox api , facebook api

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

响应

4 回复
Alex Dem

Hi,
It is great if you able to obtain oauth_token, oauth_verifier (which comes to redirect_uri this way) and able to get access_token after!
On which Tizen sdk (2.2.1, 2.3) and devices do you check your web app/code?
Thank you.
Alexey.

Alex Dem

Per my opinion:
Access to window.authWin.location.href should be disable due security.
Alexey.

 

Alex Dem

I have checked with Tizen devices,
On 2.2.1 in this case window.authWin.location.href is undefined. On 2.3 there is the same.

I tried to check this way:
 

    window.authWin = window.open("http://www.google.com","blank","",true);
    setInterval(function() {
        console.log(window.authWin);
        console.log(window.authWin.location.href);        
    }, 5000);

On 2.2.1 I was able to get javascript logs:
js/main.js (16) :undefined
js/main.js (17) :TypeError: 'undefined' is not an object
Alexey.

Alex Dem

Also,
one more note: after I have added into config.xml
    <access origin="*" subdomains="true"></access>
window.open is opened URL in the same window but local  Web app page was left

    window.authWin = window.open("http://www.google.com","Google","location=yes");
    setInterval(function() {
        console.log(window.authWin);
        console.log(window.authWin.location.href);    
    }, 5000);


location.href is defined but really we also leave our web app.
But maybe I have missed something (.
Alexey.