Tizen中的Facebook应用

PUBLISHED 26 11月 2013

概述

本文演示了如何Tizen中创建一个使用Facebook的应用程序。

Facebook

在Tizen中开发一个Facebook应用必须遵循下面的步骤。
1. 在developers.facebook.com上创建一个应用。
2. 创建应用之后，记录下App表盘中提到的AppId和Appsecret。

3. 禁用App表盘内“Basic Info”中的“sandbox mode”。

4. 由于应用程序是专门针对设备（手机，平板电脑），在"Website with Facebook Login"区域，我们设置“https://www.facebook.com/connect/login_success.html”作为网站的网址。

认证

要完成Facebook的身份验证过程，用户必须遵循如下三个步骤。

1. 该应用程序必须启动一个重定向到具有下列参数的终点：

client_id：应用程序的ID，可以在应用程序的表盘中找到。
redirect_uri：网站的网址，即应用表盘中"Website with Facebook Login" 中的内容。
scope：App的用户请求的使用逗号分隔的许可证列表。

终点将显示Facebook登录窗口。输入凭据后，将出现一个对话框，要求用户授予访问其公众形象，好友列表和应用要求的任何其他权限。如果用户选择对话框上的“OK”后，该应用程序将获得指定的权限。

function FBLogin(){
    console.log("inside login");
    window.authWin= window.open("https://www.facebook.com/dialog/oauth?client_id=YourClientId&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=read_stream,manage_notifications,read_mailbox,read_requests,user_photos,user_hometown,photo_upload,user_location") ;
    montiorURL() ;
}

2. 在这个应用程序中，“子窗口(Child Window)”用来打开Facebook登录窗口。一旦用户完成登录过程，认证URL将发送接入码给重定向的网址(redirect_uri)。监控认证URL来检索“接入码(access code)”，并通过关闭子窗口来返回应用程序。

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();
        }
    }, 100);
}

3.获取接入码后，使用Facebook的图形API "https://graph.facebook.com/oauth/access_token?client_id=YourAppid&redire...'+code"生成访问令牌。

function  getAccesstoken(){
    $.ajax({
        type : "GET",
        url :'https://graph.facebook.com/oauth/access_token?client_id=YourAppid&redirect_uri=https://www.facebook.com/connect/login_success.html&client_secret=YourAppsecret&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");
                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));
}

在“url”中的参数“code”就是我们在步骤2中得到了接入码。将访问令牌存储到本地存储介质上，以备后用。

有关身份验证的更多详情，请参阅该链接。

主页

应用程序需要在认证阶段获得的访问令牌，并使用read_stream许可获得“主页”。为了得到read_stream许可，在认证URL指定scope=read_stream。下面是检索主页的代码

function getHomepage(){
$.ajax({
        type : "GET",
        url  :'https://graph.facebook.com/me/home?access_token=' +localStorage['accesstoken'],
        success : function(data1) {
            var from_id={};
            var from_name={};
            var messages={};
            var type={};
            var picture={};
            var link={};
            var image={};
            var story={};
            var Vname={};
            var Vdescription={};
            var home_length=data1.data.length;
            console.log("length is "+home_length);
            for(i=0;i < home_length;i++){
                from_id[i]=data1.data[i].from.id;
                from_name[i]=data1.data[i].from.name;
                type[i]=data1.data[i].type;
                story[i]=data1.data[i].story;
                messages[i]=data1.data[i].message;
                image[i]="http://graph.facebook.com/"+from_id[i]+"/picture";
                if((type[i]=="link")||(type[i]=="video")||(type[i]=="swf")){
                    link[i]=data1.data[i].link;
                    Vname[i]=data1.data[i].name;
                    Vdescription[i]=data1.data[i].description;
                    }
                else if(type[i]=="photo"){
                    picture[i]=data1.data[i].picture;
                }
                else{}
            }
            },
        error : function() {
            $.mobile.changePage("#Loginpage");
            console.log("acess token error");
        }
    });
}

好友列表

应用程序需要在认证阶段获得的访问令牌来检索用户的“好友列表”。下面是检索用户好友列表中的代码。

