ASP.NET Core での Facebook 外部ログインセットアップ

作成者: Valeriy NovytskyyRick Anderson

このチュートリアルでは、前のページで作成したサンプル ASP.NET Core 3.0 プロジェクトを使用して、ユーザーが Facebook アカウントでサインインできるようにする方法を示します。 まず、 正式な手順に従って FACEBOOK アプリ ID を作成します。

Facebook でアプリを作成する

  • AspNetCore NuGet パッケージをプロジェクトに追加します。

  • Facebook 開発者アプリのページに移動し、サインインします。 まだ Facebook アカウントを持っていない場合は、ログインページの [ facebook へのサインアップ ] リンクを使用して作成します。 Facebook アカウントを作成したら、手順に従って Facebook 開発者として登録します。

  • [マイアプリ] メニューで、[アプリの作成] を選択して新しいアプリ ID を作成します。

    開発者向け Facebook ポータルを Microsoft Edge で開く

  • フォームに入力し、[ アプリ ID の作成 ] ボタンをタップします。

    新しいアプリ ID フォームを作成する

  • 新しいアプリカードで、[ 製品の追加] を選択します。 Facebook ログイン カードで、 [セットアップ] をクリックし ます。

    製品のセットアップページ

  • クイックスタート ウィザードが起動し、最初のページとして [プラットフォーム] を選択 します。 ここでウィザードをバイパスするには、左下のメニューで [ FaceBook ログイン****設定] リンクをクリックします。

    スキップクイックスタート

  • [クライアントの OAuth 設定] ページが表示されます。

    [クライアント OAuth 設定] ページ

  • [有効な OAuth リダイレクト uri ] フィールドに /signin-facebook を追加して、開発 URI を入力します (例: https://localhost:44320/signin-facebook )。 このチュートリアルの後半で構成する Facebook 認証は、OAuth フローを実装するために /signin-facebook route で要求を自動的に処理します。

注意

URI /signin-facebook は、facebook 認証プロバイダーの既定のコールバックとして設定されます。 FacebookOptionsクラスの 継承された[remoteauthenticationoptions]プロパティを使用して Facebook 認証ミドルウェアを構成するときに、既定のコールバック URI を変更できます。

  • [変更を保存] をクリックします。

  • 左側のナビゲーションで、[設定の 基本] リンクをクリックします。

このページで、とをメモしておき App ID App Secret ます。 次のセクションでは、両方を ASP.NET Core アプリケーションに追加します。

  • サイトをデプロイするときに、 Facebook ログイン のセットアップページを再表示し、新しいパブリック URI を登録する必要があります。

Facebook アプリ ID とシークレットを保存する

Facebook アプリ ID やシークレット値などの機微な設定を Secret Managerに保存します。 このサンプルでは、次の手順を使用します。

  1. シークレットストレージを有効にする」の手順に従って、シークレットストレージのプロジェクトを初期化します。

  2. 秘密キーとシークレットキーを使用して、機密設定をローカルシークレットストアに保存 Authentication:Facebook:AppIdAuthentication:Facebook:AppSecret ます。

    dotnet user-secrets set "Authentication:Facebook:AppId" "<app-id>"
    dotnet user-secrets set "Authentication:Facebook:AppSecret" "<app-secret>"
    

: の区切り記号は、すべてのプラットフォームの環境変数階層キーには対応していません。 __(ダブルアンダースコア)は、

  • すべてのプラットフォームに対応しています。 たとえば、Bash: の区切り記号には対応していませんが、__ には対応しています。
  • 自動で : に置換されます。

Facebook 認証の構成

スタートアップファイルのメソッドに Facebook サービスを追加し ConfigureServices ます。

services.AddAuthentication().AddFacebook(facebookOptions =>
{
    facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
    facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});

Addauthentication (文字列)オーバーロードは、 defaultschemeプロパティを設定します。 Addauthentication (Action<authenticationoptions>)オーバーロードでは、さまざまな目的で既定の認証方式を設定するために使用できる認証オプションを構成できます。 それ以降のAddAuthentication呼び出しでは、以前に構成されたauthenticationoptionsプロパティがオーバーライドされます。

認証ハンドラーを登録するAuthenticationbuilder拡張メソッドは、認証スキームごとに1回だけ呼び出すことができます。 スキームのプロパティ、スキーム名、および表示名の構成を可能にするオーバーロードが存在します。

Facebook でサインインする

  • アプリを実行し、[ ログイン] を選択します。
  • [ 別のサービスを使用してログインする] で、[Facebook] を選択します。
  • 認証のために Facebook にリダイレクトされます。
  • Facebook の資格情報を入力します。
  • メールを設定できるサイトにリダイレクトされます。

Facebook の資格情報を使用してログインしました。

外部サインインの承認を取り消す React

AccessDeniedPath ユーザーが要求された承認要求を承認しない場合、ユーザーエージェントへのリダイレクトパスを提供できます。

次のコードでは、をに設定してい AccessDeniedPath "/AccessDeniedPathInfo" ます。

services.AddAuthentication().AddFacebook(options =>
{
    options.AppId = Configuration["Authentication:Facebook:AppId"];
    options.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    options.AccessDeniedPath = "/AccessDeniedPathInfo";
});

ページには AccessDeniedPath 次の情報が含まれていることをお勧めします。

  • リモート認証が取り消されました。
  • このアプリには認証が必要です。
  • もう一度サインインを試すには、[ログイン] リンクを選択します。

テスト AccessDeniedPath

  • Facebook.comに移動します。
  • サインインしている場合は、サインアウトする必要があります。
  • アプリを実行し、[Facebook サインイン] を選択します。
  • [ 今後] を選択します。 指定されたページにリダイレクトされ AccessDeniedPath ます。

プロキシまたはロード バランサーによる要求情報の転送

アプリがプロキシ サーバーまたはロード バランサーの背後に展開されると、元の要求情報の一部が要求ヘッダー内でアプリに転送される場合があります。 通常、この情報にはセキュアな要求スキーム (https)、ホスト、およびクライアント IP アドレスが含まれます。 アプリでは、これらの要求ヘッダーを自動的に読み取って、元の要求情報を検出して使用することはありません。

スキームは、外部プロバイダーによる認証フローに影響を及ぼすリンクの生成に使用されます。 セキュアなスキーム (https) が失われると、アプリでは、安全ではない不正なリダイレクト URL が生成されます。

Forwarded Headers Middleware を使用して、アプリが要求を処理する際に元の要求情報を利用できるようにします。

詳細については、「プロキシ サーバーとロード バランサーを使用するために ASP.NET Core を構成する」を参照してください。

複数の認証プロバイダー

アプリが複数のプロバイダーを必要とする場合、AddAuthentication の背後にあるプロバイダーの拡張メソッドをチェインします。

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Facebook 認証でサポートされる構成オプションの詳細については、 FacebookOptions API リファレンスを参照してください。 構成オプションは、次の場合に使用できます。

  • ユーザーに関するさまざまな情報を要求します。
  • クエリ文字列引数を追加して、ログインエクスペリエンスをカスタマイズします。

トラブルシューティング

  • **ASP.NET Core 2.x のみ:**Identityでを呼び出すことによって構成されていない場合 services.AddIdentity ConfigureServices 、認証を試みると ArgumentException が返され ます。 ' SignInScheme ' オプションを指定する必要があり ます。 このチュートリアルで使用するプロジェクトテンプレートによって、この処理が確実に行われます。
  • 初期移行を適用してサイトデータベースが作成されていない場合は、 要求エラーの処理中にデータベース操作が失敗 します。 [ 移行の適用 ] をタップしてデータベースを作成し、更新してエラーを続行します。

次のステップ

  • この記事では、Facebook で認証する方法について説明しました。 同様のアプローチに従って、 前のページに一覧表示されている他のプロバイダーとの認証を行うことができます。

  • Web サイトを Azure web アプリに発行したら、 AppSecret Facebook 開発者ポータルでをリセットする必要があります。

  • とを Authentication:Facebook:AppIdAuthentication:Facebook:AppSecret Azure portal のアプリケーション設定として設定します。 構成システムは、環境変数からキーを読み取るように設定されています。