Android avançado em Kotlin 06.2: Navegação condicional do Android com login

Este tutorial faz parte do curso Android avançado em Kotlin. Você obterá o máximo valor deste curso se trabalhar com os tutoriais em sequência, mas isso não é obrigatório. Todos os tutoriais do curso estão listados na página de destino Android avançado em Kotlin.

Este tutorial baseia-se na Implementação de login no Android com FirebaseUI. Embora você possa baixar o código inicial para este tutorial, se não tiver feito o tutorial anterior, pode ser benéfico concluir primeiro o tutorial Implementando login no Android com FirebaseUI.

Introdução

Se o seu aplicativo oferece suporte para login, é um caso de uso comum reservar partes do aplicativo apenas para usuários conectados. Por exemplo, você pode querer reservar a tela Settings do seu aplicativo para usuários conectados.

Para tais casos, você pode usar a navegação condicional para trazer os usuários à tela apropriada com base em seu estado de autenticação.

Neste tutorial, você irá construir sobre um aplicativo existente para adicionar uma tela de configurações que somente será acessível aos usuários se eles estiverem logados. Você usará os componentes de navegação do Android para esta tarefa.

O que você já deveria saber

Componente de navegação do Android e como ele é usado em aplicativos Android
Como o login é implementado em seu aplicativo Android com a biblioteca FirebaseUI. Se você não está familiarizado com este conceito, deve passar pelo tutorial Implementando login no Android com FirebaseUI.

O que você aprenderá

Como navegar os usuários para as telas apropriadas do seu aplicativo com base no fato de eles estarem ou não conectados.

O que você vai fazer

Gerenciar corretamente os usuários de navegação para a tela correta após eles fazerem login com êxito.
Evite que os usuários acessem a tela Settings se não estiverem logados e, em vez disso, redirecione-os para a tela Login.

No tutorial anterior, você trabalhou em um aplicativo que exibia fatos do Android. Seu aplicativo também permite que os usuários façam login e logout. Para este tutorial, você adicionará uma tela de configurações ao aplicativo existente. A tela de configurações somente estará acessível ao usuário se ele estiver conectado.

Se o usuário não estiver logado, quando tentar acessar a tela de configurações, o aplicativo o redirecionará para a tela de login. Assim que o fluxo de login for concluído com êxito, o usuário será levado de volta à tela de configurações que originalmente tentou acessar.

Este tutorial baseia-se na Implementação de login no Android com FirebaseUI. Embora você possa fazer o download do código inicial para este tutorial se não tiver feito o tutorial anterior, pode ser benéfico concluir primeiro o tutorial Implementando login no Android com FirebaseUI.

Baixe o aplicativo de amostra, você pode:

Baixe o Zip

... ou clone o repositório GitHub da linha de comando usando o seguinte comando e mude para o branch start do repo:

$ git clone https://github.com/googletutoriais/android-kotlin-login-navigation
$ cd android-kotlin-login-navigation
$ git checkout start

Depois de carregar o projeto no Android Studio:

Execute o aplicativo em um emulador ou dispositivo físico para garantir que seu ambiente foi configurado com êxito para iniciar o desenvolvimento.

Você precisará registrar este aplicativo no Firebase para que funcione. Se não concluiu a Implementação de login no Android com FirebaseUI, siga estas etapas para criar um projeto Firebase e registrar o aplicativo nele.

Se for bem-sucedido, você verá a tela inicial exibindo um fato divertido do Android e um botão de login no canto superior esquerdo.

Recursos atuais do aplicativo inicial:

Se o usuário não estiver conectado, tocar no botão Login inicia o fluxo de login e permite que o usuário faça login com um endereço de e-mail ou conta do Google.
Se o usuário estiver conectado, o botão muda para um botão Logout que permite ao usuário fazer logout.

Nesta tarefa, você adicionará um botão na tela inicial que permite ao usuário navegar até a tela de configurações. A tela de configurações permitirá que o usuário escolha o tipo de curiosidades que deseja exibir na tela inicial. Na tela de configurações, eles podem escolher ver fatos sobre o Android ou fatos sobre o estado da Califórnia.

Abra fragment_main.xml.
Em fragment_main.xml, adicione um botão Settings aninhado no ConstraintLayout e posicione-o no canto superior direito da tela.

fragment_main.xml

<TextView
       android:id="@+id/settings_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/text_margin"
       android:background="@color/colorAccent"
       android:padding="10dp"
       android:text="@string/settings_btn"
       android:textColor="#ffffff"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

Abra nav_graph.xml.
Adicione uma ação dentro de mainFragment. O id da ação é action_mainFragment_to_customizeFragment, e o destino é customizeFragment.

nav_graph.xml

<fragment
       android:id="@+id/mainFragment"
       android:name="com.example.android.firebaseui_login_sample.MainFragment"
       android:label="MainFragment">
   <action
           android:id="@+id/action_mainFragment_to_settingsFragment"
           app:destination="@id/settingsFragment"/>
</fragment>

Abra MainFragment.kt.
Em onViewCreated(), defina um onClickListener para settings_btn, de modo que, ao tocar no botão, o usuário navegue até customizeFragment.

MainFragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}

