Share via


Autentisera till Azure-resurser från lokala JavaScript-appar

Appar som körs utanför Azure (till exempel lokalt eller i ett datacenter från tredje part) bör använda ett huvudnamn för programtjänsten för att autentisera till Azure vid åtkomst till Azure-resurser. Huvudobjekt för programtjänsten skapas med hjälp av appregistreringsprocessen i Azure. När ett huvudnamn för programtjänsten skapas genereras ett klient-ID och en klienthemlighet för din app. Du lagrar klient-ID, klienthemlighet och ditt klient-ID i miljövariabler så att Azure SDK för JavaScript använder miljövariablerna för att autentisera din app till Azure vid körning.

En annan appregistrering ska skapas för varje miljö (till exempel test, fas, produktion) som appen körs i. På så sätt kan miljöspecifika resursbehörigheter konfigureras för varje huvudnamn för tjänsten och se till att en app som distribueras till en miljö inte kommunicerar med Azure-resurser som ingår i en annan miljö.

1 – Registrera programmet i Azure

En app kan registreras med Azure med hjälp av antingen Azure-portalen eller Azure CLI.

Logga in på Azure-portalen och följ dessa steg.

Instruktioner Skärmbild
I Azure-portalen:
  1. Ange appregistreringar i sökfältet överst i Azure-portalen.
  2. Välj det objekt som är märkt Appregistreringar under rubriken Tjänster på menyn som visas under sökfältet.
A screenshot showing how to use the top search bar in the Azure portal to find and navigate to the App registrations page.
På sidan Appregistreringar väljer du + Ny registrering. A screenshot showing the location of the New registration button in the App registrations page.
På sidan Registrera ett program fyller du i formuläret på följande sätt.
  1. Namn → Ange ett namn för appregistreringen i Azure. Det rekommenderas att det här namnet inkluderar appnamnet och miljön (test, prod) som appregistreringen är till för.
  2. Kontotyper som stöds → endast konton i den här organisationskatalogen.
Välj Registrera för att registrera din app och skapa programtjänstens huvudnamn.
A screenshot to fill out Register by giving the app a name and specifying supported account types as accounts in this organizational directory only.
På sidan Appregistrering för din app:
  1. Program-ID → Det här är det app-ID som din app använder för att komma åt Azure under den lokala utvecklingen. Kopiera det här värdet till en tillfällig plats i en textredigerare eftersom du behöver det i ett framtida steg.
  2. Katalog-ID → Det här värdet behövs också av din app när den autentiseras till Azure. Kopiera det här värdet till en tillfällig plats i en textredigerare. Det behövs också i ett framtida steg.
  3. Klientautentiseringsuppgifter → Du måste ange klientautentiseringsuppgifterna för appen innan appen kan autentisera till Azure och använda Azure-tjänster. Välj Lägg till ett certifikat eller en hemlighet för att lägga till autentiseringsuppgifter för din app.
A screenshot of the App registration after completion. This screenshot shows the application and tenant IDs, which will be needed in a future step.
På sidan Certifikat och hemligheter väljer du + Ny klienthemlighet. A screenshot showing the location of the link to use to create a new client secret on the certificates and secrets page.
Dialogrutan Lägg till en klienthemlighet visas till höger på sidan. I den här dialogrutan:
  1. Beskrivning → Ange värdet Aktuell.
  2. Upphör → Välj ett värde på 24 månader.
Välj Lägg till för att lägga till hemligheten.

VIKTIGT: Ange en påminnelse i kalendern före hemlighetens förfallodatum. På så sätt kan du lägga till en ny hemlighet före och uppdatera dina appar innan hemligheten upphör att gälla och undvika tjänstavbrott i appen.
A screenshot showing the page where a new client secret is added for the application service principal created by the app registration process.
Sidan Certifikat och hemligheter visar värdet för klienthemligheten.

Kopiera det här värdet till en tillfällig plats i en textredigerare eftersom du behöver det i ett framtida steg.

VIKTIGT! Det här är den enda gången du ser det här värdet. När du lämnar eller uppdaterar den här sidan kan du inte se det här värdet igen. Du kan lägga till en annan klienthemlighet utan att ogiltigförklara den här klienthemligheten, men det här värdet visas inte igen.
A screenshot showing the page with the generated client secret.

2 – Tilldela roller till programtjänstens huvudnamn

Därefter måste du bestämma vilka roller (behörigheter) din app behöver på vilka resurser och tilldela dessa roller till din app. Roller kan tilldelas en roll i ett resurs-, resursgrupps- eller prenumerationsomfång. Det här exemplet visar hur du tilldelar roller för tjänstens huvudnamn i resursgruppens omfång eftersom de flesta program grupperar alla sina Azure-resurser i en enda resursgrupp.

