Configuración de una aplicación de App Service o Azure Functions para usar el inicio de sesión de FacebookConfigure your App Service or Azure Functions app to use Facebook login

En este artículo se muestra cómo configurar Azure App Service o Azure Functions para usar Facebook como proveedor de autenticación.This article shows how to configure Azure App Service or Azure Functions to use Facebook as an authentication provider.

Para llevar a cabo el procedimiento descrito en este artículo, 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 article, you need 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. Vaya al sitio web para desarrolladores de Facebook e inicie sesión con las credenciales de su cuenta de Facebook.Go to the Facebook Developers website and sign in with your Facebook account credentials.

    Si no tiene una cuenta de Facebook for Developers, seleccione Empezar y siga los pasos de registro.If you don't have a Facebook for Developers account, select Get Started and follow the registration steps.

  2. Seleccione My Apps > Add New App (Mis aplicaciones > Agregar nueva aplicación).Select My Apps > Add New App.

  3. En el campo Display Name (Nombre para mostrar):In Display Name field:

    1. Escriba un nombre único para la aplicación.Type a unique name for your app.
    2. Indique el valor de Contact Email (Correo electrónico de contacto).Provide your Contact Email.
    3. Seleccione Create App ID (Crear identificador de aplicación).Select Create App ID.
    4. Complete la comprobación de seguridad.Complete the security check.

    Se abre el panel del desarrollador de la nueva aplicación de Facebook.The developer dashboard for your new Facebook app opens.

  4. Haga clic en Dashboard > Facebook Login > Set up > Web (Panel > Inicio de sesión de Facebook > Configurar > Web).Select Dashboard > Facebook Login > Set up > Web.

  5. En el panel de navegación izquierdo, en Facebook Login (Inicio de sesión de Facebook), haga clic en Settings (Configuración).In the left navigation under Facebook Login, select Settings.

  6. En el campo Valid OAuth redirect URIs (URI de redireccionamiento OAuth válidos), escriba 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. No olvide reemplazar <app-name> por el nombre de la aplicación de Azure App Service.Remember to replace <app-name> with the name of your Azure App Service app.

  7. Seleccione Save changes (Guardar los cambios).Select Save Changes.

  8. En el panel izquierdo, seleccione Settings > Basic (Configuración > Básica).In the left pane, select Settings > Basic.

  9. En el campo App Secret (Secreto de aplicación), seleccione Show (Mostrar).In the App Secret field, select 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 them 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.

  10. La cuenta de Facebook que utilizó para registrar la aplicación es un administrador de la aplicación.The Facebook account that you 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 in to this application.

    Para autenticar otras cuentas de Facebook, seleccione App Review (Revisión de aplicaciones) y habilite Make <your-app-name> public (Hacer pública <nombre-de-su-aplicación>) para permitir que el público general acceda a la aplicación mediante la autenticación de 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.

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.

  2. Haga clic en Configuración > Autenticación/autorización y asegúrese de que la opción Autenticación de App Service está Activada.Select Settings > Authentication / Authorization, and make sure that App Service Authentication is On.

  3. Seleccione Facebook y pegue los valores de identificador y secreto de la aplicación que obtuvo anteriormente.Select Facebook, and then paste in the App ID and App Secret values that you obtained previously. Habilite los ámbitos que necesite la aplicación.Enable any scopes needed by your application.

  4. Seleccione Aceptar.Select OK.

    Captura de pantalla de la configuración de Facebook para la aplicación móvil

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

  5. (Opcional) Para restringir el acceso solo a los usuarios autenticados mediante Facebook, establezca Acción necesaria cuando la solicitud no está autenticada en Facebook.(Optional) To restrict access only to users authenticated by Facebook, set Action to take when request is not authenticated to Facebook. Al establecer esta funcionalidad, la aplicación requiere que se autentiquen todas las solicitudes.When you set this functionality, your app requires all requests to be authenticated. También redirige todas las solicitudes no autenticadas a Facebook para la autenticación.It also redirects all unauthenticated requests 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 interesar en las aplicaciones que tienen una página principal disponible públicamente así como en muchas aplicaciones de página única.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. Para tales aplicaciones, puede ser preferible Permitir solicitudes anónimas (ninguna acción) y que la aplicación inicie manualmente la autenticación.For such applications, Allow anonymous requests (no action) might be preferred so that the app manually starts authentication itself. Para más información, consulte Flujo de autenticación.For more information, see Authentication flow.

  6. Seleccione Guardar.Select Save.

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

Pasos siguientes Next steps