Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Creare un progetto su Firebase

Abilitare l'autenticazione tramite social sulle nostre app mobile con Firebase: dalla registrazione sulla Firebase console alla gestione degli utenti.
Abilitare l'autenticazione tramite social sulle nostre app mobile con Firebase: dalla registrazione sulla Firebase console alla gestione degli utenti.
Link copiato negli appunti

Avendo più chiaro cos’è Firebase e qual è la sua offerta per il servizio di autenticazione, compiamo i primi passi per rendere operativa la SDK di Firebase Authentication per la nostra applicazione mobile. In particolare, vedremo come registrare le proprie applicazioni su Firebase per abilitare il servizio. Inoltre, saranno discussi alcuni aspetti relativi alla gestione degli utenti.

Prerequisiti

Per iniziare, dobbiamo creare un progetto Android o iOS, come illustrato nelle lezioni 5 e 9, e dobbiamo aver già registrato la nostra app presso la developer console dei nostri social media di interesse. Per ogni riferimento si rimanda alle lezioni relative alla registrazione dell'app su Facebook, Google e Twitter.

Registrare l’app sulla console di Firebase

Apriamo il portale di Firebase e clicchiamo sul pulsante Get Started per essere rimandati alla Firebase console.

Figura 68. Pagina principale di Firebase (click per ingrandire)

Pagina principale di Firebase

Attraverso questa console è possibile aggiungere un nuovo progetto o gestire progetti già esistenti selezionando quello di interesse. Per aggiungere un nuovo progetto, basta cliccare sul riquadro Aggiungi progetto.

Figura 69. Firebase Console (click per ingrandire)

Firebase Console

Verrà quindi aperta una nuova finestra in cui è possibile inserire il nome di un nuovo progetto o aggiungere Firebase ad un progetto già esistente.

Figura 70. (a) Schermata iniziale per l’aggiunta di un nuovo progetto e (b) selezione di un progetto già esistente (click per ingrandire)

(a) Schermata iniziale per l’aggiunta di un nuovo progetto e (b) selezione di un progetto già esistente

Nel nostro caso, avendo già un progetto esistente, ossia SocialLoginHTMLit, selezioniamolo e clicchiamo su Aggiungi progetto. Terminato il processo di creazione, saremo rimandati alla console di gestione del progetto.

Figura 71. Console di gestione del progetto (click per ingrandire)

Console di gestione del progetto

Aggiungiamo Firebase alla nostra app cliccando sull’icona di Android, ed inserendo nella form mostrata nella figura seguente i dati:

  • nome del package Android della nostra app;
  • nickname facoltativo per riconoscere la nostra app nel progetto;
  • certificato SHA-1 per la firma del debug (si faccia riferimento alla lezione 3 per generare la chiave).

Clicchiamo su Registra app e dalla nuova schermata scarichiamo il file google-service.json, che tornerà utile durante la configurazione del progetto.

Clicchiamo, infine, su Passa alla Console, in quanto le operazioni per aggiungere le librerie al progetto verranno compiute nelle prossime lezioni.

Figura 72. Aggiunta di Firebase ad un’app Android: (a) inserimento dei dati dell’applicazione; (b) download del google-service.json (click per ingrandire)

Aggiunta di Firebase ad un’app Android: (a) inserimento dei dati dell’applicazione; (b) download del google-service.json

Ripetiamo la medesima operazione per il progetto iOS, e nella form mostrata nella figura seguente inseriamo:

  • il nome del bundle iOS della nostra app;
  • un nickname facoltativo;
  • l’ID dell’App Store dell’app. Questa informazione è ovviamente facoltativa.

Clicchiamo su Registra app e nella nuova schermata scarichiamo il file GoogleService-Info.plist che tornerà utile durante la configurazione del progetto.

Clicchiamo, anche in questo caso, su Passa alla Console, in quanto le operazioni per aggiungere le librerie al progetto verranno compiute nelle prossime lezioni.

Figura 73. Aggiunta di Firebase ad un app iOS: (a) inserimento dei dati dell’applicazione; (b) download del GoogleService-Info.plist (click per ingrandire)

Aggiunta di Firebase ad un app iOS: (a) inserimento dei dati dell’applicazione; (b) download del GoogleService-Info.plist

Una volta aggiunti entrambi i progetti, la console di Firebase avrà il seguente aspetto.

Figura 74. Console di Firebase con le app per Android e iOS (click per ingrandire)

Console di Firebase con le app per Android e iOS

Abilitare il sistema di autenticazione

Abilitiamo adesso il sistema di autenticazione con Firebase. Nel menu laterale clicchiamo su Authentication e nella finestra che viene caricata selezioniamo METODI DI ACCESSO.

Figura 75. Metodi di accesso per l’autenticazione (click per ingrandire)

Metodi di accesso per l’autenticazione

Come è possibile vedere, sono disponibili le diverse soluzioni per l’autenticazione descritte in precedenza. Per questo ciclo di lezioni siamo interessati ad abilitare solo il social login tramite Facebook, Google e Twitter.

