ASP.NET Web ページ (Razor) サイトで外部サイトを使用してログインする

作成者: Tom FitzMacken

この記事では、Facebook、Google、Twitter、Yahoo、その他のサイトを使用して ASP.NET Web ページ (Razor) サイトにログインする方法、つまりサイトで OAuth と OpenID をサポートする方法について説明します。

ここでは、次の内容について学習します。

• WebMatrix のスターター サイト テンプレートを使用するときに、他のサイトからのログインを有効にする方法。

これは、次の記事で紹介した ASP.NET 機能です。

• OAuthWebSecurity ヘルパー。

チュートリアルで使用するソフトウェアのバージョン

• ASP.NET Web ページ (Razor) 2
• WebMatrix 3

ASP.NET Web ページには、OAuth プロバイダーと OpenID プロバイダーのサポートが含まれています。 これらのプロバイダーを使用すれば、ユーザーは Facebook、Twitter、Microsoft、Google の既存の資格情報を使用してサイトにログインすることができます。 たとえば、Facebook アカウントを使用してログインする場合、ユーザーは Facebook アイコンを選択するだけで Facebook ログイン ページにリダイレクトされ、そこでユーザー情報を入力することができます。 その後、ユーザーは Facebook ログインをサイト上の自分のアカウントに関連付けることができます。 Web ページのメンバーシップ機能に関連する拡張機能により、ユーザーは複数のログイン (ソーシャル ネットワーク サイトからのログインを含む) を Web サイト上の 1 つのアカウントに関連付けることができます。

この画像は、スターター サイト テンプレートのログイン ページを示しています。ユーザーはこのページで Facebook、Twitter、Google または Microsoft のアイコンを選択して、外部アカウントでのログインを有効にすることができます。

OAuth および OpenID メンバーシップを有効にするには、スターター サイト テンプレートで数行のコードをコメント解除します。 OAuth プロバイダーと OpenID プロバイダーを操作するために使用するメソッドとプロパティは、WebMatrix.Security.OAuthWebSecurity クラスにあります。 スターター サイト テンプレートには、ログイン ページ、メンバーシップ データベース、ローカル資格情報または別のサイトの資格情報のいずれを使用してもユーザーがサイトにログインできるようにするために必要なすべてのコードを備えた完全なメンバーシップ インフラストラクチャが含まれています。

このセクションでは、ユーザーが外部サイトからスターター サイト テンプレートに基づくサイトにログインできるようにする方法の例を示します。 スターター サイトを作成したら、次の操作を行います (詳細を以下に示します)。

• OAuth プロバイダー (Facebook、Twitter、Microsoft) を使用するサイトの場合は、外部サイトでアプリケーションを作成します。 そうすることで、これらのサイトのログイン機能を呼び出すために必要なアプリケーション キーが得られます。

• OpenID プロバイダー (Google) を使用するサイトの場合、アプリケーションを作成する必要はありません。 これらのサイトすべてについて、ログインして開発者アプリケーションを作成するには、アカウントが必要です。

  Note

  Microsoft アプリケーションは、稼働中の Web サイトのライブ URL のみを受け入れるため、ログインのテストにローカル Web サイトの URL を使用することはできません。

• 適切な認証プロバイダーを指定し、使用するサイトにログインを送信するために、Web サイト内のいくつかのファイルを編集します。

この記事では、次のタスクの手順を個別に説明します。

• Google ログインの有効化
• Facebook ログインの有効化
• Twitter ログインの有効化

Google ログインの有効化

1. WebMatrix のスターター サイト テンプレートに基づく ASP.NET Web ページ サイトを作成するか、開きます。

2. _AppStart.cshtml ページを開き、次のコード行のコメントを解除します。

   OAuthWebSecurity.RegisterGoogleClient();
   

Google ログインのテスト

1. サイトの default.cshtml ページを実行し、[ログイン] ボタンを選択します。

2. [ログイン] ページの [別のサービスを使用してログインする] セクションで、Google または Yahoo の送信ボタンを選択します。 この例では、Google ログインを使用します。

   Web ページは、要求を Google ログイン ページにリダイレクトします。

   

3. 既存の Google アカウントの資格情報を入力します。

4. Localhost にアカウントからの情報の使用を許可するかどうかを確認するメッセージが Google で表示されたら、[許可] をクリックします。

   このコードでは、Google トークンを使用してユーザーを認証し、Web サイトのこのページに戻ります。 このページでは、ユーザーが Google ログインを Web サイト上の既存のアカウントに関連付けたり、サイトに新しいアカウントを登録して外部ログインを関連付けたりすることができます。

   

5. [関連付け] ボタンを選択します。 ブラウザーがアプリケーションのホーム ページに戻ります。

Facebook ログインの有効化

1. Facebook 開発者向けサイトに移動します (まだログインしていない場合はログインします)。

2. [新しいアプリの作成] ボタンを選択し、プロンプトに従って、名前を付けて新しいアプリケーションを作成します。

3. [アプリを Facebook と統合する方法を選択する] セクションで、[Web サイト] セクションを選択します。

