Come aggiungere l'accesso di Google alla tua app Web

Blog

Come aggiungere l'accesso di Google alla tua app Web

Fino ad ora, abbiamo visto 2 diversi esempi di hello world su come aggiungere l'accesso a Google sul front-end, utilizzando HTML semplice e JS vaniglia. È stato tutto carino e dandy per un ciao mondo, ma una cosa che mancava mentre stavo cercando di capire l'accesso a Google è l'aspetto di un'implementazione funzionante, specialmente in React.



*C'è un componente react-google-login che configura tutti gli accessi di Google dietro un |_+_| etichetta. È abbastanza utile e l'ho usato in alcuni casi: la mia unica lamentela è che non puoi ottenere il valore restituito di |_+_| metodo. Questo post mostrerà cosa sta succedendo sotto le coperte se preferisci non usare una libreria.

Creazione di una nuova app di reazione con l'accesso a Google

Primo: crea l'app |_+_|. I file con cui lavoreremo principalmente sono App.js e index.html.



Aggiungi il tag dello script di accesso di Google al tuo |_+_|

Aggiungi il pulsante di accesso

In App.js: aggiungi uno stato per tenere traccia di quando l'utente ha effettuato l'accesso



gapi.auth2.init()

Aggiungi il pulsante al componente

create-react-app google-auth-demo

)
}

Aspetta, come posso evitare di mostrarlo se l'utente ha effettuato l'accesso? Possiamo usare lo stato per mostrarlo condizionalmente.

esempio di funzione principale python
public/index.html

);
}

  • Poiché i condizionali sono un po' difficili da scrivere con JSX in linea, ho estratto il blocco condizionale in un altro metodo per fornire il componente che desideriamo.

A questo punto, avrai un pulsante che non fa nulla (il miglior tipo di pulsante) e vedrai il messaggio Non sei registrato

Aggiungi l'accesso

Per completare la configurazione dell'accesso a Google, ti consigliamo di inizializzare la libreria utilizzando |_+_|. Un buon posto per farlo è all'interno di |_+_|callback.

You are not signed in. Click here to sign in.

come usare blockfolio

Per utilizzare lo stile predefinito, usa |_+_| durante l'inizializzazione del componente.

{this.getContent()}

})
}

Quando utilizzi questo metodo, il pulsante mostrerà automaticamente se hai effettuato l'accesso, ma |_+_| la richiamata non verrà effettivamente eseguita a meno che l'utente non faccia clic su di essa quando dice Accedi. In caso contrario, sei loggato automaticamente. Un modo per agganciarsi alla fine di quel processo di accesso automatico è aggiungere un callback alla promessa restituita da |_+_|:

gapi.auth2.init()

Fare un percorso protetto

Se stai usando react-router e vuoi aggiungere un percorso protetto alla tua app React, puoi dirottare il |_+_| prop di un |_+_|. Puoi fare qualcosa del genere:

componentDidMount()

Collegandoti alla proprietà render su |_+_|, puoi definire dinamicamente quale componente verrà caricato quando tenti di accedere a quella Route.

Questa è la strategia impiegata dalla libreria di progetto react-private-route per rendere un po' più facile la scrittura, che vale sicuramente la pena provare.

Se stai implementando l'accesso a Google in un'app React, dai un'occhiata il mio repository github intricatecloud/google-sign-in-demo per vedere tutto il codice sopra in una configurazione funzionante.

In questa serie in 3 parti, abbiamo trattato passando da un esempio di accesso di google hello-world all'utilizzo della libreria javascript per fare alcune cose hacky. Ora abbiamo esaminato tutto il codice necessario per l'integrazione con il pulsante Accedi di Google.

A volte, tutorial come questo possono essere difficili da seguire e non faranno clic se non lo vedi.

Grazie per la visita, continua a visitare

? React - La guida completa (inclusi ganci, React Router, Redux)

? Modern React con Redux [Aggiornamento 2019]

? Il corso completo per sviluppatori React (con hook e Redux)

? React JS Web Development - Bootcamp sugli elementi essenziali

? React JS, Angular e Vue JS - Avvio rapido e confronto

? Il corso completo React Js e Redux: crea app Web moderne

reagisci alla primavera contro il movimento del corniciaio

? React JS e Redux Bootcamp - Master React Web Development


Pubblicato originariamente su https://codeburst.io

#reactjs #react-native #web-development #security #google-chrome