Google ログインを使用するように App Service アプリケーションを構成する方法How to configure your App Service application to use Google login

このトピックでは、認証プロバイダーとして Google を使用するように Azure App Services を構成する方法を示します。This topic shows you how to configure Azure App Service to use Google as an authentication provider.

このトピックの手順を完了するには、検証済みの電子メール アドレスを持つ Google アカウントが必要になります。To complete the procedure in this topic, you must have a Google account that has a verified email address. 新しい Google アカウントを作成するには、 accounts.google.comにアクセスしてください。To create a new Google account, go to accounts.google.com.

Google にアプリケーションを登録する Register your application with Google

  1. Azure Portalにログオンし、目的のアプリケーションに移動します。Log on to the Azure portal, and navigate to your application. URL をコピーします。この URL は、後で Google アプリを構成するために使用します。Copy your URL, which you use later to configure your Google app.

  2. Google apis Web サイトに移動して、Google アカウント資格情報でサインインします。 [Create Project (プロジェクトの作成)] をクリックしてプロジェクト名を入力し、 [Create (作成)] をクリックします。Navigate to the Google apis website, sign in with your Google account credentials, click Create Project, provide a Project name, then click Create.

  3. プロジェクトが作成されたら選択します。Once the project is created, select it. プロジェクト ダッシュボードから、 [Go to APIs overview] (API の概要に移動) をクリックします。From the project dashboard, click Go to APIs overview.

  4. [Enable APIs and Services] (API とサービスの有効化) を選択します。Select Enable APIs and services. [Google+ API] を検索し、それを選択します。Search for Google+ API, and select it. [有効] をクリックします。Then click Enable.

  5. 左側のナビゲーションで、 [Credentials (資格情報)] > [OAuth consent screen (OAuth 同意画面)] の順にクリックした後、自分の電子メール アドレスを選択し、製品名を入力して、 [Save (保存)] をクリックします。In the left navigation, Credentials > OAuth consent screen, then select your Email address, enter a Product Name, and click Save.

  6. [Credentials (資格情報)] タブで、 [Create credentials (資格情報の作成)] > [OAuth client ID (OAuth クライアント ID)] の順にクリックします。In the Credentials tab, click Create credentials > OAuth client ID.

  7. [Create client ID] (クライアント ID の作成) 画面で、 [Web application] (Web アプリケーション) を選択します。On the "Create client ID" screen, select Web application.

  8. 前にコピーした App Service の URL[Authorized JavaScript Origins (承認された JavaScript 作成元)] に、リダイレクト URI を [Authorized Redirect URI (承認されたリダイレクト URI)] に貼り付けます。Paste the App Service URL you copied earlier into Authorized JavaScript Origins, then paste your redirect URI into Authorized Redirect URI. リダイレクト URI は、アプリケーションの URL にパス /.auth/login/google/callback を追加したものです。The redirect URI is the URL of your application appended with the path, /.auth/login/google/callback. たとえば、「 https://contoso.azurewebsites.net/.auth/login/google/callback」のように入力します。For example, https://contoso.azurewebsites.net/.auth/login/google/callback. HTTPS スキームを使用していることを確認します。Make sure that you are using the HTTPS scheme. [Create] をクリックします。Then click Create.

  9. 次の画面で、表示されているクライアント ID とクライアント シークレットの値を書き留めます。On the next screen, make a note of the values of the client ID and client secret.

    重要

    クライアント シークレットは、重要なセキュリティ資格情報です。The client secret is an important security credential. このシークレットを他のユーザーと共有したり、クライアント アプリケーション内で配信したりしないでください。Do not share this secret with anyone or distribute it within a client application.

Google の情報をアプリケーションに追加する Add Google information to your application

  1. Azure Portalに戻り、アプリケーションに移動します。Back in the Azure portal, navigate to your application. [設定][認証/承認] の順にクリックします。Click Settings, and then Authentication / Authorization.

  2. [認証/承認] 機能が有効になっていない場合は、スイッチを [オン] に切り替えます。If the Authentication / Authorization feature is not enabled, turn the switch to On.

  3. [Google] にアクセスしてください。Click Google. 前の手順で取得した App ID と App Secret の値を貼り付けます。アプリケーションで必要なスコープを有効にします (省略可能)。Paste in the App ID and App Secret values which you obtained previously, and optionally enable any scopes your application requires. 次に、 [OK] をクリックしますThen click OK.

    App Service は既定では認証を行いますが、サイトのコンテンツと API へのアクセス承認については制限を設けていません。By default, App Service provides authentication but does not restrict authorized access to your site content and APIs. アプリケーション コードでユーザーを承認する必要があります。You must authorize users in your app code.

  4. (省略可能) Google によって認証されたユーザーしかサイトにアクセスできないように制限するには、 [要求が認証されない場合に実行するアクション][Google] に設定します。(Optional) To restrict access to your site to only users authenticated by Google, set Action to take when request is not authenticated to Google. この場合、要求はすべて認証される必要があり、認証されていない要求はすべて認証のために Google にリダイレクトされます。This requires that all requests be authenticated, and all unauthenticated requests are redirected to Google for authentication.

  5. [Save] をクリックします。Click Save.

これで、アプリケーションで認証に Google を使用する準備ができました。You are now ready to use Google for authentication in your app.