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

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

Para llevar a cabo el procedimiento descrito en este tema, debe tener una cuenta de Google asociada a una dirección de correo electrónico verificada.To complete the procedure in this topic, you must have a Google account that has a verified email address. Para crear una cuenta de Google, vaya a accounts.google.com.To create a new Google account, go to accounts.google.com.

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

  1. Inicie sesión en el Azure Portaly vaya a la aplicación.Log on to the Azure portal, and navigate to your application. Copie la URL, que se utilizará más adelante para configurar la aplicación de Google.Copy your URL, which you use later to configure your Google app.

  2. Navegue al sitio web de API de Google, inicie sesión con las credenciales de su cuenta de Google, haga clic en Create Project (Crear proyecto), especifique un nombre de proyecto y haga clic en Create (Crear).Navigate to the Google apis website, sign in with your Google account credentials, click Create Project, provide a Project name, then click Create.

  3. Una vez creado el proyecto, selecciónelo.Once the project is created, select it. En el panel del proyecto, haga clic en Go to APIs overview (Ir a la información general de las API).From the project dashboard, click Go to APIs overview.

  4. Seleccione Enable APIs and services (Habilitar API y servicios).Select Enable APIs and services. Busque la opción Google+ API (API de Google+) y selecciónela.Search for Google+ API, and select it. A continuación, haga clic en Enable (Habilitar).Then click Enable.

  5. En el panel de navegación izquierdo, haga clic en Credentials (Credenciales) > OAuth consent screen (Pantalla de consentimiento de OAuth), seleccione su dirección de correo electrónico, escriba un nombre de producto y haga clic en Save (Guardar).In the left navigation, Credentials > OAuth consent screen, then select your Email address, enter a Product Name, and click Save.

  6. En la pestaña Credentials (Credenciales), haga clic en Create credentials (Crear credenciales) > OAuth client ID (Id. de cliente de OAuth).In the Credentials tab, click Create credentials > OAuth client ID.

  7. En la pantalla "Create client ID" (Crear id. de cliente), seleccione Aplicación web.On the "Create client ID" screen, select Web application.

  8. Pegue la URL de App Service que copió anteriormente en Authorized JavaScript Origins (Orígenes de JavaScript autorizados) y luego pegue el identificador URI de redirección en Authorized Redirect URI (URI de redirección autorizado).Paste the App Service URL you copied earlier into Authorized JavaScript Origins, then paste your redirect URI into Authorized Redirect URI. El URI de redirección es la dirección URL de la aplicación anexada a la ruta de acceso, /.auth/login/google/callback.The redirect URI is the URL of your application appended with the path, /.auth/login/google/callback. Por ejemplo: https://contoso.azurewebsites.net/.auth/login/google/callback.For example, https://contoso.azurewebsites.net/.auth/login/google/callback. Asegúrese de que está utilizando el esquema HTTPS.Make sure that you are using the HTTPS scheme. A continuación, haga clic en Crear.Then click Create.

  9. En la siguiente pantalla, tome nota de los valores de id. de cliente y el secreto del cliente.On the next screen, make a note of the values of the client ID and client secret.

    Importante

    El secreto de cliente es una credencial de seguridad importante,The client 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.

Adición de información de Google a la aplicación Add Google information to your application

  1. Vuelva al Azure Portaly vaya a la aplicación.Back in the Azure portal, navigate to your application. Haga clic en Configuración y luego en Autenticación/autorización.Click Settings, and then Authentication / Authorization.

  2. Si esta característica no está habilitada, mueva el interruptor a la posición de activada.If the Authentication / Authorization feature is not enabled, turn the switch to On.

  3. Haga clic en Google.Click Google. Pegue los valores de identificador de la aplicación y de secreto de la aplicación que obtuvo previamente y habilite opcionalmente los ámbitos que requiere la aplicación.Paste in the App ID and App Secret values which you obtained previously, and optionally enable any scopes your application requires. A continuación, haga clic en Aceptar.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.

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

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