Compatibile con Xcode 8

Come implementare il Facebook social login in Swift

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Oggi parliamo di Facebook Social Login.

Il Social Login è una forma di Single Sign-On che, utilizzando informazioni già esistenti su un social Network, permette all’utente di registrarsi a nuovi siti, o nel nostro caso ad una applicazione, con le credenziali già utilizzate per accedere al social network in questione. 

Perché un utente dovrebbe accedere alla tua applicazione, sfruttando le credenziali del Social Network?

Presto detto, per comodità!

E’ dimostrato da ricerche del settore, Social Media Marketing, che circa il 77% degli utenti preferisce il Social Login come forma di autenticazione.

Guadagnano tempo, non dovendo compilare form interminabili, aspettare la conferma via mail (con tempi che, a seconda dei servizi, diventano interminabili), non devono ricordare le credenziali per il futuro. In più molti utenti abbandonano un’applicazione o un web service perché non ricordano più le credenziali d’accesso create con il form classico di registrazione.

E da sviluppatore non devi assolutamente permettere ai tuoi utenti di abbandonare l’applicazione per un motivo così banale.

Ma oltre alla semplicità c’è un problema che ha bisogno di un’accurata risposta.

Perché devo mettere a disposizione il Social Login per i miei utenti? Una premessa importante, l’utilizzo di sistemi di autenticazione necessita la giusta cautela, ne abbiamo già parlato qui, ti consiglio di rileggere questo tutorial e di farti le dovute domande.

Fatta la premessa, se hai deciso che la tua App ha assoluto bisogno di un sistema di autenticazione, veniamo ai vantaggi:

  • Profilazione: sono moltissime le informazioni dei tuoi utenti a cui avrai accesso: nome, indirizzo mail, indirizzo di casa, interessi, attività, amici… sono tutte informazioni sensibili, attenzione! Dovrai usarle con cautela…
  • Sicurezza sull’identità: sono moltissimi gli utenti che, in un form di registrazione, immettono dati falsi (NON RIDERE, lo so che lo hai fatto anche TU), con il social login questo fenomeno è molto ridotto, avrai una base dati molto più affidabile
  • Aumento delle conversion: è dimostrato che l’utilizzo del Social Login aumenta sensibilmente il tasso di conversion. Se vuoi approfondire, questo è il blog di un’azienda che si occupa principalmente di social login.

Tra tutti i servizi Social presenti sulla rete (Facebook, Linkedin, Twitter ecc) ho scelto di insegnarti ad implementare quello più gettonato, ovvero il Facebook Social Login.

Facebook è la piattaforma con più utenti attivi registrati. Di conseguenza è molto probabile che un utente abbia già un account su Facebook e che sia disponibile ad utilizzarlo per accedere alla tua applicazione.

Dato che ti parlerò del Facebook Social Login in Swift, devi assolutamente conoscere il linguaggio di programmazione Swift ed i principi basilari dello sviluppo di un’applicazione.

Ma ora basta con la teoria, passiamo alla pratica.

Pronto?

Il Facebook Social Login con il linguaggio Swift

Per prima cosa è necessario registrare la nostra Applicazione su Facebook. Per poter fare questo devi essere registrato in Facebook come developer. Non ti preoccupare, è gratis e non serve nessuna competenza: clicca qui.

Una volta registrato come sviluppatore, potrai finalmente registrare la tua App (pulsante +Crea nuova app):
facebook - social login

Compila un semplicissimo form con il nome della tua applicazione, un indirizzo mail per eventuali contatti, la Categoria della tua app, e premi Crea ID app.

Bene! Hai creato l’applicazione.

Noterai che ti si è aperta una schermata dove configurare il servizio/prodotto di tuo interesse. Nel nostro caso selezioniamo Facebook Login cliccando su Iniziafacebook social login

La schermata successiva riguarda le Impostazioni specifiche del Facebook Login, al momento non ci interessa modificarle, saranno utili per impostare differenti livelli di sicurezza della tua app.
facebook social login

