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

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

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

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

  1. Facebook Developers の Web サイトに移動し、Facebook アカウントの資格情報でサインインします。Navigate to the Facebook Developers website and sign-in with your Facebook account credentials.

  2. (オプション) 開発者向けの Facebook アカウントを持っていない場合は、 [Get Started](作業開始) をクリックして登録の手順に従います。(Optional) If you don't have a Facebook for Developers account, click Get Started and follow the registration steps.

  3. [マイアプリ] > [新しいアプリの追加] をクリックします。Click My Apps > Add New App.

  4. [Display Name] (表示名) に、アプリの一意の名前を入力します。In Display Name, type a unique name for your app. 連絡先の電子メールを指定してから、 [Create App ID] (アプリ ID の作成) をクリックし、セキュリティ チェックを完了します。Also provide your Contact Email, and then click Create App ID and complete the security check. これで、新しい Facebook アプリケーションの開発者向けダッシュボードに移動します。This takes you to the developer dashboard for your new Facebook app.

  5. [ダッシュ ボード] > [Facebook ログイン] > [設定] > [Web] をクリックします。Click Dashboard > Facebook Login > Set up > Web.

  6. 左側のナビゲーションで、 [Facebook ログイン] をクリックして [設定] をクリックします。In the left-hand navigation under Facebook Login, click Settings.

  7. [有効な OAuth リダイレクト URI] に、https://<app-name>.azurewebsites.net/.auth/login/facebook/callback と入力し、 <app-name> を Azure App Service アプリの名前に置き換えます。In Valid OAuth redirect URIs, type https://<app-name>.azurewebsites.net/.auth/login/facebook/callback and replace <app-name> with the name of your Azure App Service app. [変更を保存] をクリックします。Click Save Changes.

  8. 左側のナビゲーションで、 [Settings] (設定) > [Basic] (基本) をクリックします。In the left-hand navigation, click Settings > Basic. [App Secret] フィールドで、 [表示] をクリックします。On the App Secret field, click Show. [アプリ ID][App Secret] の値をコピーします。Copy the values of App ID and App Secret. 後で App Service アプリを Azure 内で構成するときにこれらの値を使用します。You use these later to configure your App Service app in Azure.

    重要

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

  9. アプリケーションの登録に使用した Facebook アカウントがアプリケーションの管理者になります。The Facebook account which was used to register the application is an administrator of the app. この時点では、管理者のみがこのアプリケーションにサインインできます。At this point, only administrators can sign into this application. 他の Facebook アカウントを認証するには、 [アプリのレビュー] をクリックし、 [<<アプリ名> をパブリックにする] を有効にして、Facebook 認証を使用した汎用パブリック アクセスを有効にします。To authenticate other Facebook accounts, click App Review and enable Make <your-app-name> public to enable general public access using Facebook authentication.

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

  1. Azure portal にサインインし、ご自身の App Service アプリに移動します。Sign in to the Azure portal and navigate to your App Service app. [設定] > [認証/承認] の順にクリックし、 [App Service 認証][オン] になっていることを確認します。Click Settings > Authentication / Authorization, and make sure that App Service Authentication is On.

  2. [Facebook] をクリックし、前の手順で取得したアプリ ID とアプリケーション シークレットの値を貼り付けます。必要に応じて、アプリケーションで必要なスコープを有効にし、 [OK] をクリックします。Click Facebook, paste in the App ID and App Secret values which you obtained previously, optionally enable any scopes needed by your application, 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.

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

  4. 認証の構成が終了したら、 [保存] をクリックします。When done configuring authentication, click Save.

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