Facebook ログインを使用するように App Service アプリを構成するConfigure your App Service app to use Facebook login

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

この記事の手順を完了するには、検証済みの電子メール アドレスを持つ Facebook アカウントと携帯電話番号が必要になります。To complete the procedure in this article, you need 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 アカウントの資格情報でサインインします。Go to the Facebook Developers website and sign in with your Facebook account credentials.

    Facebook for Developers アカウントを持っていない場合は、 [スタートガイド] を選択して登録の手順に従います。If you don't have a Facebook for Developers account, select Get Started and follow the registration steps.

  2. [マイアプリ] > [新しいアプリを追加] を選択します。Select My Apps > Add New App.

  3. [表示名] フィールド:In Display Name field:

    1. アプリの一意の名前を入力します。Type a unique name for your app.
    2. [連絡先メールアドレス] を指定します。Provide your Contact Email.
    3. [Create App ID](アプリ ID の作成) を選択します。Select Create App ID.
    4. セキュリティ チェックを完了します。Complete the security check.

    新しい Facebook アプリ用の開発者ダッシュボードが開きます。The developer dashboard for your new Facebook app opens.

  4. [ダッシュボード] > [Facebook ログイン] > [設定] > [ウェブ] を選択します。Select Dashboard > Facebook Login > Set up > Web.

  5. 左側のナビゲーションで、 [Facebook ログイン] の下にある [設定] を選択します。In the left navigation under Facebook Login, select Settings.

  6. [有効な OAuth リダイレクト URI] フィールドに「https://<app-name>.azurewebsites.net/.auth/login/facebook/callback」を入力します。In the Valid OAuth redirect URIs field, enter https://<app-name>.azurewebsites.net/.auth/login/facebook/callback. <app-name> を、ご利用の Azure App Service アプリの名前に置き換えることを忘れないでください。Remember to replace <app-name> with the name of your Azure App Service app.

  7. [変更の保存] を選択します。Select Save Changes.

  8. 左側のウィンドウで、 [設定] > [Basic](ベーシック) を選択します。In the left pane, select Settings > Basic.

  9. [app secret] フィールドで、 [表示] を選択します。In the App Secret field, select Show. [アプリ ID][App Secret] の値をコピーします。Copy the values of App ID and App Secret. 後で App Service アプリを Azure 内で構成するときにこれらの値を使用します。You use them 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.

  10. アプリケーションの登録に使用した Facebook アカウントがアプリケーションの管理者になります。The Facebook account that you used to register the application is an administrator of the app. この時点では、管理者のみがこのアプリケーションにサインインできます。At this point, only administrators can sign in to this application.

    他の Facebook アカウントを認証するには、 [アプリのレビュー] を選択し、 [<アプリ名> をパブリックにする] を有効にして、Facebook 認証を使用することで一般公衆がアクセスできるようにします。To authenticate other Facebook accounts, select App Review and enable Make <your-app-name> public to enable the general public to access the app by 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.

  2. [設定][認証/承認] の順に選択し、 [App Service 認証][オン] になっていることを確認します。Select Settings > Authentication / Authorization, and make sure that App Service Authentication is On.

  3. [Facebook] を選択し、以前に入手したアプリ ID とアプリ シークレットの値を貼り付けます。Select Facebook, and then paste in the App ID and App Secret values that you obtained previously. アプリケーションに必要な任意のスコープを有効にします。Enable any scopes needed by your application.

  4. [OK] を選択します。Select OK.

    モバイル アプリの Facebook 設定のスクリーンショット

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

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

    注意事項

    この方法でのアクセスの制限は、アプリへのすべての呼び出しに適用されますが、これは、多くのシングルページ アプリケーションのように、一般公開されているホーム ページが与えられているアプリには適切でない場合があります。Restricting access in this way applies to all calls to your app, which might not be desirable for apps that have a publicly available home page, as in many single-page applications. このようなアプリケーションの場合は、アプリ自体が手動で認証を開始する、 [匿名要求を許可する (操作不要)] が推奨されることがあります。For such applications, Allow anonymous requests (no action) might be preferred so that the app manually starts authentication itself. 詳細については、「認証フロー」をご覧ください。For more information, see Authentication flow.

  6. [保存] を選択します。Select Save.

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

次のステップ Next steps