## Giriş - [Logto](https://logto.io/), müşteri kimlik altyapısını minimum çabayla oluşturmak için modern bir Auth0 alternatifidir. Kullanıcı adı, e-posta, telefon numarası ve Google ve GitHub gibi popüler sosyal giriş yöntemlerini destekler. - [Capacitor](https://capacitorjs.com/), Web Native uygulamalar oluşturmak için açık kaynaklı bir yerel çalıştırma ortamıdır. Bu öğreticide, Capacitor'da Logto ile kimlik doğrulama akışını nasıl oluşturacağımızı göstereceğiz. Bu, platformlar arası giriş ve kayıt akışları oluşturmanıza olanak tanıyacak. ## Gereksinimler Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun: - Bir Logto hesabı. Eğer yoksa, [ücretsiz kaydolabilirsiniz](https://cloud.logto.io/). - Bir Capacitor projesi. Bir tane oluşturmak için [resmi kılavuzu](https://capacitorjs.com/docs/getting-started) takip edebilirsiniz. ## Logto uygulaması oluşturun Başlamak için "Yerel" türünde bir Logto uygulaması oluşturun. Logto uygulamaları, OAuth 2.0 ve OpenID Connect (OIDC) akışlarında istemci uygulamalar olarak hizmet eder. Bir Logto uygulaması oluşturmak için şu adımları takip edin: 1. [Logto Bulut Konsolu](https://cloud.logto.io/) 'na giriş yapın. 2. Sol gezinme çubuğunda, **Uygulamalar** 'a tıklayın. 3. **Uygulama oluştur** 'a tıklayın. 4. Uygulama türü olarak **Yerel** 'i seçin ve uygulama adını girin. 5. **Oluştur** 'a tıklayın. Logto uygulaması oluştur

Logto uygulamasını oluşturduktan sonra yönlendirme URI'sini yapılandırın. Yönlendirme URI'si, kimlik doğrulama akışından sonra kullanıcıyı uygulamanıza geri yönlendirmek için kullanılır. URI'nin Capacitor uygulamanıza yönlendirdiğinden emin olun, örneğin, `com.example.app://callback`. Değer, Capacitor uygulama yapılandırmanıza bağlı olarak değişebilir. Daha fazlası için [Capacitor Derin Bağlantılar](https://capacitorjs.com/docs/guides/deep-links) 'a bakın. Yönlendirme URI'sini güncelledikten sonra **Değişiklikleri Kaydet** 'e tıklamayı unutmayın. Yönlendirme URI'si hakkında emin değilseniz, şimdilik boş bırakabilir ve daha sonra güncelleyebilirsiniz. ## Capacitor'u kurun Bir Capacitor projeniz olduğunu varsayarak, bu öğretici çerçeve bağımsızdır, bu nedenle tercih ettiğiniz herhangi bir UI çerçevesini kullanabilir ve kodu buna göre güncelleyebilirsiniz. ### Bağımlılıkları yükleyin ```bash # ya da yarn, pnpm npm install @logto/capacitor # Bağımlılıkları yükleyin npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Logto istemcisini başlatın ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - `endpoint`, Logto API ana noktasıdır. Yerleşik kılavuzda veya kiracı ayarlarının **Domainler** bölümünde bulabilirsiniz. - `appId`, Logto uygulama kimliğidir. Uygulama detay sayfasında bulabilirsiniz. ### Oturum açma düğmesini uygulayın Oturum açma düğmesinin `onClick` işlemcisine aşağıdaki kodu ekleyin: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` `com.example.app://callback` 'i Logto uygulamasında yapılandırdığınız yönlendirme URI'si ile değiştirin. ### Kontrol noktası: Kimlik doğrulama akışını tetikleyin Capacitor uygulamasını çalıştırın ve oturum açma düğmesine tıklayın. Bir tarayıcı penceresi açılacak ve Logto oturum açma sayfasına yönlendirecektir.

Kullanıcı, kimlik doğrulama akışını tamamlamadan tarayıcı penceresini kapatırsa, Capacitor uygulaması `LogtoClientError` alacaktır. ## Oturumdan çıkış Capacitor, iOS'ta Safari Görünüm Denetleyicisi ve Android'de Chrome Özel Sekmeleri kullandığından, kimlik doğrulama durumu bir süre devam edebilir. Ancak bazen kullanıcı uygulamadan hemen çıkmak isteyebilir. Bu durumda, kullanıcıyı oturumdan çıkarmak için `signOut` metodunu kullanabiliriz: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` `signOut` metodunun isteğe bağlı bir parametresi vardır ve oturum kapatıldıktan sonra yönlendirilecek URI'yi belirtebilirsiniz. Sağlanmazsa, kullanıcı Logto çıkış sayfasına yönlendirilir:

Kullanıcının web görünümünü kapatmak ve Capacitor uygulamasına dönmek için "Bitti" ye tıklaması gerekir. Kullanıcıyı otomatik olarak Capacitor uygulamasına geri yönlendirmek istiyorsanız, oturum kapatma sonrası yönlendirme URI'si sağlayabilirsiniz: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` Oturum kapatma sonrası yönlendirme URI'sinin Capacitor uygulamasına yönlendirdiğinden emin olun ve oturum kapatma sonrası yönlendirme URI'sini Logto Konsolu'na eklemeyi unutmayın: Logto yönlendirme URI yapılandırması

## Kontrol noktası: Kimlik doğrulama akışını tamamlayın Capacitor uygulamasını tekrar çalıştırın ve oturum açma düğmesine tıklayın. Eğer her şey yolunda giderse, kimlik doğrulama akışı tamamlandığında, Capacitor uygulaması oturum açma sonucunu alacak ve kullanıcı iddialarını konsola yazdıracaktır. Capacitor iOS uygulaması

Ardından oturumdan çıkış düğmesine tıklayın ve Capacitor uygulaması Logto çıkış sayfasına yönlendirilecektir. Oturumu kapatma sonrası yönlendirme URI'si yapılandırılmışsa, uygulama otomatik olarak Capacitor uygulamasına geri yönlendirecektir. Artık karmaşık kodlar yazmadan Logto Bulut Konsolu'nda kimlik doğrulama akışını yapılandırabilirsiniz. Yapılandırma, tüm istemci uygulamalarına uygulanacak ve tutarlı bir kullanıcı deneyimi sağlayacaktır. Entegrasyon sırasında herhangi bir sorunla karşılaşırsanız, lütfen contact@logto.io adresinden bize e-posta gönderin veya [Discord sunucumuza katılın](https://discord.gg/UEPaF3j5e6)! ## Daha fazla okuma - [Giriş deneyimini özelleştirin](https://docs.logto.io/docs/recipes/customize-sie/) - [Bağlayıcıları yapılandırın](https://docs.logto.io/docs/recipes/configure-connectors/) - [API'nizi koruyun](https://docs.logto.io/docs/recipes/protect-your-api/) Bugün Logto'yu Deneyin