Consuming MARVEL API with Angular 8

Asked

Viewed 421 times

1

I’m starting in Angular/cli 8 and accompanying a video on Youtube for learning. In this video says that we should inform the public key and the hash to access JSON information coming from the API.

I’m doing exactly as in the Youtube video. It’s time to start the server and see the result on localhost:4200 me is shown the following error messages below:

GET https://gateway.marvel.com/v1/public/characters?ts=1&apikey=&hash= 401 (Unauthorized)
ERROR HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "https://gateway.marvel.com/v1/public/characters?ts=1&apikey=&hash=", ok: false, …}

I already signed up at Marvel and I’ve received the public key and the private key, I just don’t have the hash yet.

How can I generate this hash to put in the code?

Down with my code without the keys.

export class CharactersApiService {

  PUBLIC_KEY = '';
  HASH = '';
  URL_API = `https:gateway.marvel.com/v1/public/characters?ts=1&apikey=${this.PUBLIC_KEY}&hash=${this.HASH}`;

  constructor(private http: HttpClient) { }

  getAllCharacters() : Observable<any> {
    return this.http.get<any>(this.URL_API)
    .pipe(map((data: any) => data.data.results))
  }
angular

1 answer

1

Step 1: You need to create the account thus generating a chave pública and a chave privada on the Marvel website.

Step 2: After having the keys you need to create the hash, as?

  • Catch the timestamp + private key + public key

               1        cd4aafe016...    0065ff6881...
  • Join these values in a hash creator site like this one and create the hash
  • A hash like this will be created 77014510e99dbdc7763cb969af14b3ef

Step 3: Service 

export class CharactersApiService {

   PUBLIC_KEY = '0065ff6881...';                   //  <= chave publica
   HASH = '77014510e99dbdc7763cb969af14b3ef';      //  <= hash criada
   URL_API = `https:gateway.marvel.com/v1/public/characters?ts=1&apikey=${this.PUBLIC_KEY}&hash=${this.HASH}`;

   constructor(private http: HttpClient) { }

   getAllCharacters() : Observable<any> {
      return this.http.get<any>(this.URL_API)
      .pipe(map((data: any) => data.data.results))
}

From there you will already have access to the API, having as a result something like this below that I put only a part, because the return of the Api is quite extensive:

{"code":200,"status":"Ok","copyright":"© 2019 MARVEL","attributionText":"Data provided by Marvel. © 2019 MARVEL","attributionHTML":"<a href=\"http://marvel.com\">Data provided by Marvel. © 2019 MARVEL</a>","etag":"012e092bb6230a8080c4f4b88e782025f7f08a44","data":{"offset":0,"limit":20,"total":1492,"count":20,"results":[{"id":1011334,"name":"3-D Man","description":"","modified":"2014-04-29T14:18:17-0400","thumbnail":{"path":"http://i.annihil.us/u/prod/marvel/i/mg/c/e0/535fecbbb9784","extension":"jpg"},"resourceURI":"http://gateway.marvel.com/v1/public/characters/1011334","comics":{"available":12,"collectionURI":"http://gateway.marvel.com/v1/public/characters/1011334/comics","items":[{"resourceURI":"http://gateway.marvel.com/v1/public/comics/21366","name":"Avengers: The Initiative (2007) #14"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/24571","name":"Avengers: The Initiative (2007) #14 (SPOTLIGHT VARIANT)"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/21546","name":"Avengers: The Initiative (2007) #15"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/21741","name":"Avengers: The Initiative (2007) #16"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/21975","name":"Avengers: The Initiative (2007) #17"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/22299","name":"Avengers: The Initiative (2007) #18"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/22300","name":"Avengers: The Initiative (2007) #18 (ZOMBIE VARIANT)"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/22506","name":"Avengers: The Initiative (2007) #19"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/8500","name":"Deadpool (1997) #44"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/10223","name":"Marvel Premiere (1972) #35"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/10224","name":"Marvel Premiere (1972) #36"},{"resourceURI":"http://gateway.marvel.com/v1/public/comics/10225","name":"Marvel Premiere (1972) #37"}],"returned":12},"series":{"available":3,"collectionURI":"http://gateway.marvel.com/v1/public/characters/1011334/series","items":[{"resourceURI":"http://gateway.marvel.com/v1/public/series/1945","name":"Avengers: The Initiative (2007 - 2010)"},{"resourceURI":"http://gateway.marvel.com/v1/public/series/2005","name":"Deadpool (1997 - 2002)"},{"resourceURI":"http://gateway.marvel.com/v1/public/series/2045","name":"Marvel Premiere (1972 - 1981)"}],"returned":3},"stories":{"available":21,"collectionURI":"http://gateway.marvel.com/v1/public/characters/1011334/stories","items":[{"resourceURI":"http://gateway.marvel.com/v1/public/stories/19947","name":"Cover #19947","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/19948","name":"The 3-D Man!","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/19949","name":"Cover #19949","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/19950","name":"The Devil's Music!","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/19951","name":"Cover #19951","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/19952","name":"Code-Name:  The Cold Warrior!","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/47184","name":"AVENGERS: THE INITIATIVE (2007) #14","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/47185","name":"Avengers: The Initiative (2007) #14 - Int","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/47498","name":"AVENGERS: THE INITIATIVE (2007) #15","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/47499","name":"Avengers: The Initiative (2007) #15 - Int","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/47792","name":"AVENGERS: THE INITIATIVE (2007) #16","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/47793","name":"Avengers: The Initiative (2007) #16 - Int","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/48361","name":"AVENGERS: THE INITIATIVE (2007) #17","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/48362","name":"Avengers: The Initiative (2007) #17 - Int","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/49103","name":"AVENGERS: THE INITIATIVE (2007) #18","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/49104","name":"Avengers: The Initiative (2007) #18 - Int","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/49106","name":"Avengers: The Initiative (2007) #18, Zombie Variant - Int","type":"interiorStory"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/49888","name":"AVENGERS: THE INITIATIVE (2007) #19","type":"cover"},{"resourceURI":"http://gateway.marvel.com/v1/public/stories/49889","name":"Avengers: The Initiative (2007) #19 - Int","type":"interiorStory"},

  • Thanks Leandrade for answering, but friend, the same error persists == error: 401 - unauthorized. Another thing, I generated the HASH as ordered in two different ways: with the three values together without spaces, with the three values with the plus sign between values and the active checkbox below and with the three values with spaces between them and the active checkbox below. ACTIVE SELECTION ATTACHMENT Is: Treat Multiple Lines as Separate strings (Blank Lines are Ignored) == Thanks

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.