Aracılığıyla paylaş


Kuruluş Verileri: Bir Kullanıcıda Oturum Açma ve Erişim Belirteci Alma

Microsoft Graph'ın kuruluş verilerine erişebilmesi için kullanıcıların Microsoft Entra ID ile kimlik doğrulaması yapabilmesi gerekir. Bu alıştırmada Microsoft Graph Toolkit'in mgt-login bileşeninin kullanıcıların kimliğini doğrulamak ve erişim belirteci almak için nasıl kullanılabileceğini göreceksiniz. Erişim belirteci daha sonra Microsoft Graph'a çağrı yapmak için kullanılabilir.

Uyarı

Microsoft Graph'ı yeni kullanıyorsanız microsoft graph temel bilgileri öğrenme yolunda bu konuda daha fazla bilgi edinebilirsiniz.

Bu alıştırmada şunları yapacaksınız:

  • Kullanıcıların kimliğini doğrulamak ve kuruluş verilerini almak için bir Microsoft Entra ID uygulamasını Microsoft Graph Araç Seti ile ilişkilendirmeyi öğrenin.
  • Kapsamların önemi hakkında bilgi edinin.
  • Microsoft Graph Toolkit'in mgt-login bileşeninin kullanıcıların kimliğini doğrulamak ve erişim belirteci almak için nasıl kullanılabileceğini öğrenin.

Oturum Açma Özelliğini Kullanma

  1. Önceki alıştırmada, Microsoft Entra Id'de bir uygulama kaydı oluşturdunuz ve uygulama sunucusunu ve API sunucusunu başlattınız. Ayrıca dosyasındaki (.env ve TEAM_ID isteğe bağlı) aşağıdaki değerleri CHANNEL_ID güncelleştirmişsinizdir:

    ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
    TEAM_ID=<TEAMS_TEAM_ID>
    CHANNEL_ID=<TEAMS_CHANNEL_ID>
    

    Devam etmeden önce önceki alıştırmayı tamamladığınızdan emin olun.

  2. Tarayıcıya ()http://localhost:4200 dönün, üst bilgide Oturum Aç'ı seçin ve Microsoft 365 Geliştirici kiracınızdan bir yönetici kullanıcı hesabı kullanarak oturum açın.

    İpucu

    Microsoft 365 geliştirici kiracısı yönetici hesabınızla oturum açın. Microsoft 365 yönetim merkezine giderek geliştirici kiracınızdaki diğer kullanıcıları görüntüleyebilirsiniz.

  3. Uygulamada ilk kez oturum açıyorsanız, uygulama tarafından istenen izinleri onaylamanız istenir. Kodu keşfederken sonraki bölümde bu izinler ("kapsamlar" olarak da adlandırılır) hakkında daha fazla bilgi edineceksiniz. Devam etmek için Kabul Et'i seçin.

  4. Oturum açtıktan sonra, üst bilgide görüntülenen kullanıcının adını görmeniz gerekir.

    Oturum açmış kullanıcı

Oturum Açma Kodunu Keşfetme

Artık oturum açtığınıza göre, kullanıcıda oturum açmak ve erişim belirteci ile kullanıcı profilini almak için kullanılan koda bakalım. Microsoft Graph Araç Seti'nin parçası olan mgt-login web bileşeni hakkında bilgi edineceksiniz.

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

  • Windows/Linux: Ctrl + P
  • Mac: Cmd + P

