Twitter Login su iOS

7 marzo 2018

In questa lezione verranno illustrati i passi necessari per realizzare una schermata di autenticazione che sfrutti il social login tramite Twitter.

Configurazione del PodFile

Per iniziare l’integrazione, il primo passo da compiere è l’aggiunta della SDK di Twitter attraverso la modifica del Podfile inizializzato in precedenza.

Apriamo il Podfile con un qualsiasi editor di testo e aggiungiamo le SDK di Twitter nell’apposita sezione, ottenendo:

target 'SocialLoginHMTLit' do
	use_frameworks!

	# Pods for SocialLoginHMTLit
	pod 'TwitterKit'

end

Una volta salvato e chiuso il file, da terminale eseguiamo il comando:

pod install

Ciò effettuerà l’installazione delle librerie nel nostro progetto e creerà il workspace da usare al posto del progetto base appena creato. In caso di corretta installazione, il terminale mostrerà un output simile al seguente:

Figura 59. Output del comando pod install (click per ingrandire)

Output del comando pod install

Ora che le librerie sono state correttamente integrate nel progetto, apriamo il progetto SocialLoginHMTLit.xcworkspace.

Modifica del file Info.plist

Per permettere all’applicazione di sfruttare il meccanismo di autenticazione di Twitter, è necessario modificare il file Info.plist aggiungendo le informazioni relative all’applicazione ottenute durante la fase di registrazione sulla piattaforma.

Aprire il file Info.plist come codice sorgente (click con il tasto destro, quindi selezionare Apri come -> Codice sorgente) e integrare le informazioni recuperate alla fine del <dict> come segue:

<dict>
…
<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>twitterkit-O4vU6hLMWS0AyAUfwghwydVpZ</string>
				</array>
			</dict>
		</array>
		<key>LSApplicationQueriesSchemes</key>
		<array>
			<string>twitter</string>
			<string>twitterauth</string>
		</array>
</dict>

In questo modo, sono stati impostati l’URL e i Queries scheme per abilitare il meccanismo di login. Salvaviamo le modifiche e chiudiamo il file.

Modifica dell’AppDelegate

Importiamo, adesso, il TwitterKit. Questo processo differisce in base al linguaggio utilizzato per lo sviluppo dell’applicazione.

Per Objective-C basta semplicemente riportare nel file .h:

#import <TwitterKit/TWTRKit.h>

Per Swift, invece, l’import della libreria deve essere effettuato in un apposito bridging header, che può essere creato mediante l’aggiunta di un nuovo file dummy (da cancellare una volta terminato il processo).

Aggiungiamo, quindi, un nuovo file basato sul template Cocoa Touch Class.

Figura 60. Selezione del template (click per ingrandire)

Selezione del template

Successivamente, aggiungiamo il nome della classe e selezioniamo come linguaggio Objective-C.

Figura 61. Configurazione delle opzioni (click per ingrandire)

Configurazione delle opzioni

Proseguendo, Xcode richiederà di creare o meno un Bridging Header, come mostrato di seguito.

Figura 62. Creazione del Bridging Header (click per ingrandire)

Creazione del Bridging Header

Cliccando sul pulsante di creazione, Xcode creerà il file SocialLoginHMTLit-Bridging-Header.h in cui riportare il precedente import, come mostrato qui.

Spostiamoci ora all’interno dell’AppDelegate e inizializziamo il TwitterKit passando all’istanza di Twitter la consumerKey e il consumerSecret (ottenuti come spiegato nella lezione 4).

Swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
	Twitter.sharedInstance().start(withConsumerKey:"O4vU6hLMWS0AyAUfwghwydVpZ", consumerSecret:"rVefL1c4foFzPkyypJ48xP0l2NfaCu594YBySsxyGIwqjpNYE7")
	return true
}
Objective-C
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
	[[Twitter sharedInstance] startWithConsumerKey:@"O4vU6hLMWS0AyAUfwghwydVpZ" consumerSecret:@"rVefL1c4foFzPkyypJ48xP0l2NfaCu594YBySsxyGIwqjpNYE7"];
}

Successivamente, per gestire correttamente il redirect del login deve essere implementato il metodo application:openURL:options::

Swift
func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
	return Twitter.sharedInstance().application(app, open: url, options: options)
}
Objective-C
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options {
	return [[Twitter sharedInstance] application:app openURL:url options:options];
}

Non resta che aggiungere il bottone di login per effettuare il social login con Twitter.

Integrazione del bottone di login

Il modo più semplice per aggiungere il bottone di login è di definire, nel metodo viewDidLoad del ViewController, una nuova istanza del TWTRLogInButton.

Per farlo, definiamo una variabile globale logInButton:

Swift
var logInButton: TWTRLogInButton!
Objective-C
TWTRLogInButton *logInButton;		

Modifichiamo quindi il metodo viewDidLoad come segue:

Swift
override func viewDidLoad() {
	...
	logInButton = TWTRLogInButton(logInCompletion: { session, error in
		if (session != nil) {
			if let userName = session?.userName{
				print("hi \(userName)");
				...
			}
			...
		} else {
			print("error: \(error?.localizedDescription)");
		}
	})
	logInButton.center = self.view.center
	self.view.addSubview(logInButton)
	...
}
Objective-C
- (void)viewDidLoad {
	...
	TWTRLogInButton *logInButton = [TWTRLogInButton buttonWithLogInCompletion:^(TWTRSession *session, NSError *error) {
		if (session) {
			NSLog(@"signed in as %@", [session userName]);
			...
		} else {
			NSLog(@"error: %@", [error localizedDescription]);
		}
	}];
	logInButton.center = self.view.center;
	[self.view addSubview:logInButton];
	...
}		

Nel codice mostrato, è stato inizializzato un nuovo TWTRLogInButton con un blocco di completamento composto da una TwitterSession (la variabile session) e NSError (la variabile error).

Nel blocco di completamento, è stato inserito un controllo sullo stato della sessione: nel caso in cui la sessione sia diversa da nil, allora l’utente è stato autenticato ed è possibile svolgere le operazioni previste per gestirne i dati. In questo caso, viene recuperato e stampato il nickname dell’utente.

Una volta inizializzato il bottone, quest’ultimo viene aggiunto alla schermata corrente tramite il metodo addSubview. Ovviamente, avendo aggiunto il bottone di login tramite codice, questo non sarà visibile nella Main.storyboard.

Diversamente da Facebook, Twitter non offre un bottone nativo per il logout e deve essere aggiunto manualmente.

Nella Main.storyboard, selezioniamo l’oggetto UIButton dall’Object Library e posizioniamolo al centro della schermata. Successivamente, impostiamo il testo del bottone a log out e lo sfondo a grigio attraverso la proprietà background dell’Attribute Inspector.

Colleghiamo poi il bottone con il codice del ViewController per creare un IBOutlet di tipo UIButton, ed aggiungiamo un nuovo metodo per il logout da Twitter come segue:

Swift
@IBAction func didTapLogOut(_ sender: AnyObject) {        
	let store = Twitter.sharedInstance().sessionStore
	if let userID = store.session()?.userID {
		store.logOutUserID(userID)
	}
	...
}
Objective-C
- (IBAction)didTapSignOut:(id)sender {
	TWTRSessionStore *store = [[Twitter sharedInstance] sessionStore];
	NSString *userID = store.session.userID;

	[store logOutUserID:userID];
	...
}

Colleghiamo quindi il bottone di logout al metodo didTapLogOut.

Analogamente, inseriamo una label di tipo UILabel per mostrare il nickname dell’utente loggato posizionandola sopra il bottone di logout e collegandola al codice, come fatto in precedenza.

Gestiamo infine, la visibilità dei bottoni creati e il testo e della label attraverso il seguente metodo:

Swift
func toggleAuthUI() {
	if (Twitter.sharedInstance().sessionStore.hasLoggedInUsers()) {
		logInButton.isHidden = true
		logOutButton.isHidden = false
	} else {
		logInButton.isHidden = false
		logOutButton.isHidden = true
		userIdLabel.text = "Twitter Login"
	}
}
Objective-C
- (void)toggleAuthUI {
	if ([[Twitter sharedInstance].sessionStore hasLoggedInUsers]) {
		self.logInButton.hidden = NO;
		self.logOutButton.hidden = YES;
	} else {
		self.logInButton.hidden = YES;
		self.logOutButton.hidden = NO;
		self.userIdLabel.text = @"Twitter Login";
	}
}		

Questa funzione nasconderà il bottone di login in caso di login mostrando il bottone di logout. Contrariamente, in caso di fallimento, verrà visualizzato il bottone di login e reimpostato il testo della label.

Per completare le modifiche, richiamiamo toggleAuthUI nel blocco di completamento del TWTRLogInButton e nel metodo viewDidLoad, come qui riportato.

Risultato finale

Eseguiamo l’applicazione sul dispositivo mobile o sull’emulatore.

All’avvio dell’applicazione, viene mostrata la schermata iniziale contenente il bottone di default precedentemente aggiunto all’interfaccia e qui di seguito riportato.

Figura 63. Schermata autenticazione (click per ingrandire)

Schermata autenticazione

Cliccando sul bottone, verrà richiesto all’utente di autenticarsi con il proprio account Twitter.

Figura 64. Schermata di autenticazione di Twitter (click per ingrandire)

Schermata di autenticazione di Twitter

Una volta autenticato, l’utente viene rimandato nuovamente alla schermata iniziale, dove al posto del bottone di login ci sarà quello di logout.

Figura 65. Bottone di logout (click per ingrandire)

Bottone di logout

Analogamente, cliccando sul bottone Log Out, la sessione dell’utente verrà cancellata e l’utente uscirà dall’applicazione ritornando alla sessione di login.

Il codice sorgente di questa sezione è reperibile su GitHub, nel branch Twitter Login.

Per ulteriori informazioni su come sfruttare appieno le API offerte dal TwitterKit, si rimanda alla seguente wiki ufficiale.

Tutte le lezioni

1 ... 11 12 13 ... 20

Se vuoi aggiornamenti su Twitter Login su iOS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Twitter Login su iOS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing