Configurer l’authentification unique avec Microsoft Entra ID

Copilot Studio prend en charge l’authentification unique SSO SSO permet aux agents de votre site Web de connecter les clients s’ils sont déjà connectés à la page ou à l’application sur laquelle le agent est déployé.

Par exemple, le agent est hébergé sur l’intranet de l’entreprise ou dans une application à laquelle l’utilisateur est déjà connecté.

La configuration de l’authentification SSO pour Copilot Studio implique quatre grandes étapes :

1. Créer un enregistrement d’application dans Microsoft Entra ID pour votre canevas personnalisé.

2. Définissez une portée personnalisée pour votre agent.

3. Configurer l’authentification dans Copilot Studio pour activer l’authentification SSO.

4. Configurer le code HTML de votre canevas personnalisé pour activer l’authentification SSO.

Conditions préalables

• Activer l’authentification de l’utilisateur final avec Microsoft Entra ID
• Ajoutez une authentification rubrique à votre agent
• Utiliser un canevas personnalisé

Note

Pour configurer l’authentification unique à l’aide d’autres fournisseurs OAuth 2.0, consultez Configurer l’authentification unique avec des fournisseurs OAuth génériques.

Canaux pris en charge

Le tableau suivant détaille les canaux qui prennent actuellement en charge l’authentification SSO. Vous pouvez suggérer la prise en charge de chaînes supplémentaires sur le Copilot Studio forum Idées.

Canal	Prise en charge
Canaux Azure Bot Service	Non pris en charge
Site web personnalisé	Prise en charge
Site web de démonstration	Non pris en charge
Facebook	Non pris en charge
Microsoft Teams1	Prise en charge
Application mobile	Non pris en charge
Omnicanal pour le service clientèle2	Prise en charge

¹ Si vous avez également activé le canal Teams, vous devez suivre les instructions de configuration de la section Configurer l’authentification unique avec Microsoft Entra ID pour les agents dans Microsoft Teams la documentation. Si vous ne configurez pas les paramètres SSO Teams comme indiqué sur cette page, l’authentification de vos utilisateurs échoue toujours lors de l’utilisation du canal Teams.

² Seul le canal de conversation en direct est pris en charge. Pour plus d’informations, consultez Configurer le transfert vers Dynamics 365 Customer Service.

Important

SSO n’est actuellement pas pris en charge lorsqu’un agent a été :

• Publié sur un portail Power Apps.
• Publié sur un SharePoint site Web en tant qu’iframe.

Cependant, SSO est pris en charge pour un agent qui a été publié sur un SharePoint site Web en tant que composant SPFx.

Application web

Créer des inscriptions d’applications pour votre site web personnalisé

Pour activer l’authentification SSO, vous devez créer deux inscriptions d’application distinctes :

• Une application d’enregistrement d’authentification, qui permet Microsoft Entra l’authentification de l’utilisateur ID pour votre agent
• Une inscription d’applications canevas qui active l’authentification unique (SSO) pour votre page web personnalisée

Nous vous déconseillons de réutiliser la même inscription d’application pour votre agent et votre site Web personnalisé pour des raisons de sécurité.

1. Suivez les instructions dans Configurer l’authentification des utilisateurs avec Microsoft Entra ID pour créer une enregistrement d’application d’authentification.

2. Suivez à nouveau les instructions pour créer un enregistrement d’application d’authentification pour créer un deuxième enregistrement d’application, qui sert d’enregistrement de votre application canevas.

3. Ajoutez l’ID d’enregistrement de l’application canevas à l’enregistrement de l’application d’authentification.

Ajouter une URL d’échange de jetons

Pour mettre à jour les paramètres d’authentification Microsoft Entra ID dans Copilot Studio, vous devez ajouter l’URL d’échange de jetons pour autoriser votre application et Copilot Studio à partager des informations.

1. Dans le portail Azure, dans le volet d’enregistrement de votre application d’authentification, accédez à Exposer une API.

2. Sous Étendues, sélectionnez l’icône Copier dans le Presse-papier.

3. Dans Copilot Studio, dans le menu de navigation, sous Paramètres, sélectionnez Sécurité, puis sélectionnez la vignette Authentification.

4. Pour URL d’échange de jeton (obligatoire pour l’authentification SSO), collez l’étendue que vous avez copiée précédemment.

5. Sélectionnez Enregistrer.

Configurer votre inscription d’application canevas

1. Après avoir créé l’inscription d’applications canevas, accédez à Authentification, puis sélectionnez Ajouter une plateforme.

2. Sous Configurations de plate-forme, sélectionnez Ajouter une plateforme, puis sélectionnez Web.

3. Sous URI de redirection, entrez l’URL de votre page Web ; par exemple, http://contoso.com/index.html.

   

4. Sous la section Octroi implicite et flux hybrides, activez les deux Jetons d’accès (utilisés pour les flux implicites) et Jetons d’ID (utilisés pour les flux implicites et hybrides).

5. Sélectionnez Configurer.

Trouvez l’URL de votre token agent point de terminaison

1. Dans Copilot Studio, ouvrez vos agent puis vos chaînesSélectionner.

2. Sélectionnez Application mobile.

3. Sous Point de terminaison de jeton, sélectionnez Copier.

   

Configurer SSO dans votre page Web

Utilisez le code fourni dans le référentiel GitHub de Copilot Studio pour créer une page web pour l’URL de redirection. Copiez le code du dépôt GitHub et modifiez-le en suivant les instructions suivantes.

Note

Le code dans le référentiel GitHub nécessite que l’utilisateur utilise un bouton de connexion ou se connecte à partir d’un autre site. Pour activer la connexion automatique, ajoutez le code suivant au début 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. Accédez à la page Vue d’ensemble dans le portail Azure et copiez l’ID de l’application (client) et l’ID d’annuaire (client).

   

2. Pour configurer la bibliothèque d’authentification Microsoft (MSAL) :

   • Attribuez clientId à votre ID d’application (client).
   • Attribuez authority à https://login.microsoftonline.com/ et ajoutez votre ID du répertoire (client) à la fin.

   Par exemple :

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

3. Définissez la variable theURL sur l’URL du point de terminaison du jeton que vous avez copiée précédemment. Par exemple :

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

4. Modifiez la valeur de userId pour inclure un préfixe personnalisé. Par exemple :

   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. Enregistrez vos modifications.

Testez votre agent en utilisant votre page Web

1. Ouvrez votre page Web dans votre navigateur.

2. Sélectionnez Connexion.

   

   Note

   Si votre navigateur bloque les fenêtres contextuelles ou si vous utilisez une fenêtre de navigation privée ou de navigation privée, vous êtes invité à vous connecter. Sinon, la connexion se termine à l’aide d’un code de validation.

   Un nouvel onglet du navigateur s’ouvre.

3. Passez au nouvel onglet et copiez le code de validation.

4. Revenez à l’onglet avec votre agent et collez le code de validation dans la conversation agent.

Contenu associé

• Enregistrement de l’application Azure

Classique

Présentation technique

L’illustration suivante montre comment un utilisateur s’est connecté sans recevoir d’invite de connexion (SSO) dans Copilot Studio :

1. L’utilisateur agent saisit une phrase qui déclenche une connexion rubrique. La rubrique de connexion est conçue pour connecter l’utilisateur et utiliser son jeton authentifié(variable User.AccessToken).

2. Copilot Studio envoie une invite de connexion pour permettre à l’utilisateur de se connecter avec son fournisseur d’identité configuré.

3. Le canevas personnalisé de agent intercepte l’invite de connexion et demande un jeton au nom de (OBO) à l’ID. Microsoft Entra Le canevas envoie le jeton au agent.

4. À la réception du jeton OBO, le agent échange le jeton OBO contre un "token" et remplit la variable AuthToken en utilisant la valeur du token. La variable IsLoggedIn est également définie à ce moment-là.

Créer un enregistrement d’application dans Microsoft Entra ID pour votre canevas personnalisé

Pour activer l’authentification SSO, vous avez besoin de deux inscriptions d’application distinctes :

• Un pour votre agent pour activer l’authentification utilisateur avec Microsoft Entra ID.
• Une pour votre canevas personnalisé, pour activer l’authentification SSO.

Important

Vous ne pouvez pas réutiliser la même inscription d’application pour l’authentification utilisateur de votre agent et votre canevas personnalisé.

Créer une inscription d’application pour le canvas de agent

1. Connectez-vous au portail Azure.

2. Accédez à Inscriptions d’applications, soit en sélectionnant l’icône ou en effectuant une recherche dans la barre de recherche supérieure.

   

3. Sélectionnez Nouvelle inscription.

   

4. Entrez un nom pour l’inscription. Il peut être utile d’utiliser le nom du agent dont vous enregistrez le canevas et d’inclure "canvas" pour aider à le séparer de l’enregistrement de l’application pour l’authentification.

   Par exemple, si votre agent s’appelle "Contoso sales help", vous pouvez nommer l’enregistrement de l’application "ContosoSalesCanvas" ou quelque chose de similaire.

5. Dans Types de comptes pris en charge, sélectionnez Comptes dans n’importe quel client organisationnel (tout répertoire Microsoft Entra ID - mutualisé) et comptes Microsoft personnels (par exemple, Skype, Xbox).

6. Laissez la section URI de redirection vide pour l’instant, car vous entrez ces informations dans les étapes suivantes. Sélectionnez Inscrire.

   

7. Une fois l’inscription terminée, elle ouverte dans la page Aperçu. Aller à Manifeste. Confirmez que accessTokenAcceptedVersion est réglé sur 2. Si ce n’est pas le cas, remplacez-le par 2 puis sélectionnez Enregistrer.

Ajouter l’URL de redirection

1. Les inscriptions étant ouvertes, rendez-vous sur Authentification, puis sélectionnez Ajouter une plateforme.

   