function getFriends(){
    $.ajax({
        type : "GET",
        dataType : 'json',
        url : 'https://graph.facebook.com/me/friends?access_token=' +localStorage['accesstoken'],
        success : function(data1) {
            console.log("inside friends")
            $("#friends_id").empty();
            var jsonlength=data1.data.length;
            for(i=0;i < jsonlength;i++)
            {
                names[i]=data1.data[i].name;
                Id[i]=data1.data[i].id;
                img_url[i]="http://graph.facebook.com/"+Id[i]+"/picture";
            }
            },
            error : function() {
            console.log("Unable to get your friends on Facebook");
        }
    });
}
}

个人资料信息

在这个页面中，显示的用户资料信息包括姓名，学历，封面图片，个人资料图片，位置，家乡和宗教信仰。应用程序需要在认证阶段获得的访问令牌，以及user_hometown，user_location许可来获取用户的位置和家乡信息。为了得到user_hometown和user_location许可，在认证url中设置scope= user_hometown，user_location。下面是检索用户的个人资料信息的代码

$.ajax({
        type : "GET",
        dataType : 'json',
        url : 'https://graph.facebook.com/me?fields=first_name,last_name,education,cover,gender,location,languages,hometown,religion,picture&access_token=' +localStorage['accesstoken'] ,
        success : function(data1) {
            var educationlength=data1.education.length;
            var school_image={};
            for(i=0;i< educationlength;i++){
                school[i]=data1.education[i].school.name;
                id[i]=data1.education[i].school.id;
                school_image[i]="http://graph.facebook.com/"+id[i]+"/picture";
            }
            var firstname=data1.first_name;
            var lastname=data1.last_name;
            var gender=data1.gender;
            var hometown=data1.hometown.name;
            var hometown_id=data1.hometown.id;
            var hometown_url="http://graph.facebook.com/"+hometown_id+"/picture";
            var religion=data1.religion;
            var location1=data1.location.name;
            var location_id=data1.location.id;
            var location_url="http://graph.facebook.com/"+location_id+"/picture";
            var cover=data1.cover.source;
            pfpic=data1.picture.data.url;
        },
        error : function() {
            console.log("Unable to get your friends on Facebook");
        }
    });
}

消息

应用程序需要在认证阶段获得的访问令牌，以及read_mailbox许可来获取用户的消息。为了得到read_mailbox许可，需要在认证url中指定scope=read_mailbox。以下是检索用户的消息的代码

function messages()
{
    $.ajax({
        type : "GET",
        url :'https://graph.facebook.com/me/inbox?access_token=' +localStorage['accesstoken'],
        success : function(data1) {
            console.log("messages success");
            var from={};
            var from_id={};
            var messages={};
            var commentslength={};
            var image={};
            var messageslength=data1.data.length;
            for(i=0;i< messageslength;i++){
                if( data1.data[i].comments != null){
                    from[i]=data1.data[i].comments.data[0].from.name;
                    console.log(from[i]);
                    from_id[i]=data1.data[i].comments.data[0].from.id;
                    console.log(from_id[i]);    
                    messages[i]=data1.data[i].comments.data[0].message;
                }
                else
                    console.log("found comments data null"+ i);
                
                console.log(messages[i]);
                image[i]="http://graph.facebook.com/"+from_id[i]+"/picture";
            }
            },
            error:function(){
            console.log("error");
    }
});
}

通知

应用程序需要在认证阶段获得的访问令牌，以及manage_notifications许可来获取用户的通知信息。为了得到manage_notifications许可，需要在认证url中指定scope=manage_notifications。以下是检索用户的通知信息的代码。

function notifications()
{
    $.ajax({
        type : "GET",
        url :'https://graph.facebook.com/me/notifications?access_token=' +localStorage['accesstoken'],
        success : function(data1) {
            var notificationslength=data1.data.length;
            var from_name={};
            var fromid={};
            var title={};
            var image={};
            for(i=0;i< notificationslength;i++){
                from_name[i]=data1.data[i].from.name;
                fromid[i]=data1.data[i].from.id;
                title[i]=data1.data[i].title;
                image[i]="http://graph.facebook.com/"+fromid[i]+"/picture";
            }
        },
        error:function(){
            console.log("error");
    }
    });
}