Ardından açmak istediğiniz dosyanın adını yazın.

  1. İstemciyi/package.json açın ve ve @microsoft/mgt paketlerinin bağımlılıklara dahil olduğuna @microsoft/mgt-components dikkat edin. Paket, @microsoft/mgt MSAL (Microsoft Authentication Library) sağlayıcı özelliklerini ve mgt-login gibi web bileşenlerini ve kullanıcıları oturum açmak ve kuruluş verilerini almak ve görüntülemek için kullanılabilecek diğer bileşenleri içerir.

  2. client/src/main.ts açın ve paketten @microsoft/mgt-components aşağıdaki içeri aktarmalara dikkat edin. İçeri aktarılan simgeler, uygulamada kullanılan Microsoft Graph Araç Seti bileşenlerini kaydetmek için kullanılır.

    import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
    
  3. Dosyanın en altına kaydırın ve aşağıdaki kodu not edin:

    registerMgtLoginComponent();
    registerMgtSearchResultsComponent();
    registerMgtPersonComponent();
    

    Bu kod , mgt-loginve web bileşenlerini kaydeder mgt-search-resultsve mgt-person uygulamada kullanılmasını sağlar.

  4. Kullanıcıları oturum açmak için mgt-login bileşenini kullanmak için Microsoft Entra ID uygulamasının istemci kimliğine ( .env dosyasında olarak ENTRAID_CLIENT_IDdepolanır) başvurulması ve kullanılması gerekir.

  5. graph.service.ts açın ve işlevi buluninit(). Dosyanın tam yolu client/src/app/core/graph.service.ts şeklindedir. Aşağıdaki içeri aktarma ve kodu görürsünüz:

    import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';
    
    init() {
        if (!this.featureFlags.microsoft365Enabled) return;
    
        if (!Providers.globalProvider) {
            console.log('Initializing Microsoft Graph global provider...');
            Providers.globalProvider = new Msal2Provider({
                clientId: ENTRAID_CLIENT_ID,
                scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                        'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
            });
        }
        else {
            console.log('Global provider already initialized');
        }
    }
    

    Bu kod, uygulama kaydınızdan Microsoft Entra ID istemci kimliğini geçirerek ve Msal2Provider uygulamanın erişim isteğinde bulunacağı yeni scopes bir nesne oluşturur. scopes, uygulamanın erişeceği Microsoft Graph kaynaklarına erişim istemek için kullanılır. Msal2Provider Nesne oluşturulduktan sonra, Microsoft Graph Toolkit bileşenleri tarafından Microsoft Graph'tan veri almak için kullanılan nesneye atanırProviders.globalProvider.

  6. düzenleyicinizde header.component.html açın ve mgt-login bileşenini bulun. Dosyanın tam yolu client/src/app/header/header.component.htmlşeklindedir.

    @if (this.featureFlags.microsoft365Enabled) {
        <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
    }
    

    mgt-login bileşeni, kullanıcının oturum açmasını sağlar ve Microsoft Graph ile kullanılan bir belirteci erişim sağlar. Oturum başarıyla açıldıktan loginCompleted sonra, işlevi çağıran loginCompleted() olay tetikler. Bu örnekteki bir Angular bileşeninde mgt-login kullanılmış olsa da, herhangi bir web uygulamasıyla uyumludur.

    mgt-login bileşeninin görüntülenmesi, olarak ayarlanan değere featureFlags.microsoft365Enabledbağlıdırtrue. Bu özel bayrak, uygulamanın düzgün yapılandırıldığını ve Microsoft Entra Kimliği'ne göre kimlik doğrulaması yapabildiğini onaylamak için ortam değişkeninin varlığını ENTRAID_CLIENT_ID denetler. Bayrağı, kullanıcıların tüm alıştırma dizisini takip etmek yerine yalnızca öğreticideki yapay zeka veya İletişim alıştırmalarını tamamlamayı seçtiği durumları barındırmak için eklenir.

  7. header.component.ts açın ve işlevi bulunloginCompleted. Bu işlev, olay yayıldığında loginCompleted çağrılır ve kullanarak Providers.globalProvideroturum açmış kullanıcının profilini almayı işler.

    async loginCompleted() {
        const me = await Providers.globalProvider.graph.client.api('me').get();
        this.userLoggedIn.emit(me);
    }
    

    Bu örnekte, kullanıcının profilini almak için Microsoft Graph me API'sine bir çağrı yapılmaktadır (me geçerli oturum açmış kullanıcıyı temsil eder). this.userLoggedIn.emit(me) Kod deyimi, profil verilerini üst bileşene geçirmek için bileşenden bir olay yayar. Üst bileşen, bu durumda uygulamanın kök bileşeni olan app.component.ts dosyasıdır.

    mgt-login bileşeni hakkında daha fazla bilgi edinmek için Microsoft Graph Araç Seti belgelerini ziyaret edin.

  8. Uygulamada oturum açtığınıza göre kuruluş verilerinin nasıl alınabileceğine bakalım.

Sonraki Adım