Aracılığıyla paylaş


Hızlı Başlangıç: Visual Studio Code için Microsoft Entra Dış Kimlik uzantısını kullanmaya başlama

Şunlar için geçerlidir: Gri X simgesine sahip beyaz daire. İş gücü kiracılarıBeyaz onay işareti simgesi olan yeşil daire. Dış kiracılar (daha fazla bilgi edinin)

Kimlik doğrulamasını tüketici ve iş müşteri uygulamalarınızla tümleştirmek, kaynakların ve müşteri verilerinin güvenliğini sağlamak için gereklidir. Visual Studio Code için Microsoft Entra Dış Kimlik uzantısı hızla dış kiracılar oluşturmanıza, dış kullanıcılar için oturum açma deneyimlerini yapılandırmanıza ve doğrudan Visual Studio Code'da bir Dış Kimlik örneği ayarlamanıza olanak tanır. Uzantı kılavuzunu kullanarak, uygulamanızın dış kullanıcıları için özelleştirilmiş, markalı bir oturum açma deneyimi ayarlamayı ve önceden yapılandırılmış örnek uygulamalarla projelerinizi önyüklemeyi öğrenebilirsiniz.

Uzantıya genel bir bakış gösteren ekran görüntüsü.

Bu uzantı, uygulamalar için otomatik olarak bir kiracı oluşturan ve kullanıcılar için hazırlayan temel bir kurulum sağlar. Ayrıca daha sorunsuz bir kurulum işlemi için uygulama kimlikleri gibi değerleri yapılandırma dosyanıza otomatik olarak doldurarak iş akışınızı kolaylaştırır.

Dış kimlik, Azure aboneliğine eklenebilen bir hizmettir. Zaten bir kimliğiniz varsa, dış kimliği kolayca ekleyebilirsiniz. Aksi takdirde, Visual Studio Code'da ücretsiz bir Microsoft Entra Dış Kimlik deneme sürümü ayarlayın ve örnek bir uygulama yapılandırarak başlayın.

Uzantıyı yükleme

Microsoft Entra Dış Kimlik uzantısı Visual Studio Code Market'te kullanılabilir.

  1. Henüz Visual Studio Code yüklü değilse Visual Studio Code'u indirin ve yükleme adımlarını tamamlayın.
  2. visual studio code için Microsoft Entra Dış Kimlik uzantısını'ndan https://aka.ms/vscodequickstart/marketplaceyükleyin.

Uzantı yüklendikten sonra, etkinlik çubuğundaki simgeyi kullanarak uzantıya erişebilirsiniz.

Açık uzantı izlenecek yol seçeneklerini gösteren ekran görüntüsü.

Uzantıyı Visual Studio Code Hoş Geldiniz sayfasından da açabilirsiniz: Yardım>Karşılama'yı seçin ve ardından İzlenecek yollar'ın altında Microsoft Entra Dış Kimlik kullanmaya başlayın'ı seçin. Uzantı listesini genişletmek için Diğer... öğesini seçmeniz gerekebilir.

Dış Kimlik kurulumunuzu kullanmaya başlama

Microsoft Entra Dış Kimlik uzantısı, uygulamanızı ve dış kullanıcıların dizinini içeren bir dış yapılandırmada kiracı oluşturur. Bu yeni kiracıyı mevcut Azure aboneliğinize ekleyebilirsiniz. Azure aboneliğiniz yoksa, gerekli olmayan bir deneme kiracısı oluşturun (daha fazla bilgi edinin).

  • hoş geldiniz Microsoft Entra Dış Kimlik kullanmaya başlayın sayfasında bir seçenek belirleyin:

    • Henüz bir Azure Hesabınız yoksa Ücretsiz deneme ayarlayın'ı seçin.
    • Zaten bir Azure hesabınız varsa Aboneliğimi kullan'ı seçin.

    Başlarken seçeneklerinin ekran görüntüsü.

Ücretsiz deneme ayarlama (önizleme)

  1. Ücretsiz deneme ayarla'yı seçin.

  2. Oturum açma onayı iletisinde İzin Ver'i seçin.

  3. Yeni bir tarayıcı penceresi açılır. Kişisel hesabınızı, Microsoft hesabınızı (MSA) veya GitHub hesabınızı kullanarak oturum açın. Oturum açtıktan sonra tarayıcı penceresini kapatın.

  4. Visual Studio Code'a geri dönün. Kiracı nerede bulunmalıdır? menüsünde, kiracı verileriniz için bir konum seçin. Bu seçim daha sonra değiştirilemez.

  5. Kiracı için benzersiz bir ad girin.

    Kiracı adı alanının ekran görüntüsü.

  6. Uzantı, deneme kiracınızı oluşturur. Çıktıyı Görüntüle>penceresini açarak ilerleme durumunu görüntüleyebilirsiniz. İşlem tamamlandığında Kiracı oluşturulur görüntülenir.

Aboneliğinizi kullanma

  1. Aboneliğimi kullan'ı seçin.

  2. Hesabınızla ilişkilendirilmiş birden çok kiracı varsa Dizin seçin menüsü görüntülenir. Kullanmak istediğiniz abonelikle ilişkili dizini (kiracı) seçin.

    Dizin alanının ekran görüntüsü.

    Not

    Kullanılabilir abonelik yok iletisi görüntülenirse, bunun yerine ücretsiz bir deneme ayarlayabilirsiniz.

  3. Hesabınızda oturum açabileceğiniz bir tarayıcı sayfası açılır. Oturum açtığınızda Visual Studio Code'a dönün.

  4. Abonelik ekle menüsünde aboneliğinizi seçin.

  5. Kaynak grubu seçin menüsünde bir kaynak grubu seçin.

  6. Kiracı nerede bulunmalıdır? menüsünde, kiracı verileriniz için bir konum seçin. Bu seçim daha sonra değiştirilemez.

  7. Kiracı için bir ad girin ve ardından Enter'ı seçerek kiracıyı oluşturun.

    Deneme kiracısı adı alanının ekran görüntüsü.

    Not

    Kiracı oluşturma işlemi 30 dakikaya kadar sürebilir. Kiracı oluşturulduktan sonra, kiracıya hem Microsoft Entra yönetim merkezinden hem de Azure portalından erişebilirsiniz.

Kullanıcılarınız için oturum açmayı ayarlama

Uygulamanızı, kullanıcıların e-posta ve parolalarıyla veya tek seferlik geçiş koduyla oturum açmasına izin verecek şekilde yapılandırabilirsiniz. Ayrıca şirket logonuzu ekleyerek, arka plan rengini değiştirerek veya oturum açma düzenini ayarlayarak kullanıcı deneyiminin genel görünümünü tasarlayabilirsiniz. Bu değişiklikler, bu yeni kiracıdaki tüm uygulamalarınızın görünümü ve görünümü için geçerlidir.

  1. Kullanıcılarınız için oturum açmayı ayarla'nın altında Oturum açma ve marka ayarlama'yı seçin.

    Oturum açma ve markalama adımını ayarlama adımını gösteren ekran görüntüsü.

  2. Yeni kiracıda oturum açmanız istenir. İzin Ver'i seçin ve açılan tarayıcı penceresinde kullanmakta olduğunuz hesabı seçin ve oturum açın. Visual Studio Code'a geri dönün.

  3. En üstteki Kullanıcılarınızın nasıl oturum açmasını istersiniz? menüsünde, kullanıcılarınızın kullanımına açmak istediğiniz oturum açma yöntemini seçin: E-posta ve parola veya E-posta ve tek seferlik geçiş kodu.

    Oturum açma yöntemlerini gösteren ekran görüntüsü.

  4. Tamam'ı seçin.

  5. Oturum açma sayfasının tarayıcı penceresinde ortalanmış veya Sağa hizalanmış olarak görünmesini istediğiniz yeri seçin.

    Oturum açma düzeni seçimlerini gösteren ekran görüntüsü.

  6. Kaydolma sayfanız için bir arka plan rengi seçin.

    Arka plan renklerini gösteren ekran görüntüsü.

  7. Ardından, şirket logonuzu ekleyebilmeniz için bir Dosya Gezgini penceresi açılır. Şirket logo dosyanıza göz atın ve karşıya yükle'yi seçin.

    Not

    Görüntü gereksinimleri şunlardır:

    • Görüntü boyutu 245 x 36 piksel
    • En büyük dosya boyutu 50 KB
    • Dosya türü: Saydam PNG veya JPEG
  8. Oturum açma akışını yapılandırma iletisi görüntülenir. İlerleme durumunu Çıkış penceresinde görüntüleyebilirsiniz. Yapılandırma tamamlandığında Kullanıcı akışı kurulumu tamamlandı iletisi görüntülenir.

Oturum açma deneyiminizi deneyin

İzlenecek yoldaki Oturum açma deneyiminizi deneyin adımı, yapılandırdığınız oturum açma deneyimini önizlemenize olanak tanır.

Oturum açma deneyiminizi deneme seçeneğinin ekran görüntüsü.

  1. Şimdi çalıştır düğmesini seçin. Kiracınızın kullanıcı oluşturmak ve oturum açmak için kullanılabilecek kaydolma sayfasıyla birlikte yeni bir tarayıcı sekmesi açılır.

  2. Hesap yok mu? seçeneğini belirleyin Kiracıda yeni kullanıcı oluşturmak için bir kullanıcı oluşturun.

  3. Yeni kullanıcınızın e-posta adresini ekleyin ve İleri'yi seçin. Deneme sürümünüzü oluşturmak için kullandığınız e-postayı kullanmayın.

  4. Ekrandaki kaydolma adımlarını tamamlayın. Genellikle, kullanıcı oturum açtıktan sonra uygulamanıza geri yönlendirilir. Ancak, bu adımda bir uygulama ayarlamadığınız için, bunun yerine oturum açma işlemi sırasında verilen belirtecin içeriğini görüntüleyebileceğiniz JWT.ms yönlendirilirsiniz.

