SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

Facebookアプリの作成(C#+Windows Azure) その3

Facebookアプリの作成(C#+Windows Azure) その1及びその2では、Facebookアプリをローカルでデバッグするところまで作成しましたが、今回は、これをクラウド上に公開するまでの手順を紹介します。

1 Windows Azureの利用

(1) Webサイトの作成

Windows Azureポータルサイトにログインし、一覧から「WEBサイト」を選択した状態で、左下の「+新規」を押すと「WEBサイト」の作成が始まります。
b001
ポップアップしたウインドウの中で「WEBサイト」「簡易作成」を選択します。
続いて「URL」に重複しない名前(ここでは、「sample-fb-pg」としました)「地域」で「東アジア」を選択し、右下の「サイトの作成」を押します。
指定した「URL」から、最終的にアクセスするURLは、「sample-fb-pg.azurewebsites.net」となりますが、このURLは、後でFacebookの基本設定に入力する内容のため、記録しておいてください。
※「東アジア」は香港の事で、日本で使用する場合、現時点(2013.08)では一番お勧めのようです。
b002
ほんの数秒で、サイトが新たに作成されていることが確認できます。
b003

(2) 発行プロファイルのダウンロード

新規に作成したWEBサイトを選択し、表示された「ダッシュボード」で「発行プロファイルのダウンロード」を選択して下さい。
b004
ダウンロードした「発行プロファイル」は、後で利用しやすい場所に保存しておいて下さい。
b005

(3) 発行プロファイルのインポートとデプロイ

ソリューションエクスプローラでプロジェクト「WebRole1」を右クリックして「発行」を選択してください。
b006
「Webを発行」ダイアログで「インポート(I)..」ボタンを押し、表示されて「発行プロファイルのインポート」ダイアログで「参照」ボタンを押して、先ほどダウンロードした「発行プロファイル」を選択します。
b007
この時点で「発行」を押すと、コンパイル、デプロイが完了します。
b008
「デプロイ」後、継続してAzure上のプログラムがリクエストされますが、この時点では、まだ設定が完了していないため、ページを表示することはできません。
b009
この時点で、ブラウザのリクエストは下記のようなものになっています。
http://localhost:81/facebookredirect.axd?code=xxxxxxxxxxxxxxxx
これは、FacebookSDKの認証動作の中で、設定した「http://localhost:81」にリダイレクトした段階で、処理が継続できなくなっているためです。後は、設定を変更して、このエラーを排除することになります。

2 設定変更

(1)Facebookの基本設置変更

ローカルでデバッグしていたものを、今後はクラウド上で動作させるためFacebookの「基本設定」で「キャンパスのURL」を「http://localhost:81/」から、「http://sample-fb-pg.azurewebsites.net/」に変更します。
b010

(2)Web.configの文字列変更

Web.configの「canvasUrl」も同様に修正します
[csharp highlight="6"]
</entityFramework>
<facebookSettings
appId = "12345678"
appSecret = "xxxxxxxxxxxxxxxxxxxxx"
canvasPage = "http://apps.facebook.com/sample_fb_pg"
canvasUrl = "http://sample-fb-pg.azurewebsites.net/" />
</configuration>
|