Come eseguire l'autenticazione Dropbox in un'applicazione singola pagina senza aprire una nuova finestra?

Question

Ho un'applicazione per una sola pagina che si integra con altri servizi come Dropbox e LinkedIn. Dropbox, ad esempio, ha un'ottima API e ho ottenuto il funzionamento dell'autenticazione aprendo il link di autenticazione di Dropbox in un'altra finestra. Una volta che l'utente si autentica, chiedo loro di chiudere quella nuova finestra per tornare alla mia app.

Chiaramente questo non è ottimale in quanto allontana l'utente dalla mia app e ancora più ingombrante sui tablet.

Come si esegue l'autenticazione all'interno dell'app, ad esempio in un lightbox o in un modulo modale?

Si noti che l'integrazione stessa avviene lato server non lato client. Attualmente, la pagina di autenticazione di Dropbox ha una richiamata che segnala al mio server che l'autenticazione ha avuto successo, che io memorizzo nella tabella dell'utente nel database per un uso futuro.

Nota: Il commento di taglie deve leggere: Un esempio di codice è altamente desiderata, ma non richiesto.

Answer 1

Quello che stai proponendo è di sconfiggere il modello di sicurezza, quindi non dovrebbe essere possibile. L'utente dovrebbe essere in grado di vedere l'URL della pagina reale per la verifica. Immagina quando stai effettuando un pagamento con Paypal, probabilmente verifichi di essere su paypal.com prima di inserire i tuoi dati importanti, giusto? Lo stesso vale per tutte le altre app. È un flusso molto brutto, ma il meglio che l'industria ha trovato oggi.

Il flusso ideale consiste nel reindirizzare l'utente al sito Web o all'app di terze parti, l'accesso e l'autorizzazione dell'utente, quindi reindirizzare l'utente. Un'app nativa ha il vantaggio di passare a un'altra app nativa, quindi il flusso è un po 'meno brutto.

Il lavoro che farebbe quello che vuoi è un'app che richiede il nome utente e la password al servizio di terze parti, quindi esegui la danza dell'autore dietro le quinte. Questo probabilmente scoraggerà gli utenti dalla tua app ed è molto pericoloso. Non te lo consiglio.

Answer 2

Se la tua app è un'app Web, il modo migliore per semplificare il flusso è semplicemente reindirizzare la pagina corrente (ad esempio, How to redirect to another webpage in JavaScript/jQuery?) alla pagina/authorize su Dropbox, con un oauth_callback a una pagina della tua app che indica il processo è stato completato.

In questo modo il flusso è solo: il pulsante

1. (sulla vostra app) utente fa clic per avviare il flusso OAuth
2. (la vostra applicazione reindirizza a Dropbox autorizzare pagina) utente autorizza app
3. (reindirizzamenti Dropbox per oauth_callback alla tua app) l'app ottiene il token di accesso ed è pronta per l'integrazione

E tutto ciò avviene all'interno di una singola pagina, senza chiudere/aprire finestre aggiuntive.

Answer 3

È possibile caricare l'endpoint autorizzazione in un iframe sulla pagina Web. Tuttavia, si noti che alcuni browser hanno limitazioni sui cookie inviati al provider di accesso all'interno di un iFrame. Tipicamente (Safari, iOS) hai solo letto l'accesso ai cookie, che è sufficiente se il cookie di sessione è già impostato sul provider.

Sulla vostra pagina di richiamata - dove vieni rinviato dal dropbox dopo l'autenticazione; sarà necessario chiamare una funzione javascript per attivare un evento nella pagina padre, tale autenticazione verrà eseguita.

window.parent.AppController.authenticationComplete(); 

Il genitore quindi può rimuovere il iframe, e procedere come autenticato.

authenticationCompleted = function() { 
    // [snipp] 
    $("iframe#loginwrapper").remove(); 
} 

---

A causa del potenziale problema biscotto, mi raccomando di eseguire tutte le fasi di autenticazione avviate dalla fine del server, prima che la pagina HTML principale è servita a tutti. Quindi ti assicurerai che la tua app non venga caricata due volte. Questo è un comportamento tipico di molte soluzioni software middleware di autenticazione/identità.

---

Quando si parla app non è chiaro se si intende un WebApp pura, o se si ha il controllo disponibile in un'applicazione ibrida utilizzando framework, come PhoneGap. Con PhoneGap o simili, è possibile caricare un browser all'interno del browser all'interno dell'app, in tal caso il ChildBrowser non è limitato dalle stesse limitazioni dei cookie.

Recentemente ho scritto un tutorial su come farlo funzionare con PhoneGap e Childbrowser per iOS.

• OAuth 2.0 Guide for Phonegap using ChildBrowser and JSO

Si noti che questo tutorial è sull'utilizzo di OAuth 2.0, che è un po 'diversa da OAuth 1.0.