Snabbstart: Logga in användare i en React-ensidesapp med inbyggd autentisering (förhandsversion)

Gäller för: Externa klienter (läs mer)

I den här snabbstarten använder du ett React-program (SPA) för att visa hur du autentiserar användare med hjälp av api för intern autentisering. Exempelappen visar användares registrering, inloggning, utloggning och lösenordsåterställning med ett e-postmeddelande och ett lösenord.

Förutsättningar

** Ett Azure-konto med en aktiv prenumeration. Om du inte redan har ett 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. Kontrollera att användarflödet innehåller följande användarattribut:
  • förnamn
  • Efternamn
• 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:

1. På sidan appregistreringar väljer du den appregistrering som du vill aktivera offentliga klient- och inbyggda autentiseringsflöden för.
2. Under Hanteraväljer du Autentisering.
3. Under Avancerade inställningartillåter du offentliga klientflöden:
   1. För att aktivera följande mobil- och skrivbordsflöden, välj Ja.
   2. För Aktivera intern autentiseringväljer du Ja.
4. 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

Du kan också Ladda ned exempletoch sedan extrahera det till en filsökväg där namnets längd är mindre än 260 tecken.

Installera projektets beroenden

1. Öppna ett terminalfönster och navigera till katalogen som innehåller React-exempelappen:

   cd API\React\ReactAuthSimple
   

2. Kör följande kommando för att installera appberoenden:

   npm install
   

Konfigurera react-exempelappen

1. Öppna src\config.ts-fil i kodredigeraren.

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

3. Spara ändringarna.

Konfigurera CORS-proxyserver

Api:erna för intern autentisering stöder inte CORS (Cross-Origin Resource Sharing) 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 den med Katalogens (klientens) underdomän. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har klientens underdomän kan du lära dig att läsa klientinformationen.
• tenantId och ersätt det med katalog-ID för klientorganisationen. Om du inte har ditt klient-ID, lär dig hur du läser dina klientuppgifter.

Köra och testa din app

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

1. Från terminalfönstret kör du följande kommandon för att starta CORS-proxyservern:

   cd API\React\ReactAuthSimple
   npm run cors
   

2. Starta React-appen genom att öppna ett annat terminalfönster och sedan köra följande kommandon:

   cd API\React\ReactAuthSimple
   npm start
   

3. Öppna en webbläsare och gå till http://localhost:3000/.

4. Om du vill registrera dig för ett konto väljer du Registrera digoch följer sedan anvisningarna.

5. När du har registrerat dig testar du inloggning och lösenordsåterställning genom att välja Logga in respektive Återställ lösenord.

Relaterat innehåll

• Konfigurera en omvänd proxy för en singelsida-applikation som använder en inbyggd autentiserings-API med Azure Function App.
• Använd Azure Front Door som omvänd proxy i produktionsmiljö för en enkeltsidig app som använder inbyggd autentisering.
• Skapa en React-ensidesapp som använder internt autentiserings-API från grunden.