JS Google Client library ～GoogleのJSクライアントライブラリを使う～

イントロダクション

ここではYoutube Data APIを使用するためのサンプルコードが動かなかったので、それを動かすための調査を行いました。

まずは、下のコードでエラーが出ていなので根本的なところを見直します。

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

このコードでは、「gapi.client」以降のプロパティ(youtube以降)が参照できないのでそれを解決するっための調査を行いました。まずは使用している「クライアントライブラリ」に関して調べてみました。

すると、「youtube」というプロパティがなくなったのか。。。まぁ、ありませんでした。詳細は以下に記載します。

クライアントライブラリ

JavaScriptでのGoogle Client libraryを使用して各種Google APIを使用したいと考えています。
※githubを参考にしています。

概要

JavaScript用のGoogleAPIクライアントライブラリは、JavaScriptクライアントアプリケーション開発者向けに設計されています。多くのGoogleAPIへのシンプルで柔軟なアクセスを提供します。
JavaScriptクライアントライブラリを使用して、WebアプリケーションからPeople、Calendar、DriveなどのGoogleAPIを操作できます。開始するには、このページの指示に従ってください。

入門

JavaScriptクライアントライブラリを使用してAPIリクエストを作成する方法はいくつかありますが、それらはすべて同じ基本パターンに従います。

1. アプリケーションはJavaScriptクライアントライブラリをロードします。
2. アプリケーションは、APIキー、OAuthクライアントID、およびAPIディスカバリドキュメントを使用してライブラリを初期化します。
3. アプリケーションは要求を送信し、応答を処理します。

APIリクエストを行う方法

Step1: ライブラリをロードする

サンプルコードです。

<script src="https://apis.google.com/js/api.js"></script>
<script>
function start() {
  // 2. Initialize the JavaScript client library.
  gapi.client.init({
    'apiKey': 'YOUR_API_KEY',
    // Your API key will be automatically added to the Discovery Document URLs.
    'discoveryDocs': ['https://people.googleapis.com/$discovery/rest'],
    // clientId and scope are optional if auth is not required.
    'clientId': 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    'scope': 'profile',
  }).then(function() {
    // 3. Initialize and make the API request.
    return gapi.client.people.people.get({
      'resourceName': 'people/me',
      'requestMask.includeField': 'person.names'
    });
  }).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });
};
// 1. Load the JavaScript client library.
gapi.load('client', start);
</script>

サンプルコードの「'YOUR_API_KEY'」と「'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com'」の部分にそれぞれの値を入力する。
各API(今回はYoutube Data API)の認証情報ページからAPIキーとクライアントIDを設定、取得ができます。

しかし、エラーが。。。

参考サイトのコードでは下のようになっていましたが。。。

}).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });

それを修正して、次のようにしたら、原因がわかりました。

  }).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason);
  });
};

【出力結果】

{error: 'idpiframe_initialization_failed', details: "Not a valid origin for the client: https://zenryok…egister this origin for your project's client ID."}
details: "Not a valid origin for the client: https://zenryokuservice.com has not been registered for client ID XXXXXXXX.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."
error: "idpiframe_initialization_failed"

つまりは実行するURLが登録されていないということでした。

調べてみるとOAUTH2.0の設定ができていないのが原因であろうということでした。

OAUTH2.0の設定

googleのページを参考にします。
認証情報を設定してやると結局は、クライアントIDが作成されるので、初めに作成したクライアントIDで問題はなさそうです。
改めてエラーメッセージを見てみるとJSONで、返却されていました。その内容は下のようになっていました。

{
  "error": {
    "code": 403,
    "message": "People API has not been used in project XXXX before or it is disabled. 
    Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=XXX then retry. 
    If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.Help",
        "links": [
          {
            "description": "Google developers console API activation",
            "url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=XXX"
          }
        ]
      },
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "SERVICE_DISABLED",
        "domain": "googleapis.com",
        "metadata": {
          "consumer": "projects/XXXX",
          "service": "people.googleapis.com"
        }
      }
    ]
  }
}

調べてみると「Google People API」を使用するようです。そしたら、そのままリクエストを送信したほうが良いので、Googleクライアントライブラリを使用しない形で実装することにします。

普通にGETリクエスト

こちらの動画を参考に検索リクエストを送信してみました。
すると、クォータが超過したようで、テストできなくなりました。

error:
code: 403
errors: [{…}]
message: "The request cannot be completed because you have exceeded ...

これは日を改めて実行すれば、大丈夫なので、今日はここまでにしようと思います。