4. [サイトの URL] フィールドにサイトの URL を入力します (例: http://www.example.com)。 [ドメイン] フィールドは省略可能です。これを使用して、ドメイン全体 (example.com など) の認証を提供できます。

   Note

   ローカル コンピューター上で http://localhost:12345 (数字はローカル ポート番号) のような URL を持つサイトを実行している場合は、サイトをテストするためにこの値を [サイトの URL] フィールドに追加することができます。 ただし、ローカル サイトのポート番号が変更されるたびに、アプリケーションの [サイトの URL] フィールドを更新する必要があります。

5. [変更の保存] ボタンを選択します。

6. [アプリ] タブをもう一度選択し、アプリケーションのスタート ページを表示します。

7. アプリケーションのアプリ ID とアプリ シークレットの値をコピーし、一時テキスト ファイルに貼り付けます。 これらの値は、Web サイトのコードで Facebook プロバイダーに渡されます。

8. Facebook 開発者向けサイトを終了します。

次に、ユーザーが自分の Facebook アカウントを使用してサイトにログインできるように、Web サイトの 2 つのページに変更を加えます。

1. WebMatrix のスターター サイト テンプレートに基づく ASP.NET Web ページ サイトを作成するか、開きます。

2. _AppStart.cshtml ページを開き、Facebook OAuth プロバイダーのコードのコメントを解除します。 コメント解除されたコード ブロックは次のようになります。

   OAuthWebSecurity.RegisterFacebookClient(
           appId: "",
           appSecret: "");
   

3. Facebook アプリケーションからアプリ ID の値を appId パラメーターの値 (引用符内) としてコピーします。

4. Facebook アプリケーションからアプリ シークレットの値を appSecret パラメーター値としてコピーします。

5. ファイルを保存して閉じます。

Facebook ログインのテスト

1. サイトの default.cshtml ページを実行し、[ログイン] ボタンを選択します。

2. [ログイン] ページの [別のサービスを使用してログインする] セクションで、Facebook アイコンを選択します。

   Web ページは、要求を Facebook ログイン ページにリダイレクトします。

   

3. Facebook アカウントにログインします。

   このコードでは、Facebook トークンを使用してユーザーを認証し、Facebook ログインをサイトのログインに関連付けられるページに戻ります。 ユーザー名またはメール アドレスがフォームの [Email] フィールドに入力されます。

   

4. [関連付け] ボタンを選択します。

   ブラウザーがホーム ページに戻り、ログインした状態になります。

Twitter ログインの有効化

1. Twitter 開発者向けサイトにアクセスします。

2. [アプリの作成] リンクを選択し、サイトにログインします。

3. [アプリケーションの作成] フォームで、[名前] フィールドと [説明] フィールドに入力します。

4. [WebSite] フィールドにサイトの URL (例: http://www.example.com) を入力します。

   Note

   サイトを (http://localhost:12345 のような URL を使用して) ローカルでテストしている場合、Twitter は URL を受け入れない可能性があります。 ただし、ローカル ループバック IP アドレス (例: http://127.0.0.1:12345) を使用できる可能性があります。 これにより、アプリケーションをローカルでテストするプロセスが簡略化されます。 ただし、ローカル サイトのポート番号が変更されるたびに、アプリケーションの [WebSite] フィールドを更新する必要があります。

5. ユーザーが Twitter にログインした後に戻ってくる Web サイト内のページの URL を [コールバック URL] フィールドに入力します。 たとえば、(ユーザーのログイン状態を認識する) スターター サイトのホーム ページにユーザーを移動させるには、[WebSite] フィールドに入力したものと同じ URL を入力します。

6. 使用条件に同意し、[Twitter アプリケーションの作成] ボタンを選択します。

7. [マイ アプリケーション] ランディング ページで、作成したアプリケーションを選択します。

8. [詳細] タブで一番下までスクロールし、[マイ アクセス トークンの作成] ボタンを選択します。

9. [詳細] タブで、アプリケーションのコンシューマー キーとコンシューマー シークレットの値をコピーし、一時テキスト ファイルに貼り付けます。 これらの値は、Web サイトのコードで Twitter プロバイダーに渡されます。

10. Twitter サイトを終了します。

次に、ユーザーが自分の Twitter アカウントを使用してサイトにログインできるように、Web サイトの 2 つのページに変更を加えます。

1. WebMatrix のスターター サイト テンプレートに基づく ASP.NET Web ページ サイトを作成するか、開きます。

2. _AppStart.cshtml ページを開き、Twitter OAuth プロバイダーのコードのコメントを解除します。 コメント解除されたコード ブロックは次のようになります。

   OAuthWebSecurity.RegisterTwitterClient(
           consumerKey: "",
           consumerSecret: "");
   

3. Twitter アプリケーションからコンシューマー キーの値を consumerKey パラメーターの値 (引用符内) としてコピーします。

4. Twitter アプリケーションからコンシューマー シークレットの値を consumerSecret パラメーターの値としてコピーします。

5. ファイルを保存して閉じます。

Twitter ログインのテスト

1. サイトの default.cshtml ページを実行し、[ログイン] ボタンを選択します。

2. [ログイン] ページの [別のサービスを使用してログインする] セクションで、Twitter アイコンを選択します。

   Web ページは、作成したアプリケーションの Twitter ログイン ページに要求をリダイレクトします。

   

3. Twitter アカウントにログインします。

4. このコードでは、Twitter トークンを使用してユーザーを認証し、ログインを Web サイト アカウントに関連付けられるページに戻ります。 名前またはメール アドレスがフォームの [Email] フィールドに入力されます。

   

5. [関連付け] ボタンを選択します。

   ブラウザーがホーム ページに戻り、ログインした状態になります。

その他のリソース

• サイト全体の動作をカスタマイズする
• ASP.NET Web ページ サイトへのセキュリティとメンバーシップの追加