Öğretici: Dış kiracıda kimlik doğrulaması için React SPA oluşturma

Makale
06/27/2024

Bu öğretici, Tek sayfalı React uygulaması oluşturmayı (ayrıcalıklı erişimin (SPA) güvenliğini sağlama) ve Bunu Microsoft Entra yönetim merkezini kullanarak kimlik doğrulaması için hazırlamayı gösteren serinin 2. bölümüdür. Bu serinin 1. Bölümünde, bir uygulamayı kaydettiniz ve dış kiracınızda kullanıcı akışlarını yapılandırdınız. Bu öğreticide kullanarak npm React SPA oluşturma ve kimlik doğrulaması ve yetkilendirme için gereken dosyaları oluşturma işlemleri gösterilmektedir.

Bu öğreticide;

Visual Studio Code'da React projesi oluşturma
Kimlik ve önyükleme paketlerini yükleme
Uygulama ayarlarını yapılandırma

Önkoşullar

Öğretici: React SPA'da kullanıcıların kimliğini doğrulamak için dış kiracınızı hazırlama.
React uygulamalarını destekleyen tüm tümleşik geliştirme ortamları (IDE) kullanılabilse de, bu öğreticide Visual Studio Code kullanılmaktadır.
Node.js.

React projesi oluşturma

Visual Studio Code'ı açın, Dosya>Klasör Aç... öğesini seçin. Adresine gidin ve projenizin oluşturulacağı konumu seçin.
Terminal>Yeni Terminal'i seçerek yeni bir terminal açın.
Reactspalocal adlı yeni bir React projesi oluşturmak, yeni dizine geçmek ve React projesini başlatmak için aşağıdaki komutları çalıştırın. Varsayılan olarak adresi http://localhost:3000/ içeren bir web tarayıcısı açılır. Tarayıcı açık kalır ve kaydedilen her değişiklik için yeniden açılır.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Aşağıdaki klasör yapısını elde etmek için ek klasörler ve dosyalar oluşturun:

reactspalocal
├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └───styles
    │   └─── App.css
    │   └─── index.css
    └─── utils
    │    └─── claimUtils.js
    └── App.jsx
    └── authConfig.js
    └── index.js

Uygulama bağımlılıklarını yükleme

Kullanıcı kimlik doğrulamasını etkinleştirmek için projeye kimlikle ilgili npm paketleri yüklenmelidir. Proje stili için Bootstrap kullanılır.

Terminal çubuğunda simgeyi + seçerek yeni bir terminal oluşturun. Diğer terminalin arka planda çalışmaya devam etmesini sağlayan yeni bir terminal penceresi açılır.
Gerekirse reactspalocal adresine gidin ve ve bootstrap paketlerini yüklemek msal için terminale aşağıdaki komutları girin.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Kimlik doğrulama yapılandırma dosyasını oluşturun authConfig.js

src klasöründe authConfig.js açın ve aşağıdaki kod parçacığını ekleyin:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from '@azure/msal-browser';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            },
        },
    },
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit:
 * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: [],
};

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
// export const silentRequest = {
//     scopes: ["openid", "profile"],
//     loginHint: "example@domain.net"
// };

Aşağıdaki değerleri Azure portalındaki değerlerle değiştirin:
- Enter_the_Application_Id_Here Değeri bulun ve Microsoft Entra yönetim merkezine kaydettiğiniz uygulamanın Uygulama Kimliği (clientId) ile değiştirin.
- Yetkili'de bu alanı bulun Enter_the_Tenant_Subdomain_Here ve kiracınızın alt etki alanıyla değiştirin. Örneğin, kiracı birincil etki alanınız ise contoso.onmicrosoft.comkullanın contoso. Kiracı adınız yoksa kiracınızın ayrıntılarını nasıl okuyacağınızı öğrenin.
Dosyayı kaydedin.

Özel URL etki alanı kullanma (İsteğe bağlı)

Kimlik doğrulama URL'sini tam olarak markalandıracak özel bir etki alanı kullanın. Kullanıcı açısından bakıldığında, kullanıcılar ciamlogin.com etki alanı adına yeniden yönlendirilmek yerine kimlik doğrulama işlemi sırasında etki alanınızda kalır.

Özel etki alanı kullanmak için aşağıdaki adımları kullanın:

Dış kiracınızda özel URL etki alanını etkinleştirmek için Dış kiracılardaki uygulamalar için özel URL etki alanlarını etkinleştirme başlığındaki adımları kullanın.
authConfig.js dosyanızda then auth nesnesini bulun ve ardından:
1. özelliğinin authority değerini olarak https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Heregüncelleştirin. değerini özel URL etki alanınızla ve Enter_the_Tenant_ID_Here kiracı kimliğiniz ile değiştirinEnter_the_Custom_Domain_Here. Kiracı kimliğiniz yoksa kiracı ayrıntılarınızı nasıl okuyacağınızı öğrenin.
2. [Enter_the_Custom_Domain_Here] değerine sahip özellik ekleyinknownAuthorities.

authConfig.js dosyanızda değişiklik yaptıktan sonra, özel URL etki alanınız login.contoso.com ve kiracı kimliğiniz aaaabbbb-0000-cccc-1111-dddd2222eeeee ise, dosyanız aşağıdaki kod parçacığına benzer görünmelidir:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

index.js kimlik doğrulama sağlayıcısını içerecek şekilde değiştirme

Uygulamanın kimlik doğrulaması gerektiren tüm bölümleri bileşende MsalProvider sarmalanmalıdır. PublicClientApplication örneğini oluşturur ve sonra öğesine MsalProvidergeçirirsiniz.

src klasöründe index.js açın ve paketleri ve bootstrap stillerini kullanmak msal için dosyanın içeriğini aşağıdaki kod parçacığıyla değiştirin:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
 * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
 * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
 */
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

Sonraki adım

Bölüm 3: React SPA'da kimlik doğrulama akışlarını işleme

Aracılığıyla paylaş