Öğretici: Node.js web uygulamanıza oturum açma ve oturum kapatma ekleme

Makale
08/27/2024

Bu öğretici, Node.js bir web uygulaması oluşturmayı ve Microsoft Entra yönetim merkezini kullanarak kimlik doğrulaması için hazırlamayı gösteren serinin son bölümüdür. Bu serinin 2. bölümünde bir Node.js web uygulaması oluşturdunuz ve tüm gerekli dosyaları düzenlediniz. Bu öğreticide, Node.js web uygulamasına oturum açma, kaydolma ve oturumu kapatma ekleyeceksiniz. Node.js web uygulamasına kimlik doğrulaması eklemeyi kolaylaştırmak için Node için Microsoft Kimlik Doğrulama Kitaplığı 'nı (MSAL) kullanırsınız. Oturum açma akışı, kullanıcılarda güvenli bir şekilde oturum açan OpenID Connect (OIDC) kimlik doğrulama protokollerini kullanır.

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

Oturum açma ve oturum kapatma mantığı ekleme
Kimlik belirteci taleplerini görüntüleme
Uygulamayı çalıştırın ve oturum açma ve oturum kapatma deneyimini test edin.

Önkoşullar

Öğretici: Node.js web uygulamasını kimlik doğrulaması için hazırlama bölümünde yer alan adımları tamamladınız.

MSAL yapılandırma nesnesi oluşturma

Kod düzenleyicinizde authConfig.js dosyasını açın ve aşağıdaki kodu ekleyin:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

nesnesi, msalConfig kimlik doğrulama akışlarınızın davranışını özelleştirmek için kullandığınız bir dizi yapılandırma seçeneği içerir.

authConfig.js dosyanızda şunu değiştirin:

Enter_the_Application_Id_Here daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliğiyle.
Enter_the_Tenant_Subdomain_Here ve bunu Dizin (kiracı) 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.
Enter_the_Client_Secret_Here öğesini daha önce kopyaladığınız uygulama gizli dizisi değeriyle birlikte kullanın.

Yapılandırma bilgilerinizi depolamak için .env dosyasını kullanırsanız:

Kod düzenleyicinizde .env dosyasını açın ve aşağıdaki kodu ekleyin.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Enter_the_Application_Id_Hereve Enter_the_Tenant_Subdomain_Here Enter_the_Client_Secret_Here yer tutucularını daha önce açıklandığı gibi değiştirin.

authConfig.js dosyasındaki TENANT_SUBDOMAIN , REDIRECT_URIve POST_LOGOUT_REDIRECT_URI değişkenlerini dışarı aktarırsınızmsalConfig; bu da bunları dosyaya ihtiyacınız olan her yerde erişilebilir hale getirir.

Ö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
    },
    //...
};

Hızlı yollar ekleme

Express yolları, oturum açma, oturumu kapatma ve kimlik belirteci taleplerini görüntüleme gibi işlemleri yürütmemizi sağlayan uç noktaları sağlar.

Uygulama giriş noktası

Kod düzenleyicinizde routes/index.js dosyasını açın ve aşağıdaki kodu ekleyin:

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

Yol / , uygulamanın giriş noktasıdır. Uygulama kullanıcı arabirimi bileşenlerini derleme bölümünde daha önce oluşturduğunuz views/index.hbs görünümünü işler. isAuthenticated , görünümde ne göreceğinizi belirleyen boole değişkenidir.

Kod düzenleyicinizde routes/auth.js dosyasını açın, ardından auth.js kodu bu dosyaya ekleyin.
Kod düzenleyicinizde denetleyiciyi/authController.js dosyasını açın, ardından authController.js kodu bu dosyaya ekleyin.
Kod düzenleyicinizde auth/AuthProvider.js dosyasını açın, ardından AuthProvider.js kodu dosyaya ekleyin.

ve yolları routes/auth.js dosyasında tanımlanır, ancak bunların mantığını auth/AuthProvider.js sınıfında uygularsınız./redirect /signin/signout

