Aracılığıyla paylaş

Öğretici: JavaScript tek sayfalı uygulamasını kimlik doğrulaması için hazırlama

için geçerlidir: beyaz onay işareti simgesine sahip Yeşil daire . Workforce kiracıları beyaz onay işareti simgesiyle Yeşil daire . dış kiracıları (daha fazla bilgi)

Bu öğreticide bir JavaScript tek sayfalı uygulaması (SPA) oluşturacak ve Bunu Microsoft kimlik platformunu kullanarak kimlik doğrulaması için hazırlayacaksınız. Bu öğreticide, npmkullanarak JavaScript 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,

  • Yeni javascript 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

  • İş gücü kiralayıcısı. 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: http://localhost:3000/.

JavaScript projesi oluşturma ve bağımlılıkları yükleme

  1. Microsoft Entra yönetim merkezinde Genel Yönetici olarak oturum açın.

  2. Visual Studio Code'u açın, Dosya>Klasör Aç...bölümünü seçin. Projenizin oluşturulacağı konuma gidin ve yeri seçin.

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

  4. Yeni bir JavaScript projesi oluşturmak için aşağıdaki komutu çalıştırın:

    npm init -y

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

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  6. Terminal, proje için gerekli bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:

    npm install express morgan @azure/msal-browser

Sunucu dosyasına kod ekleme

Express, Node.jsiçin bir web uygulaması çerçevesidir. Uygulamayı barındıran bir sunucu oluşturmak için kullanılır. Morgan, HTTP isteklerini konsola kaydeden ara yazılımdır. Sunucu dosyası bu bağımlılıkları barındırmak için kullanılır ve uygulamanın yollarını içerir. Kimlik doğrulaması ve yetkilendirme, JavaScript için Microsoft Kimlik Doğrulama Kitaplığı (MSAL.js) tarafından işlenir.

  1. server.js dosyasına aşağıdaki kodu ekleyin:

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

module.exports = app;

Bu kodda uygulama değişkeni ortak varlıklara hizmet vermek için express modülüyle başlatılır. MSAL-browser statik varlık olarak sunulur ve kimlik doğrulama akışını başlatmak için kullanılır.

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. public/authConfig.js açın ve aşağıdaki kodu ekleyin:

    /**
* 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 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // 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.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

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

    • Enter_the_Application_Id_Here değerini bulun ve Microsoft Entra yönetim merkezine kaydettiğiniz uygulamanın Uygulama Kimliği (clientId) ile değiştirin.
    • Enter_the_Tenant_Info_Here değerini bulun ve Microsoft Entra yönetim merkezinde oluşturduğunuz iş gücü kiracısına ait kiracı kimliğini ile değiştirin.

  3. Dosyayı kaydedin.

Sonraki adım

JavaScript SPA'de kimlik doğrulama süreçlerini yönetme