401 No request da accuweater API

[ElaineDelgado]

Etapa da aula

12

Nome da aula

Um overview da AccuWeather API - Aula 01-05

Link da aula

https://app.nutror.com/v3/curso/a977a43d31cedcb6e7d064649ddd6c5436155aaf/curso-de-javascript-roger-melo/aula/1402115

Descreva a dúvida

Erro 401 no request

Boa tarde, professor, Após o cadastro e atualização de senha e todo o processo pra cadastrar o app, obtive a minha apikey mas ela retorna erro 401 mesmo no site, na página de documentação onde podemos testar os requests inserindo nossa key e alguns querie parameters (como você mostrou em aula). Meu teste de request no site retorna a seguinte mensagem:

HTTP/1.1 401 Unauthorized

Connection: keep-alive
Content-Length: 151
Content-Type:  application/json
Date: Mon, 11 Apr 2022 21:09:27 GMT
{
  "Code": "Unauthorized",
  "Message": "Api Authorization failed",
  "Reference": "/locations/v1/cities/search?apikey=N3rdIB0QwoGiyzkoIC4jbHRAufA7CSqm&q=recife"
}

A mensagem no console do meu fetch:

 GET http://dataservice.accuweather.com/locations/v1/cities/search?apikey=N3rdIB0QwoGiyzkoIC4jbHRAufA7CSqm&q=recife net::ERR_FAILED 401
weather.js:12  

No fetch que fiz retorna status 401 também.

No site o status do "My App" conta como "aprovado".

Será que leva um tempo após o cadastro para liberar de fato?

Obrigada!

@Roger-Melo

[Roger-Melo]

Olá @ElaineDelgado!

Não sei se chegou a fazer isso, mas delete a chave atual, crie uma nova e teste com ela.

Se após fazer isso o problema permanecer, execute a aplicação em um outro browser (só pra tirar do caminho uma possível hipótese de que não há uma configuração em seu browser padrão que está causando o problema).

Se o problema permanecer, sobe os arquivos em um repositório aqui no github e me envie o link. Assim eu testo aqui e te ajudo com mais precisão =)

[ElaineDelgado]

Bom dia, professor, Criei nova chave e a resposta (401) é a mesma. No site da API a mesma resposta descrita acima, e no meu browser, tanto Chrome quanto Firefox dão o erro. Testei em browsers diferentes, mas mesmo na documentação da API (https://developer.accuweather.com/accuweather-locations-api/apis/get/locations/v1/cities/search) onde podemos testar a chave e o retorno da requisição recebo erro 401.

Mensagem no Firefox:

Requisição cross-origin bloqueada: A diretiva de mesma origem (same origin policy) impede a leitura do recurso remoto em 
http://dataservice.accuweather.com/locations/v1/cities/search?apikey=H2GOYHYYr9L3AljQX1JGj1uHbWCUG9jg&q=recife 
(motivo: falta cabeçalho 'Access-Control-Allow-Origin' no CORS). Código de status: 401.

Nova chave: H2GOYHYYr9L3AljQX1JGj1uHbWCUG9jg

Obrigada!

[Roger-Melo]

Sobe os arquivos em um repositório aqui no github e manda o link. Assim eu testo aqui =)

@ElaineDelgado

[ElaineDelgado]

Link do repositório do projeto:

https://github.com/ElaineDelgado/weather-application

[Roger-Melo]

Olá @ElaineDelgado.

Realmente, a chave que está no repositório estava bloqueada. Porém, quando gerei e testei uma nova chave, funcionou normalmente =)

Teste deletar a chave atual, gerar uma nova chave no site da accuweather e, antes de testar a nova chave, derrube o live server. Quando levarntar o live server, esteja com a nova chave no arquivo.

Testa e me diz aqui.

Edit: gravei um vídeo mostrando o passo a passo que fiz, dá uma olhada no comentário abaixo =)

[Roger-Melo]

