## 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](https://cloud.logto.io/). - Logto ile kimlik doğrulama için entegre edilmiş bir Tek Sayfa Uygulaması (SPA). Henüz yoksa, [ilk uygulamayı oluşturma ve entegre etme](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-app/) kılavuzumuzu takip ederek, Logto'da yeni bir uygulama oluşturup kaydedin. uygulama oluşturma

- SPA uygulamanız ile Logto'yu kutudan çıkmadan kullanabileceğiniz SDK'mız ile entegre edin. Örn. [React SDK](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Kendi SPA uygulamanız için oturum açma deneyimini özelleştirmek üzere [oturum açma deneyimi kılavuzumuzu](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/) takip edebilirsiniz. Cypress testlerinizde oturum açma akışını simüle edin.

- [Cypress kurulumunu](https://docs.cypress.io/guides/getting-started/installing-cypress) 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](https://github.com/logto-io/js/tree/master/packages/react-sample) 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. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); ``` ![ana sayfa](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### 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. Logto oturum açma sayfası farklı bir alan adında barındırılmaktadır (bu örnekte http://localhost:3001/sign-in). [cy.origin](https://docs.cypress.io/api/commands/origin) ile farklı bir alan adı ziyaret edilerek kimlik doğrulamanız gerekecektir. > 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. ```js cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); ``` 1. Geçerli url'in Logto oturum açma sayfası olduğunu doğrulayın. ![oturum açma](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Kullanıcı adı ve şifre giriş alanlarını bulun ve kullanıcı adını ve şifresini girin. ![gönderme](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Oturum açmak için oturum açma butonuna tıklayın. Yukarıdaki form doldurma mantığını oturum açma deneyimi ayarlarınıza göre yeniden yazabilirsiniz. ### 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. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![geri çağırma](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### 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`. ```js function signIn(username: string, password: string) { cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); Cypress.Commands.add('signIn', (username: string, password: string) => { const log = Cypress.log({ displayName: 'SignIn', message: [`Sign in with: ${username}`], autoEnd: false, }); log.snapshot('before'); signIn(username, password); log.snapshot('after'); log.end(); }); } ``` ## 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. ```js describe('authentication', () => { beforeAll(() => { cy.signIn('username', 'password'); }); it('should be authenticated', () => { cy.contains('Sign Out').should('be.visible'); }); }); ``` 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. Logto Cloud'u Deneyin