Tek sayfalı örnek bir uygulamada kimlik doğrulamasını Azure AD B2C

  • Makale
  • Okumak için 8 dakika

Bu makalede, SPA'larınıza B2C (Azure AD B2C Azure Active Directory) kimlik doğrulaması eklemeyi göstermek için örnek bir JavaScript tek sayfalı uygulaması (SPA) kullanılır.

Genel Bakış

OpenID Bağlan (OIDC), OAuth 2.0 üzerinde yerleşik bir kimlik doğrulama protokolüdür. Bir kullanıcının uygulamada güvenli bir şekilde oturum açmasını sağlamak için bunu kullanabilirsiniz. Bu tek sayfalı uygulama örneği, MSAL.js ve OIDC PKCE akışını kullanır. MSAL.js, SPA'lara kimlik doğrulaması ve yetkilendirme desteği eklemeyi basitleştiren, Microsoft tarafından sağlanan bir kitaplıktır.

Oturum açma akışı

Oturum açma akışı aşağıdaki adımları içerir:

  1. Kullanıcılar web uygulamasına gider ve Oturum aç'ı seçer.
  2. Uygulama bir kimlik doğrulama isteği başlatıyor ve kullanıcıları Azure AD B2C.
  3. Kullanıcılar kaydol veya oturum asın ve parolasını sıfırlar. Alternatif olarak, bir sosyal hesap ile oturum açmaları da gerekir.
  4. Kullanıcılar oturum açtırdikten Azure AD B2C uygulamaya bir yetkilendirme kodu döndürür.
  5. Tek sayfalı uygulama kimlik belirteci doğrular, talepleri okur ve kullanıcıların korumalı kaynakları ve API'leri çağırmalarına olanak sağlar.

Uygulama kaydına genel bakış

Uygulamanın web API'si ile oturum Azure AD B2C ve bir web API'si çağırmasını sağlamak için, Azure AD B2C kaydetmeniz gerekir.

  • Web uygulaması kaydı, uygulamanın Azure AD B2C. Kayıt sırasında yeniden yönlendirme URI'sini belirtirsiniz. Yeniden yönlendirme URI'si, kimlik doğrulaması tamamlandıktan sonra kullanıcıların Azure AD B2C yönlendirilen uç Azure AD B2C noktasıdır. Uygulama kayıt işlemi, istemci kimliği olarak da bilinen ve uygulamanızı benzersiz olarak tanımlayan bir uygulama kimliği üretir.

  • Web API'si kaydı, uygulamanın güvenli bir web API'si çağırmasını sağlar. Kayıt web API'si kapsamlarını içerir. Kapsamlar, web API'niz gibi korumalı kaynaklara izinleri yönetmek için bir yol sağlar. Web uygulamasına web API kapsamları için izinler verin. Erişim belirteci istenirken, uygulamanız isteğin kapsam parametresinde istenen izinleri belirtir.

Uygulama mimarisi ve kayıtları aşağıdaki diyagramda gösterildiği gibi:

Web API'si çağrı kayıtları ve belirteçleri ile bir web uygulamasının diyagramı.

Web API'sini çağırma

Kimlik doğrulaması tamamlandıktan sonra kullanıcılar, korumalı bir web API'sini çağıran uygulamayla etkileşime geçmelerini sağlar. Web API'si taşıyıcı belirteç kimlik doğrulamasını kullanır. Taşıyıcı belirteci, uygulamanın verilerden edinilen erişim Azure AD B2C. Uygulama belirteci HTTPS isteğinin yetkilendirme üst bilgisinde iletir.

Authorization: Bearer <token>

Erişim belirtecin kapsamı web API'sini kapsamları ile eşleyense, kimlik doğrulama kitaplığı doğru kapsamlara sahip yeni bir erişim belirteci alır.

Oturum açma akışı

Oturum kapatma akışı aşağıdaki adımları içerir:

  1. Uygulamadan kullanıcılar oturumunu kapatın.
  2. Uygulama, oturum nesnelerini temizler ve kimlik doğrulama kitaplığı, belirteç önbelleğini temizler.
  3. Uygulama, Azure AD B2C oturumunu sonlandırmak için kullanıcıları Azure AD B2C oturum kapatma uç noktasına götürür.
  4. Kullanıcılar uygulamaya yeniden yönlendirilir.

Önkoşullar

Çalışan bir bilgisayar:

1. Adım: Kullanıcı akışınızı yapılandırma

