高速サーバー側ASP.NET + Facebook統合

そのため、ASP.NETプラットフォーム上でFacebookとの統合に直面しなければなりませんでした。 統合はサーバー側で必要だったため、Facebook C#SDKを使用することにしました。

判明したように、プロセスはそれほど複雑ではありませんが、本質と原則を理解することが重要です。



第一に、小さな免責事項-以下の例は、生産の誇りあるタイトルであると主張していません。 その目的は、トピックの基本概念を提供することです。



この例をいくつかの段階、ステップに分けます。



ステップ0:最小理論



実際、最低限の理論は悪いです。 コードが何をするのか理解せずにコピー&ペーストを行わないように、理論的な部分を理解することが重要です。

Facebookで認証/承認の詳細を読むことができます(また、読むべきです)-developers.facebook.com/docs/authentication

要するに-私たちはウェブアプリケーションを構築しており、次のことを望んでいます:

  1. Facebookを介してユーザーを認証します。
  2. ユーザーデータ(名前、userpic)へのアクセスを取得します。
  3. アプリケーションに代わってユーザーの壁に投稿する機会を得る。
  4. 小さな手形とヘリコプターで数百万ドル。


次に、最初の3つのポイントを実装する方法を見ていきます。



アイテム2と3を機能させるには、アイテム番号1が正常に完了した場合にのみFacebookが発行する特定のアクセストークンが必要です。 アクセストークンは、アプリケーションがユーザーに要求した(および受け取った)アクセス権の何らかの確認です。



Webアプリケーションで受信するには、ログインボタンがあります。 このボタンをクリックすると、標準のFacebook認証/承認ウィンドウが開きます。 必要に応じて、ユーザーは標準のFacebook入力ユーザー名/パスワードを入力します。 次に、アプリケーションXXXへのログインに同意するかどうかを尋ねます。 最後のステップは、ユーザーがアクションA、B、Cを行うためにアプリケーションを許可することに同意するかどうかの質問です(認証ダイアログの古いバージョンでは、最後の2つのステップは1つの画面にあり、現在は2つの異なる画面です)。 ユーザーが上記のすべてを確認すると、プロセスの最初に設定したURLにリダイレクトされます。 パラメーターとして、FacebookはこのURLにコードを追加します。このコードを使用して、切望されているアクセストークンを取得します 。 [ログイン]ボタンをクリックした瞬間から、すべてがポップアップウィンドウで表示されることに注意してください。 承認プロセスの最後に、それを閉じて、Webアプリケーションでウィンドウをリロードします。



それでは始めましょう。



ステップ1:Facebookアプリケーションを作成する



developer.facebook.com/appsにアクセスしてください

新しいアプリを作成します。

画像

アプリケーションの名前を示します。 現時点では、アプリの名前空間は空白のままにしておくことができます。 Facebookプラットフォームポリシーを注意深く読み、同意します。

画像

App IDとApp Secretを記憶(書き留め)します。 まだ必要です。

ウェブサイトを統合する方法を選択します。 サイトURLにhttp:// localhost:12345 /と入力します (これがWebアプリケーションのURLであることが重要です。完全に正確な場合、 後で使用するreturnUrlは同じドメインを持つ必要があります。そうでない場合、Facebookセキュリティメカニズムによりプロセスが開始されません認証/承認)。

画像

それだけです Facebook自体は完成しました。



ステップ2:プロジェクトを作成して構成し、Facebook SDKを追加します。



Visual Studioで、新しいプロジェクトを作成します。 簡単にするために、通常のASP.NET Webアプリケーションを使用しましたが、MVCではすべてがまったく同じです。 プロジェクトをFBIntegrationSampleと呼びます。

画像



[参照]を右クリックし、[ライブラリパッケージ参照の追加...]を選択します。

画像



「オンライン-すべて」セクションに進み、facebookを探します。 3つのマークされたコンポーネントに興味があります。 MVCアプリケーションの場合、3つすべてをインストールする必要がある場合、通常のASP.NET Webアプリケーションの場合、上位2つで十分です。

画像



それからちょっとしたトリック。 デフォルト設定では、IISは再起動のたびに異なるポートを使用しますが、これは私たちには適していません。 したがって、プロジェクトプロパティ、[Web]タブに移動し、サーバーを実行する特定のポートを設定します。 たとえば、12345。

画像



最後の手順は、 web.configで <facebookSettings />という要素(通常はファイルの最後)を見つけ 、前の手順で取得したappIdappSecretを追加することです

画像



ステップ3:コード



ユーザーデータを格納するFBUserクラスを作成しましょう(簡単にするため、ユーザーデータを受信した後、セッションにオブジェクトを保存します)

画像



Default.aspxを作成します 。このボタンには、ログインボタンとユーザーデータ用の2つの要素があります。

画像



Default.aspx.cxでは、セッションからFBUserオブジェクトを取得しようとします。 うまくいかない場合は、承認ウィンドウへのリンクを作成します。それ以外の場合は、ユーザーのデータを使用します。名前、userpicを表示し、壁に投稿することもできます。

画像



クラスFBAuthHandler.csを作成します。 Facebook C#SDKを使用して、ログインウィンドウのURLを作成します。

画像



拡張アクセス許可の詳細

展示の詳細



2番目のメソッドをFBAuthHandler.csに追加します。これは、必要なパラメーターを使用してFacebookから応答が返されたかどうかを確認します。

画像



成功した場合、FBUser オブジェクトを作成し、セッションに配置します。



Default.aspxに小さなJavaScriptを追加します 。これにより、ログインボタンをクリックすると、必要なURLを含むポップアップウィンドウが開きます。

画像



最後に残っているのは、認証プロセスの終了後にリダイレクトされるFacebookOAuth.aspxを作成することです。 FacebookOAuth.aspxはポップアップウィンドウで開くので、このファイルを使用して

a。 Facebookからコードが返されたかどうかを確認します。 はいの場合、 FBUserオブジェクトを作成します。

画像



b。 ポップアップウィンドウを閉じて、メインウィンドウをリロードします。

画像



ステップ4:テスト



画像



画像



画像



画像



画像



ソースコードはこちらから入手できます-http://dl.dropbox.com/u/5249810/habrapost01/FBIntegrationSample.zip



All Articles