Accedi a Twitter nell'app Ionic React Capacitor

In questo post imparerai come implementare il accesso a Twitter nelle tue app Capacitor, basate sul framework Ionic React. Recupereremo anche il nome utente e la foto del profilo da mostrare dopo l'accesso. E vedremo come eseguire il login automatico degli utenti dopo il primo accesso.

Poiché questo post è un mix di tre nuovi framework, è possibile che tu sia arrivato qui per errore. Se stai cercando l'accesso a Twitter in

  • App Ionic Angular (Cordova) — Per favore controlla questo post
  • React Native — Per favore controlla questo post
  • App del condensatore di reazione ionica — Continua a leggere 😎

Come puoi vedere dall'alto, al giorno d'oggi sono disponibili diverse opzioni per lo sviluppo di app ibride ed è facile confondersi tra di loro. Questo post è incentrato su struttura ionica con Reagisci come framework front-end e Condensatore come runtime e ambiente di compilazione.

Vediamo una breve introduzione a ciascuno dei framework inclusi:

  1. Ionico
  2. Condensatore
  3. Ionic-React

Cos'è Ionic ?

In breve — Se crei app native in Android, codifichi in Java. Se crei app native in iOS, codifichi in Obj-C o Swift. Entrambi sono linguaggi potenti ma complessi. Con Ionic e Cordova/Capacitor puoi scrivere una singola parte di codice per la tua app che può essere eseguita sia su iOS che su Android (e Windows!), anche questo con la semplicità di HTML, CSS e JS.

È importante notare il contributo di Cordova/Capacitor in questo. Ionic è solo un involucro dell'interfaccia utente composto da HTML, CSS e JS. Quindi, per impostazione predefinita, Ionic non può essere eseguito come app su un dispositivo iOS o Android. Cordova/Capacitor è l'ambiente di build che containerizza (una specie di) questa app Web ionica e la converte in un'app installabile dal dispositivo, oltre a fornire a questa app l'accesso ad API native come Camera ecc.

Condensatore — In che cosa è diverso da Cordova ?

Cordova aiuta a creare l'app Web Ionic in un'app installabile sul dispositivo. Ma ci sono alcune limitazioni di Cordova, che Capacitor cerca di superare con un nuovo flusso di lavoro dell'app.

Capacitor è un runtime di app multipiattaforma che semplifica la creazione di app Web eseguite in modo nativo su iOS, Android, Electron, e la rete. Le persone ioniche chiamano queste app "Native Progressive Web Apps" e rappresentano la prossima evoluzione oltre alle app ibride.

Ecco le differenze tra Cordova e Condensatore

  1. Condensatore considera ogni progetto di piattaforma una risorsa sorgente invece di un asset del tempo di costruzione . Ciò significa che Capacitor vuole che tu conservi il codice sorgente della piattaforma nel repository, a differenza di Cordova che presume sempre che genererai il codice della piattaforma in fase di compilazione
  2. Il condensatore non "funziona sul dispositivo" o emula tramite la riga di comando. Tali operazioni vengono invece eseguite tramite l'IDE specifico della piattaforma. Quindi non puoi eseguire un'app con condensatore ionico usando un comando come ionic run ios . Dovrai eseguire app iOS utilizzando Xcode e app Android utilizzando Android Studio
  3. A causa di quanto sopra, Capacitor non utilizza config.xml o una configurazione personalizzata simile per le impostazioni della piattaforma. Invece, le modifiche alla configurazione vengono apportate modificando AndroidManifest.xml per Android e Info.plist per Xcode
  4. Poiché il codice della piattaforma è un risorsa sorgente, puoi cambiare direttamente il codice nativo usando Xcode o Android Studio. Ciò offre maggiore flessibilità agli sviluppatori. Faremo alcune modifiche simili anche per l'accesso a Twitter.

Plugin

I plug-in Cordova e Ionic Native possono essere utilizzati nell'ambiente Condensatore. Tuttavia, ci sono alcuni plugin Cordova che sono noti per essere incompatibili con Capacitor. Per la funzionalità di accesso a Twitter, utilizzeremo il plug-in di accesso a Twitter di Capacitor

Oltre a questo, Capacitor non supporta anche l'installazione di plug-in con variabili. Tali modifiche devono essere eseguite manualmente nel codice nativo. Faremo qualcosa di simile in questo post.

Perché Ionic React ?

Da Ionic 4, Ionic è diventato agnostico del framework. Ora puoi creare app Ionic in Angular, React, Vue o anche in JS semplice. Ciò offre a Ionic una grande flessibilità per essere utilizzato da tutti i tipi di sviluppatori.

