Menu
Sites
Language
Facebook login from Tizen

I am developing a facebook social application for Tizen. I have read the article "Social Network Services on Tizen"(https://developer.tizen.org/documentation/social-network-services-tizen). Before running sample code provided with the article i replaced APIKey and APISecret with my application key and secrete in facebook.js. When i run the code i selected facebook option and then i entered my username and password. After clicking ok i am getting error "Invalid e-mail or password!". I am entering correct username and password. 

Could you please guide me to the correct method for getting access token from facebook on Tizen.

Thanks,

Vijay

Edited on 18 03, 2014
List

Responses

15 Replies
Tomasz Ścisło
Hello Vijay, Unfortunately the problem is with your APIKey and APISecret. It is clearly written in the article that currently the only way to authenticate in Facebook is to use Facebook REST API, that is deprecated. You probably register you Facebook application recently and: “You should know that the newly registered Facebook application doesn’t get access to the Facebook REST API by default, it should be requested.“ – this remark is taken from the article. As far as I know currently Facebook do not grant access the newly registered application access to REST API – so there is no way to do the authentication on Tizen. Unfortunately they do not use out-of-band authentication procedure that is available on Twitter for example. To understand this please refer the figure: “Simplified oAuth 1.0 authentication sequence for mobile web app. Standard oAuth 1.0 flow.” in the article. Sorry for bad news, Tomasz Ścisło
vijay saharan
Hi Tomasz, Thanks for your reply. So on Tizen for facebook we can not use oAuth1.0. On other mobile platforms i have used oAuth2.o using child browser where i can track the current browser URL. In Tizen i can launch browser using "tizen.application.launch". After launching the browser is it possible to get a notification whenever the URL of the browser changes. Regards, Vijay
Tomasz Ścisło
Hello Vijay, Facebook doesn’t provide oAuth 1.0 authorization flow, so there is no out-of-band procedure. This procedure is for example available for Twitter and you can find it described in the article under: “Out-of-band authentication for Twitter”. Only for the out-of-band procedure it make sense to launch browser process using “tizen.application.launch” API to obtain a PIN code. Unfortunately Facebook doesn’t allow this flow. Regards, Tomasz Ścisło
vijay saharan
Hello Tomasz, If we can track the current url of the browser then we can perform oAuth2.0 for facebook on mobile devices, thats how i m doing on android and ios. For facebook oAuth2.0 we need to provide a redirection url to facebook. After oAuth process is completed facebook redirects browser to the provided url and this url contains access_token and access_secret. Let me explain it to you... For android and ios there is a plugin called child browser. Also this child browser has a function called onUrlChanged, which is called whenever the url of child browser changes. So the steps are... 1. Say we provide redirection url "www.fboauthtest.com/successful.html" 2. Now we open "https://graph.facebook.com/oauth/authorize?" url with passing client_id,redirect_uri and scope in child browser 3. This will open facebook login page and user enters this email and password and then presses login. 4. Facebook asks user to give permission to our app. 5. After user gives permission to our app facebook redirects user to our provided url which in this case is "www.fboauthtest.com/successful.html" No whenever the url of child borwser changes the function onUrlChanged( currentUrl ) is called. Every time when this function is called we check if the start if url is "www.fboauthtest.com/successful.html". If the current url starts with our redirection url then we close the child browser and can get access_token and access_secret from this url. So if we can track the url of the browser on Tizen then we can perform oAuth2.0 for facebook. Help please its urgent :). Regards, Vijay
Tomasz Ścisło
Hello Vijay, This is a very interesting plugin for iOS and Android, this really helps to solve the oAuth 2.0 Facebook authentication issue, but unfortunately there is no such thing on Tizen. I’ve faced the same issue while writing my guide and it has not been solved. Regards, Tomasz Ścisło
arvind sharma

Hello Tomasz Ścisło i am doing Oauth for google using javascript in tizen. but i am facing problem , code and problem is described in the below stack question,

can you help me in this. Is there any plugin like child browser for tizen.

http://stackoverflow.com/questions/20089623/google-oauth-for-installed-apps-using-javascript

talari praveen kumar

Hi Arvind 

Try the below code 

function FBLogin(){
    window.authWin= window.open("https://www.facebook.com/dialog/oauth?client_id="yourclient_id"&redirect_uri=https://www.facebook.com/connect/login_success.html&scope="permissions you need like accessing messages etc"") ;
    montiorURL() ;
}

function montiorURL()
{
    window.int = self.setInterval(function () {
        window.authCount = window.authCount + 1;
        if (window.authWin && window.authWin.location) {
            var currentURL = window.authWin.location.href;
            var inCallback = currentURL.indexOf("?code");
            if (inCallback >= 0) {
                var codeData = currentURL.substr(currentURL.indexOf("="));
                code=codeData.substring(1);
                getAccesstoken();
            }
        }
        if (window.authCount > 60) {
            alert('30 seconds time out');
            window.authCount  =0;
            window.clearInterval(int)
            window.authWin.close();
        }
    }, 40);
}

function  getAccesstoken(){
    $.ajax({
        type : "GET",
        url :'https://graph.facebook.com/oauth/access_token?client_id=1430885813804875&redirect_uri=https://www.facebook.com/connect/login_success.html&client_secret=yourclient_Secretf&code='+code,
        success : function(data) {
            try {
                accesstoken=data;
                access_token=parseToken(accesstoken);
                localStorage['accesstoken']=access_token;
                window.clearInterval(int)
                window.authWin.close();
                $.mobile.changePage("#menupage");
                $("#home_id").empty();
                getHomepage();
            }
            catch (e) {
                console.log(e);
            }
        },
        error : function() {
            $.mobile.changePage("#Loginpage");
            console.log("acess token error");
        }
    });    

}