待定好友请求

应用程序需要在认证阶段获得的访问令牌，以及read_requests许可来获取用户的待处理的好友请求。为了得到read_requests许可，需要在认证url中指定scope=read_requests。下面是检索用户的待定好友请求的代码

function friendRequests(){
    $.ajax({
        type : "GET",
        url :'https://graph.facebook.com/me/friendrequests?access_token=' +localStorage['accesstoken'],
        success : function(data1) {
            var friendnames={};
            var friendid={};
            var image={};
            var flength=data1.data.length;
            for(i=0;i < flength;i++){
                friendnames[i]=data1.data[i].from.name;
                friendid[i]=data1.data[i].from.id;
                image[i]="http://graph.facebook.com/"+friendid[i]+"/picture";
            }
            },
            error:function(){
            console.log("error");
        }
    });
}

状态更新

应用程序需要在认证阶段获得的访问令牌，以及publish_stream许可来发布他的状态。为了得到publish_stream许可，需要在认证url中指定scope=publish_stream。下面是更新的状态代码。

function postStatus(){
     $.ajax( {                                    
            url : "https://graph.facebook.com/me/feed",
            type : "POST",
            crossDomain: true,
            data: { access_token:localStorage['accesstoken'] , message:message to be posted on user's wall},
            cache : false,
            success : function(res) {
                if (!res || res.error) {
                   console.log("Couldn't Publish Data");
                } else {
                   console.log("Message successfully posted to your wall, see your wall");
                }
            },
            error : function(xhr, textStatus, errorThrown) {
                alert(xhr.responseText);
            }
        });
}

相册

应用程序需要在认证阶段获得的访问令牌，以及user_photos许可来获取用户的相册。为了得到user_photos许可，需要在认证url中指定scope=user_photos。下面是检索用户相册的代码

function getAlbums(){
    var selectedAlbum;
    var albumslength;
    var count=0;
    var album_name={};
    var picture_link={};
    var album_cover_photo={};
    var album_cover_photo_link={};
    var photoslength;
    $.ajax({
        type : "GET",
        url :'https://graph.facebook.com/me?fields=albums.fields(id,name,cover_photo,photos.fields(name,picture,source))&access_token=' +localStorage['accesstoken'] ,
        success : function(data1) {
            albumslength=data1.albums.data.length;
            for(i=0;i< albumslength;i++){
                if(data1.albums.data[i].hasOwnProperty('photos')){
                    if(data1.albums.data[i].name){
                        photoslength=data1.albums.data[i].photos.data.length;
                        console.log(photoslength);
                        album_name[i]=data1.albums.data[i].name;
                        album_cover_photo[i]=data1.albums.data[i].cover_photo;
                        for(j=0;j< photoslength;j++){
                            picture_link[j]=data1.albums.data[i].photos.data[j].picture;
                            if(data1.albums.data[i].photos.data[j].id==album_cover_photo[i]){
                                album_cover_photo_link[i]=data1.albums.data[i].photos.data[j].picture;
                            }
                        }
                        count++;
                    }
                }
            }
                },
        error:function(){
            console.log("error");
        }
    });
}

退出

应用程序需要在认证阶段获得的访问令牌来退出他的帐户。

function Logout()
{
    $.ajax({
        type : "GET",
        url :'https://www.facebook.com/logout.php?next=https://www.facebook.com/connect/login_success.html&access_token='+localStorage['accesstoken'],
        success : function(data) {
            $.mobile.changePage("#homepage");        
        },
    error: function(){console.log("error");}
    });
}

屏幕截图

主页

好友列表

文件附件:

搜索表单

语言

概述

Facebook

认证

主页

好友列表

个人资料信息

消息

通知

待定好友请求

状态更新

相册

退出

屏幕截图

主页

好友列表