Självstudie: Bevilja åtkomst till ett Node.js-webb-API från en skrivbordsapp med hjälp av Azure Active Directory B2CTutorial: Grant access to a Node.js web API from a desktop app using Azure Active Directory B2C

Den här självstudien visar hur du anropar en Azure Active Directory B2C (Azure AD B2C) skyddad Node. js-webb-API-resurs från en Windows Presentation Foundation (WPF) Desktop-app.This tutorial shows you how to call an Azure Active Directory B2C (Azure AD B2C) protected Node.js web API resource from a Windows Presentation Foundation (WPF) desktop app.

I den här guiden får du lära dig att:In this tutorial, you learn how to:

  • Lägga till ett program för webb-APIAdd a web API application
  • Konfigurera omfånget för ett webb-APIConfigure scopes for a web API
  • Ge behörigheter till webb-API:tGrant permissions to the web API
  • Uppdatera exemplet så att programmet användsUpdate the sample to use the application

FörutsättningarPrerequisites

Slutför stegen och förutsättningarna i Självstudie: Aktivera autentisering av konton i ett skrivbordsprogram med hjälp av Azure Active Directory B2C.Complete the steps and prerequisites in Tutorial: Enable desktop app authentication with accounts using Azure Active Directory B2C.

Lägga till ett program för webb-APIAdd a web API application

Webb-API-resurser måste vara registrerade i klientorganisationen innan de kan godkänna och svara på en begäran från en skyddad resurs från klientprogram som använder en åtkomsttoken.Web API resources need to be registered in your tenant before they can accept and respond to protected resource requests by client applications that present an access token.

  1. Logga in på Azure Portal.Sign in to the Azure portal.
  2. Välj filtret katalog + prenumeration på den översta menyn och välj sedan den katalog som innehåller Azure AD B2C klienten.Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. På den vänstra menyn väljer du Azure AD B2C.In the left menu, select Azure AD B2C. Eller Välj alla tjänster och Sök efter och välj Azure AD B2C.Or, select All services and search for and select Azure AD B2C.
  4. Välj Program och därefter Lägg till.Select Applications, and then select Add.
  5. Ange ett namn på programmet.Enter a name for the application. Till exempel webapi1.For example, webapi1.
  6. För webbapp/webb-APIväljer du Ja.For Web App / Web API, select Yes.
  7. Välj Jaför Tillåt implicit flöde.For Allow implicit flow, select Yes.
  8. För Svars-URL anger du en slutpunkt dit Azure AD B2C ska returnera de token som programmet begär.For Reply URL, enter an endpoint where Azure AD B2C should return any tokens that your application requests. I den här självstudien körs exemplet lokalt och lyssnar på https://localhost:5000.In this tutorial, the sample runs locally and listens at https://localhost:5000.
  9. För app-ID-URIlägger du till API-slutpunkt-ID: t till den URI som visas.For App ID URI, add an API endpoint identifier to the URI shown. I den här självstudien anger du api, så att hela URI: n liknar https://contosob2c.onmicrosoft.com/api.For this tutorial, enter api, so that the full URI is similar to https://contosob2c.onmicrosoft.com/api.
  10. Välj Skapa.Select Create.
  11. Registrera program-ID för användning i ett senare steg.Record the APPLICATION ID for use in a later step.

Konfigurera omfångConfigure scopes

Omfång är ett sätt att styra åtkomsten till skyddade resurser.Scopes provide a way to govern access to protected resources. Omfång används av webb-API för att implementera omfångsbaserad åtkomststyrning.Scopes are used by the web API to implement scope-based access control. Vissa användare kan till exempel ha både läs- och skrivåtkomst medan andra bara har skrivskyddad åtkomst.For example, some users could have both read and write access, whereas other users might have read-only permissions. I den här självstudien definierar du läs- och skrivrättigheter för webb-API:et.In this tutorial, you define read permissions for the web API.

  1. Välj program.Select Applications.
  2. Välj webapi1 -programmet för att öppna dess egenskaps sida.Select the webapi1 application to open its Properties page.
  3. Välj Publicerade omfång.Select Published scopes. Publicerade omfattningar kan användas för att ge ett klient program vissa behörigheter till webb-API: et.Published scopes can be used to grant a client application certain permissions to the web API.
  4. För omfattning, ange demo.readoch för Beskrivninganger Read access to the web APIdu.For SCOPE, enter demo.read, and for DESCRIPTION, enter Read access to the web API.
  5. För omfattning, ange demo.writeoch för Beskrivninganger Write access to the web APIdu.For SCOPE, enter demo.write, and for DESCRIPTION, enter Write access to the web API.
  6. Välj Spara.Select Save.

