angular - Angular2, Auth0 kobler til Fitbit API, JWT trenger 3 deler
Jeg jobber for øyeblikket med Angular2, og jeg prøver å koble til Fitbit API med auth0. Jeg bruker Angular2-JWT og Lock.js levert av Auth0. Så langt fungerer innlogging og lesing av enkle profildata feilfritt ved bruk av Lock.js genererte id_token, men i det øyeblikket jeg ønsker å hente informasjon som aktiviteter, gir forespørselen til API-et en feil.
Men så la jeg merke til at i tillegg til dette, gir Lock.js også noe som Access_token. Jeg har alltid trodd at dette er den riktige å bruke.
Jeg henter id_token/access_token på følgende måte.
@Injectable()
export class Auth {
// Configure Auth0
lock = new Auth0Lock('[CENSORED]', '[CENSORED],{});
constructor() {
// Add callback for lock `authenticated` event
this.lock.on("authenticated", (authResult:any) => {
this.lock.getProfile(authResult.idToken, function(error:any, profile:any){
if(error){
throw new Error(error);
}
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('access_token', authResult.accessToken);
localStorage.setItem('profile', JSON.stringify(profile));
console.log('ID_token: ' + authResult.idToken);
console.log('Access_token: ' + authResult.accessToken);
});
});
}
Vennligst merk at jeg henter en Id_token og en Access_token. Jeg prøver også å følge Implicit Grant-flowen, og hvis jeg tolker det riktig, betyr dette at jeg må sende autorisasjonstokenet for å få en access token? Men det jeg ønsker å finne ut av, er om Access_token jeg henter ved bruk av Lock.js er den som trengs for å kommunisere med Fitbit API, eller om jeg faktisk trenger id_token?
Dokumentasjonen er virkelig ikke klar om dette. Så videre, la oss fortsette å bruke denne Access_token, jeg fortsetter med å bruke angular2-JWT for å hjelpe meg med å sende en AuthHttp til Fitbit API. Min aktivitetshentingsservice frem mot dette ser slik ut:
@Injectable()
export class FetchActivityService {
constructor (
public AuthHttp: AuthHttp
) {}
activity:any;
jwtHelper: JwtHelper = new JwtHelper();
useJwtHelper() {
var token = localStorage.getItem('id_token');
console.log(
this.jwtHelper.decodeToken(token),
this.jwtHelper.getTokenExpirationDate(token),
this.jwtHelper.isTokenExpired(token)
);
}
GetActivity() {
this.AuthHttp.get('https://api.fitbit.com/1/activities.json')
.subscribe(data => this.activity = data, error => console.log(error));
}
}
Så dristig, relevant del av koden er bare å bruke Angular2-JWTs AuthHttp for å legge til autorisasjonsheaderen riktig til API-forespørselen min. Så fortsatt i dette tilfellet over Access_token, ser AuthHttp-fabrikken min slik ut
export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig({
tokenName: 'access_token',
tokenGetter: (() => localStorage.getItem('access_token'))
}), http, options);
}
Bare for å vise at du kan se at jeg binder det til Access_token generert direkte fra Lock.js. Så snart jeg prøver å kjøre GetActivity() som vist ovenfor, får jeg følgende feil:
Error: JWT must have 3 parts
Det er hele feilmeldingen, jeg forstår det ikke, Angular2 JWT skal bruke Access_token for å generere en gyldig JWT og sende denne til API-en, så hva gjorde jeg galt? Kan jeg også si at Access_token, når den skrives ut i konsollen, er en ganske kort streng, mens Id_token allerede er en JWT.
Vennligst forestill deg nå alle trinnene ovenfor, men med access_token erstattet med Id_token, det gir følgende feil. Den røde teksten viser en lang JWT, jeg skrev den bare ikke inn her fordi den er veldig lang.
"errorType":"invalid_token","message":"Access token invalid:[JWT]
Jeg er helt fortapt i dette.