Le app Ionic Angular sono supportate dagli ambienti di build Cordova e Capacitor.

Lo stesso non vale per le app Ionic React — Le app Ionic React sono supportate solo dall'ambiente di build Capacitor. Pertanto, se desideri creare app in Ionic React, devi utilizzare Capacitor per creare l'app sul dispositivo.

So se può creare confusione poiché tre framework si incrociano qui. Riga in basso per questo post — Plugin di accesso Twitter ionico + reazione + condensatore + condensatore

Una parola sull'autenticazione di Twitter

Utilizzeremo il plug-in Twitter di Ionic Capacitor per interagire con Twitter e autenticare l'utente. Una volta effettuato l'accesso, riceviamo le informazioni del profilo utente.

Per ricevere le informazioni sull'utente, chiameremo il /users/show.json endpoint da Twitter (maggiori informazioni qui). La cosa importante da notare qui è — Twitter non supporta questa chiamata API dal front-end (Client). Quindi, dovremo chiamare questo endpoint da un server. Useremo Firebase Cloud Function per recuperare queste informazioni. Firebase Cloud Function funge da API REST e puoi chiamarle dalla tua app.

Questo plugin per Twitter supporta 3 funzioni

  • Accedi
  • Esci
  • isLogged — Verifica se l'utente ha già effettuato l'accesso tramite Twitter.

Struttura del post

Vado sempre passo dopo passo per i lettori di tutti i livelli di esperienza. Se conosci determinati passaggi, sentiti libero di saltarli

Passaggio 1: Crea un'app Ionic React di base

Passaggio 2: Collega Condensatore alla tua app

Passaggio 3: Crea un'app Twitter nella Console per gli sviluppatori

Passaggio 4: Configura plug-in e funzioni di accesso a Twitter

Passaggio 5 :Recupera il profilo utente da Twitter

Passaggio 6: Crea e testa la tua app su Android

Iniziamo con l'accesso a Twitter di Ionic React !


Passaggio 1 — Crea un'app Ionic-React di base

Per prima cosa devi assicurarti di avere l'ultima Ionic CLI. Ciò ti assicurerà di utilizzare tutto l'ultimo. Assicurati l'ultima installazione di Ionic CLI utilizzando

$ npm install -g ionic@latest

La creazione di un'app Ionic-React di base non è molto diversa o difficile dalla creazione di un'app Ionic-Angular di base. Avvia un blank di base avviamento utilizzando

$ ionic start IonCapTwitter blank --type=react

Il --type=react ha detto alla CLI di creare una Reagire app, non un Angolare app !!

Esegui l'app nel browser utilizzando (sì, hai indovinato)

$ ionic serve

Non vedrai molto nella home page creata nello starter. Modifichiamo questa pagina per includere un pulsante, un'icona e un titolo per il login. Inoltre, ho creato una home page, in cui l'utente viene reindirizzato dopo l'accesso riuscito. Le informazioni sul profilo utente in questa pagina vengono dopo l'accesso e una singola chiamata API.


Il codice per questo può essere trovato nel repository Github allegato.

Passaggio 2 — Collega il condensatore alla tua app Ionic-React

Il condensatore può essere collegato anche a un'app Ionic esistente. Per collegare Condensatore alla tua app Ionic esistente, esegui

$ ionic integrations enable capacitor

Questo collegherà il condensatore alla tua app Ionic. Dopo questo, devi init l'app Condensatore con

$ npx cap init

Ti chiederà il nome e l'ID dell'app. Assegna un nome all'app come preferisci. App ID è l'identificatore di dominio della tua app (es:com.example.app ). Prendi nota di questo ID poiché sarà richiesto in seguito quando crei l'app nella Console per gli sviluppatori di Twitter.

Passaggio 3 — Crea un'app Twitter nella Console per gli sviluppatori

Per implementare un accesso a Twitter, avrai bisogno di un'app di Twitter (non L'app di Twitter), ovvero devi creare un'app nell'account sviluppatore di Twitter.

  • Crea un account sviluppatore Twitter — https://developer.twitter.com
  • Crea un'app Twitter su https://developer.twitter.com/en/apps
  • Quando crei l'app, assicurati di - Abilitare Accedi a Twitter - Inserisci l'URL di richiamata come twittersdk://

  • Una volta creata la tua app, trova la tua chiave API consumer e il tuo segreto

Fase 4 — Imposta il plug-in e le funzioni di accesso a Twitter

Per configurare l'accesso a Twitter nell'app, faremo le seguenti cose

4.1 Installa il plug-in di accesso di Twitter di condensatore

4.2 Imposta le funzioni del plugin per il login

