Flutter | Huawei Auth Service Kullanımı (Email İle Kimlik Doğrulama)

Herkese merhaba,

Bu yazımda sizlere Huawei AppGallery Connect’in geliştiricilere sunduğu Auth Servis hakkında bazı bilgiler verip, Flutter ile geliştireceğiniz cross-platform uygulamalarda nasıl kullanılacağından bahsedeceğim.

Auth Service Nedir?

Bir çok mobil uygulama üyelik sistemine ve kimlik doğrulama yöntemlerine ihtiyaç duyar. Mobil uygulamalarda bu sistemi sıfırdan kurmak zor ve zaman alıcı olabilmektedir. Huawei AGC Auth Service, bu kimlik doğrulama işlemini hızlı ve güvenli bir şekilde mobil uygulamanıza entegre etmeyi sağlamaktadır. Üstelik Auth Service bir çok kimlik doğrulama yöntemi sunmaktadır. Auth Service, Android Native, IOS Native ve cross-platform(Flutter, React-Native, Cordova) projelerde kullanılabilmektedir.

Yüksek güvenlikli, hızlı ve kullanımı kolay olan Auth Service aşağıdaki tüm hesap yöntemleri ile kimlik doğrulama yöntemlerini desteklemektedir.

• Mobile Number (Android, IOS, Web)
• Email Address (Android, IOS, Web)
• HUAWEI ID (Android)
• HUAWEI GameCenter account (Android)
• WeChat account (Android, IOS, Web)
• QQ account (Android, IOS, Web)
• Weibo account (Android, IOS)
• Apple ID (IOS)
• Google account* (Android, IOS)
• Google Play Games account* (Android)
• Facebook account* (Android, IOS)
• Twitter account* (Android, IOS)
• Anonymous account (Android, IOS, Web)
• Self-owned account (Android, IOS)

(*) İşaretli kimlik doğrulama yöntemleri yalnızca Çin dışındaki uygulamalarda geçerlidir.

Geliştirme Adımları

1. Flutter Entegrasyonu

AGC Console üzerinden uygulamanızı oluşturup, gerekli adımları tamamladıktan sonra ilk olarak agconnect-services dosyası projeye eklenmeli.

Android konfigürasyon dosyasını Flutter projesindeki android/app dizini altında agconnect-services.json olarak eklenmeli.

IOS için ise agconnect-services.plist dosyası yine Flutter projesindeki Runner dizini içine eklenmeli.

Buradaki en önmeli nokta, her iki platform için ayrı ayrı config dosyaları eklenmesi. Eğer projeye bu dosyalar eklenmezse, uygulamadaki Huawei Mobil Servisleri çalışmayacaktır.

Daha sonra android dizini altındaki build.gradle dosyasına HMS kullanımı için aşağıdaki bağımlılıkların eklenmesi gerek.

buildscript {
    repositories {
        google()
        jcenter()
        maven {url 'https://developer.huawei.com/repo/'}
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath 'com.huawei.agconnect:agcp:1.4.2.301'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven {url 'https://developer.huawei.com/repo/'}
    }
}

Daha sonra android/app dizini altındaki build.gradle dosyasına aşağıdaki kod satırını ekleyin.

apply plugin: 'com.huawei.agconnect'

Son olarak pubspec.yaml dosyasına Auth Service SDK’sı eklenmeli. Bunun için pubspec.yaml dosyasını açıp gerekli bağımlılığı aşağıdaki gibi ekleyin.

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  agconnect_auth: ^1.1.0
  agconnect_core: ^1.1.0

Ve “pub get” diyerek eklenen bağımlılıkların Android Studio’ya eklenmesi sağlanır. Tüm bu adımlar tamamlandıktan sonra uygulamanız artık kodlamaya hazırdır.

2. Email ile Register İşlemleri

Auth Service ile yapacağımız tüm işlemleri barındıran AuthManager isminde yeni bir Dart dosyası oluşturalım. Bu sınıf içinde doğrulama kodu gönderme, kayıt, oturum açma gibi tüm işlemler için gerekli metotlar yazılacak ve arayüz sınıfında kod karmaşası olmadan, tüm işlemler bu sınıf içinde yapılmış olacak.

