API do Google: origem não válida para o cliente: o url não foi incluído na lista de permissões para o ID do cliente “ID”


97

Eu preciso de ajuda. Eu não encontrei uma resposta para minha pergunta. Eu tentei googling e tentei perguntar sobre outros lados, mas nunca encontrei uma resposta.

Estou trabalhando com a API do google (API de dados do Youtube) e uso o código de exemplo do lado do google, o código funciona, tenho certeza disso. Recebi um erro ao tentar iniciar o Script:

detalhes: "Não é uma origem válida para o cliente:" MyURL "não foi incluído na lista de permissões para o ID do cliente" MyID ". Acesse https://console.developers.google.com/ e coloque essa origem na lista de permissões para o ID do cliente do seu projeto. "

erro: "idpiframe_initialization_failed"

O problema que coloquei na lista de permissões do meu site e ele foi aceito. eu não sei o que está errado. O que devo fazer para "colocar na lista de permissões" meu domínio (está na lista de permissões)

E outra pergunta. Eu não procurei uma resposta para essa pergunta antes.

Acho que posso usar o código no Localhost, acho que devo colocar meu endereço localhost na lista branca ou algo parecido. Mas a lista de permissões não funciona.

  • DreamGamer

2
Ainda enfrentando o mesmo problema. Alguém tem alguma outra solução para resolver o problema?
Yashu Mittal

no meu caso, usar httpcausa o problema. mudar para httpsresolve o problema.
Xiao

2
Para aqueles que já adicionaram domínio em domínios autorizados, basta limpar o cache do seu site, funcionará definitivamente se todos os dados estiverem configurados corretamente.
Haritsinh Gohil

Respostas:


79

Tive o mesmo problema e aqui está como resolvi:

  1. Ative as APIs Analytics e Google Plus em seu projeto
  2. Crie novas credenciais de cliente OAUTH 2.0
    • Adicione Origens Javascript Autorizadas na seção Restrições
  3. Use o novo ID do cliente.

Apreciar.


OMG, muito obrigado! Está funcionando para mim. Um dos meus problemas foi que usei a chave do cliente, não o ID do cliente.
DreamGamer

4
Devo esclarecer que SE você já criou um oAuth para uma porta diferente; por algum motivo, você não pode reeditar a porta para usar uma diferente. Basicamente, "criei outra credencial" para a nova porta. Obviamente, isso criará outro token; então apenas pegue-o e use-o. Você pode manter os dois tokens no console.
Sam3k

Obrigado! É contra-intuitivo, mas é a resposta certa. Muito louco que você não pode simplesmente adicionar a API de que precisa (o que também não é óbvio) à sua chave existente. Recriar a configuração inteira para a chave é uma dor.
beachCode

Você está dizendo para ativar as APIs do Googe Plus. Mas qual é a relação entre a API do Youtube e a API do Google Plus.
Yashu Mittal de

Eu realmente não entendo a correlação aqui, mas é a única coisa que funcionou para mim (e outros, aparentemente).
Ezra Obiwale

215

Limpei o cache. Comecei a trabalhar então.

No Chrome: Configurações -> Avançado -> Limpar dados de navegação -> Imagens e arquivos em cache


1
Obrigado, fiz tudo certo e estava com problemas.
cura

2
Isso funcionou para mim ao usar o login do Google para meu aplicativo da web. Obrigado!
Sahil Lakhwani

1
Já votei contra você uma vez quando isso aconteceu comigo há alguns meses, mas você merece outro ... +1
howMuchCheeseIsTooMuchCheese

1
Essa resposta não me ajudou.
tishma

2
Existem muitos pedidos acontecendo. Acho que um deles está sendo armazenado em cache pelo navegador e, portanto, ele não sabe sobre as alterações que você faz no console de API. Mas acho que é mais fácil desabilitar o cache inteiramente enquanto as Ferramentas de Desenvolvimento do Navegador estão abertas. Na maioria das vezes, há uma opção (uma caixa de seleção) na guia "rede". Depois de habilitar isso, uma atualização da página é suficiente para fazê-la funcionar.
Andreas Linnert de