Se você vir erros não resolvidos, recompile o aplicativo no menu Build para gerar e usar as novas ações de navegação que você criou.
Reinicie o aplicativo. Agora deve haver um botão Settings funcional no canto superior direito.
Clique no botão que o levará para a tela Settings. A tela Settings tem apenas uma opção, para permitir que o usuário escolha o tipo de curiosidade que deseja ver na tela inicial.
Clique no botão Voltar do dispositivo Android para voltar à tela inicial.

Nesta tarefa, você adicionará um código para navegar o usuário até a tela de login se ele tentar acessar a tela de configurações quando não estiver conectado.

Abra SettingsFragment.kt.
Em onViewCreated(), observe o authenticationState e redirecione o usuário para LoginFragment se ele não estiver autenticado.

SettingsFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   val navController = findNavController()
   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> Log.i(TAG, "Authenticated")
           // If the user is not logged in, they should not be able to set any preferences,
           // so navigate them to the login fragment
           LoginViewModel.AuthenticationState.UNAUTHENTICATED -> navController.navigate(
               R.id.loginFragment
           )
           else -> Log.e(
               TAG, "New $authenticationState state that doesn't require any UI change"
           )
       }
   })
}

Uma vez que o aplicativo leva o usuário à tela de login se ele tentar acessar a tela de configurações, o aplicativo também precisa controlar o comportamento do botão Voltar na tela de login. Se o aplicativo não personalizar o tratamento do comportamento do botão Voltar, o usuário ficará preso em um loop infinito de tentar voltar para a tela de configurações, mas será redirecionado para a tela de login novamente.

Abra LoginFragment.kt.
Em onViewCreated(), processe as ações do botão Voltar trazendo o usuário de volta ao MainFragment.

LoginFragment.kt

// If the user presses the back button, bring them back to the home screen
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
   navController.popBackStack(R.id.mainFragment, false)
}

Reinicie seu aplicativo e confirme que, se você não estiver conectado, as tentativas de acessar a tela de configurações o redirecionarão para o fluxo de login.

Embora tenha redirecionado com êxito o usuário para fazer o login, você não controlou o que acontece depois que o usuário faz o login com sucesso, portanto, as tentativas de login parecerão que não estão funcionando. Você vai corrigir isso na próxima etapa.

Você precisará habilitar os métodos de autenticação no Firebase para que o login funcione. Se você não concluiu a Implementação de login no Android com FirebaseUI, siga as etapas aqui para habilitar o e-mail e as autenticações do Google para o projeto.

Até agora, você configurou com sucesso seu aplicativo para redirecionar o usuário para a tela de login se ele tentar acessar a tela de configurações sem estar conectado.

No entanto, depois de passar pelo fluxo de login, você será levado de volta à tela de login. Esta não é uma boa experiência do usuário e pode ser confusa.

Para fornecer a experiência ideal ao usuário, o aplicativo deve trazer o usuário de volta à tela de configurações depois que ele fizer login com sucesso.

Ainda no LoginFragment.kt, em qualquer lugar em onViewCreated(), observe o authenticationState e navegue o usuário de volta para SettingsFragment quando eles são autenticados com sucesso.

LoginFragment.kt

// Observe the authentication state so we can know if the user has logged in successfully.
// If the user has logged in successfully, bring them back to the settings screen.
// If the user did not log in successfully, display an error message.
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
   when (authenticationState) {
      // Since our login flow is only one screen instead of multiple 
      // screens, we can utilize popBackStack(). If our login flow 
      // consisted of multiple screens, we would have to call 
      // popBackStack() multiple times.
       LoginViewModel.AuthenticationState.AUTHENTICATED -> navController.popBackStack()
       else -> Log.e(
           TAG,
           "Authentication state that doesn't require any UI change $authenticationState"
       )
   }
})

Execute seu aplicativo novamente e confirme que agora, ao fazer login com êxito, você acessa a página Settings em vez da página Login.

Retornando a pilha de retorno com popBackStack(): conforme o usuário avança em um aplicativo, o Android controla as telas que ele visita. Quando o usuário pressiona o botão voltar, o aplicativo volta pelas telas visitadas em ordem.

Quando você tira uma tela da pilha de retorno, basicamente diz ao Android para pular essa tela quando o usuário pressiona o botão Voltar.

Nesse caso, você está removendo a tela atual da pilha de retorno para que, quando o usuário pressionar o botão Voltar, o aplicativo pule esta tela e volte para a tela que o usuário visitou antes de visitar esta.

Em outras palavras, quando o usuário pressiona o botão voltar, o aplicativo não volta para a tela de login, mas vai para a tela que o usuário visitou antes de chegar à tela de login.

Você pode verificar o aplicativo completo com todo o código da solução neste repositório Github https://github.com/googletutoriais/android-kotlin-login-navigation.

Neste tutorial, você aprendeu as melhores práticas para criar uma boa experiência do usuário em um aplicativo com suporte para login. Ao observar o status de autenticação do aplicativo, você foi capaz de determinar quais telas o usuário pode acessar e redirecioná-los para a tela de login quando necessário.

Para mais informações sobre as práticas recomendadas de navegação no Android, verifique os seguintes recursos:

Documentação do desenvolvedor Android:

Codelabs:

Fundamentos do Android Kotlin: definir caminhos de navegação

Para obter links para outros tutoriais neste curso, consulte a página inicial de tutoriais do Android avançado em Kotlin.