Google calendar apiで404になる

前提・実現したいこと

Googleカレンダーapiを使って、カレンダーから予定を取得したいです。

こちらを参考に、Monacaを使って作っており、このサイトに載っているサンプルコードは正常に動作しました。

しかし私がしたいことはカレンダーから予定を取得することなので、サンプルコードのカレンダーIDを日本の休日のものから、自分のカレンダーIDに変更したところ、404エラーを出すようになりました。
(カレンダーIDはGoogleカレンダートップ > マイカレンダー > テスト用に新しく作成したカレンダーのオーバーフローメニュー(三つの点のアイコン) > 設定と共有 > カレンダーの統合 > カレンダーIDの手順で取得しました)

404エラーを出さないようにするためにはどのようにすればいいでしょうか？

試したこと

・apiに渡しているURLにアクセスしてみると以下のような結果になったため、ページが存在していないわけでは無さそうでした。

{
  "error": {
    "code": 403,
    "message": "The request is missing a valid API key.",
    "errors": [
      {
        "message": "The request is missing a valid API key.",
        "domain": "global",
        "reason": "forbidden"
      }
    ],
    "status": "PERMISSION_DENIED"
  }
}

・apiのドキュメントの横にある「Try this API」の部分でソースコードで使用しているcalendarIDを使って試したところ、ちゃんと予定が取得できました。

・エラー一覧の404の項目を確認しましたが、原因がよく分かりませんでした。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script src="https://apis.google.com/js/api.js"></script>
11    <script>
12      var calendar_api_key = 'xxxxxxxxxxxxxxxxx';
13      var calendar_id = 'xxxxxxxxxxxxxxx@group.calendar.google.com';
14      var event_url = 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(calendar_id) + '/events';
15
16      function start() {
17        console.log(event_url);
18        gapi.client.init({
19          'apiKey': calendar_api_key,
20        }).then(function() {
21          return gapi.client.request({
22            'path': event_url
23          })
24        }).then(function(response) {
25          let resultArea = document.getElementById('resultArea');
26          let items = response.result.items;
27          for(let i = 0; i < items.length; i++){
28            console.log(items[i].summary + ' ' + items[i].start.dateTime);
29          }
30        }, function(reason) {
31          console.log('reason: ' + reason.result.error.errors[0].reason);
32          console.log('ErrorCode: ' + reason.result.error.code);
33          console.log('Error: ' + reason.result.error.message);
34        });
35      };
36      gapi.load('client', start);
37
38    </script>
39</head>
40<body>
41    <div id='resultArea'></div>  
42
43</body>
44</html>
45

出力結果
reason: notFound
ErrorCode: 404
Error: Not Found

環境

Monaca
使用言語：JavaScript

行動規範の内容に同意します

回答2件

自己解決

コメントで続けるよりも新しく回答を投稿して、こちらをベストアンサーにした方が結論を見やすい気がするので、新規投稿します。

色々探してみましたが、現状、

Monacaでは公開されているカレンダーのみ、Google calendar apiを利用することができる
認証が必要な行為は一切できない。
認証ができないため、参照するカレンダーはプログラム内で直接指定しなければならない

＝ユーザがカレンダーIDを入力しない限り、ユーザが自由に参照するカレンダーを変更するのは不可能である

という結論に落ち着きました。

一つ目に関してですが、私が行き詰まっていた箇所(詳しくはもう一つの回答を参照)は認証で、認証部分はやはり、私が調べた限りでは現時点で実装する方法は無いようです。そのため、認証が必要になる非公開のカレンダーは利用できません。

ただ、Google calendarの設定からアクセス権限を「一般公開して誰でも利用できるようにする」にすると、最初の投稿で参考として挙げていたこちらのカレンダーIDを適宜変更する方法で、利用できるようでした。
つまり、カレンダーを一般公開にすれば、最初の投稿に掲載しているソースコードで利用できました。

同じことをしている同志は少ないとは思いますが、Monacaで認証が必要なGoogle apiを利用する方の参考になれば幸いです。

投稿2020/11/13 14:18

waribashi

総合スコア30

start関数のgapi.client.initの部分にclient ID(Google APIsのAPIとサービス > 認証情報 > OAuth2.0クライアントIDに表示されているもの)を追加すると、エラー文が以下のように変わりました。
client_id and scope must both be provided to initialize OAuth.

そこで、以下のようにgapi.client.init部分を以下のように変更

JS
1gapi.client.init({
2          apiKey: calendarApiKey,
3          clientId: clientId,
4          scope: 'https://www.googleapis.com/auth/calendar.readonly'
5})

そうすると以下のようにエラーメッセージが変わりました。
Uncaught gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy

このエラーに対する解決策は色々とネットに上がっているようですが、まだ全ては調べ切れていません。今回の投稿は、とりあえずの経過報告です。
こうなった推測ですが、個人のカレンダーを参照しようとすると、スコープとクライアントIDを渡さないといけないのだと思います。参考元では、個人のサイトではなく、日本の祝日という公開されたカレンダーだったので不要だったのかと。

また、上のエラーとは別件になりますが、MonacaでGoogle apiを利用しようとした同志はどのようにこの問題を解決したのか探している最中にこのような質問を見つけました。

Communityによって上がってきたので現状の回答を……

GooglePlusを用いたAPIサービスは、2019年3月7日を以って終了いたしました。
https://developers.google.com/+/api-shutdown?hl=ja

ですので、現在の回答としては実装は出来ないということになります。

Monacaを利用してGoogle apiを利用する時、認証の際にこのGooglePlusを用いたものが多く、それ以外の記事はあまり見当たりませんでした。もしかするとMonacaでGoogle apiを利用できないかもしれません。絶望しています。
まだ解決済みにはしないため、解決策をご存知の方がいらっしゃれば教えていただければ嬉しいです。

投稿2020/11/12 12:42

編集2020/11/12 12:48

waribashi

総合スコア30

waribashi

2020/11/12 15:15

MonacaでGoogle apiを利用するのは絶望的な気がしてきました…… https://www.aimz8.com/jp/?p=37993

waribashi

2020/11/13 14:25 編集

こちらの Uncaught gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy というエラーに関してですが、ネットに書いている解決法は「HTTPサーバで実行すれば解決する」でした。しかしMonacaはそもそもがローカルではなくHTTPサーバで実行されている(デフォルトであればhttp://localhost:8080で動かしていると表示されていた)ようなので、この方法で解決できなさそうでした。それ以外の解決策は、私が調べた範囲では出てきませんでした。そのため、MonacaでGoogle apiの認証を使うことは不可能であると結論づけました。

otak-lab

2020/11/16 15:20

cordova-plugin-googleplusプラグインを使用すればアクセストークンを取得することができます。 https://github.com/EddyVerbruggen/cordova-plugin-googleplus scopeについては、下記を参照してください。 https://developers.google.com/calendar/auth

waribashi

2020/11/17 03:19

ありがとうございます、調べてみます

行動規範の内容に同意します

あなたの回答