Logga in användare i en ensidesapp med inbyggd autentiserings-SDK - Microsoft identity platform

2025-09-09

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. Externa klienter (läs mer)

I den här snabbstarten använder du ett ensidesprogram (SPA) för att visa hur du autentiserar användare med hjälp av inbyggd autentiserings-SDK. Exempelappen visar användarregistrering, inloggning och utloggning för både e-post med lösenords- och e-postautentiseringsflöden för engångslösenord.

Förutsättningar

Ett Azure-konto med en aktiv prenumeration. Om du inte redan har ett kan du skapa ett konto kostnadsfritt.
Det här Azure-kontot måste ha behörighet att hantera program. Någon av följande Microsoft Entra-roller innehåller de behörigheter som krävs:
- Appadministratör
- Programutvecklare
En extern hyresgäst. Om du inte har en, skapa en ny extern klientorganisation i administrationscentret för Microsoft Entra.
Ett användarflöde. Mer information finns i skapa användarflöden för självbetjäningsregistrering för appar i externa klientorganisationer. Under Identitetsprovidrar väljer du önskad autentiseringsmetod, d.v.s . E-post med lösenord eller E-post engångslösenord. I det här kodexemplet använder du följande användarattribut i användarflödet när exempelappen samlar in dem från användaren:
- förnamn
- Efternamn
- Befattning
- Land/region
Om du inte redan har gjort det registrerar du ett program i administrationscentret för Microsoft Entra. Se till att:
- Registrera applikations-id (klient) och katalog-id (hyresgäst) att använda senare.
- Bevilja administratörsmedgivande till appregistreringen.
Associera din appregistrering med användarflödet
Node.js.
Visual Studio Code eller någon annan kodredigerare.

Aktivera offentliga klient- och interna autentiseringsflöden

Om du vill ange att den här appen är en offentlig klient och kan använda intern autentisering aktiverar du offentliga klient- och inbyggda autentiseringsflöden:

På sidan appregistreringar väljer du den appregistrering som du vill aktivera offentliga klient- och inbyggda autentiseringsflöden för.
Under Hantera väljer du Autentisering.
Under Avancerade inställningartillåter du offentliga klientflöden:
1. För Aktivera följande mobil- och skrivbordsflöden välj Ja.
2. För Aktivera intern autentiseringväljer du Ja.
Välj knappen Spara.

Klona eller ladda ned exempel-SPA

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.

Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git
```
Ladda ned exempel. Extrahera den till en filväg där namnets längd är mindre än 260 tecken.

Öppna ett terminalfönster och navigera till katalogen som innehåller React-exempelappen:
```
    cd typescript/native-auth/react-nextjs-sample
```
Kör följande kommando för att installera appberoenden:
```
npm install
```

Öppna ett terminalfönster och navigera till katalogen som innehåller React-exempelappen:
```
    cd typescript/native-auth/angular-sample
```
Kör följande kommando för att installera appberoenden:
```
npm install
```

Konfigurera react-exempelappen

Reagera
Angular

Öppna src/config/auth-config.ts och ersätt följande platshållare med de värden som hämtas från administrationscentret för Microsoft Entra:
- Leta upp platshållaren Enter_the_Application_Id_Here och ersätt den sedan med program-ID:t (klient)i appen som du registrerade tidigare.
- Leta upp platshållaren Enter_the_Tenant_Subdomain_Here och ersätt den sedan med klientunderdomänen i administrationscentret för Microsoft Entra. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har namnet på din hyresgäst, lär hur du kan läsa detaljerna om din hyresgäst.
Spara ändringarna.

Öppna src/app/config/auth-config.ts och ersätt följande platshållare med de värden som hämtas från administrationscentret för Microsoft Entra:
- Leta upp platshållaren Enter_the_Application_Id_Here och ersätt den sedan med program-ID:t (klient)i appen som du registrerade tidigare.
- Leta upp platshållaren Enter_the_Tenant_Subdomain_Here och ersätt den sedan med klientunderdomänen i administrationscentret för Microsoft Entra. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har namnet på din hyresgäst, lär hur du kan läsa detaljerna om din hyresgäst.
Spara ändringarna.

Konfigurera CORS-proxyserver

Det interna autentiserings-API:et stöder inte resursdelning mellan ursprung (CORS) så du måste konfigurera en proxyserver mellan din SPA-app och API:erna.

Det här kodexemplet innehåller en CORS-proxyserver som vidarebefordrar begäranden till api-slutpunkter för intern autentisering. CORS-proxyservern är en Node.js-server som lyssnar på port 3001.

Om du vill konfigurera proxyservern öppnar du filen proxy.config.js och letar sedan upp platshållaren:

tenantSubdomain och ersätt det med underdomänen Directory (tenant). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har klientunderdomänen kan du lära dig hur du kan läsa klientinformationen.
tenantId och ersätt det med katalog-ID:t (hyresgäst-ID). Om du inte har ditt klientorganisations-ID kan du lära dig hur du läser dina klientorganisationsuppgifter.

Köra och testa din app

Nu har du konfigurerat exempelappen och den är redo att köras.

Reagera
Angular

Från terminalfönstret kör du följande kommandon för att starta CORS-proxyservern:
```
cd typescript/native-auth/react-nextjs-sample/
npm run cors
```
Starta React-appen genom att öppna ett annat terminalfönster och sedan köra följande kommandon:
```
cd typescript/native-auth/react-nextjs-sample/
npm run dev
```
Öppna en webbläsare och gå till http://localhost:3000/.
Om du vill registrera dig för ett konto väljer du Registrera digoch följer sedan anvisningarna.
När du har registrerat dig testar du inloggning och lösenordsåterställning genom att välja Logga in och återställa lösenord buttorespectively.

Från terminalfönstret kör du följande kommandon för att starta CORS-proxyservern:
```
cd typescript/native-auth/angular-sample/
npm run cors
```
Starta React-appen genom att öppna ett annat terminalfönster och sedan köra följande kommandon:
```
cd typescript/native-auth/angular-sample/
npm run start
```
Öppna en webbläsare och gå till http://localhost:4200.
Om du vill registrera dig för ett konto väljer du Registrera digoch följer sedan anvisningarna.
När du har registrerat dig testar du inloggning och lösenordsåterställning genom att välja Logga in och återställa lösenord buttorespectively.

Feedback

Var den här sidan till hjälp?

Dela via

Snabbstart: Logga in användare i en ensidesapp med inbyggd autentisering i JavaScript SDK