Configuración de la aplicación de App Service para usar el inicio de sesión de FacebookHow to configure your App Service application to use Facebook login

En este tema se muestra cómo configurar Azure App Service para usar Facebook como proveedor de autenticación.This topic shows you how to configure Azure App Service to use Facebook as an authentication provider.

Para llevar a cabo el procedimiento descrito en este tema, debe tener una cuenta de Facebook asociada a una dirección de correo electrónico verificada y a un número de teléfono móvil.To complete the procedure in this topic, you must have a Facebook account that has a verified email address and a mobile phone number. Para crear una cuenta de Facebook, vaya a facebook.com.To create a new Facebook account, go to facebook.com.

Registro de la aplicación con Facebook Register your application with Facebook

  1. Desplácese hasta el sitio web para desarrolladores de Facebook e inicie sesión con las credenciales de su cuenta de Facebook.Navigate to the Facebook Developers website and sign-in with your Facebook account credentials.

  2. (Opcional) Si no tiene una cuenta de Facebook for Developers, haga clic en Empezar y siga los pasos de registro.(Optional) If you don't have a Facebook for Developers account, click Get Started and follow the registration steps.

  3. Haga clic en Mis aplicaciones > Agregar una nueva aplicación.Click My Apps > Add New App.

  4. En Nombre para mostrar, escriba un nombre único para la aplicación.In Display Name, type a unique name for your app. Proporcione, también, el Correo electrónico de contacto y, a continuación, haga clic en Create App ID (Crear id. de aplicación) y complete la comprobación de seguridad.Also provide your Contact Email, and then click Create App ID and complete the security check. Esto le llevará al panel del desarrollador de la nueva aplicación de Facebook.This takes you to the developer dashboard for your new Facebook app.

  5. Haga clic en Panel > Inicio de sesión de Facebook > Configurar > Web.Click Dashboard > Facebook Login > Set up > Web.

  6. En el panel de navegación izquierdo, en Inicio de sesión de Facebook, haga clic en Configuración.In the left-hand navigation under Facebook Login, click Settings.

  7. En Valid OAuth redirect URIs (URI de redireccionamiento OAuth válidos), escriba https://<app-name>.azurewebsites.net/.auth/login/facebook/callback y reemplace <app-name> por el nombre de su aplicación de 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. Haga clic en Guardar cambios.Click Save Changes.

  8. En el panel de navegación izquierdo, haga clic en Configuración > Básica.In the left-hand navigation, click Settings > Basic. En el campo Secreto de la aplicación, haga clic en Mostrar.On the App Secret field, click Show. Copie los valores de ID de la aplicación y Secreto de la aplicación.Copy the values of App ID and App Secret. Más adelante los usará para configurar la aplicación de App Service en Azure.You use these later to configure your App Service app in Azure.

    Importante

    El secreto de aplicación es una credencial de seguridad importante,The app secret is an important security credential. No comparta este secreto con nadie ni lo distribuya en una aplicación cliente.Do not share this secret with anyone or distribute it within a client application.

  9. La cuenta de Facebook que se utilizó para registrar la aplicación es un administrador de la aplicación.The Facebook account which was used to register the application is an administrator of the app. En este momento, solo los administradores pueden iniciar sesión en esta aplicación.At this point, only administrators can sign into this application. Para autenticar otras cuentas de Facebook, haga clic en App Review (Revisión de aplicaciones) y habilite Make < public (Hacer pública <nombre-de-su-aplicación>) para habilitar el acceso público general mediante la autenticación de Facebook.To authenticate other Facebook accounts, click App Review and enable Make <your-app-name> public to enable general public access using Facebook authentication.

Agregar información de Facebook a la aplicación Add Facebook information to your application

  1. Inicie sesión en Azure Portal y vaya a la aplicación App Service.Sign in to the Azure portal and navigate to your App Service app. Haga clic en Configuración > Autenticación/autorización y asegúrese de que Autenticación de App Service está Activada.Click Settings > Authentication / Authorization, and make sure that App Service Authentication is On.

  2. Haga clic en Facebook, pegue los valores de Id. de aplicación y Secreto de la aplicación que obtuvo anteriormente, opcionalmente habilite los ámbitos que requiera la aplicación y haga clic en Aceptar.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.

    De forma predeterminada, App Service ofrece autenticación pero no restringe el acceso autorizado al contenido del sitio y a las API.By default, App Service provides authentication but does not restrict authorized access to your site content and APIs. Debe autorizar a los usuarios en el código de la aplicación.You must authorize users in your app code.

  3. (Opcional) Para restringir el acceso al sitio solo a los usuarios autenticados mediante Facebook, en Acción necesaria cuando la solicitud no está autenticada, seleccione 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. Esto requiere que todas las solicitudes se autentiquen y que todas las solicitudes no autenticadas se redirijan a Facebook para la autenticación.This requires that all requests be authenticated, and all unauthenticated requests are redirected to Facebook for authentication.

Precaución

Este método de restricción del acceso se aplica a todas las llamadas a la aplicación, lo que puede no ser deseable para las aplicaciones que necesitan una página de inicio disponible públicamente, como muchas aplicaciones de una sola página.Restricting access in this way applies to all calls to your app, which may not be desirable for apps wanting a publicly available home page, as in many single-page applications. Para tales aplicaciones, puede ser preferible permitir las solicitudes anónimas (sin acción) y que la aplicación inicie manualmente el inicio de sesión, tal como se describe aquí.For such applications, Allow anonymous requests (no action) may be preferred, with the app manually starting login itself, as described here.

  1. Cuando termine de configurar la autenticación, haga clic en Guardar.When done configuring authentication, click Save.

De este modo ya estará listo para usar Facebook para realizar la autenticación en la aplicación.You are now ready to use Facebook for authentication in your app.