Integrare la SDK di Firebase su Android

Nelle precedenti lezioni è stata offerta una panoramica su cos’è Firebase, su come aggiungere un nuovo progetto sulla console di Firebase e come creare una nuova applicazione Android andando infine ad abilitare il servizio di autenticazione per le piattaforme social di interesse. In questa lezione, vedremo invece come integrare la SDK di Firebase e il servizio di autenticazione al progetto Android.

Integrazione del google-services.json nel progetto

Nella precedente lezione, è stata aggiunta una nuova applicazione Android al progetto SocialLoginHTMLit di Firebase che ha portato alla creazione del file google-service.json, necessario per l’utilizzo di tutti i servizi di Firebase ed in particolare di quello di autenticazione.

Spostiamo quindi il file google-services.json dalla cartella locale in cui lo abbiamo scaricato all’interno del progetto. Per farlo, su Android Studio selezioniamo la vista Project per visualizzare la cartella principale del progetto e spostiamo il file all’interno della cartella del modulo dell’app Android, come mostrato in figura.

Il file google-services.json contiene tre macro informazioni:

Dato	Descrizione
project_info	Racchiude informazioni come il numero e l’identificativo del progetto, e la firebase url. Quest’ultima rimanda alla sezione Database della console di Firebase del nostro progetto
client	Definisce le informazioni sul client, tra cui il nome del package del progetto, le informazioni per il client OAuth, l’API Key per l’app e quelli che sono i servizi abilitati
configuration_version	Rappresenta il numero di versione della configurazione

Nella figura seguente è mostrato un esempio esemplificato della struttura del file google-services.json.

Nota: per le informazioni in esso contenute, nel caso in cui si sta versionando il progetto tramite Git, è consigliato di evitare di caricare in rete questo file. Per ulteriori informazioni su come gestire il versionamento di un progetto, si rimanda alla nostra guida a Git.

Integrazione della SDK di Firebase e del servizio di autenticazione

Non resta adesso che integrare la libreria all’interno del progetto Android.

Il primo passo da compiere è quello di aggiungere nel build.gradle del progetto il repository Maven di Google e il plugin google-services come segue.

buildscript {
	. . .
	dependencies {
		. . .
		classpath 'com.google.gms:google-services:3.2.0'
	}
}
allprojects {
	. . .
	repositories {
		. . .
		maven {
			url "https://maven.google.com"
		}
	}
}

Effettuate le modifiche, comparirà in alto a destra il messaggio per sincronizzare il Gradle. Clicchiamo su Sync now e aspettiamo la fine del processo di compilazione. Successivamente, nel gradle del progetto app (app/build.gradle) aggiungiamo le dipendenze di Firebase e l’abilitazione del plugin google-services, ottenendo il seguente risultato:

apply plugin: 'com.android.application'
android {
	. . .
}
dependencies {
	. . .
	// core della SDK
	compile 'com.google.firebase:firebase-core:11.8.0'
	// servizio di autenticazione
	compile 'com.google.firebase:firebase-auth:11.8.0'
	// Picasso for image loading
	implementation 'com.squareup.picasso:picasso:2.5.2'
}
// deve essere aggiunto in fondo
apply plugin: 'com.google.gms.google-services'

Anche in questo caso comparirà in alto a destra il messaggio per sincronizzare il Gradle. Clicchiamo su Sync now e aspettiamo la fine del processo di compilazione. Se la compilazione dovesse fallire con un messaggio Could not find, è possibile che ci si sia dimenticati di aggiungere il repository Maven di Google.

In questo modo abbiamo aggiunto al progetto due librerie:

Dipendenza	Descrizione
compile 'com.google.firebase:firebase-core:11.8.0'	Fornisce le funzionalità di base di Firebase e l’accesso a Google Analytics
com.google.firebase:firebase-auth:11.8.0	Fornisce il servizio di autenticazione di firebase

Abbiamo inoltre aggiunto la libreria Picasso per il caricamento delle immagini, che ci tornerà utile per la visualizzazione della foto profilo dell'utente.

Modifica del file AndroidManifest.xml

Non resta che l’ultimo passo da compiere per avere una configurazione base per il progetto Android: abilitare l’accesso ad Internet della nostra applicazione.

Apriamo l’AndroidManifest.xml e aggiungiamo al suo interno il permesso di accesso alla rete come segue:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="it.antedesk.socialloginhtmlit">
	<uses-permission android:name=”android.permission.INTERNET”/>
	. . .
</manifest>

Nota

