Yeni bir pencere açmadan tek bir sayfa uygulamasında Dropbox kimlik doğrulaması nasıl yapılır?

Question

Dropbox ve LinkedIn gibi diğer servislerle entegre olan tek bir sayfa uygulamasına sahibim. Örneğin Dropbox'ın mükemmel bir API'si var ve Dropbox'ın kimlik doğrulama bağlantısını başka bir pencerede açarak kimlik doğrulamasını çalıştırıyorum. Kullanıcı kimliğini doğruladıktan sonra, uygulamanıza geri dönmek için bu yeni pencereyi kapatmasını istiyorum. benim app uzak kullanıcı alır, ve hatta daha hantal tabletlerde olduğu gibi

Açıkçası bu suboptimaldir.

Nasıl böyle bir lightbox veya kalıcı formda Uygulamanın içinde kimlik yapardınız? entegrasyon kendisi sunucu tarafı değil istemci tarafı olur

Not. Şu anda, Dropbox kimlik doğrulama sayfasında sunucumun, kimlik doğrulamanın başarılı olduğunu bildiren bir geri arama sayfası var; bu veritabanında, kullanıcının gelecekte kullanmak üzere veritabanında saklıyorum.

Not: kelle comment okumalısınız: Bir kod örneği son derece arzu edilir ancak gerekli değildir.

Answer 1

Önerdiğiniz şey güvenlik modelini yenmek, bu yüzden mümkün olmamalıdır. Kullanıcı, doğrulama için gerçek sayfanın URL'sini görebilmelidir. Paypal ile ödeme yaptığınızı düşünürseniz, büyük olasılıkla önemli verilerinizi girmeden önce paypal.com'da olduğunuzu kontrol edersiniz? Aynı şey diğer tüm uygulamalar için de geçerlidir. Bu çok çirkin bir akış, ama endüstri bugünle en iyisi.

İdeal akış, kullanıcıyı üçüncü taraf web sitesine veya uygulamaya yönlendirir, kullanıcı girişlerini girer ve yetkilendirir, sonra size yeniden yönlendirir. Yerel bir uygulama başka bir yerel uygulamaya geçme avantajına sahiptir, bu nedenle akış biraz daha az çirkin olur.

İstediğiniz şeyi yapmak, 3. taraf hizmetine kullanıcının adını ve şifresini soran bir uygulama, ardından sahnenin arkasındaki auth dansını yapmak. Bu, kullanıcıları uygulamanızdan büyük olasılıkla engeller ve çok tehlikelidir. Tavsiye etmiyorum.

Answer 2

Uygulamanız bir web uygulamasıysa, akışı akışlandırmanın en iyi yolu, geçerli sayfayı (ör. How to redirect to another webpage in JavaScript/jQuery?) Dropbox'taki/izin sayfasına yönlendirmek, uygulamanızın bir sayfasındaki oauth_callback öğesinin belirtilmesidir. süreç tamamlandı.

Bu şekilde akış adildir:

(uygulamanızda)

1. kullanıcı OAuth akmaya başlaması düğmesini tıkladığında
2. kullanıcı uygulamasını mı
3. (Dropbox yönlendirmeleri yetkisi (Uygulama sayfanızı yetkilendirmek Dropbox yönlendirir) oauth_callback başına uygulamanıza) uygulaması erişim belirteci alır ve entegrasyonu barındırmaktadır

kullanıma hazırdır ve bu tüm ekstra pencereleri açarak/kapama olmadan, tek bir sayfa içinde gerçekleşir.

Answer 3

Web sayfanızda bir iframe içinde yetkilendirme bitiş noktasını yükleyebilirsiniz. Ancak, bazı tarayıcıların iFrame içinde giriş sağlayıcısına gönderilen çerezlerde sınırlamaları olduğuna dikkat edin. Genellikle (Safari, iOS) çerezlere erişimi okudunuz, eğer oturum çerezi zaten sağlayıcıda ayarlanmışsa yeterlidir. Geri arama sayfasında

- kimlik doğrulama sonra dropbox'a geri gönderilir; Üst sayfada bir olayı tetiklemek için javascript işlevini çağırmanız gerekecek, bu kimlik doğrulaması yapılmalıdır.

window.parent.AppController.authenticationComplete(); 

üst sonra iç çerçeve kaldırmak ve kimlik doğrulaması olarak devam edebilir. Çünkü potansiyel çerez sorununun

---

authenticationCompleted = function() { 
    // [snipp] 
    $("iframe#loginwrapper").remove(); 
} 

, ana HTML sayfası hiç sunulmaktadır önce, sunucu ucundan başlatılan tüm kimlik doğrulama adımları gerçekleştirmek için tavsiye vardı. Ardından, uygulamanızın iki kez yüklenmediğinden emin olursunuz. Bu, birçok kimlik doğrulama/kimlik ara katman yazılımı çözümlerinin tipik davranışıdır.

---

Eğer app söz Ne zaman bir saf WebApp demek olup olmadığı açık değildir, ya da böyle PhoneGap olarak çerçeveler kullanarak bir melez uygulamada mevcut kontrol edebiliyor. Phonegap veya benzeri ile, tarayıcının içinde tarayıcı içinde bir tarayıcı yükleyebilirsiniz - bu durumda ChildBrowser aynı çerez sınırlamaları ile sınırlı değildir.

Yakın zamanda iOS için Phonegap ve Childbrowser ile bu çalışmanın nasıl yapılacağı konusunda bir eğitim yazdım. Bu öğretici OAuth'un 1.0 farklıdır OAuth 2.0 kullanarak açık olduğunu

• OAuth 2.0 Guide for Phonegap using ChildBrowser and JSO

dikkat edin.