2. Dans le panneau Configurer des plateformes, sélectionnez Web.

   

3. Sous URI de redirections, ajoutez l’URL complète de la page où votre canevas de chat est hébergé. Sous la section Octroi implicite, cochez les cases Jetons d’identification et Jetons d’accès.

4. Sélectionnez Configurer pour confirmer vos modifications.

   

5. Accédez à Autorisations API. Sélectionnez Accorder le consentement de l’administrateur pour <votre nom de locataire>, puis Oui.

   Important

   Pour éviter aux utilisateurs d’avoir à consentir à chaque application, un administrateur global, un administrateur d’application ou un administrateur d’application cloud doit accorder son consentement à l’échelle du locataire à vos inscriptions d’applications.

   

Définissez une portée personnalisée pour votre agent

Définissez une étendue personnalisée en exposant une API pour l’inscription d’application de canevas dans l’inscription de l’application d’authentification. Les étendues vous permettent de déterminer les rôles d’utilisateur et d’administrateur, ainsi que les droits d’accès.

Cette étape crée une relation de confiance entre l’inscription de l’application d’authentification pour l’authentification et l’inscription d’application pour votre canevas personnalisé.

1. Ouvrez l’inscription d’application que vous avez créée lorsque vous avez configuré l’authentification.

2. Accédez à Autorisations API et assurez-vous que les autorisations appropriées sont ajoutées pour votre agent. Sélectionnez Accorder le consentement de l’administrateur pour <votre nom de locataire>, puis Oui.

   Important

   Pour éviter aux utilisateurs d’avoir à consentir à chaque application, un administrateur global, un administrateur d’application ou un administrateur d’application cloud doit accorder son consentement à l’échelle du locataire à vos inscriptions d’applications.

3. Accédez à Exposer une API et sélectionnez Ajouter une étendue.

   

4. Entrez un nom pour l’étendue, ainsi que les informations d’affichage qui doivent être présentées aux utilisateurs lorsqu’ils affichent l’écran SSO. Sélectionnez Ajouter une étendue.

   

5. Sélectionnez Ajouter une application cliente.

6. Entrez l’ID d’application (client) issu de la page Aperçu de l’inscription de l’application canevas dans le champ ID client. Cochez la case correspondant à l’étendue répertoriée que vous avez créée.

7. Sélectionnez Ajouter une application.

Configurer l’authentification dans Copilot Studio pour activer l’authentification SSO

L’URL d’échange de jetons dans la page de configuration de l’authentification Copilot Studio est utilisée pour échanger le jeton OBO contre le jeton d’accès demandé via Bot Framework.

Copilot Studio appelle dans Microsoft Entra ID pour effectuer l’échange réel.

1. Connectez-vous à Copilot Studio.

2. Confirmez que vous avez sélectionné le agent pour lequel vous souhaitez activer l’authentification en sélectionnant l’icône agent dans le menu supérieur et en choisissant le bon agent.

3. Dans le menu de navigation, sous Paramètres, sélectionnez Sécurité. Ensuite, sélectionnez la carte Authentification.

   

4. Saisissez l’URI de portée complète à partir de la lame Exposer une API pour l’enregistrement de l’application d’authentification de agent dans le champ URL d’échange de jetons . L’URI du canal Est dans le format api://1234-4567/scope.name.

   

   

5. Sélectionner Enregistrez puis publiez le contenu agent.

Configurer le code HTML de votre canevas personnalisé pour activer l’authentification SSO

Mettez à jour la page de canevas personnalisée où se trouve le agent pour intercepter la demande de connexion carte et échanger le jeton OBO.

1. Configurez la bibliothèque d’authentification Microsoft (MSAL) en ajoutant le code suivant dans une balise <script> dans la section <head>.

2. Mettez à jour clientId avec l’ID d’application (client) pour l’inscription de l’application canevas. Remplacez <Directory ID> par l’ID du répertoire (locataire). Vous pouvez obtenir ces ID dans la page Aperçu de l’inscription de l’application canevas.

   <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. Insérez le <script> suivant dans la section <body>. Ce script appelle une méthode pour récupérer le resourceUrl et échanger votre jeton actuel contre un jeton demandé par l’invite 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. Insérez le <script> suivant dans la section <body>. Dans la méthode main , ce code ajoute une condition à votre store, avec l’identifiant unique de votre agent. Il génère également un ID unique considéré comme étant votre variable userId.

5. Mettez à jour <COPILOT ID> avec votre identifiant agent. Vous pouvez voir l’ID de votre agent en allant dans l’onglet Canaux du agent que vous utilisez et en sélectionnant Application mobile sur le Copilot Studio portail.

   <script>
       (async function main() {
   
           // Add your AGENT 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') {
                                           // The agent 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>
   

Exemple de code complet

Pour plus d’informations, vous pouvez trouver l’exemple de code complet, avec les scripts conditionnels store et MSAL inclus, dans notre référentiel GitHub.