Aracılığıyla paylaş


ASP.NET Web Sayfaları (Razor) Sitesinde Dış Siteleri Kullanarak Oturum Açma

yazan: Tom FitzMacken

Bu makalede Facebook, Google, Twitter, Yahoo ve diğer siteleri kullanarak ASP.NET Web Sayfaları (Razor) sitenizde nasıl oturum açıldığını, yani sitenizde OAuth ve OpenID'yi nasıl destekleyebileceğiniz açıklanmaktadır.

Öğrenecekleriniz:

  • WebMatrix Başlangıç Sitesi şablonunu kullanırken diğer sitelerden oturum açmayı etkinleştirme.

Bu, makalede sunulan ASP.NET özelliğidir:

  • Yardımcı OAuthWebSecurity .

Öğreticide kullanılan yazılım sürümleri

  • ASP.NET Web Sayfaları (Razor) 2
  • WebMatrix 3

ASP.NET Web Sayfaları , OAuth ve OpenID sağlayıcıları için destek içerir. Bu sağlayıcıları kullanarak kullanıcıların Facebook, Twitter, Microsoft ve Google'daki mevcut kimlik bilgilerini kullanarak sitenizde oturum açmalarına izin vekleyebilirsiniz. Örneğin, bir Facebook hesabı kullanarak oturum açmak için, kullanıcılar yalnızca bir Facebook simgesi seçebilir ve bu simge onları kullanıcı bilgilerini girdikleri Facebook oturum açma sayfasına yönlendirir. Daha sonra Facebook oturum açma bilgilerini sitenizdeki hesaplarıyla ilişkilendirebilirler. Web Sayfaları üyelik özelliklerinde yapılan bir iyileştirme, kullanıcıların birden çok oturum açmayı (sosyal ağ sitelerindeki oturum açma bilgileri dahil) web sitenizdeki tek bir hesapla ilişkilendirebileceğidir.

Bu görüntüde, bir kullanıcının bir dış hesapla oturum açmayı etkinleştirmek için Facebook, Twitter, Google veya Microsoft simgesini seçebileceği Başlangıç Sitesi şablonundaki Oturum Açma sayfası gösterilmektedir:

dış sağlayıcılar

Başlangıç Sitesi şablonunda birkaç satır kodun açıklamasını kaldırarak OAuth ve OpenID üyeliğini etkinleştirebilirsiniz. OAuth ve OpenID sağlayıcılarıyla çalışmak için kullandığınız yöntemler ve özellikler sınıfındadır WebMatrix.Security.OAuthWebSecurity . Başlangıç Sitesi şablonu, oturum açma sayfası, üyelik veritabanı ve kullanıcıların yerel kimlik bilgilerini veya başka bir siteden gelenleri kullanarak sitenizde oturum açmasına izin vermek için ihtiyacınız olan tüm kodu içeren tam üyelik altyapısını içerir.

Bu bölümde, kullanıcıların Başlangıç Sitesi şablonunu temel alan bir sitede dış sitelerden oturum açmasına izin vermenin bir örneği sağlanır. Başlangıç sitesi oluşturduktan sonra bunu yaparsınız (ayrıntılar şu şekildedir):

  • OAuth sağlayıcısı (Facebook, Twitter ve Microsoft) kullanan siteler için dış sitede bir uygulama oluşturursunuz. Bu, söz konusu sitelerin oturum açma özelliğini çağırmak için ihtiyacınız olan uygulama anahtarlarını sağlar.

  • OpenID sağlayıcısı (Google) kullanan siteler için uygulama oluşturmanız gerekmez. Bu sitelerin tümü için oturum açmak ve geliştirici uygulamaları oluşturmak için bir hesabınız olmalıdır.

    Not

    Microsoft uygulamaları yalnızca çalışan bir web sitesi için canlı URL kabul eder, bu nedenle oturum açma bilgilerini test etmek için yerel web sitesi URL'sini kullanamazsınız.

  • Uygun kimlik doğrulama sağlayıcısını belirtmek ve kullanmak istediğiniz siteye oturum açma bilgisi göndermek için web sitenizde birkaç dosyayı düzenleyin.

Bu makalede, aşağıdaki görevler için ayrı yönergeler sağlanır:

Google Oturum Açma Bilgilerini Etkinleştirme

  1. WebMatrix Başlangıç Sitesi şablonunu temel alan bir ASP.NET Web Sayfaları sitesi oluşturun veya açın.

  2. _AppStart.cshtml sayfasını açın ve aşağıdaki kod satırının açıklamasını kaldırın.

    OAuthWebSecurity.RegisterGoogleClient();
    

