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

作成者: Valeriy NovytskyyRick AndersonBy Valeriy Novytskyy and Rick Anderson

コード例で、このチュートリアルで作成されたサンプルの ASP.NET Core 2.0 プロジェクトを使用して自分の Facebook アカウントでサインインするユーザーを有効にする方法を示しています、前のページします。This tutorial with code examples shows how to enable your users to sign in with their Facebook account using a sample ASP.NET Core 2.0 project created on the previous page. まず Facebook アプリケーションの ID の作成を公式手順します。We start by creating a Facebook App ID by following the official steps.

Facebook で、アプリを作成します。Create the app in Facebook

  • 移動し、 Facebook Developers アプリページし、サインインします。Navigate to the Facebook Developers app page and sign in. Facebook アカウントがない場合は、使用、 Facebook にサインアップを作成するログイン ページのリンク。If you don't already have a Facebook account, use the Sign up for Facebook link on the login page to create one.

  • タップして、新しいアプリの追加新しいアプリ ID を作成する右上隅にあるボタンをクリックします。Tap the Add a New App button in the upper right corner to create a new App ID.

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

  • フォームに入力し、タップ、 Create App IDボタンをクリックします。Fill out the form and tap the Create App ID button.

    アプリ ID の新しいフォームを作成します。

  • 製品を選択] ページで [セットアップ上、 Facebook ログインカード。On the Select a product page, click Set Up on the Facebook Login card.

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

  • クイック スタート使用してウィザードを起動プラットフォームを選択して最初のページとして。The Quickstart wizard will launch with Choose a Platform as the first page. ここでは、ウィザードをクリックしてバイパス、設定左側のメニューのリンク。Bypass the wizard for now by clicking the Settings link in the menu on the left:

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

  • 表示されます、クライアント OAuth 設定ページ。You are presented with the Client OAuth Settings page:

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

  • 開発 URI を入力と /signin-facebookに追加されます、有効な OAuth リダイレクト Uriフィールド (例: https://localhost:44320/signin-facebook)。Enter your development URI with /signin-facebook appended into the Valid OAuth Redirect URIs field (for example: https://localhost:44320/signin-facebook). このチュートリアルの後半で構成されている Facebook 認証の要求では自動的に処理 /signin-facebook OAuth フローを実装するルート。The Facebook authentication configured later in this tutorial will automatically handle requests at /signin-facebook route to implement the OAuth flow.

注意

URI /signin-facebook Facebook の認証プロバイダーの既定のコールバックとして設定されます。The URI /signin-facebook is set as the default callback of the Facebook authentication provider. 既定のコールバック URI を変更するには、継承を使用して、Facebook の認証ミドルウェアを構成するときにRemoteAuthenticationOptions.CallbackPathのプロパティ、 FacebookOptionsクラス。You can change the default callback URI while configuring the Facebook authentication middleware via the inherited RemoteAuthenticationOptions.CallbackPath property of the FacebookOptions class.

  • クリックして変更を保存します。Click Save Changes.

  • クリックして設定 > 基本的な左側のナビゲーション リンク。Click Settings > Basic link in the left navigation.

    このページで、メモしてをおきます、App IDApp Secretします。On this page, make a note of your App ID and your App Secret. 次のセクションでは、両方に、ASP.NET Core アプリケーションを追加します。You will add both into your ASP.NET Core application in the next section:

  • サイトをデプロイするときに再アクセスする必要があります、 Facebook ログインセットアップ ページと、新しいパブリック URI を登録します。When deploying the site you need to revisit the Facebook Login setup page and register a new public URI.

Facebook アプリケーションの ID とアプリ シークレットを格納します。Store Facebook App ID and App Secret

Facebook などの機密設定をリンクApp IDApp Secretアプリケーションの構成を使用して、 Secret Managerします。Link sensitive settings like Facebook App ID and App Secret to your application configuration using the Secret Manager. このチュートリアルの目的で、名前トークンAuthentication:Facebook:AppIdAuthentication:Facebook:AppSecretします。For the purposes of this tutorial, name the tokens Authentication:Facebook:AppId and Authentication:Facebook:AppSecret.

環境変数内で階層キーを操作する場合、コロン区切り (:) がすべてのプラットフォームでは機能しない場合があります (Bash など)。When working with hierarchical keys in environment variables, a colon separator (:) may not work on all platforms (for example, Bash). 二重のアンダースコア (__) はすべてのプラットフォームでサポートされ、コロンに置換されます。A double underscore (__) is supported by all platforms and is replaced by a colon.

安全に保存するには、次のコマンドを実行App IDApp Secretシークレット マネージャーを使用します。Execute the following commands to securely store App ID and App Secret using Secret Manager:

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

Facebook 認証を構成します。Configure Facebook Authentication

Facebook のサービスを追加、ConfigureServicesメソッドで、 Startup.csファイル。Add the Facebook service in the ConfigureServices method in the Startup.cs file:

services.AddDefaultIdentity<IdentityUser>()
        .AddDefaultUI(UIFramework.Bootstrap4)
        .AddEntityFrameworkStores<ApplicationDbContext>();

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

呼び出しAddDefaultIdentityスキームの既定の設定を構成します。The call to AddDefaultIdentity configures the default scheme settings. AddAuthentication(String)オーバー ロードのセット、プロパティ。The AddAuthentication(String) overload sets the DefaultScheme property. AddAuthentication (アクション<AuthenticationOptions>)オーバー ロードでは、さまざまな目的の既定の認証方式を設定するために使用できる認証オプションを構成できます。The AddAuthentication(Action<AuthenticationOptions>) overload allows configuring authentication options, which can be used to set up default authentication schemes for different purposes. 後続の呼び出しAddAuthentication以前に構成された上書きAuthenticationOptionsプロパティ。Subsequent calls to AddAuthentication override previously configured AuthenticationOptions properties.

AuthenticationBuilder認証スキームあたり 1 回に呼び出されますのみ認証ハンドラーを登録する拡張メソッドも可能性があります。AuthenticationBuilder extension methods that register an authentication handler may only be called once per authentication scheme. オーバー ロードが存在するスキーマ名と、スキームのプロパティの構成を許可して、表示名。Overloads exist that allow configuring the scheme properties, scheme name, and display name.

複数の認証プロバイダーMultiple authentication providers

アプリが複数のプロバイダーを必要とする場合、AddAuthentication の背後にあるプロバイダーの拡張メソッドをチェインします。When the app requires multiple providers, chain the provider extension methods behind AddAuthentication:

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

インストール、 Microsoft.AspNetCore.Authentication.Facebookパッケージ。Install the Microsoft.AspNetCore.Authentication.Facebook package.

  • Visual Studio 2017 では、このパッケージをインストールするには、クリックし、プロジェクトを右クリックしNuGet パッケージの管理します。To install this package with Visual Studio 2017, right-click on the project and select Manage NuGet Packages.

  • で .NET Core CLI をインストールするには、プロジェクト ディレクトリで、次を実行します。To install with .NET Core CLI, execute the following in your project directory:

    dotnet add package Microsoft.AspNetCore.Authentication.Facebook

Facebook ミドルウェアを追加、ConfigureメソッドStartup.csファイル。Add the Facebook middleware in the Configure method in Startup.cs file:

app.UseFacebookAuthentication(new FacebookOptions()
{
    AppId = Configuration["Authentication:Facebook:AppId"],
    AppSecret = Configuration["Authentication:Facebook:AppSecret"]
});

参照してください、 FacebookOptions Facebook 認証でサポートされる構成オプションの詳細について、API リファレンス。See the FacebookOptions API reference for more information on configuration options supported by Facebook authentication. 構成オプションを使用できます。Configuration options can be used to:

  • ユーザーに関するさまざまな情報を要求します。Request different information about the user.
  • ログイン エクスペリエンスをカスタマイズするクエリ文字列引数を追加します。Add query string arguments to customize the login experience.

Facebook のサインインSign in with Facebook

アプリケーションを実行し、をクリックしてログインします。Run your application and click Log in. Facebook でサインインするオプションが表示されます。You see an option to sign in with Facebook.

Web アプリケーション:ユーザーが認証されていません。

クリックするとFacebook認証に Facebook にリダイレクトされます。When you click on Facebook, you are redirected to Facebook for authentication:

Facebook 認証ページ

Facebook の認証は、既定では、パブリック プロファイルと電子メール アドレスを要求します。Facebook authentication requests public profile and email address by default:

Facebook 認証ページの同意画面

Facebook の資格情報を入力すると、電子メールを設定するサイトにリダイレクトされます。Once you enter your Facebook credentials you are redirected back to your site where you can set your email.

Facebook の資格情報を使用してログインしました。You are now logged in using your Facebook credentials:

Web アプリケーション:認証されたユーザー

プロキシまたはロード バランサーによる要求情報の転送Forward request information with a proxy or load balancer

アプリがプロキシ サーバーまたはロード バランサーの背後に展開されると、元の要求情報の一部が要求ヘッダー内でアプリに転送される場合があります。If the app is deployed behind a proxy server or load balancer, some of the original request information might be forwarded to the app in request headers. 通常、この情報にはセキュアな要求スキーム (https)、ホスト、およびクライアント IP アドレスが含まれます。This information usually includes the secure request scheme (https), host, and client IP address. アプリでは、これらの要求ヘッダーを自動的に読み取って、元の要求情報を検出して使用することはありません。Apps don't automatically read these request headers to discover and use the original request information.

スキームは、外部プロバイダーによる認証フローに影響を及ぼすリンクの生成に使用されます。The scheme is used in link generation that affects the authentication flow with external providers. セキュアなスキーム (https) が失われると、アプリでは、安全ではない不正なリダイレクト URL が生成されます。Losing the secure scheme (https) results in the app generating incorrect insecure redirect URLs.

Forwarded Headers Middleware を使用して、アプリが要求を処理する際に元の要求情報を利用できるようにします。Use Forwarded Headers Middleware to make the original request information available to the app for request processing.

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

トラブルシューティングTroubleshooting

  • ASP.NET Core 2.x のみ。 ユーザーが呼び出すことによって構成されていない場合services.AddIdentityConfigureServices、認証を試みるがArgumentException:'SignInScheme' オプションを指定する必要がありますします。ASP.NET Core 2.x only: If Identity isn't configured by calling services.AddIdentity in ConfigureServices, attempting to authenticate will result in ArgumentException: The 'SignInScheme' option must be provided. このチュートリアルで使用するプロジェクト テンプレートによりこれが行われるようになります。The project template used in this tutorial ensures that this is done.
  • 取得する場合は、初期移行を適用することで、サイト データベースが作成されていない要求の処理中にデータベース操作が失敗しましたエラー。If the site database has not been created by applying the initial migration, you get A database operation failed while processing the request error. タップ適用移行データベースを作成し、エラーを引き続き更新します。Tap Apply Migrations to create the database and refresh to continue past the error.

次の手順Next steps

  • 追加、 Microsoft.AspNetCore.Authentication.Facebook高度な Facebook の認証シナリオには、プロジェクトに NuGet パッケージ。Add the Microsoft.AspNetCore.Authentication.Facebook NuGet package to your project for advanced Facebook authentication scenarios. このパッケージは、アプリで Facebook 外部ログイン機能を統合する必要はありません。This package isn't required to integrate Facebook external login functionality with your app.

  • この記事では、Facebook を認証する方法を示しました。This article showed how you can authenticate with Facebook. 記載されているその他のプロバイダーで認証する同様のアプローチを利用できる、前のページします。You can follow a similar approach to authenticate with other providers listed on the previous page.

  • リセットする必要があります、web サイトを Azure web アプリを発行すると、 AppSecret Facebook 開発者ポータルでします。Once you publish your web site to Azure web app, you should reset the AppSecret in the Facebook developer portal.

  • 設定、Authentication:Facebook:AppIdAuthentication:Facebook:AppSecretとして、Azure portal でアプリケーションの設定。Set the Authentication:Facebook:AppId and Authentication:Facebook:AppSecret as application settings in the Azure portal. 構成システムは、環境変数からキーの読み取りを設定します。The configuration system is set up to read keys from environment variables.