Configurar el inicio de sesión único con Microsoft Entra ID

Copilot Studio admite el inicio de sesión único (SSO). SSO permite a los copilotos en su sitio web iniciar sesión para sus clientes si ya han iniciado sesión en la página o aplicación donde se implementa el copiloto.

Por ejemplo, el copiloto está hospedado en la intranet corporativa o en una aplicación en la que el usuario ya ha iniciado sesión.

Hay cuatro pasos principales para configurar el SSO para Copilot Studio:

1. Cree un registro de aplicación en Microsoft Entra ID para el lienzo personalizado.

2. Defina un ámbito personalizado para el copiloto.

3. Configurar la autenticación en Copilot Studio para habilitar SSO.

4. Configure su código HTML de lienzo personalizado para habilitar SSO.

Requisitos previos

• Habilite la autenticación de usuario final con ID de Microsoft Entra.
• Agregar un tema de autenticación al copiloto
• Usar un lienzo personalizado

Nota

Para configurar SSO utilizando otros proveedores de OAuth 2.0, consulte Configurar el inicio de sesión único con proveedores de OAuth genéricos.

Canales admitidos

La siguiente tabla detalla los canales que actualmente admiten SSO. Puede sugerir la compatibilidad para canales extra en el foro de ideas de Microsoft Copilot Studio.

Canal	Addmitido
Canales de Azure Bot Service	No admitido
Sitio web personalizado	Addmitido
Sitio web de demostración	No admitido
Facebook	No admitido
Microsoft Teams1	Addmitido
Aplicación móvil	No admitido
Omnicanal para servicio al cliente2	Addmitido

¹ Si también tiene el canal de Teams habilitado, debe seguir las instrucciones de configuración incluidas en la documentación Configurar el inicio de sesión único con Microsoft Entra ID para copilotos en la documentación de Microsoft Teams. Si no configura los ajustes de SSO de Teams como se indica en esa página, sus usuarios siempre fallarán en la autenticación al usar el canal de Teams.

² Solo se admite el canal de chat en vivo. Para más información, consulte Configurar la transferencia a Dynamics 365 Customer Service.

Importante

Actualmente, el SSO no se admite cuando un copiloto ha sido:

• Publicación en un portal de Power Apps.
• Publicado en un sitio web de SharePoint como un iframe.

Sin embargo, el SSO es compatible con un copiloto que se ha publicado en un sitio web de SharePoint como un componente SPFx.

Aplicación web

Crer registros de aplicación para el sitio web personalizado

Para habilitar SSO, necesitará crear dos registros de aplicaciones separados:

• Un registro de aplicación de autenticación, que permite la autenticación de usuario de Microsoft Entra ID para su copiloto
• Un registro de la aplicación de lienzo que habilita SSO para su página web personalizada

No recomendamos reutilizar el mismo registro de aplicación tanto para su copiloto como para su sitio web personalizado por razones de seguridad.

1. Siga las instrucciones en Configurar la autenticación de usuarios con Microsoft Entra ID para crear un registro de aplicación de autenticación.

2. Siga las instrucciones para crear un registro de aplicación de autenticación de nuevo, para crear un segundo registro de aplicación, que sirve como registro de aplicación de lienzo.

3. Agregue su id. de registro de aplicación de lienzo al registro de autenticación de aplicación.

Agregar URL de intercambio de token

Para actualizar la configuración de autenticación de Microsoft Entra ID en Copilot Studio, debe agregar la URL de intercambio de token para permitir su aplicación y Copilot Studio para compartir la información.

1. En el portal Azure, en la hoja de registro de su aplicación de autenticación, vaya a Exponer una API.

2. En Ámbitos, seleccione el icono Copiar al portapapeles.

3. En Copilot Studio, en el menú de navegación en Configuración, seleccione Seguridad y, a continuación, seleccione el mosaico Autenticación.

4. Para URL de intercambio de tokens (obligatorio para SSO), pegue el alcance que copió anteriormente.

5. Seleccione Guardar.

Configure el registro de su aplicación de lienzo

1. Una vez ha creado su registro de aplicación de lienzo, vaya a Autenticación y luego seleccione Agregar una plataforma.

2. Debajo de Configuraciones de plataforma, seleccione Agregar una plataforma y luego seleccione Web.

3. En URI de redireccionamiento, introduzca la URL de su página web; por ejemplo, http://contoso.com/index.html.

   

4. En la sección Concesión implícita y flujos híbridos, active tanto Tokens de acceso (utilizados para flujos implícitos e híbridos) como Tokens de acceso (utilizados para flujos implícitos).

5. Seleccione Configurar.

Encuentre el token de punto de conexión URL de su copiloto

1. En Copilot Studio, abra su copiloto y seleccione Canales.

