次のコードサンプルでは、JavaScript の Google API クライアント ライブラリを使用しています。このサンプルは、GitHub の YouTube API コードサンプル リポジトリの javascript
フォルダからダウンロードできます。
このコードでは、https://www.googleapis.com/auth/yt-analytics.readonly
スコープにアクセスする権限がユーザーにリクエストされます。
return gapi.auth2.getAuthInstance() .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"}) ...
アプリケーションで他のスコープへのアクセスをリクエストする必要が生じることもあります。たとえば、YouTube Analytics API と YouTube Data API を呼び出すアプリケーションで、YouTube アカウントへのアクセスをユーザーに許可しなければならない場合があります。承認の概要では、YouTube Analytics API を呼び出すアプリケーションでよく使われるスコープを識別します。
毎日のチャンネル統計情報を取得する
この例では、YouTube Analytics API を呼び出して、2017 年に承認されたユーザーのチャンネルについて、1 日あたりの視聴回数などの指標を取得します。このサンプルでは、Google API JavaScript クライアント ライブラリを使用します。
認証情報を設定する
このサンプルをローカルで初めて実行する前に、プロジェクトの認証情報を設定する必要があります。
- Google API Console でプロジェクトを作成または選択します。
- プロジェクトで YouTube Analytics API を有効にします。
- [認証情報] ページの上部で、[OAuth 同意画面] タブを選択します。メールアドレスを選択し、まだ設定していない場合はプロダクト名を入力して、[保存] ボタンをクリックします。
- [認証情報] ページで [認証情報を作成] ボタンをクリックし、[OAuth クライアント ID] を選択します。
- アプリケーションの種類として [ウェブ アプリケーション] を選択します。
- [承認済みの JavaScript 生成元] に、コードサンプルを送信する URL を入力します。たとえば、
http://localhost:8000
やhttp://yourserver.example.com
などを使用します。[承認済みのリダイレクト URI] フィールドは空白のままでもかまいません。 - [作成] ボタンをクリックして、認証情報の作成を完了します。
- ダイアログ ボックスを閉じる前に、クライアント ID をコピーします。この ID はコードサンプルに含まれています。
サンプルのローカルコピーを作成する
次に、サンプルをローカル ファイルに保存します。サンプルで次の行を探し、YOUR_CLIENT_ID を、認証情報の設定時に取得したクライアント ID に置き換えます。
gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
コードの実行
これで、サンプルを実際にテストする準備ができました。
- ウェブブラウザでローカル ファイルを開き、ブラウザでデバッグ コンソールを開きます。2 つのボタンを含むページが表示されます。
- [Authorize and load] ボタンをクリックして、ユーザー認証フローを起動します。アプリがチャンネル データを取得することを承認すると、ブラウザのコンソールに次の行が表示されます。
Sign-in successful GAPI client loaded for API
- 上記の行の代わりにエラー メッセージが表示された場合は、プロジェクト用に設定した承認済みのリダイレクト URI からスクリプトを読み込んであり、前述のとおりクライアント ID をコードに挿入していることをご確認ください。
- [execute] ボタンをクリックして API を呼び出します。ブラウザに、
response
オブジェクトがコンソールに表示されます。そのオブジェクトのresult
プロパティは、API データを含むオブジェクトにマッピングされます。
サンプルコード
<script src="https://apis.google.com/js/api.js"></script> <script> function authenticate() { return gapi.auth2.getAuthInstance() .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"}) .then(function() { console.log("Sign-in successful"); }, function(err) { console.error("Error signing in", err); }); } function loadClient() { return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2") .then(function() { console.log("GAPI client loaded for API"); }, function(err) { console.error("Error loading GAPI client for API", err); }); } // Make sure the client is loaded and sign-in is complete before calling this method. function execute() { return gapi.client.youtubeAnalytics.reports.query({ "ids": "channel==MINE", "startDate": "2017-01-01", "endDate": "2017-12-31", "metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained", "dimensions": "day", "sort": "day" }) .then(function(response) { // Handle the results here (response.result has the parsed body). console.log("Response", response); }, function(err) { console.error("Execute error", err); }); } gapi.load("client:auth2", function() { gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'}); }); </script> <button onclick="authenticate().then(loadClient)">authorize and load</button> <button onclick="execute()">execute</button>