Instruktioner Skärmbild
Leta upp resursgruppen för ditt program genom att söka efter resursgruppens namn med hjälp av sökrutan överst i Azure-portalen.

Gå till resursgruppen genom att välja resursgruppens namn under rubriken Resursgrupper i dialogrutan.
A screenshot showing the top search box in the Azure portal to locate and navigate to the resource group you want to assign roles (permissions) to.
På sidan för resursgruppen väljer du Åtkomstkontroll (IAM) på den vänstra menyn. A screenshot of the resource group page showing the location of the Access control (IAM) menu item.
På sidan Åtkomstkontroll (IAM):
  1. Välj fliken Rolltilldelningar.
  2. Välj + Lägg till på den översta menyn och sedan Lägg till rolltilldelning från den resulterande nedrullningsbara menyn.
A screenshot showing how to navigate to the role assignments tab and the location of the button used to add role assignments to a resource group.
sidan Lägg till rolltilldelning visas alla roller som kan tilldelas för resursgruppen.
  1. Använd sökrutan för att filtrera listan till en mer hanterbar storlek. Det här exemplet visar hur du filtrerar efter Storage Blob-roller.
  2. Välj den roll du vill tilldela.
    Välj Nästa för att gå till nästa skärm.
A screenshot showing how to filter and select role assignments to be added to the resource group.
På nästa sida För att lägga till rolltilldelning kan du ange vilken användare som ska tilldela rollen till.
  1. Välj Användare, grupp eller tjänstens huvudnamn under Tilldela åtkomst till.
  2. Välj + Välj medlemmar under Medlemmar
En dialogruta öppnas till höger i Azure-portalen.
A screenshot showing the radio button to select to assign a role to a Microsoft Entra group and the link used to select the group to assign the role to.
I dialogrutan Välj medlemmar:
  1. Textrutan Välj kan användas för att filtrera listan över användare och grupper i din prenumeration. Om det behövs skriver du de första tecknen i tjänstens huvudnamn som du skapade för appen för att filtrera listan.
  2. Välj tjänstens huvudnamn som är associerat med ditt program.
Välj Välj längst ned i dialogrutan för att fortsätta.
A screenshot showing how to filter for and select the Microsoft Entra group for the application in the Select members dialog box.
Tjänstens huvudnamn visas som valt på skärmen Lägg till rolltilldelning .

Välj Granska + tilldela för att gå till den sista sidan och sedan Granska + tilldela igen för att slutföra processen.
A screenshot showing the completed Add role assignment page and the location of the Review + assign button used to complete the process.

3 – Konfigurera miljövariabler för program

Du måste ange AZURE_CLIENT_IDmiljövariablerna , AZURE_TENANT_IDoch AZURE_CLIENT_SECRET för den process som kör JavaScript-appen för att göra autentiseringsuppgifterna för programtjänstens huvudnamn tillgängliga för din app vid körning. Objektet DefaultAzureCredential söker efter informationen om tjänstens huvudnamn i dessa miljövariabler.

AZURE_CLIENT_ID=<value>
AZURE_TENANT_ID=<value>
AZURE_CLIENT_SECRET=<value>

4 – Implementera DefaultAzureCredential i programmet

För att autentisera DefaultAzureCredential Azure SDK-klientobjekt till Azure bör ditt program använda klassen från @azure/identitetspaketet .

Lägg först till paketet @azure/identitet i ditt program.

npm install @azure/identity

För alla JavaScript-kod som skapar ett Azure SDK-klientobjekt i din app vill du sedan:

  1. DefaultAzureCredential Importera klassen från modulen@azure/identity.
  2. Skapa ett DefaultAzureCredential objekt.
  3. Skicka objektet DefaultAzureCredential till Azure SDK-klientobjektkonstruktorn.

Ett exempel på detta visas i följande kodsegment.

// connect-with-default-azure-credential.js
import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';
import 'dotenv/config'

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
if (!accountName) throw Error('Azure Storage accountName not found');

const blobServiceClient = new BlobServiceClient(
  `https://${accountName}.blob.core.windows.net`,
  new DefaultAzureCredential()
);

När koden ovan instansierar DefaultAzureCredential objektet DefaultAzureCredential läser du miljövariablerna AZURE_SUBSCRIPTION_ID, AZURE_TENANT_ID, AZURE_CLIENT_IDoch AZURE_CLIENT_SECRET för programtjänstens huvudnamnsinformation att ansluta till Azure med.