Konfigurera enkel inloggning med Microsoft Entra ID

Skapa en programregistrering i din anpassade webbplats

För att aktivera SSO behöver du skapa två separata appregistreringar:

• En registrering av en autentiseringsapp, som möjliggör Microsoft Entra ID användarautentisering för din copilot
• En registrering av arbetsyteapp som gör det möjligt för SSO att anpassa din webbsida

Vi rekommenderar inte att du återanvänder samma appregistrering för både din copilot och din anpassade webbplats av säkerhetsskäl.

1. Följ anvisningarna i Konfigurera användarautentisering med Microsoft Entra ID för att skapa en registrering av autentiseringsapp.

2. Följ instruktionerna för att skapa en registrering av autentiseringsappen igen, för att skapa en andra appregistrering, som fungerar som din appregistrering för arbetsytan.

3. Lägg till arbetyteappens registrerings-ID i registreringen av autentiseringsappen.

Lägg till token för utbytes-URL

Om du vill uppdatera Microsoft Entra ID-autentiseringsinställningarna i Copilot Studio måste du lägga till token för utbytes-URL så att appen och Copilot Studio kan dela information.

1. På bladet för registreringen av autentiseringsappen i Azure-portalen går du till Exponera ett API.

2. Under Omfång välj du ikonen Kopiera till Urklipp .

3. I Copilot Studio, i navigeringsmenyn under Inställningar, välj Säkerhet och välj panelen Autentisering tile.

4. För Utbytes-URL för token (krävs för SSO), klistra in omfattningen du kopierade tidigare.

5. Välj Spara.

Konfigurera registrering av arbetsyteapp

1. När du har skapat din registrering av arbetsyteapp, gå till Autentisering och väljer sedan Lägg till en plattform.

2. Under Plattformskonfigurationer välj Lägg till en plattform, välj Webb.

3. Under Omdirigerings-URI, ange URL för din webbsida t.ex. http://contoso.com/index.html.

   

4. I avsnittet Implicita bidrag och hybridflöden aktivera båda Åtkomsttoken (används för implicita flöden) och Åtkomsttoken (används för implicita flöden).

5. Välj Konfigurera.

Hitta copilot token slutpunkt URL

1. I Copilot Studio öppnar du din copilot och väljer Kanaler.

2. Välj Mobilapp.

3. Under tokenslutpunkt, välj kopiera.

   

Konfigurera SSO på webbsidan

