Öğretici: Tek sayfalı React uygulaması oluşturma ve bunu kimlik doğrulaması için hazırlama

Şunlar için geçerlidir: Aşağıdaki içeriğin iş gücü kiracıları için geçerli olduğunu gösteren beyaz onay işareti simgesine sahip yeşil daire. İş gücü kiracıları Aşağıdaki içeriğin dış kiracılar için geçerli olduğunu gösteren beyaz onay işareti simgesine sahip yeşil daire. Dış kiracılar (daha fazla bilgi edinin)

Bu öğreticide bir React tek sayfalı uygulama (SPA) oluşturacak ve Bunu Microsoft kimlik platformunu kullanarak kimlik doğrulaması için hazırlayacaksınız. Bu öğreticide, npmkullanarak React SPA oluşturma, kimlik doğrulaması ve yetkilendirme için gereken dosyaları oluşturma ve kiracı ayrıntılarınızı kaynak koda ekleme işlemleri gösterilmektedir. Uygulama, bir iş gücü kiracısında çalışanlar veya dış kiracı kullanan müşteriler için kullanılabilir.

Bu öğreticide şunları yapacaksınız:

  • Yeni react projesi oluşturma
  • Kimlik doğrulaması için gereken paketleri yükleme
  • Dosya yapınızı oluşturma ve sunucu dosyasına kod ekleme
  • Kiracı ayrıntılarınızı kimlik doğrulama yapılandırma dosyasına ekleme

Önkoşullar

  • Çalışan kiracı. Varsayılan Dizininizi kullanabilir veya yeni bir kiracı ayarlayabilirsiniz.
  • Microsoft Entra yönetim merkezine, yalnızca bu kuruluş dizinindeki Hesaplar için yapılandırılmış yeni bir uygulama kaydedin. Daha fazla bilgi için Bir uygulamayı kaydetme bölümüne bakın. Daha sonra kullanmak üzere uygulamaya Genel Bakış sayfasından aşağıdaki değerleri kaydedin:
    • Uygulama (istemci) kimliği
    • Dizin (kullanıcı) kimliği
  • Tek sayfalı uygulama platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
    • Yönlendirme URI'sini: http://localhost:3000/.

Yeni react projesi oluşturma

  1. Visual Studio Code'u açın. Dosya>Klasör Aç...öğesini seçin. Projenizi oluşturmak için adresine gidin ve yerini seçin.

  2. Terminal>Yeni Terminal'ni seçerek yeni bir terminal açın.

  3. Reactspalocal adlı yeni bir React projesi oluşturmak için aşağıdaki komutları çalıştırın, yeni dizine geçin ve React projesini başlatın. Varsayılan olarak, adres http://localhost:3000/ ile bir web tarayıcısı açılır. Tarayıcı açık kalır ve kaydedilen her değişiklik için yeniden işler.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

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

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

Kimlik ve önyükleme paketlerini yükleme

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

  1. Terminal çubuğunda yeni bir terminal oluşturmak için + simgesini seçin. Önceki düğüm terminalinin arka planda çalışmaya devam etmesiyle ayrı bir terminal penceresi açılır.

  2. Doğru dizinin seçildiğinden emin olun (reactspalocal) ardından ilgili msal ve bootstrap paketlerini yüklemek için terminale aşağıdakileri girin.

    npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap

Kiracı ayrıntılarınızı MSAL yapılandırmasına ekleme

authConfig.js dosyası, kimlik doğrulama akışının yapılandırma ayarlarını içerir ve MSAL.js kimlik doğrulaması için gerekli ayarlarla yapılandırmak için kullanılır.

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

    
 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://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000', // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/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/en-us/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"
 // };

  2. Aşağıdaki değerleri Microsoft Entra yönetim merkezindeki değerlerle değiştirin.

    • clientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Enter_the_Application_Id_Here değerini, kayıtlı uygulamanın genel bakış sayfasında daha önce kaydedilen Uygulama (istemci) kimliği değeriyle değiştirin.
    • authority - Bu iki bölümden oluşur:
      • Örneği, bulut sağlayıcısının uç noktasıdır. National bulutlarında bulunan farklı uç noktalarıdenetleyin.
      • Kiracı Kimliği, uygulamanın kaydedildiği kiracının tanımlayıcısıdır. Enter_the_Tenant_Info_Here değerini, kayıtlı uygulamanın genel bakış sayfasından daha önce kaydedilen Dizin (kiracı) kimliği değeriyle değiştirin.

  3. Dosyayı kaydedin.

Kimlik doğrulama sağlayıcısını ekleme

msal paketleri uygulamada kimlik doğrulaması sağlamak için kullanılır. msal-browser paketi kimlik doğrulama akışını işlemek için kullanılır ve msal-react paketi msal-browser React ile tümleştirmek için kullanılır. addEventCallback, bir kullanıcı başarıyla oturum açtığında olduğu gibi kimlik doğrulama işlemi sırasında gerçekleşen olayları dinlemek için kullanılır. setActiveAccount yöntemi, uygulamanın etkin hesabını ayarlamak için kullanılır ve hangi kullanıcının bilgilerinin görüntüleneceğini belirlemek için kullanılır.

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

    import React from 'react';
import { createRoot } 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.getAllAccounts()[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 = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

  2. Dosyayı kaydedin.

Bu paketler hakkında daha fazla bilgi edinmek için msal-browser ve msal-reactiçindeki belgelere bakın.

Ana uygulama bileşenini ekleme

Uygulamanın kimlik doğrulaması gerektiren tüm bölümleri MsalProvider bileşeninde sarmalanmalıdır. instance örneğini almak için useMsal kancasını çağıran bir PublicClientApplication değişkeni ayarlayıp MsalProvider'e geçirirsiniz. MsalProvider bileşeni, PublicClientApplication örneğini React'in Bağlam API'sini kullanarak uygulamanızda kullanılabilir hale getirir. MsalProvider altındaki tüm bileşenler bağlam aracılığıyla PublicClientApplication örneğine ve msal-reacttarafından sağlanan tüm kancalara ve bileşenlere erişebilir.

  1. src klasöründe app.jsx açın ve dosyanın içeriğini aşağıdaki kod parçacığıyla değiştirin:

    import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
import { Container, Button } from 'react-bootstrap';
import { PageLayout } from './components/PageLayout';
import { IdTokenData } from './components/DataDisplay';
import { loginRequest } from './authConfig';

import './styles/App.css';

/**
* Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
* msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
* only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const MainContent = () => {
    /**
    * useMsal is hook that returns the PublicClientApplication instance,
    * that tells you what msal is currently doing. For more, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
    */
    const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();

    const handleRedirect = () => {
        instance
            .loginRedirect({
                ...loginRequest,
                prompt: 'create',
            })
            .catch((error) => console.log(error));
    };
    return (
        <div className="App">
            <AuthenticatedTemplate>
                {activeAccount ? (
                    <Container>
                        <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                    </Container>
                ) : null}
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <Button className="signInButton" onClick={handleRedirect} variant="primary">
                    Sign up
                </Button>
            </UnauthenticatedTemplate>
        </div>
    );
};


/**
* msal-react is built on the React context API and all parts of your app that require authentication must be 
* wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
* then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
* PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const App = ({ instance }) => {
    return (
        <MsalProvider instance={instance}>
            <PageLayout>
                <MainContent />
            </PageLayout>
        </MsalProvider>
    );
};

export default App;

  2. Dosyayı kaydedin.

Sonraki adımlar

Eğitim: React tek sayfa uygulamada oturum açma ve kapatma bileşenleri oluşturma

  • Last updated on