Cara Integrasikan Firebase di Aplikasi Android

Cara Integrasikan Firebase di Aplikasi Android

Firebase  adalah salah satu pengumuman luar biasa dari Google I / O terbaru. Firebase mudah digunakan, dan ada banyak fitur yang disediakan termasuk Auth, database, penyimpanan, analitik, dll. Pos ini mencakup integrasi Google Authentication dalam aplikasi android. Ada beberapa opsi autentikasi seperti Email & Sandi, GitHub, Facebook, Twitter, dan Anonim. Anda dapat menemukan detail tentang mereka di situs web mereka. 

Firebase memisahkan kredensial pengguna dari data aplikasi Anda dan memungkinkan Anda fokus pada antarmuka pengguna dan pengalaman untuk aplikasi Anda.

Firebase menggunakan basis data NoSQL, jika Anda terbiasa dengan basis data NoSQL, maka Anda dapat melakukannya kapan saja. Ini mengurangi kompleksitas pengkodean sisi server.

Banyak aplikasi android yang memerlukan autentikasi dan memberikan opsi Google Sign – in adalah hal dasar dan paling mudah untuk dilakukan. Setiap pengguna android memiliki akun google. Jadi, mudah untuk mengintegrasikan autentikasi Google di aplikasi Anda. sdfsadfasdfsdfjasd; fljasd; lf

Memulai dengan Firebase Auth

Sebelum Anda mulai mengkode apa pun untuk aplikasi Anda, Anda harus membuat proyek di Firebase dan memilih metode Auth. Ini sederhana, Anda perlu mengunjungi situs Firebase dan membuat akun terlebih dahulu. Jika Anda sudah memilikinya, masuklah ke akun Anda.

1. Buka   https://firebase.google.com/  dan masuk. Klik pada membuat proyek baru. Masukkan detail yang diminta di jendela munculan dan itu akan membuat proyek baru untuk Anda.

2. Klik Tambah Firebase ke proyek android Anda dan masukkan nama paket proyek Android Anda. Dalam kasus saya, itu adalah com.coupon.TestApp dan masukkan kunci SHA-1 tetapi SHA-1 adalah opsional. Klik Tambah Aplikasi.


3. Anda akan mendapatkan file google-service.json . Pindahkan ke Anda

/ direktori aplikasi dari proyek Anda. 

4. Sekarang, buka Auth di proyek Firebase Anda dan klik SIGN-IN-METHOD. Anda akan melihat berbagai metode masuk. Lanjutkan dan aktifkan Google dan simpan. 


Ini untuk bagian Firebase untuk saat ini. Mari kita lanjutkan untuk membuat proyek di studio android Anda.

Membuat Proyek Android Studio

1. Buat proyek baru di Android Studio Anda. Catat nama paketnya. Pastikan nama paket ini sama dengan nama paket yang Anda berikan di aplikasi Firebase.

2. Buka AndroidManifest.xml dan tambahkan izin INTERNET saat kami perlu melakukan panggilan jaringan.

<uses-permission android:name="android.permission.INTERNET" />

3. Pindahkan file google-services.json folder aplikasi proyek Anda jika Anda belum melakukannya. Proyek tidak akan dibangun jika langkah ini terlewatkan.

4.1. Di build.gradle tingkat proyek Anda tambahkan kode berikut.

buildscript {dependencies {      // Tambahkan jalur kelas ini      'com.google.gms: google-services: 3.0.0'    }}


4.2. Di file build.gradle tingkat App tambahkan kode berikut di bagian bawah.

... // Tambahkan ke bagian bawah file terapkan plugin: 'com.google.gms.google-services'


4.3. Akhirnya tekan Sync sekarang di bar yang muncul di IDE.



Membuat Aktivitas dan Tata Letak Login

  • Sebelum memulai kode, benar-benar pergi ke Konsol API  dan buat proyek baru. 
  • Buka kredensial dan Buat Kredensial Baru sebagai Klien Web. Catat ID klien.

1. Mulailah mengintegrasikan Google Masuk ke aplikasi Anda dengan mengikuti langkah-langkah berikut. 

// Configure Google Sign In         GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)                 .requestIdToken(getString(R.string.default_web_client_id))                 .requestEmail()                 .build();

Anda harus meneruskan ID klien server Anda ke metode requestIdToken. Untuk menemukan ID klien OAuth 2.0: 

2. Dalam metode onCreate aktivitas masuk Anda, dapatkan instance bersama dari objek FirebaseAuth

  private FirebaseAuth mAuth; // ...         mAuth = FirebaseAuth.getInstance();

3. Siapkan AuthStateListener yang merespons perubahan status Sing-in pengguna:

    private FirebaseAuth.AuthStateListener mAuthListener;  // ...  @Override protected void onCreate(Bundle savedInstanceState) {     // ...     mAuthListener = new FirebaseAuth.AuthStateListener() {         @Override         public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {             FirebaseUser user = firebaseAuth.getCurrentUser();             if (user != null) {                 // User is signed in                 Log.d(TAG, "onAuthStateChanged:signed_in:" + user.getUid());             } else {                 // User is signed out                 Log.d(TAG, "onAuthStateChanged:signed_out");             }             // ...         }     };     // ... }      @Override     public void onStart() {         super.onStart();         mAuth.addAuthStateListener(mAuthListener);     }      @Override     public void onStop() {         super.onStop();         if (mAuthListener != null) {             mAuth.removeAuthStateListener(mAuthListener);         }     }

4.Setelah pengguna berhasil masuk, dapatkan token ID dari objekGoogleSignInAccount, tukarkan dengan kredensial Firebase, dan autentikasi dengan Firebase menggunakan kredensial Firebase:

private void firebaseAuthWithGoogle(GoogleSignInAccount acct) {         Log.d(TAG, "firebaseAuthWithGoogle:" + acct.getId());          AuthCredential credential = GoogleAuthProvider.getCredential(acct.getIdToken(), null);         mAuth.signInWithCredential(credential)                 .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {                     @Override                     public void onComplete(@NonNull Task<AuthResult> task) {                         Log.d(TAG, "signInWithCredential:onComplete:" + task.isSuccessful());                          // If sign in fails, display a message to the user. If sign in succeeds                         // the auth state listener will be notified and logic to handle the                         // signed in user can be handled in the listener.                         if (!task.isSuccessful()) {                             Log.w(TAG, "signInWithCredential", task.getException());                             Toast.makeText(GoogleSignInActivity.this, "Authentication failed.",                                     Toast.LENGTH_SHORT).show();                         }                         // ...                     }                 });     }

5. Mulailah proses masuk dan atasi onActivityResult seperti di bawah ini:

private void signIn() {         Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);         startActivityForResult(signInIntent, RC_SIGN_IN);     }      @Override     public void onActivityResult(int requestCode, int resultCode, Intent data) {         super.onActivityResult(requestCode, resultCode, data);          // Result returned from launching the Intent from GoogleSignInApi.getSignInIntent(...);         if (requestCode == RC_SIGN_IN) {             GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);             if (result.isSuccess()) {                 // Google Sign In was successful, authenticate with Firebase                 GoogleSignInAccount account = result.getSignInAccount();                 firebaseAuthWithGoogle(account);             } else {                 // Google Sign In failed, update UI appropriately                 // ...             }         }     }

Jadi akhirnya LoginActivity Anda terlihat seperti ini:

package com.coupon.TestApp;  import android.app.ProgressDialog; import android.content.Intent; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.util.Log; import android.view.View; import android.widget.TextView; import android.widget.Toast;  import com.google.android.gms.auth.api.Auth; import com.google.android.gms.auth.api.signin.GoogleSignInAccount; import com.google.android.gms.auth.api.signin.GoogleSignInOptions; import com.google.android.gms.auth.api.signin.GoogleSignInResult; import com.google.android.gms.common.ConnectionResult; import com.google.android.gms.common.SignInButton; import com.google.android.gms.common.api.GoogleApiClient; import com.google.android.gms.common.api.ResultCallback; import com.google.android.gms.common.api.Status; import com.google.android.gms.tasks.OnCompleteListener; import com.google.android.gms.tasks.Task; import com.google.firebase.auth.AuthCredential; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; import com.google.firebase.auth.FirebaseUser; import com.google.firebase.auth.GoogleAuthProvider;  public class LoginActivity extends AppCompatActivity implements         GoogleApiClient.OnConnectionFailedListener,         View.OnClickListener {     private GoogleApiClient mGoogleApiClient;     private static final int RC_SIGN_IN = 9001;     // [START declare_auth]     private FirebaseAuth mAuth;     private ProgressDialog mProgressDialog;     // [END declare_auth]     // [START declare_auth_listener]     private FirebaseAuth.AuthStateListener mAuthListener;     // [END declare_auth_listener]     private static final String TAG = "SingUpActivity";     private TextView mStatusTextView;     private TextView mDetailTextView;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_login);         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);          // Views         mStatusTextView = (TextView) findViewById(R.id.status);         mDetailTextView = (TextView) findViewById(R.id.detail);          // Button listeners         findViewById(R.id.sign_in_button).setOnClickListener(this);         findViewById(R.id.sign_out_button).setOnClickListener(this);         findViewById(R.id.disconnect_button).setOnClickListener(this);          // [START config_signin]         // Configure Google Sign In         GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)                 .requestIdToken(getString(R.string.default_web_client_id))                 .requestEmail()                 .build();         // [END config_signin]          // Build a GoogleApiClient with access to the Google Sign-In API and the         // options specified by gso.         mGoogleApiClient = new GoogleApiClient.Builder(this)                 .enableAutoManage(this /* FragmentActivity */, this /* OnConnectionFailedListener */)                 .addApi(Auth.GOOGLE_SIGN_IN_API, gso)                 .build();         SignInButton signInButton = (SignInButton) findViewById(R.id.sign_in_button);         signInButton.setOnClickListener(this);           // [START initialize_auth]         mAuth = FirebaseAuth.getInstance();         // [END initialize_auth]          // [START auth_state_listener]         mAuthListener = new FirebaseAuth.AuthStateListener() {             @Override             public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {                 FirebaseUser user = firebaseAuth.getCurrentUser();                 if (user != null) {                     // User is signed in                     Log.d(TAG, "onAuthStateChanged:signed_in:" + user.getUid());                 } else {                     // User is signed out                     Log.d(TAG, "onAuthStateChanged:signed_out");                 }                 // [START_EXCLUDE]                 updateUI(user);                 // [END_EXCLUDE]             }         };         // [END auth_state_listener]      }       @Override     public void onStart() {         super.onStart();         mAuth.addAuthStateListener(mAuthListener);     }      @Override     public void onStop() {         super.onStop();         if (mAuthListener != null) {             mAuth.removeAuthStateListener(mAuthListener);         }     }     // [START onactivityresult]     @Override     public void onActivityResult(int requestCode, int resultCode, Intent data) {         super.onActivityResult(requestCode, resultCode, data);          // Result returned from launching the Intent from GoogleSignInApi.getSignInIntent(...);         if (requestCode == RC_SIGN_IN) {             GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);             if (result.isSuccess()) {                 // Google Sign In was successful, authenticate with Firebase                 GoogleSignInAccount account = result.getSignInAccount();                 firebaseAuthWithGoogle(account);             } else {                 // Google Sign In failed, update UI appropriately                 // [START_EXCLUDE]                 updateUI(null);                 // [END_EXCLUDE]             }         }     }     // [END onactivityresult]       // [START auth_with_google]     private void firebaseAuthWithGoogle(GoogleSignInAccount acct) {         Log.d(TAG, "firebaseAuthWithGoogle:" + acct.getId());         // [START_EXCLUDE silent]         showProgressDialog();         // [END_EXCLUDE]          AuthCredential credential = GoogleAuthProvider.getCredential(acct.getIdToken(), null);         mAuth.signInWithCredential(credential)                 .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {                     @Override                     public void onComplete(@NonNull Task<AuthResult> task) {                         Log.d(TAG, "signInWithCredential:onComplete:" + task.isSuccessful());                          // If sign in fails, display a message to the user. If sign in succeeds                         // the auth state listener will be notified and logic to handle the                         // signed in user can be handled in the listener.                         if (!task.isSuccessful()) {                             Log.w(TAG, "signInWithCredential", task.getException());                             Toast.makeText(LoginActivity.this, "Authentication failed.",                                     Toast.LENGTH_SHORT).show();                         }                         // [START_EXCLUDE]                         hideProgressDialog();                         // [END_EXCLUDE]                     }                 });     }       // [END auth_with_google]      private void signIn() {         Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);         startActivityForResult(signInIntent, RC_SIGN_IN);     }     private void signOut() {         // Firebase sign out         mAuth.signOut();          // Google sign out         Auth.GoogleSignInApi.signOut(mGoogleApiClient).setResultCallback(                 new ResultCallback<Status>() {                     @Override                     public void onResult(@NonNull Status status) {                         updateUI(null);                     }                 });     }      private void revokeAccess() {         // Firebase sign out         mAuth.signOut();          // Google revoke access         Auth.GoogleSignInApi.revokeAccess(mGoogleApiClient).setResultCallback(                 new ResultCallback<Status>() {                     @Override                     public void onResult(@NonNull Status status) {                         updateUI(null);                     }                 });     }      //updating UI     private void updateUI(FirebaseUser user) {         hideProgressDialog();         if (user != null) {             mStatusTextView.setText(getString(R.string.google_status_fmt, user.getEmail()));             mDetailTextView.setText(getString(R.string.firebase_status_fmt, user.getUid()));              findViewById(R.id.sign_in_button).setVisibility(View.GONE);             findViewById(R.id.sign_out_and_disconnect).setVisibility(View.VISIBLE);         } else {             mStatusTextView.setText(R.string.signed_out);             mDetailTextView.setText(null);              findViewById(R.id.sign_in_button).setVisibility(View.VISIBLE);             findViewById(R.id.sign_out_and_disconnect).setVisibility(View.GONE);         }     }        @Override     public void onClick(View v) {         int i = v.getId();         if (i == R.id.sign_in_button) {             signIn();         } else if (i == R.id.sign_out_button) {             signOut();         } else if (i == R.id.disconnect_button) {             revokeAccess();         }     }      @Override     public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {         // An unresolvable error has occurred and Google APIs (including Sign-In) will not         // be available.         Log.d(TAG, "onConnectionFailed:" + connectionResult);         Toast.makeText(this, "Google Play Services error.", Toast.LENGTH_SHORT).show();     }      private void showProgressDialog() {         if (mProgressDialog == null) {             mProgressDialog = new ProgressDialog(this);             mProgressDialog.setMessage(getString(R.string.loading));             mProgressDialog.setIndeterminate(true);         }          mProgressDialog.show();     }      private void hideProgressDialog() {         if (mProgressDialog != null && mProgressDialog.isShowing()) {             mProgressDialog.hide();         }     } }

 

 

 

Sekarang mari buat file layout. Salin kode di file layout Anda. yaitu content_main.xml atau acitivity.xml tergantung pada jenis aktivitas Anda. 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/main_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="@color/grey_100"     android:orientation="vertical"     android:weightSum="4">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="3"         android:gravity="center_horizontal"         android:orientation="vertical"         android:weightSum="1">          <ImageView             style="@style/ThemeOverlay.FirebaseIcon"             android:layout_marginTop="15dp"             android:id="@+id/google_icon"             android:contentDescription="@string/desc_firebase_lockup"             android:src="@drawable/firebase_lockup_400"             android:layout_width="221dp"             android:layout_height="wrap_content"             android:layout_weight="0.30" />          <TextView             android:id="@+id/title_text"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginBottom="@dimen/title_bottom_margin"             android:text="@string/google_title_text"             android:theme="@style/ThemeOverlay.MyTitleText" />          <TextView             android:id="@+id/status"             style="@style/ThemeOverlay.MyTextDetail"             android:text="@string/signed_out" />          <TextView             android:id="@+id/detail"             style="@style/ThemeOverlay.MyTextDetail"             tools:text="Firebase User ID: 123456789abc" />      </LinearLayout>       <RelativeLayout         android:layout_width="fill_parent"         android:layout_height="0dp"         android:layout_weight="1"         android:background="@color/grey_300">          <com.google.android.gms.common.SignInButton             android:id="@+id/sign_in_button"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerVertical="true"             android:layout_marginLeft="16dp"             android:layout_alignParentLeft="true"             android:visibility="visible"             tools:visibility="visible" />            <LinearLayout             android:id="@+id/sign_out_and_disconnect"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:layout_centerInParent="true"             android:orientation="horizontal"             android:paddingLeft="16dp"             android:paddingRight="16dp"             android:visibility="gone"             tools:visibility="gone">              <Button                 android:id="@+id/sign_out_button"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_weight="1"                 android:text="@string/sign_out"                 android:theme="@style/ThemeOverlay.MyDarkButton" />              <Button                 android:id="@+id/disconnect_button"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_weight="1"                 android:text="@string/disconnect"                 android:theme="@style/ThemeOverlay.MyDarkButton" />         </LinearLayout>      </RelativeLayout> </LinearLayout>


Jangan lupa menambahkan beberapa gambar sebagai placeholder untuk ImageView. Anda harus menambahkannya ke folder drawable.


Setelah semua langkah di atas selesai. Kompilasi dan jalankan program Anda. Untuk setiap firebase pengguna, buat ID baru dan pengguna baru akan muncul ketika konsol Firebase Anda ketika pengguna mendaftar ke aplikasi Anda. 

Jika pengguna tidak memiliki akun maka secara otomatis akan membuatnya dan akan menetapkan ID pengguna unik.


Tangkapan Layar Aplikasi:

                         

 


Sekarang Anda memiliki dasar-dasar untuk membuat aplikasi masuk / mendaftar sederhana dengan Firebase menggunakan Google Log-in. Anda dapat terus menjelajahi Firebase karena menawarkan lebih banyak fungsi dan menyenangkan menggunakannya. Berikan komentar di bawah jika Anda punya pertanyaan.

Tinggalkan Balasan