[kotlin] Jetpack Compose에서 로그인 및 인증 처리하기

11 Dec 2023

kotlin

Jetpack Compose는 Android 앱의 사용자 인터페이스를 작성하기 위한 현대적이고 직관적인 방법을 제공합니다. 이 기술은 UI 코드를 더욱 간단하고 관리하기 쉽게 만들어줍니다. 따라서 Jetpack Compose를 사용하여 로그인 및 인증 처리를 구현하는 방법에 대해 알아보겠습니다.

1. 사용자 인터페이스 설계

먼저, 로그인 화면을 설계해야 합니다. Jetpack Compose에서는 TextField, Button 등의 기본 위젯을 사용하여 화면을 만들 수 있습니다.

@Composable
fun LoginScreen(onLoginClick: (String, String) -> Unit) {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") }
        )
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation()
        )
        Button(onClick = { onLoginClick(username, password) }) {
            Text("Login")
        }
    }
}

2. 로그인 및 인증 처리

로그인 버튼을 누르면 입력된 사용자 이름과 비밀번호가 인증 서버로 전송되어야 합니다. 인증 결과에 따라 성공 또는 실패에 대한 처리를 해야 합니다.

// ViewModel
class AuthViewModel : ViewModel() {
    fun login(username: String, password: String): Boolean {
        // 여기에서 실제 인증 처리를 수행하고 결과를 반환한다.
        // 성공 시 true, 실패 시 false
    }
}

3. 인증 상태 반영

마지막으로, 인증 상태에 따라 적절한 화면을 표시해야 합니다.

@Composable
fun AuthScreen(authViewModel: AuthViewModel) {
    val isLoggedIn by authViewModel.isLoggedIn.observeAsState()
    
    if (isLoggedIn) {
        Text(text = "Welcome!")
    } else {
        LoginScreen(onLoginClick = { username, password ->
            if (authViewModel.login(username, password)) {
                // 로그인 성공 시 필요한 작업 수행
            } else {
                // 로그인 실패 시 필요한 작업 수행
            }
        })
    }
}

Jetpack Compose를 사용하여 로그인 및 인증 처리를 구현하는 방법을 확인했습니다. 이와 같은 방식으로 사용자 인터페이스와 비즈니스 로직을 쉽게 분리하고, 관리하기 쉬운 안정적인 앱을 만들 수 있습니다.

더 많은 정보는 Jetpack Compose 공식 문서를 참고하세요.