function parseToken(accesstoken){
    var c = accesstoken.indexOf('access_token') ; 
    var L = accesstoken.indexOf('&expires') ;
    var y = accesstoken.substring(0, c) + accesstoken.substring(L, accesstoken.length);
    var remaining = accesstoken.replace(y,'');
    return (remaining.substring(13));
}

Pär Winzell

Talari, hello, thank you for posting this example code.

From what I had understood, the only two ways to acheive Facebook integration from an installed Tizen web app was to either use the deprecated REST API, or to use a solution like the one posted above. If Facebook as a company is no longer authorising new applications to use the deprecated API, that leaves only this one possibility. Is that correct?

Zell

 

Pär Winzell

... and to add to my own reply: does anybody know if there are any plans to extend Tizen's web app hosting configuration with some kind of configurable HTTP referrer? I believe that's the only thing that's preventing us from using the Facebook JS SDK -- which is surely the supported, recommended, and in every way superior way to do all this from a HTML5 app.

talari praveen kumar

Hi Par

You are correct since facebook Rest Api is no longer accepting new applications, the only option we have is to monitor the url for retrieving the access token as specified in the above example code

talari praveen kumar

Please refer below article for more information on Facebook application in Tizen

https://developer.tizen.org/documentation/articles/facebook-app-tizen

talari praveen kumar

Hi Arvind

I am sorry the code I have given is for facebook authentication. You can follow the similar procedure by monitoring the URL for google 

arvind sharma

Hello talari praveen kumar thankyou for your response. I modified your code and my problem is that in google oauth code is coming as title of the page or in the input box. This is my code and it is showing login page but after clicking on accept it is redirecting to another page which contains auth code in input box, or in its title as explained in https://developers.google.com/accounts/docs/OAuth2InstalledApp . can you help me to complete this. modified code is given below.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello social</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Moview Now - Find latest movies" />
    
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
    
    <script src="js/jquery-1.8.2.js"></script>
        <script src="js/jquery.mobile-1.2.0.js"></script>
    <!--  Fastclick to improve the Touch response -->

    
    <!-- App scripts here -->
    <script type="text/javascript">
    var OAUTHURL    =   'https://accounts.google.com/o/oauth2/auth?';
  var TOKENURL    =   'https://accounts.google.com/o/oauth2/token?';
        var VALIDURL    =   'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=';
        var SCOPE       =   'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';
        var CLIENTID    =   '475312747579-rp78op8poiq6caj9aicsfj981ohpusnk.apps.googleusercontent.com';
        var CLIENTSECRET    =   '{ROKSaV0TBJQ7OJhYJD0LQZme}';
        var REDIRECT    =   'urn:ietf:wg:oauth:2.0:oob'
        var LOGOUT      =   'http://accounts.google.com/Logout';
        var TYPE        =   'code';
        var _url        =   OAUTHURL + 'scope=' + SCOPE + '&client_id=' + CLIENTID + '&redirect_uri=' + REDIRECT + '&response_type=' + TYPE;
        var accesstokenurl       =   TOKENURL + 'code=' + code + '&client_id=' + CLIENTID + '&client_secret=' + CLIENTSECRET + '&redirect_uri=' + 
        REDIRECT + '&grant_type=authorization_code';
        var acToken;
        var tokenType;
        var expiresIn;
        var user;
        var code;
        var loggedIn    =   false;

 

function GoogleLogin(){
    window.authWin= window.open(_url) ;
    montiorURL() ;
}

function montiorURL()
{
    window.int = self.setInterval(function () {
        window.authCount = window.authCount + 1;
        if (window.authWin && window.authWin.location) {
            var currentURL = window.authWin.location.href;
            console.log(currentURL);
            var inCallback = currentURL.indexOf("?code");
            if (inCallback >= 0) {
                var codeData = currentURL.substr(currentURL.indexOf("="));
                code=codeData.substring(1);
                getAccesstoken();
            }
        }
        if (window.authCount > 60) {
            alert('30 seconds time out');
            window.authCount  =0;
            window.clearInterval(int)
            window.authWin.close();
        }
    }, 40);
}

function  getAccesstoken(){
     console.log("+currentURL");
    $.ajax({
        type : "POST",
        url :accesstokenurl,
        success : function(data) {
            try {
                accesstoken=data;
                access_token=parseToken(accesstoken);
                localStorage['accesstoken']=access_token;
                window.clearInterval(int)
                window.authWin.close();
                $.mobile.changePage("#menupage");
               
                getHomepage();
            }
            catch (e) {
                console.log(e);
            }
        },
        error : function() {
          //  $.mobile.changePage("#Loginpage");
            console.log("acess token error");
        }
    });    
    console.log("-currentURL");

}
    </script>
</head>
<body>
      
    <div id="menupage" data-role="page" data-theme="a">
 
        <div data-role="content">
         <a href='#' onClick='GoogleLogin();' id="loginText"'> Click here to login </a>
           
        </div>
    </div>
    <!-- opening movies page -->
   
</body>
</html>

Thankyou.

talari praveen kumar

Hi

Use http://localhost as redirect URI, you can get code in 'url' then monitor the url and retrieve the access coe

arvind sharma

Hello talari praveen kumar by using http://localhost as redirect URI code is not coming in the url and web page is also not opening. i am really stucked in this problem.