カテゴリー: ｆａｃｅｂｏｏｋ app develop

ログインプラグインを利用して
ログインをした場合
ログインの受胎が変化するのみでリロードはされない
このため、情報の更新を行うには
そのタイミングをしらないとダメ
タイミングをしるには
facebook が提供しているイベントを使う
提供されているイベントのうち
認証状態の変化を検出できるのは
auth.authResponseChange
これを講読するようにするとタイミングをしることができる
ちなみに、講読は
java とか java script では
イベントリスナー登録ともいいます
あと、講読は英語で subscribe といいます
ログイン状態の変化でリロードするなら
FB.Event.subscribe(‘auth.authResponseChange’,function(response){
window.open(window.location.href,”_self”);
));

Signed Request から得られる値は数値で
これが外部に公開されているため
第三者が偽造した Signed Request をURLに含めて送ることは可能らしい
このためSQLインジェクション攻撃を受ける可能性がある
確実にSQLインジェクションを阻止するために
プレースホルダを使用した書きかたを使う
WHERE　の中の条件は必ずかっこでかこむ
アクセス元がfacebook であることを HTTP_REFERER環境変数
$_SERVER[‘HTTP_REFERER”]
で確認するなどして　SQLを実行すること
SQLインジェクションはクラックの方法なので、
検索するといろいろとでてきます

facebook アプリの開発中に
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: 指定されたURLは、アプリケーションの設定で許可されていません。
というエラーがでました
原因をさがすため
検索
Facebookアプリ – user-infoを試してみる。
に答えが載っていました
アプリケーションの設定から、使用しているapp_idの、
「アプリの編集」を選び、「Webサイト」「Facebook上のアプリ」に、
Facebookアプリを実行するURLを追加
とあったため、
さっそく設定を変更しました
Website with Facebook Login
をクリックして
サイトURL:
のところへ
URLを記述します
XAMPP で行っているなら、 http://localhost/
レンタルサーバーなら、そのドメインを記述します
今回はタブ型アプリをつくっていたので
ページタブのところだけ
設定したのですが、ログインするようなものを作る場合には
Website with Facebook Login
も設定しないとエラーとなるようです

Signed Request は
facebook アプリの認証の過程で
アプリ側に渡されるクエリーパラメータの１つ
HMAC-SHA256アルゴリズムで
ハッシュ化された署名文字列
と
facebook から渡される情報
（base64方式エンコードされた JSONP テキスト）
が
.
でつなげられている
ユーザ情報が含まれることもあるけど
アプリ認証がすんでいないと一部情報のみになる
https://developers.facebook.com/docs/authentication/signed_request/
に英語だけど解説載っています
内容を少しかいてみました
user
ログインしているユーザ情報（JSONオブジェクト）
algorithm
Signed Request の値をハッシュ値化するための
使用しているアルゴリズム名
issued_at
Signed Request が作成された時刻（UNIX時間）
UNIX時間は
1970/1/1 00:00:00 からの秒数になります
oauth_token
Ｇｒａｐｈ API を呼び出すために必要なトークン
user_id
ログインしているユーザID
app_data
タブ型アプリを表示するときに
アプリのURLに含まれていたクエリー文字列をJSONオブジェクトに
したデータ
page
facebook のID、
いいねしているか
管理者かどうかを示す値を含む
JSONオブジェクト
profile_id
facebook ページのID

最近、講習の準備などで忙しくて滞っていた facebook アプリ開発の勉強を再開
今回も参考書籍は
10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)

実際には10日で覚えるのは無理な気がするけど
まぁそれはおいておきましょう
今回は
facebook ページにアプリを追加するところでつまづきましたのでメモ
書籍によれば
browser を起動して
http://www.facebook.com/dialog/pagetab?app_id=アプリID
&redirect_url=http://www.facebook.com
とかいてあるけど、
これだとエラーとなってしまいました
これを
http://www.facebook.com/dialog/pagetab?app=アプリID
&next=http://www.facebook.com
とすると、ページタブを追加する画面がでました
今回は、
facebook ページ　アプリ　追加
で検索した結果表示された
ページタブアプリ(iframe)の作成とFacebookページへの追加方法
を参考にさせていただきました

facebook ページを作成する方法のメモです
今回、facebook アプリ作成において
10日でおぼえるFacebookアプリ開発入門教室
を参考にすすめていますが
facebook ページアプリ作成でつまづいたので、
メモしておきます

