- 追加された行はこの色です。
- 削除された行はこの色です。
[[package/all/parts/set_facebook]]
**FacebookのDeveloper登録手順 [#ve81ccaa]
**FacebookのDeveloper登録手順 [#sde40a62]
#contents
***facebook DEVELOPERSにサインイン [#ff73e7e5]
***facebook DEVELOPERSにサインイン [#j3a16290]
まず、http://developers.facebook.com/ にアクセスし、サインインしてください。
+ http://developers.facebook.com/ にアクセスし、サインインしてください。
***新しいアプリケーションを作成 [#g4eda8e6]
+ヘッダーメニューの「&color(orange){''アプリ''};」を選択します。
+右上にある「&color(orange){''新しいアプリケーションを作成''};」をクリックします。
+ヘッダーメニューの「&color(orange){''Apps''};」を選択
+「&color(orange){''Add a New App''};」をクリック
#ref(fbdev001.gif,wrap,nolink, スクリーンショット画像)
+プラットフォーム選択画面で「&color(orange){''ウェブサイト''};」を選択
#ref(fbdev002.gif,wrap,nolink, スクリーンショット画像)
+アプリケーションの名称を入力し「&color(orange){''Create New Facebook App ID''};」を押下
#ref(fbdev003.gif,wrap,nolink, スクリーンショット画像)
+Is this a test version of another app?は「&color(orange){''いいえ''};」のまま、カテゴリを選択し、右下の「&color(orange){''Create App ID''};」を押下
#ref(fbdev004.gif,wrap,nolink, スクリーンショット画像)
+クイックスタート画面の下部「&color(orange){''Tell us about your website''};」の見出し部分の項目のサイトURLを入力
#ref(fbdev005.gif,wrap,nolink, スクリーンショット画像)
#ref(facebook_dev1.gif,wrap,nolink,「アプリ」メニューの位置を示したスクリーンショット画像)
#ref(facebook_dev2.gif,wrap,nolink,新しいアプリケーションを作成ボタンの位置を示した画像)
***アプリ公開までに必要な設定を済ませる [#y9227afb]
+ヘッダメニューのAppsより先程作成したアプリをクリックし、ダッシュボード画面へ移動
#ref(fbdev006.gif,wrap,nolink, スクリーンショット画像)
+左のメニュー「&color(orange){''Setting''};」をクリックし、アプリの設定画面へ移動
+「&color(orange){''Contact Email''};」に管理者の連絡先を入力し、下部「&color(orange){''Save Changes''};」を押下し設定を保存
#ref(fbdev007.gif,wrap,nolink, スクリーンショット画像)
***「Create New App」の各種項目を入力 [#db9434e0]
***アプリを公開する [#ad565500]
+「&color(orange){''AppName''};」に任意のアプリケーション名を入力
+「&color(orange){''続行''};」ボタンをクリックします。
+「&color(orange){''Host your site width Heroku''};」というダイアログが出ますが、ここでは「&color(orange){''キャンセル''};」をクリックします。
+左のメニュー「&color(orange){''Status&Review''};」をクリックし、アプリのステータス画面へ移動
#ref(fbdev008.gif,wrap,nolink, スクリーンショット画像)
+Noとなっているスライドを「&color(orange){''Yes''};」に切り替え、確認画面が出るので「&color(orange){''確認''};」ボタンを押下。
#ref(fbdev009.gif,wrap,nolink, スクリーンショット画像)
#ref(facebook_dev3.gif,wrap,nolink,アプリケーション名の入力位置と続行ボタンの位置を示した画像)
#ref(facebook_dev4.gif,wrap,nolink,Herokuダイアログのスクリーンショット画像)
これでアプリが全体へ公開されます。
>※Herokuは、昨今急速に成長しているRubyアプリケーションのクラウドプラットフォーム(ウェブサービスのホスティングサービス)です。
>※Herokuを利用している場合はHerokuで登録しているメールアドレスを入力し~
(登録されていないメールアドレスを入力するとHerokuからアカウント作成に関する案内メールが届きます。)~
phpを選択後、作成ボタンを押す。以降の手順は同様です。
>※Herokuに関する設定手順はここでは説明しません。
※こちらをYesに切り替えないとアプリ登録者しかアプリへのアクセスが許可されていない非公開状態となり、第三者によるfacebookを用いたソーシャルログインは出来ません。
***設定＞基本設定ページで「App ID」と「App Secret」を控え、システムに設定する [#wfc63bf8]
***システムに設定する [#u4552ae8]
+上部に表示されいている「&color(orange){''App ID''};」と「&color(orange){''App Secret''};」を控えます
+弊社システムに管理者でログインし、システム設定画面を開き、~
「&color(orange){''アプリのApp Id/API Key''};」に「&color(orange){''App ID''};」を、~
「&color(orange){''アプリの秘訣''};」に「&color(orange){''App Secret''};」をそれぞれ設定して下さい。
+ダッシュボード画面に表示される｢App ID｣と｢App Secret｣を控え、弊社システムの管理者画面にログイン
+管理画面上部の｢システム設定より｢アプリのApp Id/API Key」に「App ID」を、「アプリの秘訣」に「App Secret」をそれぞれ設定し、保存。
#ref(facebook_dev5.gif,wrap,nolink,「App ID」等が表示されている位置を示した画像)
#ref(facebook_dev_sys1.gif,wrap,nolink,クラウドファンディングシステムのシステム設定画面のスクリーンショット画像)
***設定＞基本設定ページの「Website with Facebook Login」の「サイトURL」をシステム設置先のURLに設定 [#ve1aaf44]
+「&color(orange){''Website with Facebook Login''};」の「&color(orange){''サイトURL''};」にシステム設置先のURLに設定し、~
ページ下部の変更を保存するボタンをクリックし、変更を保存します~
※その他項目はデフォルトで結構です。
#ref(facebook_dev6.gif,wrap,nolink,設定＞基本設定ページのスクリーンショット画像)
***設定＞詳細ページで「App Type」と「認証拒否時のコールバック先」を指定 [#b35dfeb6]
+「&color(orange){''App Type''};」を「&color(orange){''ウェブ''};」、「&color(orange){''認証拒否時のコールバック先''};」に&color(orange){''callback_fb.phpまでのパスを指定''};し、~
ページ下部の変更を保存するボタンをクリックし、変更を保存します~
※その他項目はデフォルトで結構です。
認証拒否時のコールバック先URLの指定例
http://設置先のURL/callback_fb.php
#ref(facebook_dev7.gif,wrap,nolink,設定＞詳細ページのスクリーンショット画像)
以上で設定は完了です。
#br
#br