• Kullanıcı email adresi ile kayıt olurken ilk olarak belirtilen email adresine bir doğrulama kodu gönderilmeli. Bu sayede kullanıcıların gerçek bir kişi olup olmadığı belirlenmiş olacak ve güvenlik önlemleri alınmış olacak. Bunun için kullanıcının girdiği email adresini parametre alan ve bu mail adresine bir doğrulama kodu gönderen sendRegisterVerificationCode ismindeki metodu oluşturalım. Metot içinde bir VerifyCodeSettings nesnesi oluşturarak, VerifyCodeAction değerini “registerLogin” yaparak doğrulama kodunun hangi amaçla kullanılacağı belirtilir. Son olarak EmailAuthProvider.requestVerifyCode ile doğrulama kodu mail adresine gönderilmektedir. Metodun tamamı aşağıdaki gibi olmalıdır.

• Kullanıcıya doğrulama kodu ulaştıktan sonra mail adresi, şifre, ve doğrulama kodu ile birlikte uygulamaya kayıt olması sağlanır. Her kullanıcı özel bir şifre belirlemelidir ve bu şifre en az 8 karakter uzunluğunda olmalı ve mail adresinden farklı olmalı. Ayrıca küçük harf, büyük harf, rakam, boşluk veya özel karakter şartlardan en az ikisini sağlamalı. Kayıt işleminin yapılması için registerWithEmail isminde bir metot oluşturup parametre olarak mail adresi, doğrulama kodu ve şifre verilmeli. Daha sonra bir EmailUser nesnesi oluşturup bu değerler set edilmeli. Son olarak AGCAuth.instance.createEmailUser(user) satırı ile yeni bir kullanıcı yaratılır. registerWithEmail metodunun tamamı aşağıdaki gibi olmalıdır.

3. Email İle Login İşlemleri

• Kullancıların mobil uygulamanıza kayıt olduktan sonra giriş yapabilmesi için güvenlik önlemleri gereği yeniden doğrulama kodu gönderilmektedir. Giriş yaparken doğrulama kodu göndermek için register işleminde olduğu gibi bir metot oluşturup bu metot ile ilgili mail adresine doğrulama kodu gönderimi sağlanmalıdır.
• Doğrulama kodu gönderildikten sonra, kullanıcı mail adresi, şifresi ve doğrulama kodu ile uygulamaya giriş yapabilir. Login metoduna .then ve .catchError ekleyerek işlemin başarılı olup olmadığını test edebilirsiniz. Sign-in işlemine ait tüm kodları aşağıda bulabilirsiniz.

4. Parola Sıfırlama İşlemleri

• Eğer kullanıcı parolasını unutrsa ya da değiştirmek isterse Auth Service’in sunduğu parola sıfırlama metodu kullanılmalıdır. Aksi halde kullanıcı şifresini değiştiremez, ve hesabına giriş yapamaz.
• Her işlemde olduğu gibi parola sıfırlanırken yine bir doğrulama koduna ihtiyaç duyulur. Bu doğrulama kodu register ve signin işlemlerine benzer şekilde kullanıcının mail adresine gönderilmelidir. register ve signin işlemlerinden farklı olarak VerifyCodeSettings parametresi VerifyCodeAction.resetPassword olmalıdır. Kullanıcının mail adresine doğrulama kodu gönderildikten sonra aşağıdaki gibi parola sıfırlama işlemleri yapılabilir.

5. Çıkış Yapma

• Kullanıcının mevcut oturumunu sonlandırması için AGCAuth nesnesinden bir instance oluşturup signOut() metodu çağrılmalıdır. Bu kısa kod bloğunu aşağıda bulabilirsiniz.

6. Kullanıcı Bilgileri

• Oturumu açık olan bir kullancının kullanıcı bilgilerini göstermek için Auth Service bir çok veri sağlamaktadır. Bu verileri elde etmek için AGCAuth nesnesinden bir instance oluşturup currentUser metodu ile kullanıcıya ait tüm bilgiler listelenebilir.

• AuthManager sınıfının tamamı bu işlemleri içermeli. Yukarıdaki metotlar sayesinde uygulamanızda Email adresi ile oturum açma ve kayıt olma işlemlerini gerçekleştirebilirsiniz. İhtiyacınız olan yerde ihtiyacınız olan metodu AuthManager sınıfından bir nesne yaratıp çağırabilirsiniz. AuthManager sınıfı tamalandığına göre şimdi bir registration sayfası tasarlanıp gerekli metotlar çağırılabilir.

7. Kayıt Sayfası Oluşturma