Bu adım sırasında oluşturduğunuz kullanıcıyı bulmak için Microsoft Entra yönetim merkezine gidip kullanıcı listesinde kullanıcıyı arayabilirsiniz.

Örnek uygulamayı ayarlama ve çalıştırma

Uzantı, kimlik doğrulamasının farklı uygulama türlerinde ve geliştirme dillerinde nasıl uygulandığını gösteren çeşitli kod örnekleri içerir. Örnekler tek sayfalı uygulamalar (JavaScript, React, Angular) ve web uygulamaları [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet] için dahildir. Uzantının içinden bir örnek seçtiğinizde uzantı, uygulamayı oturum açma deneyiminiz ile otomatik olarak yapılandırılır.

  1. Örnek uygulamayı ayarlama ve çalıştırma'nın altında Örnek uygulamayı ayarla düğmesini seçin.

    Örnek uygulama ayarlama ve çalıştırma adımının ekran görüntüsü.

  2. Menüde, indirmek istediğiniz uygulama türünü seçin. Hesabınızı yeniden seçmeniz istenirse, kullandığınız hesabın aynısını seçin.

    Uygulama seçiminin ekran görüntüsü.

  3. Örnek depoyu kaydetmek istediğiniz yeri seçebilmeniz için bir Dosya Gezgini penceresi açılır. Bir klasör seçin ve ardından Depoları buradan indir'i seçin.

  4. İndirme tamamlandığında, gezginde indirilen uygulama klasörünün görüntülendiği yeni bir Visual Studio Code proje çalışma alanı açılır.

  5. Visual Studio Code penceresinde yeni bir terminal açın.

  6. Üstteki menüden Hata ayıklamadan çalıştır'ı>seçin. Hata Ayıklama Konsolu başlatma betiğinin ilerleme durumunu gösterir. Proje ayarlanırken ve derleme betiği çalıştırılırken kısa bir gecikme olur.

Uzantı uygulamayı indirdiğinde, yeni kiracınıza bağlanmak ve ayarladığınız deneyimi kullanmak için Microsoft Kimlik Doğrulama Kitaplığı (MSAL) yapılandırmasını otomatik olarak güncelleştirir. Başka yapılandırma gerekmez; proje derlenir oluşturulmaz uygulamayı çalıştırabilirsiniz. Örneğin authConfig dosyasında clientId değeri uygulama kimliğinize, yetkili ise yeni kiracınızın alt etki alanına ayarlanır.

Auth-config dosyasının ekran görüntüsü.

Deneyimi çalıştırma

Kurulum tamamlandıktan sonra, tarayıcıya uygulama için yerel ana bilgisayar yeniden yönlendirme URI'sini girerek oturum açma deneyimini deneyin. Yeniden yönlendirme URL'si, uygulamanın README.md dosyasında kullanılabilir.

Gezgin görünümünü kullanma

Gezgin görünümünde Kaynakları yönet, Başlarken ve Yardım ve Geri Bildirim bölümleri görüntülenir. Gezgin görünümünü açmak için Visual Studio Code'un etkinlik çubuğunda görünen uzantı simgesini seçin.

Kaynakları yönetme

Kaynakları yönet bölümünde dış kiracılarınızı, kayıtlı uygulamalarınızı, kullanıcı akışlarınızı ve şirket markanızı görüntüleyebilir ve yönetebilirsiniz. Proje kaynaklarını görüntülemek için Sol paneldeki Kaynakları Yönet altındaki düğümleri genişletin.

Gezgin görünümünün ekran görüntüsü.

Kaynakları yönet bölümünde bir kaynak seçebilir ve yönetmek veya yapılandırmak için doğrudan Microsoft Entra yönetim merkezine gidebilirsiniz. Örneğin, bir uygulamaya sağ tıklayın ve Yönetim merkezinde aç'ı seçin. Oturum açmanız istenir ve ardından Microsoft Entra yönetim merkezi doğrudan bu uygulamanın uygulama kayıt sayfasında açılır.

Yönetim merkezinde aç seçeneğinin ekran görüntüsü.

Başlarken eylemleri

Başlarken bölümünde, ücretsiz deneme için belgelere erişebilir veya uzantı kılavuzunu açmadan doğrudan oturum açma deneyimi yapılandırmasına veya örnek uygulama indirme sayfalarına gidebilirsiniz.

İzlenecek yolu başlatmak için sol menü seçeneğinin ekran görüntüsü.

Sonraki adımlar

  • Kiracınızı daha fazla özelleştirmek ve tüm yapılandırma seçeneklerini keşfetmek için Microsoft Entra yönetim merkezini ziyaret edin.
  • En son geliştirici içeriği ve kaynakları için Dış Kimlik geliştirici merkezine bakın.
  • Kendi uygulamanızı kimlik doğrulaması için yapılandırmak için öğretici bağlantılarına bakın. Bu öğreticiler, kendi uygulamalarınızı oluşturma ve Microsoft Entra Dış Kimlik ile tümleştirme konusunda size yardımcı olacaktır. Ayrıca, kimlik doğrulama akışının belirli noktalarına özel kimlik doğrulama uzantıları da ekleyebilirsiniz.