Cypress ile Logto kimlik doğrulama

Giriş#

Kimlik doğrulama, herhangi bir web uygulamasının önemli bir parçasıdır ve Tek Sayfa Uygulamalarında (SPA) kimlik doğrulama korumalarının beklendiği gibi çalıştığından emin olmak esastır. Bu kılavuzda, Cypress testlerinizde Logto ile kimlik doğrulama sürecini adım adım anlatacağız, böylece SPA'nın kimlik doğrulama akışını etkili bir şekilde test edebilirsiniz.

Önkoşullar#

Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:

• Bir Logto hesabı. Henüz yoksa, ücretsiz Logto cloud kaydı yapabilirsiniz.

• Logto ile kimlik doğrulama için entegre edilmiş bir Tek Sayfa Uygulaması (SPA). Henüz yoksa, ilk uygulamayı oluşturma ve entegre etme kılavuzumuzu takip ederek, Logto'da yeni bir uygulama oluşturup kaydedin.

  

• SPA uygulamanız ile Logto'yu kutudan çıkmadan kullanabileceğiniz SDK'mız ile entegre edin. Örn. React SDK

• Kendi SPA uygulamanız için oturum açma deneyimini özelleştirmek üzere oturum açma deneyimi kılavuzumuzu takip edebilirsiniz. Cypress testlerinizde oturum açma akışını simüle edin.

  

• Cypress kurulumunu ve yapılandırmayı tamamlayın. Bu kılavuz, iyi yapılandırılmış bir Cypress ortamına sahip olduğunuzu ve Cypress testlerinizi zaten çalıştırabildiğinizi varsayar.

• Logto hizmetinizi ve istemci uygulamanızı çalıştırın.

Bu kılavuzda örnek olarak React SPA Örnek uygulamamızı kullanacağız. Kaynak kodunu burada bulabilirsiniz. Logto React SDK kullanılarak kimlik doğrulama için Logto ile entegre edilmiş basit bir React uygulaması.

• Logto oturum açma url'si: http://localhost:3001/sign-in
• React SPA uygulama alanı: http://localhost:3000
• Logto oturum açma deneyim ayarları: kullanıcı adı/şifre

Logto ile kimlik doğrulamak için özel bir Cypress komutu yazın#

Cypress testlerinizde Logto ile kimlik doğrulamak için özel bir Cypress komutu yazalım. Özel komutu kullanarak, Cypress testlerinizin herhangi birinde Logto ile kolayca kimlik doğrulama yapabilirsiniz.

Adım 1: Oturum açma akışını başlatın#

Cypress testinizde istemci uygulamanızın oturum açma sayfasını ziyaret edin ve oturum açma butonuna tıklayarak oturum açma akışını başlatın.

Adım 2: Oturum açma formunu doldurun ve gönderin#

Logto oturum açma sayfasına gidin ve oturum açmak için kullanıcı adını ve şifreyi girin.

Normal kullanımlarda, bir tek Cypress testi, tarayıcının standart web güvenlik özellikleri nedeniyle yalnızca tek bir origin'de komut çalıştırabilir. cy.origin() komutu testlerinizi bu sınırlamayı aşmanızı sağlar.

1. Geçerli url'in Logto oturum açma sayfası olduğunu doğrulayın.
2. Kullanıcı adı ve şifre giriş alanlarını bulun ve kullanıcı adını ve şifresini girin.
3. Oturum açmak için oturum açma butonuna tıklayın.

Adım 3: Başarılı bir şekilde kimlik doğrulandıktan sonra istemci uygulamanıza geri yönlendirin#

Başarılı bir oturum açmanın ardından, istemci uygulamanıza geri yönlendirilmelisiniz.

Adım 4: Tüm oturum açma akışını özel bir Cypress komutu olarak toplayın#

Tüm oturum açma akışını özel bir Cypress komutu olarak toparlayın. Bu örnekte cy.signIn.

Uygulamanızın kimliğini doğrulamak için özel Cypress komutunu kullanın#

Cypress testlerinizin herhangi birinde, Logto ile kimlik doğrulamak için özel Cypress komutunu kullanabilirsiniz.

Tebrikler! Cypress testlerinizde Logto ile başarıyla kimlik doğrulaması yaptınız. Artık SPA uygulamanızı test etmeye odaklanabilir ve kimlik doğrulama akışıyla ilgilenmezsiniz.