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

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

このチュートリアルでは、ユーザーに有効にする方法、Twitter アカウントでサインインで作成されたサンプルの ASP.NET Core 2.0 プロジェクトを使用して、前のページします。This tutorial shows you how to enable your users to sign in with their Twitter account using a sample ASP.NET Core 2.0 project created on the previous page.

Twitter でアプリケーションを作成します。Create the app in Twitter

  • 移動します https://apps.twitter.com/ してサインインします。Navigate to https://apps.twitter.com/ and sign in. Twitter アカウントがない場合は、使用、 今すぐサインアップ リンクを作成します。If you don't already have a Twitter account, use the Sign up now link to create one. サインインした後、アプリケーション管理ページが表示されます。After signing in, the Application Management page is shown:

    Microsoft Edge で開いている twitter アプリケーションの管理

  • タップCreate New Appアプリケーション記入と名前説明とパブリックweb サイトURI (このことは一時的なものまで、ドメイン名を登録)。Tap Create New App and fill out the application Name, Description and public Website URI (this can be temporary until you register the domain name):

    アプリケーション ページを作成します。

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

    注意

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

  • フォームの残りの部分を入力し、タップTwitter アプリケーションを作成です。Fill out the rest of the form and tap Create your Twitter application. 新しいアプリケーションの詳細が表示されます。New application details are displayed:

    [アプリケーション] ページの [詳細] タブ

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

Twitter ConsumerKey ConsumerSecret を格納します。Storing Twitter ConsumerKey and ConsumerSecret

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

これらのトークンで確認できます、 Keys and Access Tokens新しい Twitter アプリケーションを作成した後タブ。These tokens can be found on the Keys and Access Tokens tab after creating your new Twitter application:

キーとアクセス トークン タブ

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

このチュートリアルで使用するプロジェクト テンプレートによりMicrosoft.AspNetCore.Authentication.Twitterパッケージが既にインストールされています。The project template used in this tutorial ensures that Microsoft.AspNetCore.Authentication.Twitter package is already installed.

  • 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.Twitter

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

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

services.AddAuthentication().AddTwitter(twitterOptions =>
{
    twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];
    twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
});

呼び出し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 => { ... });

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

app.UseTwitterAuthentication(new TwitterOptions()
{
    ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"],
    ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"]
});

参照してください、 TwitterOptions Twitter 認証でサポートされる構成オプションの詳細について、API リファレンス。See the TwitterOptions API reference for more information on configuration options supported by Twitter authentication. これは、ユーザーに関するさまざまな情報を要求を使用できます。This can be used to request different information about the user.

Sign in with TwitterSign in with Twitter

アプリケーションを実行し、をクリックしてログインします。Run your application and click Log in. Twitter でサインインするためのオプションが表示されます。An option to sign in with Twitter appears:

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

クリックするとTwitter認証の Twitter にリダイレクトします。Clicking on Twitter redirects to Twitter for authentication:

Twitter 認証ページ

Twitter の資格情報を入力した後、電子メールを設定する web サイトにリダイレクトされます。After entering your Twitter credentials, you are redirected back to the web site where you can set your email.

これで、Twitter の資格情報を使用してをログインしています。You are now logged in using your Twitter 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 will 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

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

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

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