2. Seleccione Aplicación móvil.

3. En Extremo de token, seleccione Copiar.

   

Configurar SSO en su página web

Use el código proporcionado en el repositorio de GitHub de Copilot Studio para crear una página web para la URL de redireccionamiento. Copie el código del repositorio de GitHub y modifíquelo siguiendo las siguientes instrucciones.

Nota

El código en el repositorio de GitHub requiere que el usuario seleccione un botón de inicio de sesión o inicie sesión desde un sitio diferente. Para habilitar el inicio de sesión automático, agregue el siguiente código al comienzo de aysnc function main():

    (async function main() {
        if (clientApplication.getAccount() == null) {
           await clientApplication.loginPopup(requestObj).then(onSignin).catch(function (error) {console.log(error) });
        }
        // Add your BOT ID below 
        var theURL =

1. Vaya a la página Descripción general en el portal de Azure y copie el Id. de aplicación (cliente) y Id. de directorio (inquilino) en el registro de la aplicación de lienzo.

   

2. Para configurar la Microsoft Authentication Library (MSAL):

   • Asigne clientId para su Id. de la aplicación (cliente).
   • Asigne authority a https://login.microsoftonline.com/ y agregue su Id. de directorio (inquilino) al final.

   Por ejemplo:

   var clientApplication;
       (function (){
       var msalConfig = {
           auth: {
               clientId: '00001111-aaaa-2222-bbbb-3333cccc4444',
               authority: 'https://login.microsoftonline.com/7ef988bf-xxxx-51af-01ab-2d7fd011db47'     
           },
   

3. Establezca la variable theURL en la URL del token punto de conexión que copió anteriormente. Por ejemplo:

   (async function main() {
   
       var theURL = "https://<token endpoint URL>"
   

4. Edite el valor de userId para incluir un prefijo personalizado. Por ejemplo:

   var userId = clientApplication.account?.accountIdentifier != null ? 
           ("My-custom-prefix" + clientApplication.account.accountIdentifier).substr(0, 64) 
           : (Math.random().toString() + Date.now().toString()).substr(0,64);
   

5. Guarda los cambios.

Pruebe su copiloto usando su página web

1. Abra su página web en su navegador.

2. Seleccione Iniciar sesión.

   

   Nota

   Si su navegador bloquea las ventanas emergentes o está utilizando una ventana de navegación privada o de incógnito, se le solicitará que inicie sesión. De lo contrario, el inicio de sesión se completa utilizando un código de validación.

   Se abre una nueva pestaña del explorador.

3. Cambie a la nueva pestaña y copie el código de validación.

4. Vuelva a la pestaña con su copiloto y pegue el código de validación en la conversación del copiloto.

Contenido relacionado

• Registro de aplicación de Azure

Clásico

Descripción técnica

La siguiente ilustración muestra cómo un usuario inicia sesión sin ver una solicitud de inicio de sesión (SSO) en Copilot Studio:

1. El usuario del copiloto escribe una frase que desencadena un tema de inicio de sesión. El tema de inicio de sesión está diseñado para iniciar sesión y usar el token autenticado (variable User.AccessToken).

2. Copilot Studio envía una solicitud de inicio de sesión para permitir que el usuario inicie sesión con su proveedor de identidad configurado.

3. El lienzo personalizado del copiloto intercepta el mensaje de inicio de sesión y solicita un token de representación (OBO) de Microsoft Entra ID. El lienzo envía el token al copiloto.

4. Al recibir el token OBO, el copiloto intercambia el token OBO por un "token de acceso" y completa la variable AuthToken usando el valor del token de acceso. Las variables IsLoggedIn también se establecen en este momento.

Cree un registro de aplicación en Microsoft Entra ID para el lienzo personalizado

Para habilitar SSO, necesitará dos registros de aplicaciones separados:

• Uno para su copiloto, para habilitar la autenticación de usuario con Microsoft Entra ID.
• Uno para que su lienzo personalizado habilite SSO.

Importante

No puede reutilizar el mismo registro de aplicación para la autenticación de usuario de su copiloto y su lienzo personalizado.

Crear un registro de aplicación para el lienzo del copiloto

1. Inicie sesión en el portal Azure.

2. Vaya a Registros de aplicaciones seleccionando el icono o buscando en la barra de búsqueda superior.

   

3. Seleccione Nuevo registro.

   

4. Escriba un nombre para el registro. Puede ser útil usar el nombre del copiloto cuyo lienzo está registrando e incluir "lienzo" para ayudar a separarlo del registro de la aplicación para la autenticación.

   Por ejemplo, si su copiloto se llama "Ayuda de ventas de Contoso", puede nombrar el registro de la aplicación como "ContosoSalesCanvas" o similar.

5. En Tipos de cuenta admitidos, seleccione Cuentas en cualquier inquilino de organización (Cualquier directorio de Microsoft Entra ID -Multiinquilino) y cuentas de Microsoft personales (p. ej. Skype, Xbox).

6. Deja la sección URI de redireccionamiento en blanco de momento. En los próximos pasos especificará esa información. Seleccione Registro.

   

7. Una vez completado el registro, se abrirá en la página Visión general. Vaya a Manifiesto. Confirme que accessTokenAcceptedVersion se establece en 2. Si no es así, cámbielo a 2 y luego seleccione Guardar.

Agregar la URL de redireccionamiento

1. Con el registro abierto, vaya a Autenticación y luego seleccione Agregar una plataforma.

   

2. En la hoja Configurar plataformas, seleccione Web.

   

3. En Redirigir URI, agregue la dirección URL completa a la página donde está hospedado su lienzo de chat. En la sección Concesión implícita, active las casillas Tokens de id. y Tokens de acceso.

4. Seleccione Configurar para confirmar los cambios.

   

5. Vaya a Permisos de API. Seleccione Otorgar consentimiento de administrador para <su nombre de inquilino> y después Sí.

   Importante

   Para evitar que los usuarios tengan que dar su consentimiento a cada aplicación, se debe tener un administrador global, una administrador de aplicaciones o un administrador de aplicaciones en la nube para otorgar el consentimiento en todo el inquilino para los registros de aplicaciones.

   

Defina un ámbito personalizado para el copiloto

Defina un ámbito personalizado exponiendo una API para el registro de la aplicación de lienzo dentro del registro de la aplicación de autenticación. Los ámbitos le permite determinar los roles de usuario y administrador y los derechos de acceso.

Este paso crea una relación de confianza entre el registro de la aplicación de autenticación para la autenticación y el registro de la aplicación para su lienzo personalizado.

1. Abra el registro de la aplicación que creó cuando configuró la autenticación.

2. Vaya a Permisos de la API y asegúrese de que se agreguen los permisos correctos para su copiloto. Seleccione Otorgar consentimiento de administrador para <su nombre de inquilino> y después Sí.

   Importante

   Para evitar que los usuarios tengan que dar su consentimiento a cada aplicación, se debe tener un administrador global, una administrador de aplicaciones o un administrador de aplicaciones en la nube para otorgar el consentimiento en todo el inquilino para los registros de aplicaciones.

3. Vaya a Exponer una API y seleccione Agregar un ámbito.

   

4. Escriba un nombre para el ámbito, junto con la información de visualización que se debe mostrar a los usuarios cuando accedan a la pantalla de SSO. Seleccione Agregar ámbito.

   

5. Seleccione Agregar una aplicación cliente.

6. Especifique el Id. de la aplicación (cliente) en la página Descripción general para el registro de la aplicación de lienzo en el campo Id. del cliente. Seleccione la casilla de verificación para el ámbito que aparece y que creó.

7. Seleccione Agregar aplicación.

Configurar la autenticación en Copilot Studio para habilitar SSO

La dirección URL de intercambio de tokens en la página de configuración de la autenticación de Copilot Studio se utiliza para intercambiar el token OBO por el token de acceso solicitado a través del marco del bot.

Copilot Studio llama a Microsoft Entra ID para realizar el intercambio real.

1. Inicie sesión en Copilot Studio.

2. Confirme que ha seleccionado el copiloto para el que desea habilitar la autenticación seleccionando el icono del copiloto en el menú superior y eligiendo el copiloto correcto.

3. En el menú de navegación, en Configuración, seleccione Seguridad. A continuación, seleccione la tarjeta Autenticación.

   

4. Ingrese el URI de alcance completo de la hoja Exponer una API para el registro de la aplicación de autenticación del copiloto en el campo URL de intercambio de tokens. La URI tiene el formato de api://1234-4567/scope.name.

   

   

5. Seleccione Guardar y luego publique el contenido del copiloto.

Configure su código HTML de lienzo personalizado para habilitar SSO

Actualice la página de lienzo personalizado donde se encuentra el copiloto para interceptar la solicitud de la tarjeta de inicio de sesión e intercambiar el token OBO.

1. Configure la Biblioteca de autenticación de Microsoft (MSAL) agregando el siguiente código en una etiqueta <script> en la sección <encabezado>.

2. Actualice clientId con el Id. de la aplicación (cliente) para el registro de la aplicación de lienzo. Reemplace <Directory ID> con el Id. de directorio (inquilino). Obtendrá estos identificadores en la página Descripción general para el registro de la aplicación de lienzo.

   <head>
    <script>
      var clientApplication;
        (function () {
          var msalConfig = {
              auth: {
                clientId: '<Client ID [CanvasClientId]>',
                authority: 'https://login.microsoftonline.com/<Directory ID>'
              },
              cache: {
                cacheLocation: 'localStorage',
                storeAuthStateInCookie: false
              }
          };
          if (!clientApplication) {
            clientApplication = new Msal.UserAgentApplication(msalConfig);
          }
        } ());
    </script>
   </head>
   

3. Inserte el siguiente <script> en las sección <cuerpo>. Este script llama a un método para recuperar resourceUrl e intercambie su token actual por un token solicitado por la solicitud de OAuth.

   <script>
   function getOAuthCardResourceUri(activity) {
     if (activity &&
          activity.attachments &&
          activity.attachments[0] &&
          activity.attachments[0].contentType === 'application/vnd.microsoft.card.oauth' &&
          activity.attachments[0].content.tokenExchangeResource) {
            // asking for token exchange with Microsoft Entra ID
            return activity.attachments[0].content.tokenExchangeResource.uri;
      }
   }
   
   function exchangeTokenAsync(resourceUri) {
     let user = clientApplication.getAccount();
      if (user) {
        let requestObj = {
          scopes: [resourceUri]
        };
        return clientApplication.acquireTokenSilent(requestObj)
          .then(function (tokenResponse) {
            return tokenResponse.accessToken;
            })
            .catch(function (error) {
              console.log(error);
            });
            }
            else {
            return Promise.resolve(null);
      }
   }
   </script>
   

4. Inserte el siguiente <script> en las sección <cuerpo>. Dentro del método main, este código agrega una condición a su store, con el identificador único de su copiloto. También genera un id. único como su variable userId.

5. Actualice <COPILOT ID> con el identificador del copiloto. Puede ver el identificador del copiloto si va a la pestaña Canales para el copiloto que está usando y selecciona Aplicación móvil en el portal de Copilot Studio.

   <script>
       (async function main() {
   
           // Add your COPILOT ID below 
           var BOT_ID = "<BOT ID>";
           var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
   
           const {
               token
           } = await fetchJSON(theURL);
   
           var directline = await fetchJSON(regionalChannelSettingsURL).then(res=> res.channelUrlsById.directline); 
   
           const directLine = window.WebChat.createDirectLine({
               domain: `${directline}v3/directline`,
               token
           });
   
           var userID = clientApplication.account?.accountIdentifier != null ?
               ("Your-customized-prefix-max-20-characters" + clientApplication.account.accountIdentifier).substr(0, 64) :
               (Math.random().toString() + Date.now().toString()).substr(0, 64); // Make sure this will not exceed 64 characters 
           const store = WebChat.createStore({}, ({
               dispatch
           }) => next => action => {
               const {
                   type
               } = action;
               if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                   dispatch({
                       type: 'WEB_CHAT/SEND_EVENT',
                       payload: {
                           name: 'startConversation',
                           type: 'event',
                           value: {
                               text: "hello"
                           }
                       }
                   });
                   return next(action);
               }
               if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
                   const activity = action.payload.activity;
                   let resourceUri;
                   if (activity.from && activity.from.role === 'bot' &&
                       (resourceUri = getOAuthCardResourceUri(activity))) {
                       exchangeTokenAsync(resourceUri).then(function(token) {
                           if (token) {
                               directLine.postActivity({
                                   type: 'invoke',
                                   name: 'signin/tokenExchange',
                                   value: {
                                       id: activity.attachments[0].content.tokenExchangeResource.id,
                                       connectionName: activity.attachments[0].content.connectionName,
                                       token,
                                   },
                                   "from": {
                                       id: userID,
                                       name: clientApplication.account.name,
                                       role: "user"
                                   }
                               }).subscribe(
                                   id => {
                                       if (id === 'retry') {
                                           // copilot was not able to handle the invoke, so display the oauthCard
                                           return next(action);
                                       }
                                       // else: tokenexchange successful and we do not display the oauthCard
                                   },
                                   error => {
                                       // an error occurred to display the oauthCard
                                       return next(action);
                                   }
                               );
                               return;
                           } else
                               return next(action);
                       });
                   } else
                       return next(action);
               } else
                   return next(action);
           });
   
           const styleOptions = {
   
               // Add styleOptions to customize Web Chat canvas
               hideUploadButton: true
           };
   
           window.WebChat.renderWebChat({
                   directLine: directLine,
                   store,
                   userID: userID,
                   styleOptions
               },
               document.getElementById('webchat')
           );
       })().catch(err => console.error("An error occurred: " + err));
   </script>
   

Ejemplo completo de código

Para más información, puede encontrar código de muestra completo, con los scripts condicionales MSAL y de almacenamiento ya incluidos en nuestro repositorio de GitHub.