Google oturum açma bilgilerini test etme

  1. Sitenizin default.cshtml sayfasını çalıştırın ve Oturum aç düğmesini seçin.

  2. Oturum açma sayfasındaki Oturum açmak için başka bir hizmet kullan bölümünde Google veya Yahoo gönder düğmesini seçin. Bu örnekte Google oturum açma bilgileri kullanılır.

    Web sayfası, isteği Google oturum açma sayfasına yönlendirir.

    Google oturum açma

  3. Mevcut bir Google hesabının kimlik bilgilerini girin.

  4. Google, Localhost'un hesaptan bilgileri kullanmasına izin vermek isteyip istemediğinizi sorarsa İzin Ver'e tıklayın.

    Kod, kullanıcının kimliğini doğrulamak için Google belirtecini kullanır ve ardından web sitenizde bu sayfaya döner. Bu sayfa kullanıcıların Google oturum açma bilgilerini web sitenizdeki mevcut bir hesapla ilişkilendirmesine olanak tanır veya dış oturum açma bilgilerini ilişkilendirmek için sitenize yeni bir hesap kaydedebilir.

    Kayıt sayfasını gösteren ekran görüntüsü.

  5. İlişkile düğmesini seçin. Tarayıcı, uygulamanızın giriş sayfasına döner.

