Google Docs APIとの連携

[noko]

何を実現したいのかを書きましょう

レコードの内容をGoogleDocsに書き出したい

以下の記事を参考に、Google側の設定およびJSを実装しましたが、ポップアップ表示されるGoogle認証後にエラーとなりAPIを実行できない状況です。

kintone 見積書アプリからGoogleスプレッドシートで帳票出力してみよう！

発生した問題やエラーメッセージを具体的に書きましょう

[y_minamitani9534 (Yuki_Minamitani)]

noko さん
こんにちは、解決のお手伝いをさせていただきたいのですが、もう少し詳しく書いていただけると糸口をつかめるかもしれませんので是非お願いしたいと考えております。
まず、GoogleのAPIキー及びドキュメントIDなど除いたソースコードを貼っていただけると幸いです。
また、エラーとしてはグーグルにログインを押した後にでますか？それまでは何もエラーでませんか？

あと一つ気になったのが、参考にされているのがGoogleスプレットシートだと思われますが、APIを送信するURLがDocs と スプレットシートは違うようです。
以下のURLを参考にしてみてください。
https://developers.google.com/docs/api/reference/rest?hl=ja

以上またご返信いただければ幸いです。

[jurippe]

@noko さん

この記事そのままアプリを作ったことがあって、Googleの認証ができなくなったのかなぁと思って動かしてみたんですが、問題なくスプレッドシートに見積書が作成できました。
ちなみにそのエラーメッセージ、私も出てますが関係なく見積書が作成できました。

「参考に」だと、nokoさんが入れ込んだ「オリジナル要素」が動かなくしている原因かもしれないので、

@y_minamitani9534 さんがおっしゃるように、もう少し詳しく書いていただけるといいと思います！

[noko]

@y_minamitani9534 さん @jurippe さん

ご確認いただきありがとうございます。
コードは以下の通りです。

    // API キー
    const API_KEY = 'XXXXXXXXXXXX';
    // クライアントID
    const CLIENT_ID = '1234567.apps.googleusercontent.com';
    // ログイン状態監視用
    let tokenClient = false,
        gapiInited = false,
        gisInited = false;
    // ログイン準備ができたら実施
    const checkBeforeStart = () => {
        if (gapiInited && gisInited) {
            handleLoginClick();
        }
    };

    const loadGapi = () => {
        gapi.load('client', intializeGapiClient);
    };

    const intializeGapiClient = async() => {
        await gapi.client.init({
            apiKey: API_KEY,
            discoveryDocs: ['https://docs.googleapis.com/$discovery/rest?version=v1'],
        });
        gapiInited = true;
        console.log('initializeGapiClient');
        checkBeforeStart();
    };

    const loadGsi = () => {
        tokenClient = google.accounts.oauth2.initTokenClient({
            client_id: CLIENT_ID,
            scope: 'https://www.googleapis.com/auth/documents',
            callback: (tokenResponse) => {
                if (tokenResponse && tokenResponse.access_token) {
                    gapi.client.setApiKey(API_KEY);
                }
            }, // defined later
        });
        gisInited = true;
        checkBeforeStart();
    };

    // Googleログイン準備
    const initClient = () => {
        loadGapi();
        loadGsi();
    };

    // Googleログインボタンクリック(今回は自動ログイン)
    const handleLoginClick = () => {
        tokenClient.callback = async(resp) => {
            if (resp.error !== undefined) {
                throw resp;
            }
        };
        if (gapi.client.getToken() === null) {
            tokenClient.requestAccessToken({ prompt: 'consent' });
        } else {
            tokenClient.requestAccessToken({ prompt: '' });
        }
    };

    kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {

        initClient();

        return event;
    });

エラーとしてはグーグルにログインを押した後にでますか？それまでは何もエラーでませんか？

「グーグルにログイン」→「cybozu.com が Google アカウントへの追加アクセスを求めています」の後にエラーが出ます。

ちなみにそのエラーメッセージ、私も出てますが関係なく見積書が作成できました。

こちらでもエラーを気にせず、「gapi.client.docs.documents.create({})」を実行したところ作成成功のレスポンスが返却されました・・！
エラーが出ていることで処理続行不可だと思い込み、Docs APIにリクエストを試しておりませんでした。

[y_minamitani9534 (Yuki_Minamitani)]

@noko さん
こんにちは、返信遅くなり申し訳ないです。
コードの記載ありがとうございます。
そちらの中で気になった点がございましたので、早速回答させて頂きますね！

早速ですが以下に↓

 //↓'client' を 'client:auth2' に変更
    const loadGapi = () => {
        gapi.load('client:auth2', intializeGapiClient);
    };

 //↓await gapi.client.init の中を修正しました。Scopeを指定してみてください。
 //gapi.loadにreturnしないと引数に認証情報渡せないと思います。現状でデバックしてみると恐らくintializeGapiClientは空の情報になってると思います。
    const intializeGapiClient = async() => {
        const client_auth = await gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: ['https://docs.googleapis.com/$discovery/rest?version=v1'],
            scope: SCOPES
        });
        gapiInited = true;
        console.log('initializeGapiClient');
        checkBeforeStart();
        return client_auth;
    };

一応軽く見た感じ私が使っている他のGAPIサービスを見比べてみて、修正点はこちらかなと感じております。
お試しいただいてまた結果教えていただける幸いでございます！