WordPress kullanıcıları için mobil uygulama deneyimini iyileştirmek ve kullanıcılara daha güvenli, kişiselleştirilmiş bir deneyim sunmak bir zorunluluk haline gelmiştir. Flutter ve JWT Kimlik Doğrulaması’nın bir araya geldiği bu uygulama, WordPress siteleri için güçlü, özelleştirilebilir ve güvenli bir mobil çözüm sağlar. Bu uygulamanın amacı WordPress’e api ile giriş yapan kullanıcının JWT ile token oluşturması ve doğrulama işlemlerinin sağlanmasına yönelik bir çalışmadır. Yazının sonunda yapmış olduğum uygulamanın github reposunu paylaşacağım. Keyifli okumalar…

Neden Uygulamada Kimlik Doğrulamasına İhtiyaç Duyarız

Bir uygulamada kimlik doğrulamasına (authentication) neden ihtiyaç duyduğumuzu anlamak için, güvenli bir çevrimiçi deneyim sağlamanın önemini anlamamız gerekiyor. Kimlik doğrulama, bir kullanıcının kim olduğunu teyit etmeyi sağlar. Bu süreç, kullanıcıların hassas verilere erişimini sınırlamak, kişiselleştirilmiş deneyimler sağlamak ve yanıltıcı eylemleri (örneğin, sahte hesaplarla yapılan saldırılar) önlemek için gereklidir.

JWT (JSON Web Token), kullanıcıların kimliklerini doğrulamak ve taşımak için kullanılan açık bir standarttır (RFC 7519). Bir JWT, bir başlık, bir yük ve bir imza olmak üzere üç parçadan oluşur. İşte JWT’nin nasıl çalıştığı:

Başlık: Tokenin tipini ve kullanılan imza algoritmasını belirtir.
Yük: Tokenin taşıdığı iddia veya veri. Bu genellikle kimlik doğrulama bilgilerini ve diğer kullanıcı bilgilerini içerir.
İmza: Başlık, yük ve bir gizli anahtarın birleştirilerek imzalanması ile oluşur. Bu imza, tokenin alıcısının (genellikle bir sunucu), tokenin değiştirilmediğini ve güvenli bir kaynaktan geldiğini doğrulamasını sağlar.

Bir JWT’nin nasıl kullanıldığını örneklerle gösterelim:

Kimlik doğrulama: Kullanıcı adı ve şifre ile kimlik doğrulama yapıldığında, sunucu bir JWT oluşturur ve bunu kullanıcıya geri gönderir. Kullanıcı bu tokeni gelecekteki tüm isteklerinde ‘Authorization’ başlığında taşır. Sunucu, gelen her istekte bu tokeni doğrular ve böylece kullanıcının kim olduğunu belirler.
Bilgi Paylaşımı: JWT’ler genellikle iki sistem arasında güvenli bilgi aktarımı için kullanılır. Bilgi, JWT’nin yük kısmında yer alır ve imza sayesinde bu bilginin değiştirilmediği garanti edilir.

JWT’nin kullanımı, sunucu tarafında durumun (state) saklanmasına gerek kalmadan durumun (state) kullanıcı tarafında saklanmasına izin verir. Bu, uygulamanın ölçeklendirilebilirliğini artırır çünkü herhangi bir sunucunun herhangi bir isteği işlemesi gerekmektedir. Ayrıca, JWT’ler farklı sistemler arasında güvenli bir şekilde bilgi taşımak için de kullanılabilir.

JWT Authentication Uygulaması Görselleri

Giriş Yap

Kayıt Ol

Anasayfa

Profil

Uygulamanın Özellikleri

Flutter JWT Kimlik Doğrulama Uygulaması’nın ana özelliklerini aşağıda bulabilirsiniz:

JWT Kimlik Doğrulama: Uygulama, kullanıcıların güvenli bir şekilde oturum açabilmesi için JWT Kimlik Doğrulama’yı kullanır. Her oturum açma işlemi, belirli bir süre boyunca geçerli olan bir token oluşturur.
WordPress Girişi: Uygulama, kullanıcıların WordPress API hizmetini kullanarak WordPress hesaplarına giriş yapmalarını sağlar.
Token Oluşturma ve Doğrulama: Kimlik doğrulamayı güvence altına almak için, uygulama, her bir oturum açma işlemi için benzersiz bir token oluşturur ve doğrular.
Token Tabanlı Kimlik Doğrulama: Uygulama, belirli sayfalara erişim için token tabanlı kimlik doğrulama kullanır. Bu, sadece doğru tokena sahip kullanıcıların belirli sayfalara erişebileceği anlamına gelir.
WordPress API ile Entegrasyon: Uygulama, kullanıcıların kaydolmasını ve oturum açmasını sağlamak için WordPress API ile entegre olmuştur.
Veri Saklama: Uygulama, kullanıcı bilgilerini ‘shared_preferences’ kullanarak saklar. Bu, uygulamanın hızlı ve etkin bir şekilde çalışmasını sağlar.
Güvenli Token Saklama: Uygulama, oluşturulan tokenları ‘secure_storage’ kullanarak güvenli bir şekilde saklar. Bu, tokenların yetkisiz kullanımlardan korunmasını sağlar.

Kurulum

1. Projeyi Klonlayın:

git clone https://github.com/nurullahturkoglu/flutter-jwt-auth-for-wordpress.git

2. Bağımlılıkları indirin

flutter pub get

3. Uygulamayı Çalıştırın

flutter run

Kullanım