4.3 Abilita il routing tra due pagine dell'app

4.4 Controllo della navigazione tramite login/logout da Twitter

4.1 Installa il plug-in di accesso Twitter di condensatore

Installa il plugin usando

$ npm install —-save capacitor-twitter

Aggiungi le seguenti informazioni nel tuo capacitor.config.json

...
"plugins": {
"TwitterPlugin": {
"consumerKey": "YOUR_API_KEY",
"consumerSecret": "YOUR_API_SECRET"
}
}
...

Successivamente, crea la tua app utilizzando i seguenti comandi

// Build web assets
$ ionic build
// Add android platform
$ npx cap add android
// Copy all changes to Android platform
$ npx cap sync
// Open the project in Android studio
$ npx cap open android

In Android Studio, individua il file android/app/src/main/java///MainActivity.java e aggiungi il plug-in all'elenco di inizializzazione:

...
import io.stewan.capacitor.twitter.TwitterPlugin;
...
public class MainActivity extends BridgeActivity {
...
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{<br> ...<br> <strong class="markup--strong markup--pre-strong">add (TwitterPlugin.class);</strong><br> ...<br>}});

4.2 Imposta le funzioni del plug-in per l'accesso

Dobbiamo configurare quattro funzioni principali per la funzionalità di Twitter

  1. Accedi
  2. Esci
  3. Verifica se l'utente ha effettuato l'accesso (per l'accesso automatico)
  4. Ottieni informazioni sul profilo utente

La pagina di accesso avrà le funzioni #1 e #3, mentre la pagina interna (Home) avrà le funzioni #2 e #4.

Pagina di accesso

Il codice completo per la pagina di accesso è simile a questo

Alcune cose di base

history.push({
pathname: '/home',
state: { userName: result.userName
}
});

Qui, state il campo contiene i parametri di navigazione (props). Questi saranno accessibili nella pagina successiva dal location oggetto di props .

getCurrentState la funzione ottiene lo stato utente corrente da isLogged metodo e puoi usarlo per eseguire l'accesso automatico dell'utente dopo la prima autenticazione. In questo modo, non chiederai all'utente di autenticarsi ogni volta che apre l'app.

Pagina iniziale

Il codice completo per la Home Page è simile a questo

Il userName inviato dalla prima pagina si accede tramite this.props.location.state.userName . Questo verrà utilizzato ulteriormente per recuperare le informazioni del profilo dell'utente.

4.3 Abilita il routing tra due pagine dell'app

I percorsi sono definiti in App.tsx file come questo

<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/login" component={Login} exact={true} />
<Route path="/home" component={Home} exact={true} />
<Route exact path="/" render={() => <Redirect to="/login" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>

4.4 Controllare la navigazione tramite login/logout da Twitter

Una volta che l'utente ha effettuato correttamente l'accesso, vogliamo reindirizzare a Home pagina. E quando l'utente si disconnette, vogliamo tornare a Login pagina.

Su Login pagina, history.push reindirizza l'utente alla pagina successiva dopo l'accesso riuscito

Su Login pagina,history.goBack() ti riporta alla pagina precedente dopo che la disconnessione è avvenuta con successo.

Passaggio 5 — Recupera il profilo utente da Twitter

Il recupero del profilo dell'utente dopo l'accesso è un po' complicato su Twitter. Poiché Twitter non fornisce supporto per le chiamate API lato client per il profilo utente, dovremo chiamare l'API tramite un server. Il server più veloce che possiamo realizzare è un server Firebase e utilizza Firebase Cloud Functions come l'API REST.

Configurazione iniziale

Per creare Firebase Cloud Function, puoi seguire questo blog dettagliato. I passaggi di base sono

  • Crea un progetto Firebase
  • Installa Firebase CLI usando npm i firebase-tools -g
  • Inizia un progetto Firebase utilizzando firebase init . Seleziona il progetto dall'elenco e seleziona functions dall'elenco delle opzioni
  • Installa i pacchetti. Questo creerà un functions cartella nella tua radice. Al suo interno, il index.js il file conterrà le funzioni effettive

Ottieni il token dell'App Bearer di Twitter

Per recuperare le informazioni dell'utente dopo l'accesso, avrai bisogno di un bearer-token da inviare insieme alla richiesta API. Questo bearer-token può essere creato utilizzando un CURL comando come segue

curl -u 'API key:API secret key' \   --data 'grant_type=client_credentials' \   'https://api.twitter.com/oauth2/token'

dove API key è la tua chiave API di Twitter e API secret key è il segreto della tua app Twitter. Riceverai una risposta come questa, che contiene bearer-token

{"token_type":"bearer","access_token":"AAAAAAAAAAAAAAAAAAAAAMLheAAAAAAA0%2XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXMDjRfXXXXXb0wnz4XsNiRVBChTYbJcE3F"}

Funzione Firebase per recuperare le informazioni sul profilo

Creeremo una funzione getUserInfo che recupererà le informazioni dell'utente nella funzione Firebase. Invieremo userName , che abbiamo ricevuto da login, nella richiesta. In risposta otterremo tutti i dettagli del profilo. La funzione è la seguente

Distribuisci la funzione su Firebase per l'uso

Dovrai distribuire la funzione su Firebase per usarla come chiamata API REST. Per distribuire la funzione, esegui semplicemente

$ firebase deploy

Questo distribuirà la funzione sul tuo progetto Firebase. Puoi accedere alla funzione utilizzando url come https://us-central1-auth-demos.cloudfunctions.net/getUserInfo . Questo URL verrà mostrato nel tuo terminale quando distribuirai le funzioni.

Passaggio 6:crea e testa la tua app su Android

A questo punto, hai tutte le funzionalità di accesso di Twitter integrate, la configurazione dell'app Android e anche l'impostazione dell'app Twitter. Crea di nuovo l'app dopo tutte le modifiche utilizzando

// Build web assets
$ ionic build
// Copy all changes to Android platform
$ npx cap sync

Crea l'app sul dispositivo Android utilizzando Android Studio. Dovresti essere in grado di accedere tramite Twitter e raggiungere la pagina interna in cui vedi le informazioni sull'utente. La seguente GIF mostra il flusso di accesso nel mio dispositivo OnePlus.


La risposta di successo dell'accesso sembra la seguente

Quando chiami la funzione Firebase per recuperare le informazioni del profilo dell'utente, la risposta è simile a questa

Queste sono molte informazioni e puoi usarle come vuoi.

Nota :per effettuare una chiamata API di successo dalla funzione Firebase, il tuo progetto Firebase deve avere un piano a pagamento (scegli Blaze Plan). Non preoccuparti, non detrae denaro immediatamente. Diverse migliaia di richieste sono gratuite, devi solo aggiungere un metodo di pagamento. Puoi controllare i dettagli per i prezzi qui.

Conclusione

In questo post hai imparato come implementare l'accesso a Twitter nella tua app Ionic React Capacitor. Gli accessi social sono una parte molto importante delle tue app, poiché fanno sì che gli utenti si fidino di più delle tue app. È anche facile da usare e gli utenti non devono ricordare alcuna password. Puoi sempre collegare gli accessi Social anche al tuo server.

Firebase ha una soluzione pronta per l'integrazione per questo. Puoi integrare il tuo accesso a Twitter con Firebase per consentire a Firebase di gestire il token di autenticazione, ecc.

Passaggi successivi

Ora che hai appreso l'implementazione di Twitter Login nell'app Ionic React Capacitor, puoi anche provare a seguire i blog per altre app Ionic

Condensatore di reazione ionica

  • Accesso a Facebook nelle app Ionic React Capacitor
  • Come creare app di base in ionic-react-capacitor
  • Fotocamera e galleria di immagini in Ionic-React-Capacitor
  • Notifica push nelle app Ionic-React-Capacitor
  • Riproduzione di musica nelle app Ionic Capacitor
  • Aggiunta di icone e splash nelle app Ionic React Capacitor
  • Crea giochi HTML5 nelle app Ionic Capacitor utilizzando Phaser

Se hai bisogno di una base per iniziare la tua prossima app Ionic 4 React , puoi creare la tua prossima fantastica app utilizzando Ionic React Full App


Angolare ionico

  • Ionic 4 gateway di pagamento — Stripe | PayPal | Apple Pay | RazorPay
  • Grafici Ionic 4 con — Grafici Google | HighCharts | d3.js | Chart.js
  • Ionic 4 Social Login — Facebook | Google | Twitter
  • Autenticazioni Ionic 4 — Tramite e-mail | Anonimo
  • Ionic 4 Caratteristiche — Geolocalizzazione | Lettore di codici QR | Contapassi
  • Media in ionico 4 — Audio | Video | Selezione immagini | Ritaglia immagine
  • Ionic 4 Essentials — Archiviazione nativa | traduzioni | RTL
  • Ionic 4 messaging — Firebase Push | Lettura di SMS
  • Ionic 4 con Firebase — Nozioni di base | Hosting e DB | Funzioni cloud

Se hai bisogno di una base per iniziare la tua prossima app Ionic 4 Angular , puoi creare la tua prossima fantastica app utilizzando Ionic 4 Full App