Kullanıcılar uygulamanıza oturum açmayı deneyinca, uygulama bir kullanıcı akışı aracılığıyla yetkilendirme uç noktasına bir kimlik doğrulama isteği başlatır. Kullanıcı akışı, kullanıcı deneyimini tanımlar ve kontrol eder. Kullanıcılar kullanıcı akışını tamamlandıktan sonra Azure AD B2C belirteç üretir ve ardından kullanıcıları uygulamanıza geri yönlendirer.

Henüz bunu yapmadıysanız, bir kullanıcı akışı veya özel bir ilke oluşturun.

2. Adım: SPA ve API'nizi kaydetme

Bu adımda SPA ve web API'si uygulama kayıtlarını oluşturur ve web API'nizin kapsamlarını belirtirsiniz.

2.1. Adım: Web API uygulamasını kaydetme

Web API'si uygulama kaydını ( Uygulama Kimliği: 2) oluşturmak için şu adımları izleyin:

  1. Azure portalında oturum açın.

  2. Kiracınız için kiracınızı içeren dizini Azure AD B2C olun. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.

  3. Portal ayarları sayfasında | Dizinler + abonelikler sayfasında, dizin Azure AD B2C dizinlerinizi dizin adı listesinde bulup Değiştir'i seçin.

  4. Aşağıdaki Azure portal için arama Azure AD B2C.

  5. Yeni Uygulama kayıtları'yi ve ardından Yeni kayıt'ı seçin.

  6. Ad alanına uygulama için bir ad girin (örneğin, my-api1). Yeniden Yönlendirme URI'si ve Desteklenen hesap türleri için varsayılan değerleri bırakın.

  7. Kaydet’i seçin.

  8. Uygulama kaydı tamamlandıktan sonra Genel Bakış'ı seçin.

  9. Web uygulamasını yapılandırarak daha sonra kullanmak üzere Uygulama (istemci) kimliği değerini kaydedin.

    Web A P I uygulaması ID'sini nasıl alanın gösteren ekran görüntüsü.

2.2. Adım: Kapsamları yapılandırma

  1. Oluşturduğunuz my-api1 uygulamasını (Uygulama Kimliği: 2) seçerek Genel Bakış sayfasını açın.

  2. Yönet'in altında API'yi açığa çıkar'ı seçin.

  3. Uygulama Kimliği URI'si'nin yanındaki Ayarla bağlantısını seçin. Varsayılan değeri (GUID) benzersiz bir adla (örneğin, tasks-api) değiştirin ve Kaydet'i seçin.

    Web uygulamanız web API'si için bir erişim belirteci isteğite bulundurursa, API için tanımladığınız her kapsam için ön ek olarak bu URI'yi eklemesi gerekir.

  4. Bu API tarafından tanımlanan kapsamlar altında Kapsam ekle'yi seçin.

  5. API'ye okuma erişimini tanımlayan bir kapsam oluşturmak için:

    1. Kapsam adı alanına tasks.read girin.
    2. Yönetici onayı görünen adı için Görevlere okuma erişimi API'si girin.
    3. Yönetici onayı açıklaması için Görevler API'sini okuma erişimine izin verir girin.

  6. Kapsam ekle'yi seçin.

  7. Kapsam ekle'yi seçin ve ardından API'ye yazma erişimini tanımlayan bir kapsam ekleyin:

    1. Kapsam adı alanına tasks.write yazın.
    2. Yönetici onayı görünen adı için Görevlere yazma erişimi API'si girin.
    3. Yönetici onayı açıklaması için Görevler API'sini yazma erişimine izin verir yazın.

  8. Kapsam ekle'yi seçin.

2.3. Adım: SPA'ya kaydolma

SPA kaydını oluşturmak için şunları yapın:

  1. Azure portalında oturum açın.
  2. Kiracınız için geçerli olan kiracınızı içeren dizini Azure AD B2C olun. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
  3. Portal ayarları sayfasında | Dizinler + abonelikler sayfasında, dizin Azure AD B2C dizinlerinizi dizin adı listesinde bulup Değiştir'i seçin.
  4. için arama Azure AD B2C.
  5. Yeni Uygulama kayıtları'yi ve ardından Yeni kayıt'ı seçin.
  6. Uygulama için bir Ad girin (örneğin, MyApp).
  7. Desteklenen hesap türleri altında, herhangi bir kimlik sağlayıcısı veya kuruluş dizininde hesaplar (kullanıcı akışlarıyla kullanıcıların kimliğini doğrulama için) öğesini seçin.
  8. Yeniden Yönlendirme URI'si altında Tek sayfalı uygulama (SPA) öğesini seçin ve URL kutusuna http://localhost:6420 girin.
  9. İzinler'in altında Yönetici onayı ver openid ve çevrimdışı erişim izinleri onay kutusunu seçin.
  10. Kaydet’i seçin.

