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

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

このチュートリアルでは、サンプルの ASP.NET Core 2.0 プロジェクトが作成を使用して、Google + アカウントでサインインするユーザーを有効にする方法、前のページします。This tutorial shows you how to enable your users to sign in with their Google+ account using a sample ASP.NET Core 2.0 project created on the previous page. まず、次の公式手順Google API コンソールで新しいアプリを作成します。We start by following the official steps to create a new app in Google API Console.

Google API コンソールで、アプリを作成します。Create the app in Google API Console

Google API コンソール

  • リダイレクトされますAPI Manager ライブラリページ。You are redirected to API Manager Library page:

API Manager ライブラリのページを読み込む

  • タップ作成を入力し、プロジェクト名:Tap Create and enter your Project name:

[新しいプロジェクト] ダイアログ

  • ダイアログを受け入れた場合、新しいアプリの機能を選択できるようにライブラリ ページにリダイレクトされます。After accepting the dialog, you are redirected back to the Library page allowing you to choose features for your new app. 検索Google + APIリストを API 機能を追加するには、そのリンクをクリックします。Find Google+ API in the list and click on its link to add the API feature:

API Manager ライブラリ ページで"Google + API"を検索します。

  • 新しく追加された API のページが表示されます。The page for the newly added API is displayed. タップを有効にする機能で、アプリに Google + 記号を追加します。Tap Enable to add Google+ sign in feature to your app:

Google + API の API マネージャー ページを読み込む

  • API を有効にした後は、タップ資格情報を作成シークレットを構成します。After enabling the API, tap Create credentials to configure the secrets:

Google + API の API マネージャー ページで資格情報 ボタンを作成します。

  • 選択するオプションChoose:
    • Google+ APIGoogle+ API
    • Web サーバー (例: node.js、Tomcat)Web server (e.g. node.js, Tomcat), and
    • ユーザー データ:User data:

API マネージャーの資格情報 ページ:必要なパネルをどのような種類の資格情報をご確認ください。

  • タップどのような資格情報が必要ですか? アプリの構成の 2 番目の手順に移動するOAuth 2.0 クライアント ID を作成:Tap What credentials do I need? which takes you to the second step of app configuration, Create an OAuth 2.0 client ID:

API マネージャーの資格情報 ページ:OAuth 2.0 クライアント ID を作成します。

  • 1 つの機能 (サインイン)、同じ入力で Google + プロジェクトを作成するため名前としてプロジェクトを使用した OAuth 2.0 クライアントの id。Because we are creating a Google+ project with just one feature (sign in), we can enter the same Name for the OAuth 2.0 client ID as the one we used for the project.

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

注意

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

  • Tab キーを追加する、承認済みのリダイレクト Uriエントリ。Press TAB to add the Authorized redirect URIs entry.

  • タップクライアント ID の作成、3 番目の手順に移動する 、OAuth 2.0 同意画面設定:Tap Create client ID, which takes you to the third step, Set up the OAuth 2.0 consent screen:

API マネージャーの資格情報 ページ:OAuth 2.0 同意画面を設定します。

  • 入力、パブリックを対象に電子メール アドレス製品名Google + にサインインするユーザーを要求するときに、アプリに表示します。Enter your public facing Email address and the Product name shown for your app when Google+ prompts the user to sign in. 追加のオプションが 利用可能なその他のカスタマイズ オプションします。Additional options are available under More customization options.

  • タップ続行最後の手順を続行する資格情報をダウンロード:Tap Continue to proceed to the last step, Download credentials:

API マネージャーの資格情報 ページ:資格情報をダウンロードします。

  • タップダウンロードアプリケーションのシークレットの JSON ファイルを保存して完了新しいアプリの作成を完了します。Tap Download to save a JSON file with application secrets, and Done to complete creation of the new app.

  • サイトをデプロイするときに、再アクセスする必要があります、 Google コンソールし、新しいパブリック url を登録します。When deploying the site you'll need to revisit the Google Console and register a new public url.

ストア Google ClientID と ClientSecretStore Google ClientID and ClientSecret

Google のような機密性の高い設定リンクClient IDClient Secretアプリケーションの構成を使用して、 Secret Managerします。Link sensitive settings like Google Client ID and Client Secret to your application configuration using the Secret Manager. このチュートリアルの目的で、名前トークンAuthentication:Google:ClientIdAuthentication:Google:ClientSecretします。For the purposes of this tutorial, name the tokens Authentication:Google:ClientId and Authentication:Google:ClientSecret.

前の手順でダウンロードした JSON ファイルでこれらのトークンの値が見つかりますweb.client_idweb.client_secretします。The values for these tokens can be found in the JSON file downloaded in the previous step under web.client_id and web.client_secret.

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

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

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

services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];
    googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
});

呼び出しAddIdentityスキームの既定の設定を構成します。The call to AddIdentity 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.Googleパッケージがインストールされています。The project template used in this tutorial ensures that Microsoft.AspNetCore.Authentication.Google package is 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.Google

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

app.UseGoogleAuthentication(new GoogleOptions()
{
    ClientId = Configuration["Authentication:Google:ClientId"],
    ClientSecret = Configuration["Authentication:Google:ClientSecret"]
});

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

Google のサインインSign in with Google

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

Microsoft Edge で実行されている web アプリケーション:ユーザーが認証されていません。

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

Google 認証のダイアログ ボックス

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

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

Microsoft Edge で実行されている 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

  • 表示された場合、403 (Forbidden)開発モード (または同じエラーでデバッガーを中断) で実行していることを確認すると、独自のアプリからのエラー ページGoogle + APIが有効になって、 API Manager ライブラリ記載されている手順に従ってこのページで以前します。If you receive a 403 (Forbidden) error page from your own app when running in development mode (or break into the debugger with the same error), ensure that Google+ API has been enabled in the API Manager Library by following the steps listed earlier on this page. サインインが機能しないすべてのエラー通知が届かない場合は、問題をデバッグしやすくする開発モードに切り替えます。If the sign in doesn't work and you aren't getting any errors, switch to development mode to make the issue easier to debug.
  • 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

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

  • リセットする必要があります、web サイトを Azure web アプリを発行すると、 ClientSecret Google API コンソールでします。Once you publish your web site to Azure web app, you should reset the ClientSecret in the Google API Console.

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