Continue With Facebook in Jetpack Compose Login

Merhabalar sizlere bu yazımda Jetpack Compose ile Facebook login olma hakkında bilgilerimi paylaşacağım.

@Composable
fun LoginFacebookButton(
  onAuthComplete: () -> Unit,
  onAuthError: (Exception) -> Unit,
  iconRes: Int,
  buttonText: String,
  modifier: Modifier = Modifier,
) {
  val scope = rememberCoroutineScope()
  val loginManager = LoginManager.getInstance()
  val callbackManager = remember { CallbackManager.Factory.create() }
  val launcher = rememberLauncherForActivityResult(
    loginManager.createLogInActivityResultContract(callbackManager, null)
  ) {
    
  }

  DisposableEffect(Unit) {
    loginManager.registerCallback(callbackManager, object : FacebookCallback<LoginResult> {
      override fun onCancel() {
        // do nothing
      }

      override fun onError(error: FacebookException) {
        onAuthError(error)
      }

      override fun onSuccess(result: LoginResult) {
        scope.launch {
          val token = result.accessToken.token
          val credential = FacebookAuthProvider.getCredential(token)
          val authResult = Firebase.auth.signInWithCredential(credential).await()
          if (authResult.user != null) {
            onAuthComplete()
          } else {
            onAuthError(IllegalStateException("Unable to sign in with Facebook"))
          }
        }
      }
    })

    onDispose {
      loginManager.unregisterCallback(callbackManager)
    }
  }
  Button(
    onClick = {
      launcher.launch(listOf("email", "public_profile"))
    },
    modifier = modifier
      .fillMaxWidth()
      .background(Color.White)
      .border(
        width = 0.5.dp,
        color = Color.LightGray,
        shape = RoundedCornerShape(30)
      ),
    colors = ButtonDefaults.buttonColors(Color.White)
  ) {
    Row(
      horizontalArrangement = Arrangement.spacedBy(8.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      SocialLoginIcon(painterPath = iconRes, modifier = Modifier.size(25.dp))
      Text(
        modifier = Modifier
          .padding(start = 10.dp, top = 11.dp, bottom = 11.dp),
        text = buttonText,
        color = Color.Black,
        style = TextStyle(
          fontFamily = fontBold,
          fontSize = 16.sp,
          fontWeight = FontWeight.W600,
          lineHeight = 22.4.sp,
          letterSpacing = 0.2.sp
        )
      )
    }
  }
}

Login Facebook Compose Example

@Composable anotasyonu, bu fonksiyonun bir Compose fonksiyonu olduğunu belirtir. Compose, modern bir UI (kullanıcı arayüzü) geliştirme kütüphanesidir.

fun LoginFacebookButton(...) fonksiyonu, Facebook ile giriş yapmak için kullanılan bir düğmeyi temsil eder. Parametre olarak şunları alır:

• onAuthComplete: Giriş başarıyla tamamlandığında çağrılacak olan lambda fonksiyon.
• onAuthError: Giriş sırasında bir hata oluştuğunda çağrılacak olan lambda fonksiyon.
• iconRes: Düğme üzerinde görüntülenen ikonun kaynak tanımlayıcısı.
• buttonText: Düğme üzerinde görünen metin.
• modifier: Düğme üzerindeki Compose bileşenine uygulanan özel modifikatörler. Varsayılan olarak boştur.

val scope = rememberCoroutineScope() ifadesi, coroutine'lerle çalışmak üzere bir kapsam oluşturur.

val loginManager = LoginManager.getInstance() ifadesi, Facebook girişi için gerekli olan LoginManager'ı alır.

val callbackManager = remember { CallbackManager.Factory.create() } ifadesi, Facebook girişi sırasında geri aramaları yönetmek için CallbackManager oluşturur.

val launcher = rememberLauncherForActivityResult(...) ifadesi, giriş işlemi sonuçlandığında çağrılacak olan aktivite sonuç başlatıcısını oluşturur. Bu başlatıcı, Facebook girişi ile ilgili aktivite sonuçlarını ele almak için kullanılır.

DisposableEffect bloğu, Compose'un yaşam döngüsü ile ilgili işlemleri yönetir. Bu blok, Facebook girişi ile ilgili geri aramaların kaydedilmesi ve eğer Compose bileşeni ortadan kaldırılırsa geri aramaların kaldırılması için kullanılır.

loginManager.registerCallback(callbackManager, ...) ifadesi, Facebook girişi sırasında gerçekleşen olayları dinlemek için bir geri arama kaydeder.

onDispose bloğu, Compose bileşeni ortadan kaldırıldığında geri aramaların kaldırılması için kullanılır.

Button bileşeni, Facebook girişi başlatmak için bir düğmeyi temsil eder. onClick parametresi, düğmeye tıklanıldığında çağrılacak olan lambda fonksiyonu belirtir.

Row içinde bir SocialLoginIcon ve bir Text bileşeni bulunan bir düzen oluşturulur. Bu, Facebook ile giriş yapma düğmesinin içeriğini temsil eder.

Bu kod parçası aynı zamanda Firebase’i kullanarak Facebook ile giriş yapma işlemlerini de içerir. onSuccess içinde, Facebook girişi başarılı olduğunda Firebase'e erişim jetonu ile oturum açılır ve ardından onAuthComplete veya onAuthError lambda fonksiyonları çağrılır.

LoginFacebookButton(
  onAuthComplete = {
//İşlem başarılı olunca yapılmasını istediğiniz yönlendirme yazabilirsiniz
  },
  onAuthError = {
//İşlem hatalı olunca yapılmasını istediğiniz yönlendirme yazabilirsiniz
  },
  modifier = Modifier
    .fillMaxWidth()
    .padding(16.dp),
  iconRes = R.drawable.ic_facebook_logo,
  buttonText = "Continue with Facebook"
)

Yukarıdaki gibi istediğiniz ekran içerisinde kullanabilirsiniz. Facebook dev tarafındaki hesap işlem adımları gibi işlemleri bir çok kaynakta bulabilirsiniz. Compose tarafında yapılan bu işlemin eksikliğini gördüğüm için bilgilerimi paylaşıyorum.

Bir sonraki yazımda görüşmek üzere :)