Zelfstudie: Microsoft Graph openen vanuit een beveiligde app als de gebruiker
Ontdek hoe u toegang tot Microsoft Graph krijgt vanuit een web-app die wordt uitgevoerd in Azure App Service.
U wilt toegang tot Microsoft Graph vanuit uw web-app toevoegen en een actie uitvoeren als de aangemelde gebruiker. In deze sectie wordt beschreven hoe u gedelegeerde machtigingen verleent aan de web-app en hoe u de profielgegevens van de aangemelde gebruiker opvragen uit Microsoft Entra ID.
In deze zelfstudie leert u het volgende:
- Gedelegeerde machtigingen verlenen aan een web-app.
- Microsoft Graph vanuit een web-app aanroepen voor een aangemelde gebruiker.
Als u geen Azure-abonnement hebt, kunt u een gratis Azure-account maken voordat u begint.
Vereisten
- Een webtoepassing die wordt uitgevoerd in Azure App Service waarvoor de module App Service-verificatie/-autorisatie is ingeschakeld.
De front-end toegang verlenen om Microsoft Graph aan te roepen
Nu u verificatie en autorisatie voor uw web-app hebt ingeschakeld, wordt de web-app geregistreerd bij het Microsoft Identity Platform en wordt deze ondersteund door een Microsoft Entra-toepassing. In deze stap geeft u de web-app machtigingen voor toegang tot Microsoft Graph voor de gebruiker. (Technisch gezien geeft u de Microsoft Entra-toepassing van de web-app de machtigingen voor toegang tot de Microsoft Graph Microsoft Entra-toepassing voor de gebruiker.)
Selecteer Toepassingen in het microsoft Entra-beheercentrummenu.
Selecteer App-registraties>Toepassingen in eigendom>Alle toepassingen in deze map weergeven. Selecteer de naam van uw web-app en selecteer vervolgens API-machtigingen.
Selecteer Een machtiging toevoegen en selecteer vervolgens Microsoft-API's en Microsoft Graph.
Selecteer Gedelegeerde machtigingen en selecteer vervolgens User.Read in de lijst. Selecteer Machtigingen toevoegen.
App Service configureren zodat een bruikbaar toegangstoken wordt geretourneerd
De web-app beschikt nu over de vereiste machtigingen voor toegang tot Microsoft Graph als de aangemelde gebruiker. In deze stap configureert u App Service-verificatie en -autorisatie zodat u een bruikbaar toegangstoken hebt voor toegang tot Microsoft Graph. Voor deze stap moet u het bereik User.Read toevoegen voor de downstreamservice (Microsoft Graph): https://graph.microsoft.com/User.Read.
Belangrijk
Als u App Service niet configureert om een bruikbaar toegangstoken te retourneren, ziet u de foutmelding CompactToken parsing failed with error code: 80049217 wanneer u Microsoft Graph-API's in uw code aanroept.
Ga naar Azure Resource Explorer en gebruik de resourcestructuur om de web-app te zoeken. De resource-URL moet er ongeveer zo uitzien: https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.
De Azure Resource Explorer wordt nu geopend met uw web-app geselecteerd in de resourcestructuur. Selecteer boven aan de pagina Lezen/schrijven om de Azure-resources te kunnen bewerken.
In de linkerbrowser kunt u inzoomen op configuratieauthsettingsV2>.
Selecteer Bewerken in de weergave authsettingsV2. Zoek de aanmeldingssectie van identityProviders ->azureActiveDirectory en voeg de volgende loginParameters-instellingen toe: "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ]
"identityProviders": {
"azureActiveDirectory": {
"enabled": true,
"login": {
"loginParameters":[
"response_type=code id_token",
"scope=openid offline_access profile https://graph.microsoft.com/User.Read"
]
}
}
}
},
Sla de instellingen op door PUT te selecteren. Het kan enkele minuten duren voordat deze instelling is doorgevoerd. Uw web-app is nu geconfigureerd voor toegang tot Microsoft Graph met het juiste toegangstoken. Als u dit niet goed configureert, retourneert Microsoft Graph een foutmelding waarin staat dat de indeling van het compacte token incorrect is.
Microsoft Graph aanroepen
Uw web-app heeft nu de vereiste machtigingen en voegt tevens de client-id van Microsoft Graph toe aan de aanmeldingsparameters.
De web-app maakt gebruik van de Microsoft.Identity.Web-bibliotheek om een toegangstoken op te halen voor verificatie bij Microsoft Graph. In versie 1.2.0 en later integreert de Microsoft.Identity.Web-bibliotheek met de module App Service-verificatie/-autorisatie en kan de bibliotheek daarnaast worden uitgevoerd. Microsoft.Identity.Web detecteert dat de web-app in App Service wordt gehost en haalt het toegangstoken op uit de module App Service-verificatie/-autorisatie. Het toegangstoken wordt vervolgens aan geverifieerde aanvragen doorgegeven met de Microsoft Graph-API.
Zie het voorbeeld op GitHub als u deze code wilt bekijken als onderdeel van een voorbeeldtoepassing.
Notitie
De Microsoft.Identity.Web-bibliotheek is niet vereist in de web-app voor basisverificatie/-autorisatie of om aanvragen te verifiëren met Microsoft Graph. Het is mogelijk om downstream-API's veilig aan te roepen terwijl alleen de module App Service-verificatie/-autorisatie is ingeschakeld.
De module App Service-verificatie/-autorisatie is echter ontworpen voor eenvoudigere verificatiescenario's. Voor ingewikkeldere scenario's (bijvoorbeeld de verwerking van aangepaste claims) hebt u de Microsoft.Identity.Web-bibliotheek of Microsoft Authentication Library nodig. Aan het begin is er wat meer instellings- en configuratiewerk, maar de Microsoft.Identity.Web-bibliotheek kan naast de module App Service-verificatie/-autorisatie worden uitgevoerd. Later, wanneer uw web-app ingewikkeldere scenario's moet verwerken, kunt u de module App Service-verificatie/-autorisatie uitschakelen en zal Microsoft.Identity.Web al onderdeel van uw app zijn.
Clientbibliotheekpakketten installeren
Installeer de NuGet-pakketten Microsoft.Identity.Web.Web.GraphServiceClient in uw project met behulp van de .NET-opdrachtregelinterface (CLI) of de Pakketbeheer Console in Visual Studio.
.NET CLI
Open een opdrachtregel en ga naar de map die uw projectbestand bevat.
Voer de installatieopdrachten uit.
dotnet add package Microsoft.Identity.Web.GraphServiceClient
dotnet add package Microsoft.Identity.Web
Package Manager Console
Open het project/de oplossing in Visual Studio en open de console met de opdracht Hulpprogramma's>NuGet Package Manager>Package Manager Console.
Voer de installatieopdrachten uit.
Install-Package Microsoft.Identity.Web.GraphServiceClient
Install-Package Microsoft.Identity.Web
Startup.cs
In het bestand Startup.cs wordt Microsoft.Identity.Web aan uw web-app toegevoegd met de methode AddMicrosoftIdentityWebApp. Met de methode AddMicrosoftGraph wordt Microsoft Graph-ondersteuning toegevoegd.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Identity.Web;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
// Some code omitted for brevity.
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddOptions();
string[] initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');
services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
.AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
.EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
.AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
.AddInMemoryTokenCaches();
services.AddAuthorization(options =>
{
// By default, all incoming requests will be authorized according to the default policy
options.FallbackPolicy = options.DefaultPolicy;
});
services.AddRazorPages()
.AddMvcOptions(options => {})
.AddMicrosoftIdentityUI();
services.AddControllersWithViews()
.AddMicrosoftIdentityUI();
}
}
appsettings.json
Microsoft Entra-id geeft de configuratie voor de Microsoft.Identity.Web-bibliotheek op. Selecteer in het Microsoft Entra-beheercentrum toepassingen in het portalmenu en selecteer vervolgens App-registraties. Selecteer de app-registratie die is gemaakt toen u de module App Service-verificatie/-autorisatie hebt ingeschakeld. (De app-registratie moet dezelfde naam hebben als uw web-app.) U vindt de tenant-id en client-id op de overzichtspagina van de app-registratie. De domeinnaam vindt u op de overzichtspagina van Microsoft Entra voor uw tenant.
Graph specificeert het Microsoft Graph-eindpunt en de initiële bereiken die de app nodig heeft.
{
"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]",
"TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Entra admin center. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. aaaabbbb-0000-cccc-1111-dddd2222eeee]",
"ClientId": "[Enter the Client Id (Application ID obtained from the Microsoft Entra admin center), e.g. 00001111-aaaa-2222-bbbb-3333cccc4444]",
"ClientSecret": "[Copy the client secret added to the app from the Microsoft Entra admin center]",
"ClientCertificates": [
],
// the following is required to handle Continuous Access Evaluation challenges
"ClientCapabilities": [ "cp1" ],
"CallbackPath": "/signin-oidc"
},
"DownstreamApis": {
"MicrosoftGraph": {
// Specify BaseUrl if you want to use Microsoft graph in a national cloud.
// See https://learn.microsoft.com/graph/deployments#microsoft-graph-and-graph-explorer-service-root-endpoints
// "BaseUrl": "https://graph.microsoft.com/v1.0",
// Set RequestAppToken this to "true" if you want to request an application token (to call graph on
// behalf of the application). The scopes will then automatically
// be ['https://graph.microsoft.com/.default'].
// "RequestAppToken": false
// Set Scopes to request (unless you request an app token).
"Scopes": [ "User.Read" ]
// See https://aka.ms/ms-id-web/downstreamApiOptions for all the properties you can set.
}
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
Index.cshtml.cs
Het volgende voorbeeld laat zien hoe u Microsoft Graph aanroept als de aangemelde gebruiker en hoe u wat gebruikersgegevens ophaalt. Het GraphServiceClient-object wordt in de controller geïnjecteerd en verificatie is voor u geconfigureerd via de Microsoft.Identity.Web-bibliotheek.
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Graph;
using System.IO;
using Microsoft.Identity.Web;
using Microsoft.Extensions.Logging;
// Some code omitted for brevity.
[AuthorizeForScopes(Scopes = new[] { "User.Read" })]
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
private readonly GraphServiceClient _graphServiceClient;
public IndexModel(ILogger<IndexModel> logger, GraphServiceClient graphServiceClient)
{
_logger = logger;
_graphServiceClient = graphServiceClient;
}
public async Task OnGetAsync()
{
try
{
var user = await _graphServiceClient.Me.GetAsync();
ViewData["Me"] = user;
ViewData["name"] = user.DisplayName;
using (var photoStream = await _graphServiceClient.Me.Photo.Content.GetAsync())
{
byte[] photoByte = ((MemoryStream)photoStream).ToArray();
ViewData["photo"] = Convert.ToBase64String(photoByte);
}
}
catch (Exception ex)
{
ViewData["photo"] = null;
}
}
}
Resources opschonen
Als u klaar bent met deze zelfstudie en de web-app of bijbehorende resources niet meer nodig hebt, kunt u de gemaakte resources opschonen.