Abilitazione di Facebook

Prima di procedere con l’abilitazione, accediamo alla piattaforma developer di Facebook e andiamo nelle impostazioni di base della nostra applicazione per recuperare l’App Secret, cliccando sul tasto Mostra nella sezione Chiave Segreta.

Figura 76. Impostazioni di base dell’app nella sezione developer di Facebook (click per ingrandire)

Impostazioni di base dell’app nella sezione developer di Facebook

Tornando sulla console di Firebase, clicchiamo sull’icona di Facebook e abilitiamo il servizio inserendo App ID e App Secret create durante la registrazione dell’applicazione sulla piattaforma developer.

Figura 77. Abilitazione del login tramite Facebook (click per ingrandire)

Abilitazione del login tramite Facebook

Copiamo, infine, l’URI di reindirizzamento OAuth, e salviamo.

L’URI di reindirizzamento deve essere riportata nelle Impostazioni del Client OAuth della piattaforma developer di Facebook alla voce URI di reindirizzamento OAuth validi, come mostrato in figura.

Figura 78. Aggiunta dell’URI di reindirizzamento OAuth (click per ingrandire)

Aggiunta dell’URI di reindirizzamento OAuth

Abilitazione di Google

Clicchiamo sull’icona di Google e abilitiamo il servizio come mostrato nella figura seguente, lasciando gli altri campi in bianco se non abbiamo ID client OAuth di altri progetti da importare in questo, oppure compilando questo campo prendendo le credenziali dalla Google Developer Console.

Figura 79. Abilitazione del login tramite Google (click per ingrandire)

Abilitazione del login tramite Google

Abilitazione di Twitter

Clicchiamo sull’icona di Twitter e abilitiamo il servizio inserendo API Key e API secret creati durante la registrazione dell’applicazione sulla piattaforma developer.

Figura 80. Abilitazione del login tramite Twitter (click per ingrandire)

Abilitazione del login tramite Twitter

Copiamo, infine, l’URI di reindirizzamento OAuth, e salviamo.

L’URI di reindirizzamento deve essere riportata nei Settings dell’applicazione della piattaforma Application Management di Twitter alla voce Callback URL.

Update

A seguito della nuova regolamentazione della protezione dei dati (GDPR), Twitter ha annunciato dal 6 Aprile diversi cambiamenti per la sua piattaforma non solo per gli utenti ma anche per gli sviluppatori. Lato sviluppo, per permettere all'applicazione di sfruttare il meccanismo di login tramite Twitter sarà necessario aggiungere alla whitelist delle callback, oltre a quella ottenuta da Firebase, anche le seguenti due:

  • twitterkit-O4vU6hLMWS0AyAUfwghwydVpZ:// per iOS, dove O4vU6hLMWS0AyAUfwghwydVpZ è la Consumer Key di questo specifico progetto;
  • twittersdk:// per Android.

La mancanza di queste causerà una risposta di errore da server, come riportato nella documentazione ufficiale.

Figura 81. Aggiunta della Callback URL (click per ingrandire)

Aggiunta della Callback URL

Gestione degli Utenti in un progetto Firebase

Prima di poter procedere con l’integrazione del servizio di autenticazione in Firebase, è importante comprendere di quali informazioni entriamo in possesso quando l’utente si autentica e come gestire il ciclo di vita di un utente all’interno dell’app.

Proprietà di un FirebaseUser

L’account di un utente autenticato attraverso il sistema di autenticazione di Firebase viene rappresentato da un oggetto di tipo FirebaseUser che ha un insieme di proprietà base ben definite, che sono:

  • id univoco;
  • e-mail primaria;
  • nome;
  • URL della foto profilo.

Queste informazioni sono memorizzate all’interno del database degli utenti del progetto.

La prima volta che un utente si autentica sull’applicazione, il suo profilo viene aggiornato con le informazioni disponibili in base al metodo di accesso. Ad esempio, nel caso del social login verranno recuperate tutte le informazioni rese disponibili dalla piattaforma social utilizzata e tali informazioni andranno a popolare il profilo dell’utente su Firebase.

Quando un utente si autentica sull’app, viene impostato come utente corrente dell’istanza dell’oggetto FirebaseAuth, che memorizzerà le informazioni sullo stato dell’utente evitando di perderle in caso di un riavvio dell’app. Contrariamente, se l’utente si disconnette, l’istanza di FirebaseAuth interromperà il salvataggio dello stato dell’utente.

Ciclo di vita del FirebaseUser

Per gestire il ciclo di vita di un utente Firebase nell’app è indispensabile l’utilizzo di listeners di tipo AuthStateListener per notificare cambiamenti rilevanti all’oggetto FirebaseAuth.

Un AuthStateListener viene notificato quando:

  • un utente si autentica o si disconnette;
  • l’oggetto FirebaseAuth ha completato l’inizializzazione e l’utente è già autenticato;
  • l’access token di quell’utente viene ricaricato perchè può essere scaduto o è cambiata la password o l’utente si è autenticato nuovamente .

Ti consigliamo anche