login yöntemi yolu işler/signin:
- Kimlik doğrulama kodu akışının ilk ayağını tetikleyerek oturum açma akışını başlatır.
- Daha önce oluşturduğunuz MSAL yapılandırma nesnesini msalConfigkullanarak gizli bir istemci uygulaması örneği başlatır.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  getMsalInstance yöntemi şu şekilde tanımlanır:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- Kimlik doğrulama kodu akışının ilk ayağı bir yetkilendirme kodu isteği URL'si oluşturur, ardından yetkilendirme kodunu almak için bu URL'ye yönlendirir. Bu ilk bacak yönteminde redirectToAuthCodeUrl uygulanır. Yetkilendirme kodu URL'si oluşturmak için MSALs getAuthCodeUrl yöntemini nasıl kullandığımıza dikkat edin:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Ardından yetkilendirme kodu URL'sinin kendisine yönlendiririz.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
handleRedirect yöntemi yolu işler/redirect:
- Bu URL'yi daha önce Web uygulamasını kaydetme bölümünde Microsoft Entra yönetim merkezinde web uygulaması için Yeniden Yönlendirme URI'si olarak ayarlamıştınız.
- Bu uç nokta, kimlik doğrulama kodu akışının kullandığı ikinci ayağı uygular. MSAL'nin acquireTokenByCode yöntemini kullanarak kimlik belirteci istemek için yetkilendirme kodunu kullanır.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Yanıt aldıktan sonra Express oturumu oluşturabilir ve istediğiniz bilgileri depolayabilirsiniz. öğesini dahil isAuthenticated etmeniz ve olarak ayarlamanız truegerekir:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```
logout yöntemi yolu işler/signout:
```
async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}
```
- Oturumu kapatma isteğini başlatır.
- Kullanıcının uygulama oturumunu kapatmak istediğinizde, kullanıcının oturumunu sonlandırmak yeterli değildir. Kullanıcıyı logoutUri'ye yeniden yönlendirmeniz gerekir. Aksi takdirde, kullanıcı kimlik bilgilerini yeniden girmeden uygulamalarınıza yeniden kimlik doğrulaması yapabilir. Kiracınızın adı contoso ise, logoutUri şuna benzer https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000olur.

Kimlik belirteci taleplerini görüntüleme

Kod düzenleyicinizde routes/users.js dosyasını açın ve aşağıdaki kodu ekleyin:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Kullanıcının kimliği doğrulanmışsa yol, /id views/id.hbs görünümünü kullanarak kimlik belirteci taleplerini görüntüler. Bu görünümü daha önce Uygulama kullanıcı arabirimi bileşenleri derleme bölümüne eklediniz.

Verilen ad gibi belirli bir kimlik belirteci talebi ayıklamak için:

const givenName = req.session.account.idTokenClaims.given_name

Web uygulamanızı sonlandırma

Kod düzenleyicinizde app.js dosyasını açın, ardından app.js kodunu bu dosyaya ekleyin.
Kod düzenleyicinizde server.js dosyasını açın, ardından server.js kodunu bu dosyaya ekleyin.
Kod düzenleyicinizde package.json dosyasını açın ve özelliğini şu şekilde güncelleştirinscripts:
```
"scripts": {
"start": "node server.js"
}
```

Web uygulamasını çalıştırma ve test edin

Terminalinizde, gibi ciam-sign-in-node-express-web-appweb uygulamanızı içeren proje klasöründe olduğunuzdan emin olun.
Terminalinizde aşağıdaki komutu çalıştırın:
```
npm start
```
Tarayıcınızı açın ve adresine http://localhost:3000gidin. Sayfayı aşağıdaki ekran görüntüsüne benzer şekilde görmeniz gerekir:
Sayfanın yüklenmesi tamamlandıktan sonra Oturum aç bağlantısı'nı seçin. Oturum açmanız istenir.
Oturum açma sayfasında, E-posta adresinizi yazın, İleri'yi seçin, Parolanızı yazın ve ardından Oturum aç'ı seçin. Hesabınız yoksa Hesap yok mu? seçeneğini belirleyin . Kayıt akışını başlatan bir bağlantı oluşturun.
Kaydolma seçeneğini belirlerseniz, e-postanızı, tek seferlik geçiş kodunu, yeni parolayı ve diğer hesap ayrıntılarını doldurduktan sonra tüm kayıt akışını tamamlarsınız. Aşağıdaki ekran görüntüsüne benzer bir sayfa görürsünüz. Oturum açma seçeneğini belirlerseniz benzer bir sayfa görürsünüz.
Kullanıcının web uygulamasında oturumunu kapatmak için Oturumu kapat'ı veya tüm kimlik belirteci beyanlarını görüntülemek için Kimlik belirteci beyanlarını görüntüle'yi seçin.

Ayrıca bkz.

Parola sıfırlamayı etkinleştirin.
Google ile oturum açmayı yapılandırın.
İstemci gizli dizisi yerine Node.js web uygulamanızda kimlik doğrulaması için istemci sertifikasını kullanın.
Node.js web uygulamasında API çağırma

Aracılığıyla paylaş

Önkoşullar

MSAL yapılandırma nesnesi oluşturma

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

Hızlı yollar ekleme

Uygulama giriş noktası

Kimlik belirteci taleplerini görüntüleme

Web uygulamanızı sonlandırma

Web uygulamasını çalıştırma ve test edin

Ayrıca bkz.

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Önkoşullar

MSAL yapılandırma nesnesi oluşturma

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

Hızlı yollar ekleme

Uygulama giriş noktası

Oturum açma ve oturumu kapatma

Kimlik belirteci taleplerini görüntüleme

Web uygulamanızı sonlandırma

Web uygulamasını çalıştırma ve test edin

Ayrıca bkz.

Geri Bildirim

Ek kaynaklar