Facebook Oturum Açma bilgilerini etkinleştirme

  1. Facebook geliştiricileri sitesine gidin (henüz oturum açmadıysanız oturum açın).

  2. Yeni Uygulama Oluştur düğmesini seçin ve ardından istemleri izleyerek yeni uygulamayı adlandırın ve oluşturun.

  3. Uygulamanızın Facebook ile nasıl tümleştirileceğini seçin bölümünde Web Sitesi bölümünü seçin.

  4. Site URL'si alanını sitenizin URL'si ile doldurun (örneğin, http://www.example.com). Etki alanı isteğe bağlıdır; bunu, bir etki alanının tamamı için (example.com gibi) kimlik doğrulaması sağlamak için kullanabilirsiniz.

    Not

    Yerel bilgisayarınızda url'si http://localhost:12345 olan bir site çalıştırıyorsanız (burada numara yerel bağlantı noktası numarasıdır), sitenizi test etmek için bu değeri Site URL'si alanına ekleyebilirsiniz. Ancak, yerel sitenizin bağlantı noktası numarası her değiştiğinde, uygulamanızın Site URL'si alanını güncelleştirmeniz gerekir.

  5. Değişiklikleri Kaydet düğmesini seçin.

  6. Uygulamalar sekmesini yeniden seçin ve uygulamanızın başlangıç sayfasını görüntüleyin.

  7. Uygulamanızın Uygulama Kimliği ve Uygulama Gizli Anahtarı değerlerini kopyalayın ve geçici bir metin dosyasına yapıştırın. Bu değerleri web sitesi kodunuzda Facebook sağlayıcısına geçireceksiniz.

  8. Facebook geliştirici sitesinden çıkın.

Artık kullanıcıların Facebook hesaplarını kullanarak sitede oturum açabilmesi için web sitenizde iki sayfada değişiklik yaparsınız.

  1. WebMatrix Başlangıç Sitesi şablonunu temel alan bir ASP.NET Web Sayfaları sitesi oluşturun veya açın.

  2. _AppStart.cshtml sayfasını açın ve Facebook OAuth sağlayıcısının kodunun açıklamasını kaldırın. Sıkıştırılmamış kod bloğu aşağıdaki gibi görünür:

    OAuthWebSecurity.RegisterFacebookClient(
            appId: "",
            appSecret: "");
    
  3. Facebook uygulamasındaki Uygulama Kimliği değerini parametrenin değeri olarak (tırnak işaretlerinin appId içinde) kopyalayın.

  4. Facebook uygulamasından Uygulama Gizli anahtarı değerini parametre değeri olarak appSecret kopyalayın.

  5. Dosyayı kaydedin ve kapatın.

Facebook oturum açma bilgilerini test etme

  1. Sitenin default.cshtml sayfasını çalıştırın ve Oturum Aç düğmesini seçin.

  2. Oturum Açma sayfasındaki Oturum açmak için başka bir hizmet kullan bölümünde Facebook simgesini seçin.

    Web sayfası, isteği Facebook oturum açma sayfasına yönlendirir.

    oauth-2

  3. Bir Facebook hesabında oturum açın.

    Kod, kimliğinizi doğrulamak için Facebook belirtecini kullanır ve ardından Facebook oturum açma bilgilerinizi sitenizin oturum açma bilgileriyle ilişkilendirebileceğiniz bir sayfaya döner. Kullanıcı adınız veya e-posta adresiniz formdaki Email alanına doldurulur.

    Hesap Kaydet sayfasını gösteren ekran görüntüsü.

  4. İlişkile düğmesini seçin.

    Tarayıcı giriş sayfasına döner ve oturumunuz açılır.

Twitter Oturum Açma bilgilerini etkinleştirme

  1. Twitter geliştiricileri sitesine göz atın.

  2. Uygulama Oluştur bağlantısını seçin ve sitede oturum açın.

  3. Uygulama Oluştur formunda Ad ve Açıklama alanlarını doldurun.

  4. Web Sitesi alanına sitenizin URL'sini girin (örneğin, http://www.example.com).

    Not

    Sitenizi yerel olarak test ediyorsanız (gibi http://localhost:12345bir URL kullanıyorsanız), Twitter URL'yi kabul etmeyebilir. Ancak, yerel geri döngü IP adresini (örneğin http://127.0.0.1:12345) kullanabilirsiniz. Bu, uygulamanızı yerel olarak test etme işlemini basitleştirir. Ancak, yerel sitenizin bağlantı noktası numarası her değiştiğinde, uygulamanızın Web Sitesi alanını güncelleştirmeniz gerekir.

  5. Geri Arama URL'si alanına, web sitenizdeki kullanıcıların Twitter'da oturum açtıktan sonra geri dönmesini istediğiniz sayfanın URL'sini girin. Örneğin, kullanıcıları Başlangıç Sitesi'nin giriş sayfasına göndermek için (oturum açma durumlarını tanır), Web Sitesi alanına girdiğiniz URL'yi girin.

  6. Koşulları kabul edin ve Twitter uygulamanızı oluşturun düğmesini seçin.

  7. Uygulamalarım giriş sayfasında, oluşturduğunuz uygulamayı seçin.

  8. Ayrıntılar sekmesinde, ekranı en alta kaydırın ve Erişim Belirtecimi Oluştur düğmesini seçin.

  9. Ayrıntılar sekmesinde, uygulamanız için Tüketici Anahtarı ve Tüketici Gizli Anahtarı değerlerini kopyalayın ve bunları geçici bir metin dosyasına yapıştırın. Bu değerleri web sitesi kodunuzda Twitter sağlayıcısına geçireceksiniz.

  10. Twitter sitesinden çıkın.

Artık kullanıcıların Twitter hesaplarını kullanarak sitede oturum açabilmesi için web sitenizde iki sayfada değişiklik yaparsınız.

  1. WebMatrix Başlangıç Sitesi şablonunu temel alan bir ASP.NET Web Sayfaları sitesi oluşturun veya açın.

  2. _AppStart.cshtml sayfasını açın ve Twitter OAuth sağlayıcısının kodunun açıklamasını kaldırın. Sıkıştırılmamış kod bloğu şöyle görünür:

    OAuthWebSecurity.RegisterTwitterClient(
            consumerKey: "",
            consumerSecret: "");
    
  3. Twitter uygulamasındaki Tüketici Anahtarı değerini parametrenin değeri olarak (tırnak işaretlerinin consumerKey içinde) kopyalayın.

  4. Twitter uygulamasından Consumer Secret değerini parametresinin consumerSecret değeri olarak kopyalayın.

  5. Dosyayı kaydedin ve kapatın.

Twitter oturum açma bilgilerini test etme

  1. Sitenizin default.cshtml sayfasını çalıştırın ve Oturum Aç düğmesini seçin.

  2. Oturum Açma sayfasındaki Oturum açmak için başka bir hizmet kullan bölümünde Twitter simgesini seçin.

    Web sayfası, isteği oluşturduğunuz uygulamanın Twitter oturum açma sayfasına yönlendirir.

    oauth-4

  3. Bir Twitter hesabında oturum açın.

  4. Kod, kullanıcının kimliğini doğrulamak için Twitter belirtecini kullanır ve ardından sizi oturum açma bilgilerinizi web sitesi hesabınızla ilişkilendirebileceğiniz bir sayfaya döndürür. Adınız veya e-posta adresiniz formdaki Email alanına doldurulur.

    Hesap kayıt sayfasını gösteren ekran görüntüsü.

  5. İlişkile düğmesini seçin.

    Tarayıcı giriş sayfasına döner ve oturumunuz açılır.

Ek Kaynaklar