Aşağıda projenin nasıl kullanıldığını ve önemli dosyalardaki değişiklerikleri göreceksiniz.

Auth Middleware

auth_middleware.dart dosyası, sayfalar için token doğrulamasını etkinleştirmek için kullanılır. Bir kullanıcının bir token’a sahip olmaması, token’ının süresinin dolmuş olması veya geçersiz bir token sağlanması durumunda, otomatik olarak giriş sayfasına yönlendirilirler.

Future<void> validateToken() async {
    bool isValid = await WordPressAuthMethods().validateUserToken();

    if (!isValid) {
      navigateToLoginPage();
      return;
    }

    setState(() {
      isAuthenticated = isValid;
    });
}

WordPress Auth Metotları

‘wordpress_auth_methods.dart’ dosyası, WordPress giriş, kayıt ve doğrulama süreçlerini yönetir. Kullanıcı bilgileri shared_preferences kullanılarak depolanırken, token secure_storage kullanılarak güvenli bir şekilde saklanır. Bir token mevcut değilse veya süresi dolmuşsa, kullanıcı otomatik olarak giriş sayfasına yönlendirilecektir.

WordPress Giriş Fonksiyonu

NOT: ⚠️ Tmeister/wp-api-jwt-auth deposundaki jwt-authentication-for-wp-rest-api/public/class-jwt-auth-public.php dosyasına bazı değişiklikler yaptım. Aşağıda, generate_token bölümüne eklenen kod parçalarını bulacaksınız:

'user_id'         => $user->data->ID,
'user_role'       => $user->roles[0],

Bunu yaparak, başarılı bir şekilde giriş yaparsanız şöyle bir yanıt alabilirsiniz:

{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.***",
    "user_id": "13",
    "user_email": "[email protected]",
    "user_nicename": "Nurullah Turkoglu",
    "user_display_name": "turkoglu1",
    "user_role": "subscriber"
}

validate_token fonksiyonuna kullanıcı kimliğini daha verimli bir şekilde almak için aşağıdaki kodu ekledim:

'data' => [
    'status' => 200,
    'user_id' => $token->data->user->id,
],

Eğer token geçerliyse, şu şekilde bir yanıt alabilirsiniz:

{
    "code": "jwt_auth_valid_token",
    "data": {
        "status": 200,
        "user_id": "13"
    }
}

WordPress Kayıt Fonksiyonu

Ayrıca kullanıcıların wordpress sitenize kayıt olabilmesi için ekstra bir API daha ekledim. Ben bu apiyi daha kolay yönetebilmek için kullanıcıların login olurken ve tokenlerini doğrularken kullandıkları fonksiyonların yanına koydum ki daha rahat bulabileyim. Fakat siz functions.php dosyanızın içine bu kodları entegre edebilirsiniz.Öncelikle kayıt olmak için route oluşturmalısınız:

register_rest_route($this->namespace, '/register', array(
    'methods'             => 'POST',
    'callback'            => array($this, 'create_user'),
    'permission_callback' => '__return_true',
));

Daha sonra ise ‘create_user()’ fonksiyonunu kullanarak yeni kayıt oluşturma fonksiyonunu yazıyoruz.Burada herşey yolunda giderse parametre olarak aldığımız kullanıcı adı ve şifreyi ‘wp_create_user($username , $password) şeklinde wordpress’in sunmuş olduğu fonksiyona veriyoruz.

function create_user($request) {
    $params = $request->get_params();

    // Get the username and password
    $username = sanitize_text_field($params['username']);
    $password = sanitize_text_field($params['password']);

    // Check if a user with the same username already exists
    $existing_user = get_user_by('login', $username);
    if ($existing_user) {
        // A user with the same username already exists
        $response = array(
            'status'  => 'error',
            'message' => 'The username is already taken.',
        );
    } else {
        // Create a new user
        $user_id = wp_create_user($username, $password);

        if (!is_wp_error($user_id)) {
            // Successful registration
            $response = array(
                'status'  => 'success',
                'message' => 'User created successfully.',
                'user_id' => $user_id,
            );
        } else {
            // Error occurred
            $error = $user_id->get_error_message();
            $response = array(
                'status'  => 'error',
                'message' => "Failed to create user. $error",
            );
        }
    }

    // Return the response
    return $response;
}

Böylece bu adımları takip ederecek wordpress sayfanız için yeni bir üyelik oluşturma apisi kurdunuz. Artık https://yourdomain.com/wp-json/jwt-auth/v1/register adresine aşağıdaki JSON Formatında POST isteği atarak yeni kullanıcı oluşturabilirsiniz.

{
    "username": "test123",
    "password": "123"
}

Ana Kod

Projenin main kısmında yönlendirme için route işlemlerini kullandık.Aşağıda görebileceğiniz üzere istediğimiz sayfalara erişimden önce AuthMiddleware() widgetını kullanıyoruz. Bu widget sayesinde önce token kontrolü daha sonra ise istenilen widget’a erişim sağlıyoruz.

return MaterialApp(
  title: 'JWT Auth Tutorial',
  routes: {
    '/login': (context) => const LoginPage(),
    '/register': (context) => const RegisterPage(),
    '/home': (context) => const AuthMiddleware(child: HomePage()),
    '/book': (context) => const AuthMiddleware(child: BookPage()),
    '/profile': (context) => const AuthMiddleware(child: ProfilePage()),
  },
  home: const LoginPage(),
);

Umarım bu yazı sizlere faydalı olmuştur.Bir sonraki yazılarda görüşmek üzere..

Flutter ile WordPress için JWT Kimlik Doğrulama Uygulaması