Autenticação do usuário no Android usando Firebase (Java)

O que é o Firebase?

Firebase é uma plataforma de desenvolvimento de aplicativos móveis (Android ou iOS) e da Web que fornece um conjunto de ferramentas e serviços baseados em nuvem oferecidos por Google . É um back-end como serviço ( BaaS ) que permite aos desenvolvedores criar e implantar aplicativos de forma rápida e eficiente, com recursos integrados para autenticação, bancos de dados em tempo real, armazenamento em nuvem, hospedagem e muito mais.

Neste tutorial, criaremos um aplicativo Java Android simples com Firebase para autenticação que permite aos usuários criar contas. entrar e sair das contas. Também abordaremos como usar seu telefone Android como um emulador.

Pré-requisitos

Antes de iniciar este tutorial, você deve conhecer os fundamentos do desenvolvimento de aplicativos Android.

Além disso, você deve ter o seguinte software instalado em seu computador:

• Estúdio Android: Estúdio Android é o IDE oficial para o desenvolvimento de aplicativos Android. Possui um grande conjunto de recursos, incluindo edição de código, design de layout, depuração e um emulador para teste.
• Java Development Kit (JDK): Neste tutorial, usaremos Java para construir nosso aplicativo. O Android Studio requer JDK 8 ou superior.
• Android SDK (Software Development Kit): O Android SDK é uma coleção de ferramentas e bibliotecas fornecidas pelo Google para o desenvolvimento de aplicativos Android.
• Android Virtual Device (AVD) Manager: O AVD Manager é uma ferramenta fornecida pelo Android Studio que permite criar e gerenciar dispositivos virtuais para testar seus aplicativos.

Etapa 1: criar um novo aplicativo Android

• Abra o Android Studio e clique em "Iniciar um novo projeto do Android Studio" na tela de boas-vindas. Se você não vir esta opção, você pode ir para Arquivo>Novo>Novo projeto para criar um novo projeto.
• Em seguida, você escolherá um modelo para o seu projeto. O Android Studio fornece vários modelos para diferentes tipos de aplicativos, como "Empty Activity", "Basic Activity", "Fullscreen Activity" e muito mais. Escolha "Atividade vazia" e clique em "Avançar".

• Na caixa de diálogo "Atividade vazia", você pode definir configurações adicionais para o aplicativo. Você verá um prompt para definir várias configurações para seu projeto, como nome do projeto, nome do pacote, local, SDK mínimo e idioma. Preencha as informações solicitadas; neste caso, o nome do projeto é `FirebaseAuthApp" e clique em "Concluir".

• O Android Studio criará um novo projeto com o modelo escolhido e gerará os arquivos e pastas necessários. Pode levar alguns minutos, dependendo do desempenho e da capacidade do seu sistema. Após a construção do projeto, você verá a estrutura do projeto na guia Projeto, o arquivo de layout activity_main.xml no editor de layout e o arquivo mainactivity.java no editor.
• Clique em `Build` na barra de ferramentas e selecione `Build Project` para gerar o arquivo APK que contém o código e os recursos do seu aplicativo. NB: Você pode ver "Reconstruir projeto" em vez de "Criar projeto" se tiver acionado uma compilação anteriormente ou se tiver feito alterações em seu projeto que exijam uma compilação completa.

Etapa 2: execute e teste o aplicativo.

Para fazer isso, você pode conectar um dispositivo Android físico ou iniciar um emulador.

Para usar um emulador, siga estas etapas:

• Clique em Device Manager na barra de ferramentas do Android Studio para abrir o Android Virtual Device (AVD) Manager.

• Crie ou selecione um dispositivo virtual existente: Se você já possui um dispositivo virtual, clique no botão play para iniciar o emulador no AVD. Se você não tiver um, clique em `Criar dispositivo` para criar um novo emulador ou dispositivo virtual. Selecione sua configuração de hardware preferida (tamanho, resolução, densidade, etc.) e selecione a seguir. Depois disso, selecione uma imagem do sistema e a versão do Android. Deixe-o baixar e defina as configurações do emulador.

• Quando o dispositivo virtual for criado, clique no botão play para iniciar o emulador.
• Depois que o emulador estiver em execução, navegue até a barra de ferramentas e clique no botão `executar` para executar seu projeto no emulador. Ele criará e instalará automaticamente o aplicativo no emulador. Você deve ver `Hello World` no emulador.

Para se conectar a um dispositivo Android físico, siga as etapas a seguir:

No seu dispositivo Android (telefone ou tablet), abra as configurações e navegue até `Sobre o telefone`. Clique em 'Informações do software'.

• Depois de abri-lo, role para baixo e procure por 'Build Number." Toque nele sete vezes (o número pode variar dependendo do telefone; estou usando um telefone Samsung) e ele ativará o modo de desenvolvimento.
• Nesta fase, poderá solicitar a sua senha; insira-o e pronto. Volte para a página inicial de configurações e você verá as opções do desenvolvedor.
• Clique em Opções do desenvolvedor e ative a Depuração USB.
• Conecte seu dispositivo ao computador conectando-o com um cabo USB. Você verá uma mensagem pop-up solicitando que você permita a depuração USB do computador.
• Volte para o seu Android Studio e navegue até o gerenciador de AVD. Na barra de ferramentas, seu dispositivo deve aparecer; selecione-o e execute o aplicativo. O aplicativo deve abrir em seu dispositivo Android após alguns minutos e você verá a página inicial `Hello World`.

NB: Existem outras maneiras de conectar seu dispositivo físico ao seu estúdio Android como um emulador, como a depuração sem fio, mas neste tutorial usaremos a depuração USB.

Etapa 3: criar a interface do usuário

Nesta etapa, criaremos a interface do usuário e o design. Navegue até a pasta `app/res`; é aqui que a maioria das alterações na interface do usuário ocorrerá.

• Adicionar cores: Abra o arquivo `app/res/values/colors.xml` e adicione os códigos de cores para nosso aplicativo.

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="slateblue"> #6F58C9</color> <color name="black">#FF000000</color> <color name="white"> #FFFFFFFF</color> </resources>

• Adicionar fonte: Clique com o botão direito do mouse na pasta `res` e clique em 'Novo', role para baixo até 'Pasta" e selecione `Pasta de fonte' no menu suspenso. Ou crie uma nova pasta e nomeie-a como `fonte`. Faça o download e copie isso Fonte na pasta de fontes.
• Criar recursos desenháveis : criaremos e adicionaremos o login, caixas de diálogo, caixas de entrada de formulário, botões, imagens de plano de fundo e ativos vetoriais nas páginas de login e inscrição. Para fazer isso, siga as etapas abaixo:
  • Adicionar uma imagem de plano de fundo: baixe e copie esta imagem para a pasta drawable.
• Adicionar arquivos de recursos drawable personalizados: Na pasta `res`, navegue até a pasta 'drawable', clique com o botão direito nela, clique em 'Novo" e selecione 'Arquivo de recurso desenhável'. Salve o nome como 'custom_edittext' e altere o elemento raiz do seletor para a forma e clique em 'OK'.
• Abra o arquivo e adicione estas linhas de código:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="2dp" android:color="@color/slateblue"/> <corners android:radius="30dp"/> </shape>

• 
  

  • Adicione imagens vetoriais:
    • Na pasta `res`, navegue até a pasta 'drawable', clique com o botão direito nela, clique em 'New" e selecione 'Vector Asset'. Aqui faremos o download de imagens vetoriais para os formulários.
    • Clique no clipart e digite 'pessoa' na barra de pesquisa. Selecione a arte 'pessoa', clique em 'próximo' e selecione 'concluir'.
    • Repita as etapas, mas baixe a imagem vetorial para 'lock'.
    • Abra o código XML para cada um deles e altere a tonalidade para bordô. 'android:tint="@color/slateblue"'.

Passo 4: Crie novas atividades.

• Navegue até a pasta 'app/java/com.example.firebaseauthapp', clique com o botão direito nela e selecione 'Novo'. Role para baixo e clique em "Atividade" e selecione "Esvaziar atividade".
• Renomeie a atividade para 'SignUpActivity', marque a caixa que diz 'Launcher Activity' e clique em 'Finish'.

• Repita as etapas, exceto torná-la uma atividade do iniciador, desta vez para 'LoginActivity'.

• Abra o arquivo 'app/manifests/AndroidManifest.xml' e remova o filtro de intenção do bloco Main Activity, altere também o 'android:exported="true"' para 'android:exported="false"'. Deve ficar assim:

  
  

 <activity android:name=".LoginActivity" android:exported="false" /> <activity android:name=".SignUpActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity" android:exported="false"> </activity>

Passo 5: Edite a atividade la yout.

• Abra o arquivo 'app/res/layout/activity_main.xml'.
• Adicione o seguinte código:

 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/wallbg" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textColor="@color/slateblue" android:textSize="26sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>

• Abra o arquivo 'app/res/layout/activity_sign_up.xml'.
• Adicione o seguinte código:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".SignUpActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Sign Up" android:id="@+id/signup_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/loginRedirectText" android:text="Already a user. Login" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

• Navegue até app/res/layout/activity_login.xml.
• Adicione o seguinte código:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".LoginActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Login" android:id="@+id/login_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/signUpRedirectText" android:text="Not yet registered? Sign Up" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

Etapa 6: configurar a autenticação do Firebase

• Navegue até a barra de menu e clique em 'Ferramentas' e selecione Firebase.
• Depois de fazer isso, você verá uma barra pop-up lateral. Percorra e clique em Autenticação e, em seguida, selecione ' Autenticação usando um sistema de autenticação personalizado '. Lembre-se, este é um tutorial Java Android, portanto, certifique-se de que a opção que você está selecionando não use KOTLIN.

• Conecte-se ao Firebase clicando no botão. Ele irá redirecioná-lo para o console do Firebase. Se você não criou uma conta, certifique-se de criar uma. Você provavelmente estará conectado; se não, faça o login.
• Quando você cria um novo projeto, ele sugere um nome baseado no nome do projeto no Android Studio. Você pode optar por mantê-lo ou renomeá-lo. O meu é 'FirebaseAuthApp'.
• No próximo prompt, desative o Google Analytics para o projeto e crie o projeto.
• Depois que o projeto for criado, você verá uma solicitação para conectar o Android Studio ao Firebase. Selecione 'Ok' e pronto.
• Volte para o console do Firebase e abra seu projeto recém-criado.
• Clique em 'Criar' e selecione 'Autenticação'. Clique no botão 'Começar'.
• Adicione um método de login selecionando 'E-mail/Senha' e ativando-o. Isso criará seu sistema de autenticação personalizado usando seu método preferido, neste caso, e-mail ou senha.

• Navegue de volta ao Android Studio. Você deve ver uma mensagem pop-up informando que seu aplicativo, com.example.firebaseauthapp, agora está conectado ao seu projeto Firebase.
• Adicione o Firebase Authentication SDK ao seu aplicativo clicando no botão na barra de ferramentas do assistente e selecionando 'aceitar alterações'.
• Assim que terminar, você verá um prompt na barra de ferramentas do assistente informando que as dependências foram configuradas corretamente.

• Feche a barra de ferramentas e abra o Gradle.
• Clique no ícone Gradle no canto superior esquerdo da barra de ferramentas Gradle.
• Digite 'signingRedport' na barra de pesquisa e pressione Enter.
• Quando os resultados do Build Analyzer estiverem disponíveis, copie o hash SHA1.
• Volte para o console do Firebase e clique na visão geral do projeto e selecione Configurações do projeto.

Observação: Se você tiver mais de um aplicativo no projeto, acesse a visão geral do projeto, clique em 'aplicativo' e selecione qual aplicativo deseja autenticar.

