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

Kayıt tamamlandıktan sonra, tümleşik bir geliştirme ortamı (IDE) kullanılarak bir React projesi oluşturulabilir. Bu öğreticide kimlik doğrulaması ve yetkilendirme için gereken dosyaları kullanarak npm tek sayfalı react uygulamasının nasıl oluşturulacağı gösterilmektedir.

Bu öğreticide:

• Yeni react projesi oluşturma
• Uygulama ayarlarını yapılandırma
• Kimlik ve önyükleme paketlerini yükleme
• Uygulamaya kimlik doğrulama kodu ekleme

Önkoşullar

• Öğretici: Uygulamayı kaydetme bölümünde önkoşulların ve adımların tamamlanması.
• React uygulamalarını destekleyen tüm IDE'ler kullanılabilse de, bu öğretici için aşağıdaki Visual Studio IDE'leri kullanılır. bunlar İndirmeler sayfasından indirilebilir. macOS kullanıcıları için Visual Studio Code kullanılması önerilir.
  • Visual Studio 2022
  • Visual Studio Code
• Node.js.

Yeni react projesi oluşturma

IDE içinde react projesi oluşturmak için aşağıdaki sekmeleri kullanın.

Visual Studio

1. Visual Studio'yu açın ve ardından Yeni proje oluştur'u seçin.

2. Tek başına JavaScript React Projesi şablonunu arayıp seçin ve ardından İleri'yi seçin.

3. Proje için reactspalocal gibi bir ad girin.

4. Proje için bir konum seçin veya varsayılan seçeneği kabul edin ve ardından İleri'yi seçin.

5. Ek bilgiler bölümünde Oluştur'u seçin.

6. Uygulamayı başlatmak için araç çubuğundan Hata Ayıklama Olmadan Başlat'ı seçin. Bir web tarayıcısı varsayılan olarak adresiyle http://localhost:3000/ açılır. Tarayıcı açık kalır ve kaydedilen her değişiklik için yeniden işlenir.

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

   ├─── public
   │   └─── index.html
   └───src
       ├─── components
       │   └─── PageLayout.jsx
       │   └─── ProfileData.jsx
       │   └─── SignInButton.jsx
       │   └─── SignOutButton.jsx
       └── App.css
       └── App.jsx
       └── authConfig.js
       └── graph.js
       └── index.css
       └── index.js
   

Visual Studio Code

1. Visual Studio Code'ı açın, Dosya>Klasör Aç... öğesini seçin. Adresine gidin ve projenizin oluşturulacağı konumu seçin.

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

3. 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. Bir web tarayıcısı varsayılan olarak adresiyle http://localhost:3000/ açılır. Tarayıcı açık kalır ve kaydedilen her değişiklik için yeniden işlenir.

   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
       ├─── components
       │   └─── PageLayout.jsx
       │   └─── ProfileData.jsx
       │   └─── SignInButton.jsx
       │   └─── SignOutButton.jsx
       └── App.css
       └── App.jsx
       └── authConfig.js
       └── graph.js
       └── index.css
       └── index.js
   

Kimlik ve önyükleme paketlerini 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.

Visual Studio

1. Çözüm Gezgini npm seçeneğine sağ tıklayın ve Yeni npm paketleri yükle'yi seçin.
2. @azure/MSAL-browser araması yapın ve Paketi Yükle'yi seçin. @azure/MSAL-react için tekrarlayın.
3. react-bootstrap'ı arayın ve yükleyin.
4. Kapat'ı seçin.

Visual Studio Code

1. Terminal çubuğunda simgeyi + seçerek yeni bir terminal oluşturun. Ö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 paketleri yüklemek için terminale aşağıdakileri girin.

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

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

Kimlik doğrulama yapılandırma dosyası oluşturma

1. 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",
           authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       cache: {
           cacheLocation: "sessionStorage", // This configures where your cache will be stored
           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: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

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ı. değerini, kayıtlı uygulamanın genel bakış sayfasından daha önce kaydedilen Uygulama (istemci) Kimliği değeriyle değiştirinEnter_the_Application_Id_Here.
   • authority - Bu iki bölümden oluşur:
     • Örnek, bulut sağlayıcısının uç noktasıdır. Ulusal bulutlardaki farklı kullanılabilir uç noktaları denetleyin.
     • Kiracı Kimliği, uygulamanın kayıtlı olduğu kiracının tanımlayıcısıdır. Enter_the_Tenant_Info_Here değerini, kayıtlı uygulamanın genel bakış sayfasında daha önce kaydedilen Dizin (kiracı) kimliği değeriyle değiştirin.

3. Dosyayı kaydedin.

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.

1. 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';
   import './index.css';
   import App from './App';
   
   import { PublicClientApplication } from '@azure/msal-browser';
   import { MsalProvider } from '@azure/msal-react';
   import { msalConfig } from './authConfig';
   
   // Bootstrap components
   import 'bootstrap/dist/css/bootstrap.min.css';
   
   const msalInstance = new PublicClientApplication(msalConfig);
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   
   /**
    * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
    */
    root.render(
     <React.StrictMode>
         <MsalProvider instance={msalInstance}>
             <App />
         </MsalProvider>
     </React.StrictMode>
   );
   

2. Dosyayı kaydedin.

Sonraki adımlar

Öğretici: React tek sayfalı uygulamada oturum açmak ve oturumu kapatmak için bileşenler oluşturma