Öğretici: Kullanıcı olarak güvenli bir JavaScript uygulamasından Microsoft Graph'a erişme
Azure Uygulaması Hizmetinde çalışan bir web uygulamasından Microsoft Graph'a erişmeyi öğrenin.
Web uygulamanızdan Microsoft Graph'a erişim eklemek ve oturum açmış kullanıcı olarak bazı eylemler gerçekleştirmek istiyorsunuz. Bu bölümde, web uygulamasına temsilci izinleri verme ve oturum açmış kullanıcının profil bilgilerini Microsoft Entra Id'den alma işlemleri açıklanmaktadır.
Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:
- Bir web uygulaması için temsilci izinleri verme.
- Oturum açmış bir kullanıcı için web uygulamasından Microsoft Graph'ı arayın.
Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı oluşturun.
Ön koşullar
- App Service kimlik doğrulaması/yetkilendirme modülü etkinleştirilmiş Azure Uygulaması Hizmeti üzerinde çalışan bir web uygulaması.
Microsoft Graph'ı çağırmak için ön uç erişimi verme
Web uygulamanızda kimlik doğrulama ve yetkilendirmeyi etkinleştirdiğinize göre, web uygulaması Microsoft kimlik platformu kaydedilir ve bir Microsoft Entra uygulaması tarafından desteklenir. Bu adımda, web uygulamasına kullanıcı için Microsoft Graph'a erişme izni verirsiniz. (Teknik olarak, web uygulamasının Microsoft Entra uygulamasına kullanıcı için Microsoft Graph Microsoft Entra uygulamasına erişim izinleri verirsiniz.)
Microsoft Entra yönetim merkezinde Uygulamalar'ı seçin.
Uygulama kayıtları> Uygulanan uygulamalar>Bu dizindeki tüm uygulamaları görüntüle'yi seçin. Web uygulamanızın adını ve ardından API izinleri'ne tıklayın.
İzin ekle'yi ve ardından Microsoft API'leri ve Microsoft Graph'ı seçin.
Temsilci izinleri'ni ve ardından listeden User.Read öğesini seçin. İzinler ekle'yi seçin.
App Service’i kullanılabilir bir erişim belirteci döndürecek şekilde yapılandırma
Web uygulaması artık oturum açmış kullanıcı olarak Microsoft Graph'a erişmek için gerekli izinlere sahiptir. Bu adımda, App Service kimlik doğrulamasını ve yetkilendirmesini, Microsoft Graph'a erişmek için size kullanılabilir bir erişim belirteci verecek şekilde yapılandıracaksınız. Bu adım için aşağı akış hizmeti (Microsoft Graph) için User.Read kapsamını eklemeniz gerekir: https://graph.microsoft.com/User.Read.
Önemli
App Service'i kullanılabilir bir erişim belirteci döndürecek şekilde yapılandırmazsanız, kodunuzda Microsoft Graph API'lerini çağırdığınızda bir CompactToken parsing failed with error code: 80049217 hata alırsınız.
Azure Kaynak Gezgini'ne gidin ve kaynak ağacını kullanarak web uygulamanızı bulun. Kaynak URL'si ile https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914benzer olmalıdır.
Azure Kaynak Gezgini artık kaynak ağacında web uygulamanız seçili olarak açılır.
Azure kaynaklarınızın düzenlenmesini etkinleştirmek için sayfanın üst kısmında Okuma/Yazma'yı seçin.
Sol tarayıcıda authsettingsV2 yapılandırmasına >gidin.
authsettingsV2 görünümünde Düzenle'yi seçin.
identityProviders ->azureActiveDirectory'ninoturum açma bölümünü bulun ve aşağıdaki loginParameters ayarlarını ekleyin:
"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" ] } } } },PUT'ı seçerek ayarlarınızı kaydedin. Bu ayarın geçerlilik kazanması birkaç dakika sürebilir. Web uygulamanız artık uygun bir erişim belirteci ile Microsoft Graph'a erişecek şekilde yapılandırıldı. Aksi takdirde, Microsoft Graph sıkıştırılmış belirtecin biçiminin yanlış olduğunu belirten bir hata döndürür.
Node.js'den Microsoft Graph'ı çağırma
Web uygulamanız artık gerekli izinlere sahiptir ve oturum açma parametrelerine Microsoft Graph'ın istemci kimliğini ekler.
Bu kodu örnek bir uygulamanın parçası olarak görmek için aşağıdakilere bakın:
- GitHub'da örnek.
İstemci kitaplığı paketlerini yükleme
npm ile projenize @azure/identity ve @microsoft/microsoft-graph-client paketlerini yükleyin.
npm install @microsoft/microsoft-graph-client
Kimlik doğrulama bilgilerini yapılandırma
Kimlik doğrulama ayarlarını tutmak için bir nesne oluşturun:
// partial code in app.js
const appSettings = {
appCredentials: {
clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
tenantId: "common", // Enter the tenant info here,
clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
},
authRoutes: {
redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
error: "/error", // enter the relative path to error handling route
unauthorized: "/unauthorized" // enter the relative path to unauthorized route
},
protectedResources: {
graphAPI: {
endpoint: "https://graph.microsoft.com/v1.0/me", // resource endpoint
scopes: ["User.Read"] // resource scopes
},
},
}
Kullanıcı adına Microsoft Graph'ı arayın
Aşağıdaki kod, Microsoft Graph denetleyicisini uygulama olarak çağırmayı ve bazı kullanıcı bilgilerini almayı gösterir.
// controllers/graphController.js
// get the name of the app service instance from environment variables
const appServiceName = process.env.WEBSITE_SITE_NAME;
const graphHelper = require('../utils/graphHelper');
exports.getProfilePage = async(req, res, next) => {
try {
// get user's access token scoped to Microsoft Graph from session
// use token to create Graph client
const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);
// return user's profile
const profile = await graphClient
.api('/me')
.get();
res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });
} catch (error) {
next(error);
}
}
Önceki kod, Microsoft Graph istemcisini döndürmek için aşağıdaki getAuthenticatedClient işlevine dayanır.
// utils/graphHelper.js
const graph = require('@microsoft/microsoft-graph-client');
getAuthenticatedClient = (accessToken) => {
// Initialize Graph client
const client = graph.Client.init({
// Use the provided access token to authenticate requests
authProvider: (done) => {
done(null, accessToken);
}
});
return client;
}
Kaynakları temizleme
Bu çok bölümlü öğreticideki tüm adımları tamamladıysanız, bir kaynak grubunda bir app service, app service barındırma planı ve bir depolama hesabı oluşturdunuz. Ayrıca Microsoft Entra Id'de bir uygulama kaydı oluşturdunuz. Artık gerekli olmadığında, ücret tahakkuk etmeye devam etmemesi için bu kaynakları ve uygulama kaydını silin.
Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:
- Öğreticiyi takip ederken oluşturulan Azure kaynaklarını silin.
Kaynak grubunu silme
Azure portalında portal menüsünden Kaynak grupları'nı ve ardından app service ve app service planınızı içeren kaynak grubunu seçin.
Kaynak grubunu ve tüm kaynakları silmek için Kaynak grubunu sil'i seçin.
Bu komutun çalıştırılması birkaç dakika sürebilir.
Uygulama kaydını silme
Microsoft Entra yönetim merkezinde Uygulamalar> Uygulama kayıtları'ı seçin. Ardından oluşturduğunuz uygulamayı seçin.
Uygulama kaydına genel bakış bölümünde Sil'i seçin.
Sonraki adımlar
Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:
- Bir web uygulaması için temsilci izinleri verme.
- Oturum açmış bir kullanıcı için web uygulamasından Microsoft Graph'ı arayın.