Dá uma olhada no passo a passo que fiz aqui =)

@ElaineDelgado

[ElaineDelgado]

Fiz exatamente como você mostrou no vídeo, acompanhando para ter certeza que fiz igualzinho, trocando o "Where will the API be used?" que eu tinha colocado 'desktop Website', na nova versão coloquei 'Mobile Website', mas tb não funcionou. Refiz novamente. Testei no Chrome e Firefox.

Mesmo no teste na página da doc da AccuWeather: https://i.imgur.com/V8jLko2.png

"Java não, que Java é feio" kkkkkkk

[ElaineDelgado]

A imagem tinha ido com link errado!

Print aqui!

[Roger-Melo]

@ElaineDelgado entrei em contato com o suporte da Accuweather, a resposta foi a do print abaixo.

Basicamente, eles disseram que o motivo que pode ter causado o 401 foi a execução de mais de 50 requests por dia, mas isso não faz sentido de acordo com o que vc relatou...

Topa fazermos uma chamada no zoom (sem webcam) para vermos isso com mais calma?

Se puder, tenho um horário na sexta-feira, as 19h =)

[ElaineDelgado]

Boa tarde, professor, o encontro no zoom seria hoje? Desculpe a demora para responder! Se for hoje, tudo bem sim, estou disponível. Agradeço pela ajuda, já estava procurando outras API de clima para dar continuidade na Etapa 12!

[Roger-Melo]

Boa! Mandei uma msg em seu whats =)

[ElaineDelgado]

Boa tarde, professor,

Ontem dei uma procurada naquela lista de API's, e achei uma que talvez possa servir para a Etapa 12, o Wearher App. Vou tentar seguir a Etapa 12 com essa Api, acredito que com essas informações que ela retorna eu consiga fazer a aplicação.

// UTILIZANDO A WEATHERSTACK
//weatherstack key: ca78332203beacfbb671738c978b759f
//https://weatherstack.com/documentation docs

const getWeather = async () => {
  const APIKey = 'ca78332203beacfbb671738c978b759f'
  const cityURL = `http://api.weatherstack.com/current?access_key=${APIKey}&query=recife`

  const response = await fetch(cityURL) 
  const data = await response.json() 
  console.log(data.current['temperature'])//29
  console.log(data.current['feelslike'])//34
  console.log(data.current.weather_icons[0])//weather icon
}

getWeather()

// RESPONSE PARA RIO DE JANEIRO: 
//http://api.weatherstack.com/current?access_key=ca78332203beacfbb671738c978b759f&query=Rio%20de%20Janeiro

/*
{
  "request": {
    "type": "City",
    "query": "Rio De Janeiro, Brazil",
    "language": "en",
    "unit": "m"
  },
  "location": {
    "name": "Rio De Janeiro",
    "country": "Brazil",
    "region": "Rio de Janeiro",
    "lat": "-22.900",
    "lon": "-43.233",
    "timezone_id": "America/Sao_Paulo",
    "localtime": "2022-04-15 20:14",
    "localtime_epoch": 1650053640,
    "utc_offset": "-3.0"
  },
  "current": {
    "observation_time": "11:14 PM",
    "temperature": 21,
    "weather_code": 116,
    "weather_icons": [
      "https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"
    ],
    "weather_descriptions": [
      "Partly cloudy"
    ],
    "wind_speed": 9,
    "wind_degree": 270,
    "wind_dir": "W",
    "pressure": 1014,
    "precip": 0,
    "humidity": 69,
    "cloudcover": 25,
    "feelslike": 21,
    "uv_index": 1,
    "visibility": 10,
    "is_day": "no"
  }
} */

Muito obrigada pela ajuda!!

[Roger-Melo]

Show @ElaineDelgado. Quando quiser, pode enviar a aplicação em uma issue de aplicação e fazemos a análise =)

[ElaineDelgado]

Ok, obrigada!