• Tasarım konusunda fikir vermesi için bir örnek paylaşacağım. Ben sayfa tasarımındaki elementlerin animasyon ile 5er saniyelik aralıkla gelmesi için bir animasyon tasarladım. Ayrıca uygulamanızın logosunu öne çıkarmak için belirli aralıklarla eklediğiniz ikonun çevresinde daireler çıkaran bir tasarım hazırladım. Bunun için avatar_glow kütüphanesini kullandım. Avatar Glow kütüphanesi sade ve şık bir tasarım yapmamızı sağlıyor. Bu kütüphaneyi eklemek için pubspec.yaml dosyasına “avatar_glow: ^1.1.0” satırını ekleyip “pub get” ile projenize entegre edebilirsiniz.
• Kütüphane eklendikten sonra animasyonları çalıştırmak için DelayedAnimation isminde bir Dart dosyası oluşturuyoruz. Bu sınıf içinde animasyonun bütün özelliklerini tanıtıyoruz. Sınıfın tüm kodlarına aşağıdan ulaşabilirsiniz.

• Daha sonra RegisterPage isminde bir Dart dosyası oluşturup kodlamaya devam edebiliriz.
• Bu sınıf içinde ilk olarak sabit bir gecikme süresi belirliyoruz. Ben 500 ms olarak belirledim. Daha sonra her element için 500ms arttırarak bu aralıklarla alt alta yüklenmesini sağladım.
• Daha sonra TextFormField içine yazılan email, password, verify code gibi değerleri almak için TextEditingController nesneleri oluşturulmalı.
• Son olarak doğrulama kodu gönder butonuna basınca butonun isminin değişmesi ve hemen aşağısında yeni bir doğrulama kodunun girileceği alanın görünürlüğünü değiştirmek için bir bool türünde bir visibility değeri set ediyorum.

• Şimdi initState metodu içinde AnimationController’a ait değerler set edilmeli.

• Sonra doğrulama kodu gönderme butonu ve kayıt butonu için birer metot oluşturulup, bu metotlar Widget build metodu içinde gerekli yerlerde çağırılmalı. Her iki metot içinde ilk olarak visibility değerlerini ve textlerini değiştirip, AuthManager sınıfından bir nesne oluştururak ilgili metotların çağırılması sağlanmalı.

• Son olarak Widget build metodu içinde her elemntin tasarımı ayrı ayrı hazırlanıp, en son return edilmeli. Eğer tüm kodlar return altına yazılırsa kod çok karmaşık gözükecektir ve hata ayıklama, değişiklik gibi işlemlerin yapılması zorlaşacaktır. Aşağıda görüldüğü gibi en üste bir Avatar Glow objesi hazırladım. Daha sonra iki tane TextFormField ile kullanıcının mail adresini ve şifresini girmesini sağladım. Bu iki TextFormField altında doğrulama kodunun gönderilmesi için bir button yer alıyor. Bu buttona tıklayınınca mail adresine bir doğrulama kodu gönderiliyor ve buttonun hemen altında bu doğrulama kodunun girilmesi için yeni bir TextFormField ve register işlemlerinin yapılabilmesi için yeni bir button tasarımı çıkıyor. Ekran görüntüleri ve kodların tamamı aşağıdaki gibidir.

8. Login Sayfası Oluşturma

Login işlemleri için gerekli olan kodları yukarıda olduğu gibi AuthManager sınıfı içinde yazmıştık. Register sayfasındaki aynı tasarımı kullanarak ve butonların onPressed metotlarını değiştirerek kolayca Login sayfası da oluşturulabilir. Bütün kodlar aynı olduğundan bu alan için yeniden kodları paylaşmayacağım. Belirttiğim gibi bu sadece bir tasarım örneği, elbette giriş ve kayıt sayfalarınızı uygulamanızın ihtiyaçlarına yönelik olarak değiştirebilirsiniz.

Referanslar

Projenin tüm kaynak kodlarına ve bazı HMS Kitlerinin Flutter entegrasyon örneklerinin de bulunduğu GitHub projeme aşağıdaki bağlantıdan ulaşabilirsiniz.

BerkOzyurt/HMS-Flutter-Usage

Huawei’nin resmi dökümanlarına aşağıdaki bağlantılardan ulaşabilirsiniz.

Getting Started with Flutter

AGC Auth Service Flutter

Auth Service Cross-Platform Framework