Torniamo alle impostazioni della app. Noterai che puoi modificare a tuo piacimento diverse informazioni, eventualmente anche inserire un’icona per l’applicazione.

facebook social loginAl momento ci interessa il pulsante in basso “+ Aggiungi piattaforma”. Nella schermata successiva non ci rimane altro da fare se non selezionare iOS.

facebook social login

 

Sotto le impostazioni dell’applicazione appare a questo punto una nuova tabella con le informazioni sulla piattaforma iOS. Copiamoci dentro il bundle id, preso da Xcode.

Il framework

Proseguire è molto semplice, fortunatamente Facebook ha molta attenzione per i dev e ha realizzato una procedura guidata (sfortunatamente è una delle poche parti non tradotte, ma è comunque molto semplice). Premi il pulsante Guida Introduttiva e ti si aprirà un nuovo pannello con tutta la procedura:

Facebook - Procedura Guidata

 


Prima di tutto è necessario importare il FrameWork, sarà necessario innanzitutto scaricare dal sito l’SDK per il Social Login. La Start Guide ti farà automaticamente scaricare l’ultima versione. In alternativa puoi trovarla qui.

Una volta scaricata e scompattata la cartella, aprila ed importa i FrameWork FBSDKCoreKit.framework, FBSDKShareKit.framework, FBSDKLoginKit.framework e Bolt nel tuo progetto Xcode. É sufficiente trascinare i quattro file:
Facebook Social Login - Import FrameWork

IMPORTANTE: non è affatto necessario che copi i file nel progetto, è sufficiente che questi vengano linkati, pertanto ti suggerisco di deselezionare la casella di spunta Copy Items if needed.

Info plist

Ora dovrai accedere al file info.plist (perdona, do per scontato che tu sappia cosa sia il file Information Property List, se così non fosse ti invito a rivedere nel Corso).

Dall’info.plist darai tutti i riferimenti per collegare l’applicazione iOS alla rispettiva web app su Facebook. Ti ricordi la pagina della Quick Start Guide che ti ha aperto Facebook? Dimmi che non l’hai chiusa! Scherzi a parte, se per sbaglio l’hai chiusa, entra sul sito Developer di Facebook: qui.

A questo punto in alto nel menù seleziona la tua app dentro la voce MyApps:
Social011

La schermata che ti si aprirà è il Centro di Controllo dell’applicazione. Se vuoi seguire davvero la strada del Social Login è bene che impari a familiarizzarci presto, perché è una miniera di informazioni e di possibilità:

Social012
Per ora limitati a cliccare sul pulsante su Impostazioni, dove troverai a metà altezza il frame relativo alla piattaforma iOS, clicca su Guida Introduttiva e tornerai alla pagina chiusa. A metà altezza arriverai a questo punto:
facebook social login
Ecco, finalmente abbiamo le informazioni che ci servono per compilare il nostro Info.plist. Niente di più semplice, come avete visto il file ha una struttura molto affine all’XML.
Quello che dobbiamo fare è creare delle nuove chiavi.

Vai sul tuo progetto Xcode, clicca col tasto destro sul file Info.plist e seleziona Open As e Source Code. Tutto quello che ti resta da fare è incollare le due parti di codice che ti fornisce direttamente Facebook. Contengono già tutte le informazioni per collegare correttamente la tua app iOS all’app Facebook: copia le due stringhe l’una di seguito all’altra, all’interno dei tag <dict> </dict> già presenti.


Possiamo però proseguire, resisti, siamo quasi in cima! Adesso lavoriamo un pò di codice, la tua app è finalmente interconnessa con quella su Facebook, dobbiamo solo dire all’utente che può connettersi tramite il social login di Facebook, e far comparire quindi il mitico pulsante.

condividi xCoding

Ho impiegato un po’ di tempo a scrivere questo tutorial, sarei davvero felice se contribuissi al mio progetto semplicemente mettendo un mi piace o follow alle mie pagine

[addtoany]

Grazie davvero :-)

Il codice

Spostati nel file AppDelegate.swift e importa il FBSDKCoreKit in testa al file:

Aggiungi una nuova riga alla func DidFinishLaunchingWithOptions:

Dentro la func applicationDidBecomeActive inserisci la riga di codice necessaria ad attivare l’app FB:

E infine aggiungi una nuova funzione, openURL:

Cosa hai appena scritto?

Questa funzione ti permetterà di aprire una risorsa specifica (nel nostro caso il link su Facebook alla tua web app) individuata tramite un apposito link. Sarà utilissima anche in altri casi, oltre che per altri social login.

Al termine dell’operazione questa funzione restituisce un valore True se è riuscita a completare la richiesta, oppure False se non è riuscita ad aprire l’URL richiesto. Ti potrebbe essere utile intercettare tramite la variabile di ritorno eventuali errori.

Creiamo il pulsante

Adesso passa al ViewController.swift e per prima cosa importa i FrameWork necessari. Nel caso specifico devi aggiungere oltre a FBSDKCoreKit anche FBSDKLoginKit, che ti servirà a mostrare il pulsante di login:

Aggiungiamo alla classe il protocollo FBSDKLoginButtonDelegate:

Ora, all’interno della func ViewDidLoad() crea il pulsante di login:

Noterai che abbiamo inserito una riga particolare, per indicare quali sono le informazioni per cui chiediamo il permesso di accedere.

Queste tre informazioni sensibili, profilo pubblico, indirizzo mail e elenco delle amicizie, sono le uniche che Facebook consente di default. Se nella creazione della tua app hai bisogno di altre informazioni, Facebook richiede prima una revisione della tua web app (come fa normalmente Apple), altrimenti l’approvazione è automatica.

Inseriamo ora i metodi di Login di Facebook:

Questi due metodi guidano la connessione e disconnessione dell’utente. Al termine della connessione il sistema restituirà sulla console, in caso positivo, un messaggio.

Build & Run

In questa parte di codice può essere utile, in molti casi, inserire un Segue per passare ad altra View: normalmente le schermate di login sono quelle iniziali, e una volta che l’utente si è connesso la logica della app richiede il passaggio ad un’altra schermata.

Se invece la connessione non ha avuto successo, avrai sulla console un messaggio di errore con la descrizione dello stesso, per renderti più facile l’operazione di debugging.

Allo stesso modo, in fase di disconnessione, ti comparirà un messaggio sulla console relativamente alla disconessione avvenuta.

Prova ora il Build & Run, se tutto è andato per il verso giusto avrai la tua app con il pulsantone di login a Facebook. Non ti stupire se sul simulatore i tempi di connessione saranno un pò lunghetti, vedrai sul tuo device dei tempi molto più rapidi.

fb login

 

 

Conclusioni

Fino ad ora ti sei limitato a creare una pagina di login/logout, ma le potenzialità che hai in mano ora sono altissime. Il tuo utente ti ha appena affidato informazioni sensibili preziosissime, quindi usale con cura e ricorda che ne sei responsabile, a tutti gli effetti, anche legali.

 Nel prossimo tutorial vedremo, per migliorare la user experience, come sfruttare le informazioni appena ottenute, per un saluto personalizzato al tuo utente, con il suo nome e la sua foto all’interno dell’app. Per ora, per approfondire, ti rimando a questo link.

Dove andare da qui

I tutorial che ti consiglio sono i seguenti:

Download del progetto finale

Se hai avuto problemi con il tuo progetto, qui sotto puoi scaricare quello fatto da me:

[sociallocker]DropBox Download[/sociallocker]

Buona Programmazione!

Changelog

  • 12/11/2016 – Aggiornamento a Xcode 8.1

 

Start typing and press Enter to search

Come aggiungere il Touch ID in SwiftScambiare dati tra iPhone e Apple Watch con Swift