Quickstart: Aanmelden en een toegangstoken ophalen in een React SPA met behulp van de verificatiecodestroom
Welkom. Dit is waarschijnlijk niet de pagina die u verwachtte te zien. Terwijl we aan een oplossing voor dit probleem werken, kunt u met deze koppeling naar het juiste artikel gaan:
Onze excuses voor het ongemak en bedankt voor uw geduld tijdens onze inspanningen om dit probleem op te lossen.
In deze quickstart downloadt en voert u een codevoorbeeld uit dat laat zien hoe een JavaScript React-toepassing met één pagina (SPA) gebruikers kan aanmelden en Microsoft Graph kan aanroepen met de stroom voor verificatiecodes. Het codevoorbeeld laat zien hoe u een toegangstoken kunt krijgen om de Microsoft Graph API of willekeurige web-API aan te roepen.
Zie Hoe het voorbeeld werkt voor een illustratie.
Vereisten
- Azure-abonnement: Gratis een Azure-abonnement maken
- Node.js
- Visual Studio Code of een andere code-editor
Stap 1: uw toepassing configureren in de Azure-portal
Voor deze codevoorbeelden is een omleidings-URI van http://localhost:3000/vereist.
Uw toepassing is geconfigureerd met deze kenmerken.
Stap 2: Het project downloaden
Het project uitvoeren met een webserver met behulp van Node.js
Notitie
Enter_the_Supported_Account_Info_Here
Stap 3: Uw app is geconfigureerd en gereed om uit te voeren
Uw project is geconfigureerd met waarden van de eigenschappen van uw app.
Stap 4: Het project uitvoeren
Het project uitvoeren met een webserver met behulp van Node.js:
Voer de volgende opdracht uit vanuit de projectmap om de server te starten:
npm install npm startBlader naar
http://localhost:3000/.Selecteer Aanmelden om het aanmeldingsproces te starten en roep vervolgens de Microsoft Graph API aan.
De eerste keer dat u zich aanmeldt, wordt u gevraagd om toestemming te geven zodat de toepassing uw profiel kan openen en u kan aanmelden. Nadat u bent aangemeld, klikt u op de Profielgegevens aanvragen om uw profielgegevens weer te geven op de pagina.
Meer informatie
Hoe het voorbeeld werkt
msal.js
De MSAL.js-bibliotheek meldt gebruikers aan en verzoekt dat tokens worden gebruikt voor toegang tot een API die wordt beveiligd door het Microsoft Identity-platform.
Als Node.js is geïnstalleerd, kunt u de nieuwste versie downloaden met behulp van Node.js Package Manager (npm):
npm install @azure/msal-browser @azure/msal-react
Volgende stappen
Zie de volgende zelfstudie voor een gedetailleerde stapsgewijze handleiding voor het bouwen van de toepassing voor de verificatiecodestroom met React: