Offrire la migliore esperienza utente è qualcosa di molto importante, soprattutto quando il successo della tua applicazione dipende da quanti utenti sono registrati.

A tal proposito, il social login è diventato negli ultimi anni una prassi molto comune perché consente ai tuoi utenti di autenticarsi e fare il login utilizzando il proprio account social media come Facebook, Twitter, Google e non solo. 

Con un solo clic, i tuoi utenti possono registrarsi e successivamente accedere al tuo sito web senza dover creare un account alla vecchia maniera.

Ho già spiegato come configurare il social login tramite Google, Facebook e Linkedin.

In questo articolo desidero spiegarti come implementare una applicazione APEX in grado di utilizzare contemporaneamente più metodi di autenticazione.

Prima di Iniziare

In questo tutorial ho deciso di creare una semplice applicazione APEX che prevede diversi metodi di autenticazione oltre allo schema di autenticazione base di Oracle APEX.

Pertanto, se non lo hai già fatto, dovresti creare altri schemi di autenticazione basati sugli account social più famosi.

Non sai come fare? Non preoccuparti! Ecco alcuni tutorial che fanno al tuo caso:

• Come configurare l’autenticazione con Facebook
• Come configurare l’autenticazione con Google
• Come configurare l’autenticazione con Linkedin

Una volta che hai completato la configurazione dei vari schemi di autenticazione dovresti averli disponibili sotto Shared Components > Authentication Schemes

Step 1: Imposta lo Schema di Autenticazione Current

Quello che vogliamo fare è creare una applicazione che lasci la possibilità all’utente di usare le credenziali APEX (se ovviamente è stato registrato) e, allo stesso tempo, consente di effettuare il login con un account social.

Per questo motivo, lasceremo lo schema di autenticazione di base di Apex (Application Express Account) come quello di default (Current)

Per rendere uno schema di autenticazione Current segui i seguenti passaggi

• Apri la definizione dello Schema di Autenticazione
• Clicca su Make Current Scheme

Step 2: abilita l’opzione Switch in Session

Affinché l’applicazione APEX sia in grado di gestire correttamente il multi-login è necessario che tutti gli Schemi di Autenticazione che hai creato precedentemente abbiano attivata l’opzione Switch in Session.

Per attivare questa opzione segui i seguenti passaggi che, ci tengo a precisare, dovrai ripetere per tutti gli schemi di autenticazione definiti nella tua APP, compreso lo schema di autenticazione standard di APEX (Application Express Account )

• Clicca sulla definizione dello Schema di Autenticazione

• Vai alla sezione Login Processing ed imposta la proprietà Switch in Session a Enabled

• Ripeti questa operazione per tutti gli Schemi di Autenticazione

Step 3: Modifica la Login Page

A questo punto possiamo modificare la Login Page aggiungendo i pulsanti per autenticarsi rispettivamente via Facebook, Google e Linkedin.

Per avere qualche consiglio su come personalizzare al meglio la Login Page leggi questo guida.

In questo articolo ci limiteremo invece a fare le modifiche minime per implementare il multi-login.

• Accedi all’APP Builder e clicca sulla Login Page

• Quella che dovresti vedere è la struttura di base di una qualsiasi Login Page APEX. In particolare dovresti trovare i componenti (Page Items e Page Buttons) che ti permettono di eseguire il logon usando lo schema di autenticazione Application Express Accounts
  • Page Item P9999_USERNAME
  • Page Item P9999_PASSWORD
  • Page Item P9999_REMEMBER
  • Page Button LOGIN

• Crea una Sub-Region di nome SOCIAL_LOGIN_BUTTONS

• Aggiungi all’interno della region SOCIAL_LOGIN_BUTTONS tre nuovi Page Buttons
  • LOGIN_FACEBOOK
  • LOGIN_GOOGLE
  • LOGIN_LINKEDIN

• Per far si che il loro aspetto sia il più possibile simile al bottone di login standard puoi assegnare a tutti e tre i bottoni la classi CSS t-Login-buttons

• Nel mio caso ho anche definito dei CSS Custom per identificare i pulsanti con colori diversi.

• Alla fine di questo lavoro, dovresti ottenere una Login Page fatta più o meno così dove ci saranno ben quattro Page Button per il Sign In: quello standard di APEX più i tre nuovi che abbiamo creato.

Step 4: Attiva il Social Login

Quello che manca da fare è far si che per ciascuno dei 3 pulsanti venga richiamato il relativo Schema di Autenticazione previsto.

Per quanto riguarda il pulsante Sign In with APEX non devi modificarlo. Se l’utente decide di autenticarsi con le sue credenziali APEX seguirà la procedura classica.

Per quanto riguarda i tre pulsanti per il social login devi configurarli ciascuno nel modo seguente.

• Seleziona il Page Button (ad esempio Sign In with Facebook)

• Vai alle proprietà del pulsante ed individua la sezione Behavior
• Seleziona l’opzione Action e seleziona il valore Redirect to Page in this Application

• Clicca sulla proprietà Target

• Imposta le seguenti proprietà:
  • Target > Type: Page in this application
  • Target > Page: seleziona l’Home Page della tua applicazione APEX, quella che deve essere visualizzata come prima pagina da parte dell’utente (nel mio caso la pagina nr.1)
  • Advanced > Request: inserisci la stringa APEX_AUTHENTICATION=<Nome Schema di Autenticazione>, dove dove sostituire la stringa <Nome Schema di Autenticazione> con i nome dello Schema di Autenticazione che deve essere utilizzato.

• Ad esempio, per invocare lo schema di autenticazione di Facebook dovrò inserire la stringa APEX_AUTHENTICATION=FACEBOOK

• Ti ricordo che i nomi degli schemi di autenticazione da usare li puoi recuperare da Shared Components > Authentication Schemes

Ripeti gli stessi passaggi anche per gli atri due pulsanti

• Sign In with Google

• Sign In with LinkedIn

Conclusioni

Come abbiamo potuto vedere in questo articolo, implementare il social login all’interno della nostra applicazione APEX è un lavoro semplice e veloce e spero con tutto il cuore che questo breve tutorial possa aiutarti.

Fammi sapere se ci sei riuscito anche tu e se ti è piaciuto condividi questo articolo ed iscriviti alla pagina Linkedin di APPin5Minuti per supportare questo progetto!

Un abbraccio

Daniele