2.4. Adım: Örtülü onay akışını etkinleştirme

Ardından, örtülü onay akışını etkinleştirin:

  1. Yönet'in altında Kimlik Doğrulaması'ı seçin.

  2. Yeni deneyimi deneyin (gösteriliyorsa) öğesini seçin.

  3. Örtülü onay'ın altında Kimlik belirteçleri onay kutusunu seçin.

  4. Kaydet’i seçin.

    Web uygulamasını yapılandırarak daha sonra kullanmak üzere Uygulama (istemci) kimliğini kaydetme.

    Web uygulaması kimliğinizi kaydetmeye ilişkin web uygulaması Genel Bakış sayfasının ekran görüntüsü.

2.5. Adım: İzinleri ver

Uygulamanıza ( Uygulama Kimliği: 1) izinleri vermek için şu adımları izleyin:

  1. Uygulama Uygulama kayıtları ve ardından oluşturduğunuz uygulamayı seçin ( Uygulama Kimliği: 1).

  2. Yönet'in altında API izinleri'i seçin.

  3. Yapılandırılmış izinler'in altında İzin ekle'yi seçin.

  4. API'lerim sekmesini seçin.

  5. Web uygulamasına erişim verilmesi gereken API'yi ( Uygulama Kimliği: 2) seçin. Örneğin my-api1 girin.

  6. İzin altında görevler'i genişletin ve daha önce tanımlandığı kapsamları seçin (örneğin, tasks.read ve tasks.write).

  7. İzin ekle'yi seçin.

  8. için Yönetici onayı <your tenant name> ver'i seçin.

  9. Evet’i seçin.

  10. Yenile'yi seçin ve ardından her iki kapsam için de Durum altında Verilen ... seçeneğinin görüntülendiğinden emin olur.

  11. Yapılandırılan izinler listesinden kapsamınızı seçin ve kapsam tam adını kopyalayın.

    Okuma erişim izinlerinin verilmesini gösteren yapılandırılan izinler bölmesinin ekran görüntüsü.

3. Adım: SPA örnek kodunu alın

Bu örnek, tek sayfalı bir uygulamanın kullanıcı Azure AD B2C oturum açma için nasıl kullanabileceğini gösteriyor. Ardından uygulama bir erişim belirteci alır ve korumalı bir web API'sini arar.

SPA örnek kodunu almak için, aşağıdakilerden birini yapabilirsiniz:

  • Zip dosyasını indirin.

  • Aşağıdaki komutu çalıştırarak GitHub örnek kopyadan alın:

    git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

3.1. Adım: SPA örneğini güncelleştirme

SPA örneğini edindilene göre, kodu Azure AD B2C ve web API'si değerleriyle güncelleştirin. Örnek klasörde, klasörünün altında, aşağıdaki tabloda listelenen JavaScript dosyalarını açın ve App ardından bunları karşılık gelen değerlerle güncelleştirin.

Dosya Anahtar Değer
authConfig.js clientId Adım 2.3'dekiSPA kimliği.
policies.js adlar Kullanıcı akışları veya 1.adımda oluşturduğunuz özel ilke.
policies.js Yetkili Kiracı Azure AD B2C adı (örneğin, contoso.onmicrosoft.com ). Ardından, yerine kullanıcı akışları veya 1. adımda oluşturduğunuz özel ilkeyi (örneğin, https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy> ) değiştirin.
policies.js authorityDomain Kiracı Azure AD B2C adı (örneğin, contoso.onmicrosoft.com ).
apiConfig.js b2cScopes 2.2. adımda oluşturduğunuz web API'si kapsamları (örneğin, b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"] ).
apiConfig.js webApi Web API'sinin URL'si, http://localhost:5000/tasks .

Sonuçta elde edilen kodunuz aşağıdaki örnektekine benzer şekilde çalışmalı:

authConfig.js:

const msalConfig = {
  auth: {
    clientId: "<your-MyApp-application-ID>"
    authority: b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const loginRequest = {
  scopes: ["openid", "profile"],
};

const tokenRequest = {
  scopes: apiConfig.b2cScopes
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/tasks"
};

4. Adım: Web API'si örnek kodunu alın

Web API'si kaydedildi ve kapsamlarını tanımladığınıza göre, web API kodunu kiracınız ile çalışacak Azure AD B2C yapılandırabilirsiniz.

Web API'si örnek kodunu almak için, aşağıdakilerden birini yapın:

4.1. Adım: Web API'sini güncelleştirme

  1. Kod düzenleyicide config.json dosyasını açın.

  2. Değişken değerlerini, daha önce oluşturduğunuz uygulama kaydıyla değiştirme. Ve policyName önkoşulların bir parçası olarak oluşturduğunuz kullanıcı akışıyla güncelleştirin (örneğin, b2c_1_susi).

    "credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},

4.2. Adım: CORS'yi etkinleştirme

Tek sayfalı uygulamanın web API'sini Node.js izin vermek için web API'sinde çıkış noktası arası kaynak paylaşımını (CORS) etkinleştirmeniz gerekir. Üretim uygulamasında isteği hangi etki alanının yaparken dikkatli olun. Bu örnekte, herhangi bir etki alanındaki isteklere izin ver.

CORS'yi etkinleştirmek için aşağıdaki ara yazılımı kullanın. İndirdiğiniz Node.js web API'si kod örneğinde, dosyanın index.jseklenmiştir.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

5. Adım: SPA ve web API'sini çalıştırma

Artık tek sayfalı uygulamanın API'ye kapsamlı erişimini test etmeye hazırsınız. Yerel makineniz üzerinde Node.js web API'sini ve örnek JavaScript tek sayfalı uygulamasını çalıştırın. Ardından, tek sayfalı uygulamada oturum açma ve KORUMALı API'ye bir istek başlatmak için API'yi çağır düğmesini seçin.

Node.js web API'sini çalıştırma

  1. Bir konsol penceresi açın ve web API'si örneğini içeren Node.js ile değiştirme. Örnek:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Aşağıdaki komutları çalıştırın:

    npm install && npm update
node index.js

    Konsol penceresinde uygulamanın barındır bulunduğu bağlantı noktası numarası görüntülenir.

    Listening on port 5000...

Tek sayfalı uygulamayı çalıştırma

  1. Başka bir konsol penceresi açın ve JavaScript SPA örneğini içeren dizine tıklayın. Örnek:

    cd ms-identity-b2c-javascript-spa

  2. Aşağıdaki komutları çalıştırın:

    npm install && npm update
npm start

    Konsol penceresinde uygulamanın barındırıldı olduğu bağlantı noktası numarası görüntülenir.

    Listening on port 6420...

  3. Uygulamayı görüntülemek için tarayıcınızda http://localhost:6420 'ye gidin.

    Tarayıcı penceresinde görüntülenen SPA örnek uygulamasının ekran görüntüsü.

  4. Kaydolma veya oturum açma işlemini tamamlama. Başarıyla oturum açtıktan sonra "Kullanıcı oturum <your username> açtı" iletisiyle oturum açabilirsiniz.

  5. API'yi çağır düğmesini seçin. SPA, erişim belirteci bir istekte korumalı web API'sinde gönderir ve bu da oturum açmış kullanıcının görünen adını döndürür:

    API tarafından döndürülen kullanıcı adı JSON sonucu gösteren tarayıcı penceresindeki SPA'nın ekran görüntüsü.

Uygulamanızı dağıtma

Bir üretim uygulamasında, uygulama kaydı yeniden yönlendirme URI'si normalde, örneğin, uygulamanın çalıştırılma durumuna sahip genel olarak erişilebilen bir uç https://contoso.com/signin-oidc noktadır.

Kayıtlı uygulamalarınıza istediğiniz zaman yeniden yönlendirme URL'leri ekleyebilir ve değiştirebilirsiniz. Yeniden yönlendirme URL'leri için aşağıdaki kısıtlamalar geçerlidir:

  • Yanıt URL'si düzeniyle başla https olmalıdır.
  • Yanıt URL'si büyük/büyük/büyük harfe duyarlıdır. Bu dosyanın durumu, çalışan uygulamanın URL yolunun büyük/büyük/büyük harfle eşleşmesi gerekir.

Sonraki adımlar

Bu makalede ele alınan kavramlar hakkında daha fazla bilgi için: