Google API 클라이언트 ID가 승인되지 않습니다.

Question

YouTube 동영상에 대한 기본 검색을 수행하는 앱을 만들려고합니다. Youtube Data API를 사용하고 있으며 Google 개발자 콘솔에 가서 내 도메인 이름에 대한 클라이언트 ID를 만들었습니다.

Google이 샘플 코드 섹션에 가지고있는 auth.js와 search.js를 다운로드하고 내 클라이언트 ID를 '내 클라이언트 ID'라는 곳에 입력했지만 애플리케이션이 작동하지 않습니다. console.log를 사용했는데 'checkAuth'함수를 지나치지 않는 것 같습니다.

나는 뭔가를 놓치고 있습니까 ?? http://www.vidme.cassandraburnscreative.com/#search 다음

가 auth.js과 함께

var OAUTH2_CLIENT_ID = 'my client ID'; 
var OAUTH2_SCOPES = [ 
    'https://www.googleapis.com/auth/youtube' 
]; 


googleApiClientReady = function() { 
    console.log("googleApiClientReady"); 
    gapi.auth.init(function() { 
    window.setTimeout(checkAuth, 1); 
    console.log("gapi.auth.init"); 
    }); 
} 


function checkAuth() { 
    gapi.auth.authorize({ 
    client_id: OAUTH2_CLIENT_ID, 
    scope: OAUTH2_SCOPES, 
    immediate: true 
    }, handleAuthResult); 
    console.log("checkAuth"); 
} 


function handleAuthResult(authResult) { 
    if (authResult && !authResult.error) { 
    // Authorization was successful. Hide authorization prompts and show 
    // content that should be visible after authorization succeeds. 
    $('.pre-auth').hide(); 
    $('.post-auth').show(); 
    loadAPIClientInterfaces(); 
    console.log("Load Interfaces"); 
    } else { 

    $('#login-link').click(function() { 
     console.log("nope"); 
     gapi.auth.authorize({ 
     client_id: OAUTH2_CLIENT_ID, 
     scope: OAUTH2_SCOPES, 
     immediate: false 
     }, handleAuthResult); 
     console.log("HandleAuthResult"); 
    }); 
    } 
} 

function loadAPIClientInterfaces() { 
    gapi.client.load('youtube', 'v3', function() { 
    handleAPILoaded(); 
    console.log("handleAPILoaded"); 
    }); 
} 

function handleAPILoaded() { 
    $('#search-button').attr('disabled', false); 
} 

function search() { 
    var q = $('#query').val(); 
    var request = gapi.client.youtube.search.list({ 
    q: q, 
    part: 'snippet' 
    }); 

    request.execute(function(response) { 
    var str = JSON.stringify(response.result); 
    $('#search-container').html('<pre>' + str + '</pre>'); 
    }); 
} 

필요하지 않은

<div class="wrapper"> 

<div id="buttons"> 
<p>Search For an Artist:</p> 
     <label> <input id="query" placeholder='+ Add Artist' type="text"/> 
     <button id="search-button" disabled onclick="search()">Search</button> 
     </label> 
</div> 
    <div id="search-container"> 
    </div> 
</div> 

Answer 1

가 연결되는 HTML 또는 search.js : 다음 페이지로의 링크입니다 Oauth2를 사용하여 YouTube API로 무언가를 검색하십시오. api key 만 필요합니다.

샘플 예 :

function googleApiClientReady() { 
    var apiKey = 'YOUR_API_KEY'; 

    gapi.client.setApiKey(apiKey); 
    gapi.client.load('youtube', 'v3', function() { 
     isLoad = true; 
    }); 

    request = gapi.client.youtube.search.list({ 
     q: q, 
     part: 'snippet' 
    }); 
    request.execute(function(response) { 
     //your code to here 
    }); 
} 

당신의 index.html을이 파일을 추가 한 후이 다음 줄을 추가하는 것을 잊지 마십시오 : 문서에서

<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script> 

YouTube API