18

Limpar o cache funcionou para mim


3
depois de fazer isso, não se esqueça de fazer o login novamente para stackoverflow para upvote
Anand Rockzz


7

Para mim, funcionou sem adicionar nenhuma das APIs adicionais, como o Google Analytics. Apenas certifique-se de adicionar o clientid completo e abrir o aplicativo em uma janela anônima para evitar salvar o cache. Se já tiver aberto o aplicativo na janela normal, 1- Feche todas as guias em que o aplicativo está aberto. 2- Limpe o cache e os cookies. No Chrome, está em Configurações -> Senhas e formulários -> Limpar dados de navegação -> Avançado (guia) -> selecione a) Cookies e outros dados do site eb) Imagens e arquivos armazenados em cache 3- Abra uma nova janela anônima e teste seu aplicativo.


2
Não é necessário fechar todas as tags, basta abrir uma janela anônima.
Bert Verhees

4

A documentação diz para não ignorar duas etapas críticas ("Conforme você segue as instruções, é importante que você não ignore essas duas etapas críticas: Habilite a API do Analytics Aqui está o que funcionou para mim:

  1. Ative a API do Analytics
  2. de volta para suas credenciais, exclua OAuth 2.0 anterior
  3. agora crie um novo OAuth com origens corretas

2

Também segui as instruções do exemplo de início rápido, Tive o mesmo problema, tentei todas as soluções sugeridas aqui sem sucesso, tentei tudo que pude imaginar mas não adiantou.

Finalmente vi que copiei o CLIENT_IDcom um espaço no final.

  var CLIENT_ID = '44********-*****************.apps.googleusercontent.com ';

Depois de consertar isso (remover o espaço extra), funcionou.

Acho que a mensagem de erro não é muito precisa neste caso. Espero que isto ajude.


2

Acabei de cometer o mesmo erro: tentei o exemplo oficial de início rápido e recebi a mesma mensagem de erro que você.

É um pouco confuso, porque esse exemplo é muito mais complexo do que o que eu pessoalmente precisava: ele usa OAuth para login do usuário, e NÃO apenas o API key. Se você é como eu e não deseja usar OAuth e deseja apenas recuperar alguns dados do Youtube, sem nenhuma ação privilegiada (por exemplo, se deseja apenas pesquisar ou listar vídeos, canais ou listas de reprodução), este exemplo é para voce.

A solução é simples, basta fornecer apiKey, em vez de clientIdpara gapi.client.init(link: docs API ), assim:

const apiKey = '<my API key>';

function gooApiInitClient() {
  // Array of API discovery doc URLs for APIs used by the quickstart
  const discoveryDocs = [
    "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
  ];

  return gapi.client.init({
    apiKey,
    discoveryDocs
  });
}

// see: https://developers.google.com/api-client-library/javascript/reference/referencedocs
gapi.load('client', {
  callback: function() {
    // we now have gapi.client! initialize it.
    gooApiInitClient().
      then(() => {
        // we can start using the API here!
        // e.g. gapi.client.youtube.videos.list(...);
      }).then(results => { 
        // use results here....
      });
  }
});

2
Sugiro simplificar o trecho de código para tornar esta resposta melhor. A chamada init tem apenas 4 linhas e isso é realmente a única coisa que está mudando. As outras coisas não são tão úteis.
Charlie

Limpei um pouco :)
Domi

2

Eu também estava tentando fazer com que o exemplo funcionasse (em) https://developers.google.com/drive/api/v3/quickstart/js

Ele falhou continuamente, embora o endereço IP tenha sido adicionado ao WebAPI.

Mas você deve adicionar localhost: 8000 (não apenas 127.0.0.1:8000) ao seu OAUTH conforme mostrado aqui:

Cliente OAUTH

Flutue sobre o texto do cliente OAUTH e ele se tornará um link. Clique nesse link e você pode adicionar um URI incluindo a porta. O meu já tinha 127.0.0.1:8000, mas não o locahost: 8000.

locahost: 8000

Aqui está a coisa interessante / estranha. Quando faço ping localhost, vejo:

IPV6

Eu acho que é coisa do IPV6.

De qualquer forma, se eu pingar em 127.0.0.1, vejo a resposta esperada (via IPV4)

IPV4

Talvez seja uma pista falsa, mas eu não tinha certeza se o valor inserido no OAUTH foi afetado por isso ou não.

A razão pela qual eu até percebi isso é porque quando eu iniciei o servidor da web Python conforme direcionado no tutorial, vi o seguinte e achei estranho: endereço ip python

Só depois de adicionar o localhost: 8000 URI no OAUTH funcionou, mas depois de adicionar funcionou bem.


2

Como muitos indicaram aqui, este é apenas um problema de cache do navegador. Não há necessidade de criar uma nova chave ou mesmo limpar o cache. Basta tentar novamente em uma nova janela anônima (anônima) do navegador e deve funcionar bem.


1

Eu estava tendo um problema semelhante ao tentar obter um login para meu aplicativo da web. O que fiz foi apenas recriar as credenciais de ID do cliente OAuth do Cloud Platform. Quando fiz isso e usei o novo ID do cliente, tudo funcionou bem. Não tenho certeza de qual era o problema antes, mas ele está perfeitamente bem agora.

Se alguém encontrar isso no Google ou qualquer outra coisa, tente isso. Pode funcionar. Isso explicaria a resposta de Ezra Obiwale porque isso é essencialmente criar um novo ID de cliente logo após adicionar algumas APIs.

Se alguém souber uma explicação do porque isso acontece, agradecemos.


1

Crie credenciais de autorização

Qualquer aplicativo que usa OAuth 2.0 para acessar APIs do Google deve ter credenciais de autorização que identificam o aplicativo para o servidor OAuth 2.0 do Google. As etapas a seguir explicam como criar credenciais para seu projeto. Seus aplicativos podem então usar as credenciais para acessar APIs que você habilitou para aquele projeto.

  1. Vá para a página Credenciais .
  2. Clique em Criar credenciais> ID do cliente OAuth.
  3. Selecione o tipo de aplicativo da Web.
  4. Complete a forma. Os aplicativos que usam JavaScript para tornar autorizada Google solicitações de API devem especificar origens autorizadas JavaScript . As origens identificam os domínios dos quais seu aplicativo pode enviar solicitações ao servidor OAuth 2.0.

0

Eu estava tendo exatamente o mesmo problema - a solução para mim era acessar o API Manager e habilitar a API Analytics. Não tenho certeza de qual era o problema, mas parece que o corrigiu!


2
Eu habilitei a API do Analytics, mas nada mudou. : C
DreamGamer

0

Acredito que isso tenha a ver com cache, tente ir para o seu navegador e limpar o cache, tente: no cromo,> configuração> avançado> limpar dados de navegação:>: imagens e arquivos em cache.


0

Uma das razões pelas quais não funcionou é o número excedido (100) de logins em certos client ID.

Você pode visitar a página do console de API do Google e criar novas credenciais de cliente Oauth2 (lembre-se de adicionar o URL de seus aplicativos em Authorized Javascript Origins) e, em seguida, usá-lo.


0

Eu estava tendo os mesmos problemas até que percebi quando copiei o client_ID, havia um espaço em branco no meu arquivo, então removi o espaço em branco da string e tudo está funcionando bem agora.


0

Eu enfrentei o mesmo problema ao trabalhar com o login do Google usando react-social-login em meu localhost. Na origem da lista de permissões, teremos que fornecer http: // localhost: 3000 para que funcione.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.