Bevilja behörigheterGrant permissions

Om du vill anropa ett skyddat webb-API från ett program måste du ge programmet åtkomst till API:t.To call a protected web API from an application, you need to grant your application permissions to the API. I den obligatoriska föregående självstudien skapade du en webbapp i Azure AD B2C med namnet app1.In the prerequisite tutorial, you created a web application in Azure AD B2C named app1. Du använder det här programmet till att anropa webb-API:t.You use this application to call the web API.

  1. Välj Program och sedan nativeapp1.Select Applications, and then select nativeapp1.
  2. Välj API-åtkomst och sedan Lägg till.Select API access, and then select Add.
  3. I listrutan Välj API väljer du webapi1.In the Select API dropdown, select webapi1.
  4. I list rutan Välj omfång väljer du de omfattningar som du definierade tidigare.In the Select Scopes dropdown, select the scopes that you defined earlier. Till exempel demo. Read och demo. Write.For example, demo.read and demo.write.
  5. Välj OK.Select OK.

En användare autentiserar med Azure AD B2C för att använda WPF-skrivbordsappen.A user authenticates with Azure AD B2C to use the WPF desktop application. Skrivbordsappen får ett auktoriseringsbeviljande från Azure AD B2C som ger tillgång till det skyddade webb-API:t.The desktop application obtains an authorization grant from Azure AD B2C to access the protected web API.

Konfigurera exempletConfigure the sample

När webb-API:t är registrerat och har ett definierat omfång måste du konfigurera webb-API-koden så att den använder din Azure AD B2C-klientorganisation.Now that the web API is registered and you have scopes defined, you configure the web API code to use your Azure AD B2C tenant. I den här självstudien konfigurerar du en Node.js-webbapp som du kan ladda ned från GitHub.In this tutorial, you configure a sample Node.js web application you can download from GitHub.

Ladda ned en zip-fil eller klona exempelwebbappen från GitHub.Download a zip file or clone the sample web app from GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

Exempelwebb-API:et för Node.js använder Passport.js-biblioteket för att aktivera Azure AD B2C att skydda anrop till API: et.The Node.js web API sample uses the Passport.js library to enable Azure AD B2C to protect calls to the API.

  1. Öppna filen index.js.Open the index.js file.

  2. Konfigurera exemplet med registreringsinformation för Azure AD B2C-klientorganisationen.Configure the sample with the Azure AD B2C tenant registration information. Ändra följande rader med kod:Change the following lines of code:

    var tenantID = "<your-tenant-name>.onmicrosoft.com";
    var clientID = "<application-ID>";
    var policyName = "B2C_1_signupsignin1";
    

Kör exempletRun the sample

  1. Starta en kommandotolk för Node.js.Launch a Node.js command prompt.
  2. Gå till den katalog som innehåller Node.js-exemplet.Change to the directory containing the Node.js sample. Till exempel cd c:\active-directory-b2c-javascript-nodejs-webapiFor example cd c:\active-directory-b2c-javascript-nodejs-webapi
  3. Kör följande kommandon:Run the following commands:
    npm install && npm update
    
    node index.js
    

Kör skrivbordsappenRun the desktop application

  1. Öppna lösningen active-directory-b2c-wpf i Visual Studio.Open the active-directory-b2c-wpf solution in Visual Studio.
  2. Tryck på F5 för att köra skrivbordsappen.Press F5 to run the desktop app.
  3. Logga in med e-postadressen och lösenordet som skapades i självstudien för autentisering av användare med Azure Active Directory B2C i en skrivbordsapp.Sign in using the email address and password used in Authenticate users with Azure Active Directory B2C in a desktop app tutorial.
  4. Klicka på knappen Anropa API.Click the Call API button.

Skrivbordsappen gör skickar en förfrågan till webb-API:t och får ett svar med den inloggade användarens visningsnamn.The desktop application makes a request to the web API to and gets a response with the logged-in user's display name. Den skyddade skrivbordsappen anropar det skyddade webb-API:t i Azure AD B2C-klientorganisationen.You're protected desktop application is calling the protected web API in your Azure AD B2C tenant.

Nästa stegNext steps

I den här självstudiekursen lärde du dig att:In this tutorial, you learned how to:

  • Lägga till ett program för webb-APIAdd a web API application
  • Konfigurera omfånget för ett webb-APIConfigure scopes for a web API
  • Ge behörigheter till webb-API:tGrant permissions to the web API
  • Uppdatera exemplet så att programmet användsUpdate the sample to use the application