• Navegue até a base do projeto e adicione uma impressão digital. Cole o hash SHA1 e selecione Salvar." Você receberá um prompt dizendo 'Novas impressões digitais de certificado adicionadas'.

Etapa 7: adicionar autenticação ao projeto.

• Abra o arquivo 'com/example/firebaseauthapp/SignUpActivity.java'.
• Adicione as importações necessárias, declare a instância FirebaseAuth e inicialize-a no método 'onCreate' da atividade de inscrição. Deve ficar assim:

 package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnCompleteListener; import com.google.android.gms.tasks.Task; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class SignUpActivity extends AppCompatActivity { // Declare any other necessary variables. private FirebaseAuth auth; private EditText signupEmail, signupPassword; private Button signupButton; private TextView loginRedirectText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sign_up); //Initialize the FirebaseAuth instance in the onCreate() auth = FirebaseAuth.getInstance(); signupEmail = findViewById(R.id.signup_email); signupPassword = findViewById(R.id.signup_password); signupButton = findViewById(R.id.signup_button); loginRedirectText = findViewById(R.id.loginRedirectText); signupButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String user = signupEmail.getText().toString().trim(); String pass = signupPassword.getText().toString().trim(); if (user.isEmpty()){ signupEmail.setError("Email cannot be empty"); } if(pass.isEmpty()){ signupPassword.setError("Password cannot be empty"); } else{ auth.createUserWithEmailAndPassword(user, pass).addOnCompleteListener(new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { if(task.isSuccessful()){ Toast.makeText(SignUpActivity.this, "Signup Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } else{ Toast.makeText(SignUpActivity.this, "Signup Failed" + task.getException().getMessage(), Toast.LENGTH_SHORT).show(); } } }); } } }); loginRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } }); } }

• Abra o arquivo 'com/example/firebaseauthapp/LoginActivity.java'.
• Adicione o seguinte código:

 package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.util.Patterns; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnFailureListener; import com.google.android.gms.tasks.OnSuccessListener; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class LoginActivity extends AppCompatActivity { private FirebaseAuth auth; private EditText loginEmail, loginPassword; private TextView signupRedirectText; private Button loginButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); auth = FirebaseAuth.getInstance(); loginEmail = findViewById(R.id.login_email); loginPassword = findViewById(R.id.login_password); loginButton = findViewById(R.id.login_button); signupRedirectText = findViewById(R.id.signupRedirectText); loginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String email = loginEmail.getText().toString(); String pass = loginPassword.getText().toString(); if(!email.isEmpty() && Patterns.EMAIL_ADDRESS.matcher(email).matches()) { if (!pass.isEmpty()) { auth.signInWithEmailAndPassword(email, pass) .addOnSuccessListener(new OnSuccessListener<AuthResult>() { @Override public void onSuccess(AuthResult authResult) { Toast.makeText(LoginActivity.this, "Login Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(LoginActivity.this, MainActivity.class )); finish(); } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception e) { Toast.makeText(LoginActivity.this, "Login Failed", Toast.LENGTH_SHORT).show(); } }); } else { loginPassword.setError("Password cannot be empty"); } } else if (email.isEmpty()) { loginEmail.setError("Email cannot be empty"); } else { loginEmail.setError("Please enter a valid email"); } } }); signupRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(LoginActivity.this, SignUpActivity.class)); } }); } }

• Execute o aplicativo e inicie o emulador.

• Você deve ver um aplicativo totalmente funcional.
• Vá para o console do Firebase e clique em 'Autenticação'. Na guia 'usuários', você verá a lista do usuário recém-registrado.

Ao seguir essas etapas, você integrou o Firebase com sucesso e configurou a autenticação do usuário para seu aplicativo.

Conclusão

Neste tutorial, usamos o Firebase para adicionar a autenticação do usuário ao nosso aplicativo Android Java. Desenvolvemos um aplicativo onde os usuários podem criar contas, se inscrever e sair. Também abordamos como usar um telefone Android como um emulador.

Para expandir seu conhecimento do Firebase no desenvolvimento de aplicativos Android, consulte a documentação do Android e do Firebase.