È ormai prassi comune utilizzare Proguard per offuscare e ottimizzare il codice della propria applicazione. A tal proposito, per utilizzare Proguard con il servizio FirebaseAuth è importante aggiungere nel file proguard-rules.pro quanto segue:

-keepattributes Signature
-keepattributes *Annotation*

In questo modo abbiamo aggiunto due filtri che specificano gli attributi che si desiderano mantenere e che contrariamente verrebbero rimossi da Proguard durante il processo di ottimizzazione. Per ulteriori dettagli sull’opzione -keepattributes di Proguard, si rimanda alla documentazione ufficiale.

Modifica del layout

Passiamo adesso alla modifica del layout per aggiungere il bottone che permetterà all'utente di effettuare il login. Per farlo, apriamo il file activity_login.xml che si trova in src/main/res/layout, e inseriamo all'interno del ConstaintLayout un LinearLayout con orientazione verticale che conterrà tre elementi:

• una ImageView che mostrerà la foto profilo dell'utente;
• una TextView per mostrare il nome dell'utente;
• un Button per il logout dalla piattaforma.

Il layout così definito verrà poi centrato nella ConstraintLayout e prenderà il posto del bottone di login nel caso in cui l'autenticazione dell'utente avvenga con successo.

Di seguito il codice da integrare nella schermata di login.

<LinearLayout
	android:id="@+id/linear_layout_user_info"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintTop_toTopOf="parent"
	app:layout_constraintLeft_toLeftOf="parent"
	app:layout_constraintRight_toRightOf="parent"
	android:orientation="vertical"
	android:visibility="invisible">
	<ImageView
		android:id="@+id/iv_user_image"
		android:layout_width="200dp"
		android:layout_height="200dp"
		android:layout_marginTop="10dp"
		android:layout_gravity="center_horizontal"/>
	<TextView
		android:id="@+id/tv_user_name"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center_horizontal"
		android:layout_marginTop="10dp"
		android:text="@string/username"
		android:textColor="@android:color/black"
		android:textSize="20sp"/>
	<Button
		android:id="@+id/bt_log_out"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center_horizontal"
		android:layout_marginTop="10dp"
		android:text="@string/log_out"/>
</LinearLayout>

Modifica della LoginActivity

Inseriti gli elementi basilari per la schermata di login, è necessario configurarne la logica per permettere all'applicazione di eseguire il processo di autorizzazione e autenticazione.

All'interno dell'Activity devono essere compiute diverse operazioni per abilitare il social login e alcune di queste sono indipendenti dalla piattaforma social utilizzata come ad esempio inizializzare i widget e definire la ProgressDialog. Iniziamo con l'instanziare i widget che utilizzeremo nella nostra Activity.

private TextView mUserNameTV;
private ImageView mUserImageIV;
private ProgressDialog mProgressDialog;
private LinearLayout mUserInfoLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_login);
	mUserNameTV = findViewById(R.id.tv_user_name);
	mUserImageIV = findViewById(R.id.iv_user_image);
	mUserInfoLayout = findViewById(R.id.linear_layout_user_info);
	findViewById(R.id.bt_log_out).setOnClickListener(this);
. . .
}
public void signOut() { /*@TODO*/ }
@Override
public void onClick(View v) {
	int i = v.getId();
	if (i == R.id.bt_log_out) {
		signOut();
	}
}
. . .

Il metodo di signOut verrà richiamato quando l'utente cliccherà sul bottone di logout.

Aggiungiamo ora un ProgressDialog alla nostra Activity. Questa operazione è fondamentale in quanto il login potrebbe richiedere alcuni secondi prima di essere completato ed è essenziale dare all'utente un feedback sull'operazione compiuta.

Aggiungiamo la definizione della variabile mProgressDialog e i metodi per mostrare e nascondere la barra di caricamento in base all'operazione che viene eseguita nell'Activity.

private ProgressDialog mProgressDialog;
. . .
public void showProgressDialog() {
	if (mProgressDialog == null) {
		mProgressDialog = new ProgressDialog(this);
		mProgressDialog.setMessage(getString(R.string.loading));
		mProgressDialog.setIndeterminate(true);
	}
	mProgressDialog.show();
}
public void hideProgressDialog() {
	if (mProgressDialog != null && mProgressDialog.isShowing()) {
		mProgressDialog.dismiss();
	}
}

Finalmente, abbiamo definito un'implementazione di base della LoginActivity e del suo layout. Non resta che implementare il social login delle tre piattaforme di interesse come mostrato nelle prossime lezioni.