Använd koden som finns i Copilot Studio' GitHub lagringsplats för att skapa en webbplats för omdirigerings-URL. Kopiera koden från GitHub-lagringsplatsen och ändra den med hjälp av följande instruktioner.

    (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. Gå till sidan Översikt i Azure-portalen och kopiera App-ID (klient) och Katalog (klientorganisation) ID från registreringen av arbetsyteappen.

   

2. Så här konfigurerar du Microsoft autentiseringsbibliotek (MSAL):

   • Tilldela clientId till ditt program-ID (klient-ID).
   • Tilldela authority till https://login.microsoftonline.com/ och lägg till katalog-ID (klientorganisation) i slutet.

   Till exempel:

   var clientApplication;
       (function (){
       var msalConfig = {
           auth: {
               clientId: '692e92c7-xxxx-4060-76d3-b381798f4d9c',
               authority: 'https://login.microsoftonline.com/7ef988bf-xxxx-51af-01ab-2d7fd011db47'     
           },
   

3. Ange variabeln theURL till tokenslutpunkt UR som du kopierade tidigare. Till exempel:

   (async function main() {
   
       var theURL = "https://1c0.0.environment.api.powerplatform.com/powervirtualagents/bots/5a099fd/directline/token?api-version=2022-03-01-preview"
   

4. Redigera värdet userId för att ta med ett anpassat prefix. Till exempel:

   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. Spara dina ändringar.

Testa copilot med hjälp av webbsidan

1. Öppna webbsidan i webbläsaren.

2. Välj Logga in.

   

   Kommentar

   Om din webbläsare blockerar popup-fönster eller om du använder ett inkognitoläge eller ett privat surfingfönster kommer du att bli uppmanad att logga in. Annars slutförs inloggningen med en verifieringskod.

   En ny webbläsarflik öppnas.

3. Växla till den nya fliken och kopiera verifieringskoden.

4. Gå tillbaka till fliken med din copilot och klistra in valideringskoden i copilot-konversationen.

Relaterat innehåll

• Registrering av Azure-app

Teknisk översikt

Följande illustration visar hur en användare loggar in utan att se en inloggningsprompt (SSO) i Copilot Studio:

1. Copilot-användaren anger en fras som utlöser ett inloggningsämne. Ämnet inloggning är utformat för att logga in användaren och använda användarens autentiserade token (User.AccessToken variabel).

2. Copilot Studio skickar en inloggningsfråga så att användaren kan logga in med sina konfigurerade identitetsprovider.

3. Copilot anpassade arbetsyta spärrar inloggningsfrågan och begär en OBO-token från Microsoft Entra ID. Arbetsytan skickar token till copilot.

4. När OBO-token tas emot byter copilot ut OBO-token mot en "åtkomsttoken" och fyller i variabeln AuthToken med hjälp av värdet i åtkomsttoken. Variabeln IsLoggedIn ställs också in vid denna tidpunkt.

Skapa en programregistrering i Microsoft Entra ID för din anpassade arbetsyta

För att aktivera SSO behöver du två separata appregistreringar:

• En för din copilot för att aktivera användarautentisering med Microsoft Entra ID.
• En för din anpassade arbetsyta i syfte att aktivera SSO.

Skapa en appregistrering för copilot arbetsyta

1. Logga in på Azure-portal.

2. Gå till appregistreringar, antingen genom att välja ikonen eller söka i det översta sökfältet.

   

3. Välj Ny registrering.

   

4. Ange ett namn för registreringen. Det kan vara bra att använda namnet på den copilot som du registrerar arbetsytan på och ta med arbetsytan för att skilja den från appregistreringen för autentisering.

   Om din copilot kallas "Contoso försäljningshjälp" kan du ge appregistreringen namnet "ContosoSalesCanvas" eller liknande.

5. Under Kontotyper som stöds väljKonton i valfri organisationsklientorganisation (Alla Microsoft Entra ID-kataloger – Flera klientorganisationer) och personliga Microsoft-konton (t.ex. Skype, Xbox).

6. Låt avsnittet omdirigerings-URI vara tomt tills du anger informationen i nästa steg. Välj Registrera.

   

7. När registreringen är klar öppnas den på sidan översikt. Gå till Manifest. Bekräfta att accessTokenAcceptedVersion är inställd på 2. Om det inte är det ändrar du det till 2 och väljer sedan Spara.

Lägg till omdirigerings-URL

1. När registreringen är öppen går du till Autentisering och väljer sedan Lägg till en plattform.

   

2. På bladet Konfigurera plattformar väljWeb .

   

3. Under omdirigerings-URI lägger du till den fullständiga URL-adressen till sidan där din chattarbetsyta finns. Under avsnittet Implicit tilldelning markerar du kryssrutorna ID-token och Åtkomsttoken.

4. Välj Konfigurera för att bekräfta ändringarna.

   

5. Gå till API-behörigheter. Välj bevilja administrativt medgivande för <klientorganisationens namn> och klicka sedan på Ja.

   Viktigt!

   För att undvika att användare måste meddelas till de olika programmen måste en global administratör, en appadministratör eller en molnappadministratör ge medgivande rörande hela klientorganisationen till dina appregistreringar.

   

Definiera ett anpassat omfång för din copilot

Definiera en anpassad omfattning genom att exponera ett API för arbetsyteappens registrering inom autentisering av appregistreringen. Med omfång kan du fastställa användar- och administratörsroller och åtkomsträttigheter.

Det här steget skapar en förtroenderelation mellan registreringen av verifieringsprogram för autentisering och appregistrering för den anpassade arbetsytan.

1. Öppna den appregistrering du skapade när du konfigurerade autentiseringen.

2. Gå till API-behörigheter och kontrollera att rätt behörigheter har lagts till för copilot. Välj bevilja administrativt medgivande för <klientorganisationens namn> och klicka sedan på Ja.

   Viktigt!

   För att undvika att användare måste meddelas till de olika programmen måste en global administratör, en appadministratör eller en molnappadministratör ge medgivande rörande hela klientorganisationen till dina appregistreringar.

3. Gå till Visa en API och välj Lägg till en a omfattning.

   

4. Ange ett namn för definitionsområdet tillsammans med den skärminformation som ska visas för användarna när de kommer till SSO-skärmen. Välj Lägg till definitionsområde.

   

5. Välj Lägg till ett klientprogram.

6. Ange program-ID (klient) från sidan översikt för registreringen av arbetsyteappen i fältet klient-ID. Markera kryssrutan för den listade omfattningen som du skapade.

7. Välj Lägg till program.

Konfigurera autentisering i Copilot Studio för att aktivera SSO

Exchange-URL för token på konfigurationssidan för Copilot Studio-autentisering används för att byta ut OBO-token mot begärd åtkomsttoken via robotramverket.

Copilot Studio ber Microsoft Entra ID utföra det faktiska bytet.

1. Logga in på Copilot Studio.

2. Bekräfta att du har valt den copilot för vilken du vill aktivera autentisering genom att välja copilot-ikonen i den översta menyn och välja rätt copilot.

3. I navigeringsmenyn, under Inställningar, väljer du Säkerhet. Välj kortet Webbautentisering.

   

4. Ange URI:n för fullständig omfattning från Exponera ett API blad för copilot autentisering appregistrering i fältet Utbytes-URL för token. URI har följande format api://1234-4567/scope.name.

   

   

5. Välj Spara och publicera sedan copilot-innehållet.

Konfigurera HTML-koden på din anpassade arbetsyta i syfte att aktivera SSO

Uppdatera sidan för anpassad arbetsyta där copilot finns i syfte att genskjuta begäran om inloggningskort och byta ut OBO-token.

1. Konfigurera Microsoft Authentication Library (MSAL) genom att lägga till följande kod i en <skript>-tagg i avsnittet <huvud>.

2. Uppdatera clientId med program-ID (klient) för registrering av arbetsyteapp. Ersätt <Directory ID> med katalog-ID (klientorganisation). De här ID-numren visas från sidan översikt för registrering av arbetsyteapp.

   

   <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. Lägg till följande <skript> i avsnittet <text>. Det här skriptet anropar en metod för att hämta resourceUrl och byta ut din aktuella token mot en token som begärs av prompten 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. Lägg till följande <skript> i avsnittet <text>. I metoden main lägger koden till ett villkor i store med den unika identifieraren för copilot. Den genererar även ett unikt ID som userId variabel.

5. Uppdatera <COPILOT ID> med copilot-ID. Du kan visa din copilot-ID genom att gå till fliken kanaler för den copilot som du använder och välja mobilappen på Copilot Studio-portalen.

   

   <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>
   

Full exempelkod

För mer information kan du få hela exempelkoden med MSAL och villkorsskript för lagring redan inkluderade i vår GitHub-databas.