まず、facebook のアカウントを取得しないとダメです
アカウントの取得は
超簡単！Facebook(フェイスブック)のユーザー登録方法
http://nanapi.jp/4757
を参考にしてください
次に、すでにアカウントを取得している場合です
facebook ページを作成するには
画面右上にある　ホーム　をクリックして
一番下にある　ページを作成　をクリックします
書籍にあるように入力しても
facebook ページは作成できないため
南鳥島の次に１１１を入力したらできました
次にプロフィール写真ですが
これはいらないのでスキップ
基本データ、URL設定もスキップでOK
これで facebook ページ作成完了
次にアプリ作成のため
https://developers.facebook.com/
へアクセスして
アプリをクリックし
新しいアプリケーションを作成
をクリック
App Nameへ
注文管理アプリ
App Namespace には
order-app
で進めて
最後のheroku 使うかを聞かれますが
キャンセルでOK
アプリをFacebookに結合する方法を選択してください
で
ページタブ　をクリックし
ページタブ名に　
注文履歴テスト
Page Tab URL に　
http://localhost/10days/
Secure Page Tab URL に　
https://localhost/10days/
Page Tab Edit URL に
http://localhost/10days/options.php
を記述して
変更を保存をクリックすれば、アプリ設定は完了です
次は Eclipse でプロジェクトを作成していきます

小さいサイズの画像をアップロードしようとしてもできないのは
facebook の仕様のためです
これは、ニュースフィードの画像投稿にも適用されてしまいます
この対処方法は画像サイズを大きくすればOKです
ちなみに、XAMPPとか公開していないローカルサーバーのURLを
画像に指定すると、当然ですがfacebook から画像読み込みはできません
このため、画像の指定するときには
公開サーバーを使わないとダメです
一般的にはレンタルサーバー
もしくは
自宅サーバーを構築して、公開するとかもありますが
GAE(google App Engine )
を使うという方法もあります
10日でおぼえるFacebookアプリ開発入門教室
にもこのあたりのことがのっていますが
文章がほとんどでちょっとわかりにくいので
[GAE][Python][facebook]　非エンジニア女子による、15分間でできるfacebookアプリデビュー：GAE（Python編）
を参考にGAE登録をするとわかりやすいと思います
ちなみに、私の場合、以前
サーチマン佐藤さんの
GAE の講習を受けたときに、登録済みなので、この環境をそのまま使いました

いくつか必要なものもあるので、メモしておきます
GAE登録には
携帯電話のメール・アドレスが必要です
また
この書籍で行っているのは pythonを使っているので
python が必要になります
今回は ubuntu での環境を構築しました
参考サイトは
Ubuntu 11.04でGoogle App Engine(GAE)の開発環境を構築する
そして
Ubuntu で GAE Python 開発
です
ubuntu 11.10 の場合、最初から
python がインストールされています
そして
Google App Engine SDK が必要になるので
https://developers.google.com/appengine/downloads?hl=ja
から
google_appengine_1.6.5.zip
をダウンロードし
cp google_appengine_1.6.5.zip ~/
でホームディレクトリにコピー
unzip google_appengine_1.6.5.zip
で解凍します

2012年4月末でオフラインアクセス権限が廃止されました
以前は
オフラインアクセス権限を使用するため
アプリ詳細設定画面で
移行欄の
Deprecate offline access
を無効に設定しましたが
現在では、この方法も使わなくなりました
参考書籍が古い場合、オフラインアクセス権限が掲載されている可能性もありますので、
要注意です
なお
オフラインアクセス権限廃止により
通常のアクセストークンの有効期限が延長されるようになりました
オフラインアクセス廃止以前は
2時間程度でしたが
現在では
アクセストークンの有効期限は60日（約2ヶ月）
となりました
また、古くなった
アクセストークンを更新することも可能になりましたので
通常のアクセス権限の取得を行えば
実質オフラインアクセスと同じ効果を取得できます

縦幅がcanvas型アプリより短いとスクロールバーがでてしまう
これを防止するには
アプリ開発の詳細設定で、
Canvas Settings という項目の
キャンバスの幅
と
キャンバスの高さ
を変更します
デフォルト設定は
幅は　固定で　760px
高さは Fluid
となっています
これを変更すれば、対処できるようになります
fluid は可変という意味です
もし、高さを固定すると
キャンバスの縦幅は指定した大きさになります
これは
FB.Canvas.setAutoGrow() で定期的にキャンバスサイズを
変更しているためです

2012年4月末で、オフラインアクセスがつかえなくなりました
どんなものだったかをちょっとまとめてみました
オフラインアクセスと普通のアクセスの違い
それは
アクセストークンの有効期限の違いのみ
通常のアクセストークンは2時間程度で失効
適正な処理が省略されている場合には
画面を開きっぱなしの状態で放置していると
アプリを起動しなおすことになります
これが
オフラインアクセス権限を持ってアクセストークンを取得していると
同じ条件で使用しているなら再起動しなくてよいというものです
一見便利なようですが
使用条件が変わると、アクセストークンが失効になります
例えば
アカウントのパスワード変更とか
アプリの権限を増減すると
失効されます
もちろん、アプリを削除したときも同様ですが
さすがに削除すればアクセストークンはなくなります