[Facebook] 如何建立facebook App 且取得FB ID

转载 2015年07月09日 17:41:43

這裡將會紀錄如何建立一個Facebook App,並且讓User授權應用程式,最後取得FB ID來當會員資料或是參加活動的ID識別

首先,你必須是個Facebook App Developers,你可以去facebook DEVELOPER申請你的身份,我記得以前不用手機驗證,但現在則需要

接著你會看到以下畫面


點選右上角的Create New App

會跳出一個POP視窗


App Name:指的是你的應用程式名稱

App Namespace:是你的網址命名

Web Hosting:如果你有自己的Web Hosting就不用勾選

按下Continue以後會出現填寫驗證碼,填寫完後按下Submit



然後就會看到建立好的App一些資訊和設定


因為雖然是寫Facebook App,但其實Facebook只是提供你API和外框包住你的網頁,所以你還要提供你的網頁所在位置給Facebook


要注意的是Facebook要求使用加密的https,所以如果你如果沒有的話,可能要花錢購買這方面的憑證

到這邊為止,已經建立好初步的Facebook App了

使用JavaScript API做授權

有了App以後,我們要跟網頁串起來,因為我是.NET開發者,所以我會先建立一個index.aspx,接著一般我都會在<form id="form1" runat="server"></form>的後面加上

<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/zh_TW/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

注意,如果沒有fb-root的div會導致不能使用Facebook API,另外我還多用了Jquery來方便等一下寫js程式碼

接下來新增一個div做為點選授權

 <div id="btn">點我授權</div>

接著是js初始化部分

$(function () {

        var _app_id = 'Your App ID';
        var _api_key = '';
        //驗證
        FB.init({
            appId: _app_id,
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // parse XFBML
            oauth: true // enable OAuth 2.0
        });
        FB.Canvas.setAutoGrow(); //autoResize  → no scrollbar

   });

Your App ID必須填入你建立好的Facebook App裡面的App ID ,接著加上點擊觸發授權的js部分

    $('#btn').click(function () {
            getLoaginState();
        });

        //驗證
        function getLoaginState() {
            FB.getLoginStatus(function (response) {
                if (response.authResponse) {
                    var u_fb_id = response.authResponse.userID;
                    console.log(u_fb_id);
                } else {
                    login();
                }
            });
        }

        //跳出登入視窗
        function login() {
            FB.login(function (response) {
                if (response.authResponse) {
                     var u_fb_id = response.authResponse.userID;
                     console.log(u_fb_id);
                } else {
                    alert('須同意應用程式');
                }
            });
        }

這段js是綁定一個click事件,在id為btn的div上,然後去執行getLoaginState(),FB.getLoginStatus是看登入狀態,沒有登入則會跳到login(),console是等下能看到我們所取得的FB ID

接著在剛剛App設定網址那邊有個Canvas Page,那就是你掛在Facebook底下的網址,後面的網址名稱就是你剛剛設定的App Namespace,進入以後會看到以下畫面


按下點我授權,就會跳出授權是否同意應用程式視窗


同意以後,就可以在firebug裡面看到我們剛剛所加的console,秀出你的FB ID


得到FB ID可以利用Graph API再更進一步取得許多資料,當然也要先授權相關權限才行

以上如有問題,歡迎一起討論



原文:http://blog.rx836.tw/blog/facebook-app-create-getfbid/



facebook login 申请 app_id 和 app_secret

1.访问 https://developers.facebook.com 在Facebook Login的右边点击Get Start 勾选选项,填写登录成功回调的ur...
  • terry_water
  • terry_water
  • 2017年02月14日 10:49
  • 1615

ios如何调用facebook打开指定用户的主页

You have to use the facebook ID for the given page rather than the vanity URL. To get the pages ID, ...
  • chengkaizone
  • chengkaizone
  • 2014年09月30日 15:53
  • 1622

烦人的Facebook分享授权

开发端授权app权限facebook要求提交应用到他们平台, 而且还限制100mb, 坑爹死了, 果断使用google drive分享给他们, 最开始不确定分享给他们什么样的程序包, 结果审核没通过 ...
  • zszeng
  • zszeng
  • 2016年01月29日 19:04
  • 2983

【转帖】Facebook 的自动化测试

Facebook 怎样做自动化测试? 最近Quora上有个讨论,原意是:“facebook是如何做自动化测试的,他们是怎样测试才能保证每周的升级都可以不出差错的呢?” 参见Link ...
  • missyouonly
  • missyouonly
  • 2016年05月05日 16:11
  • 566

Android Facebook分享以及一些注意事项

Android Facebook分享以及一些注意事项在分享之前,你需要做以下几件事情: 添加Facebook的SDK到你的应用中去 dependencies { compile 'com.fac...
  • pmx_121212
  • pmx_121212
  • 2015年12月29日 16:07
  • 4056

facebook分享(链接、照片、视频)

官方文档:https://developers.facebook.com/docs/sharing/ios 1:在info.plist里填写fbid 和fb对应的url scheme 2:ios9填...
  • lvchaman
  • lvchaman
  • 2016年07月13日 15:39
  • 8687

facebook FB.api()使用

1、FB.api(url, method, params, callback); #get objects 2、FB.api('/me?fields=id,name,gender'); //查...
  • q549244663
  • q549244663
  • 2016年12月21日 11:08
  • 1239

根据Facebook内存的管理使用,浅谈在iOS上自动检测内存泄漏问题

分装库下载:https://github.com/facebook/FBMemoryProfiler FBMemoryProfiler类库使用教程:http://ifujun.com/fbmemor...
  • hbblzjy
  • hbblzjy
  • 2016年06月01日 22:27
  • 2145

Android实现Facebook第三方分享

最近项目需要集成Facebook的分享功能,在网上看了一些实现例子,用的方法感觉比较老了。Facebook最新的Api已经换了很多。下面我就将最新的集成方式分享给大家。 facebook官方提供的集成...
  • u013718120
  • u013718120
  • 2016年08月03日 14:47
  • 5166

facebook授权和分享以及google支付的FAQ

facebook接入FAQ和google支付FAQ
  • qinbaoshanwecash
  • qinbaoshanwecash
  • 2015年11月23日 10:15
  • 1134
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Facebook] 如何建立facebook App 且取得FB ID
举报原因:
原因补充:

(最多只允许输入30个字)