Add Access Token class as template for generating future tokens

This commit is contained in:
williameriksson126 2020-11-27 09:27:54 +01:00
parent 51e91981e6
commit 12b43e3d61
3 changed files with 47 additions and 55 deletions

View File

@ -18,6 +18,7 @@ class App extends Component {
/>
*/}
<AccessToken />
<NearbyStation />
<NavigationDrawer />
<Header />
<PageArea />

View File

@ -1,10 +1,30 @@
import React from 'react';
import axios from 'axios';
var globToken = ''
const GetToken = () => {
const vars = {
credentials: 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth',
token: undefined,
device: '123',
}
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + vars.credentials
};
axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+vars.device, { headers })
.then(response => {
console.log(response);
globToken = response.data.access_token
});
}
class AccessToken extends React.Component {
state = {
token: 'No token',
responseFromVT: 'No response'
token: 'No Token',
}
handleChange = event => {
@ -14,56 +34,32 @@ class AccessToken extends React.Component {
handleSubmit = event => {
event.preventDefault();
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + this.state.token
};
this.setState({
token: 'Attempting to send token'
})
credentials: 'Attempting to send token'
});
GetToken();
}
axios.post('https://api.vasttrafik.se/token', { headers })
.then(response => {
this.setState({
responseFromVT: response.data.access_token,
token: 'token sent'
})
.error(res => {
this.setState({
responseFromVT: "some error",
token: "some error occured"
})
})
})
handleFetch = event => {
event.preventDefault();
this.setState({token: globToken})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Key:
<input type="text" name="token" onChange={this.handleChange} />
</label>
<button type="submit">Get Token</button>
</form>
<h1>
{this.state.responseFromVT}
</h1>
<h1>
{this.state.token}
</h1>
<form onSubmit={this.handleFetch}>
<button type="submit">fetch</button>
</form>
</div>
)
}
}
export default AccessToken
//'https://reqres.in/api/articles'
//'https://api.vasttrafik.se/token'
//grant_type=client_credentials&scope=<device_id>
//5ty7gxmAfQlUHDHdm7kgaqXwK5Ia
//wpIOURnJJcTtO6rORYmYYPq4wXka

View File

@ -1,28 +1,15 @@
import React from 'react';
import axios from 'axios';
/*
const StopLocation = ({ name, id, lat, long, track }) => (
<div>
<div>
<p>{name}</p>
<p>{id}</p>
<p>{lat}</p>
<p>{lon}</p>
<p>{track}</p>
</div>
</div>
);
*/
class NearbyStation extends React.Component {
state = {
lat: '57.5987',
long: '11.9454',
token: '2d596c20-a6e7-3272-8df6-51ed2468da63',
lat: '57.7',
long: '12.0',
stops: [],
token: undefined,
device: '123',
}
handleChangeLat = event => {
this.setState({ lat: event.target.value});
}
@ -31,6 +18,10 @@ class NearbyStation extends React.Component {
this.setState({ long: event.target.value});
}
handleChangeToken = event => {
this.setState({ token: event.target.value})
}
handleSubmit = event => {
event.preventDefault();
@ -61,7 +52,11 @@ class NearbyStation extends React.Component {
Longitude coord:
<input type="text" name="long" onChange={this.handleChangeLong} />
</label>
<button type="submit">Get Token</button>
<label>
Token:
<input type="text" name="token" onChange={this.handleChangeToken} />
</label>
<button type="submit">Stops</button>
</form>
<h1>
{this.state.lat}