GPTsのActionsからOAuthを通してGoogleのAPIを叩いてみた

こんにちは。
penguinmanです。

[前回](https://qiita.com/penguinman/items/24117ed285bd498f6a2f)はOpenAIのAssistants APIを使って蒙古タンメン中本について答えてくれるスプレッドシートの関数を作りました。
今回はGPTsの方でOAuthを通してGoogleのAPIを叩いてみたのでそれについて共有します。

# 目次
[何を作ったか？](#何を作ったか)
[どうやって作ったか？](#どうやって作ったか)
[作成手順](#作成手順)
- [Google APIの準備](#google-apiの準備)
- [OAuth準備](#oauth準備)
- [GPTsの設定](#gptsの設定)
- [OAuth](#oauth)

[Done](#done)


# 何を作ったか？

![記事4-1. 何を作ったか（改）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/a2b7579a-0a86-6561-3b80-7ba4354f971c.png)


上記のような形で「APIを叩いてください」と指示するとGoogle Apps Script（以降GASと略します）のプロジェクトを新規で作成してくれます。APIとしては[Apps Script API](https://developers.google.com/apps-script/api/reference/rest/v1/projects/create?hl=ja)を叩いています。

# どうやって作ったか？
OpenAIのGPTsの[Actions](https://platform.openai.com/docs/actions)を使ってAPIを叩きました。単にGPTsからAPIを叩いただけですが、OAuthを通すのが少し煩雑なのでその部分を重点的にお伝えしようと思います。

# 作成手順
まず、作業の概略をお示しすると以下の4ステップになります。特に最後のOAuthのところで私は詰まったので細かく説明したいと思います。

![記事4-2.5. 作業概略.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/87582b58-64c8-552b-1572-64e1388a4ef2.png)


## Google APIの準備
今回はApps Script APIを使うのでGoogle Cloud Consoleの[こちら](https://console.cloud.google.com/marketplace/product/google/script.googleapis.com)からApps Script APIを「有効にする」を押しておいてください。

![記事4-3. Apps Script API有効化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/acc9a0c2-8004-05b0-2722-460fdd0e7cc1.png)

またGoogle Apps Script側でもAPIの有効化が必要なようなので[こちら](https://script.google.com/home/usersettings)からGoogle Apps Script APIをオンにしておいてください。

![記事4-4. Apps Script 有効化2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/81820f7c-f9bd-5df0-895a-45ccea6eb880.png)

## OAuth準備
続いてOAuthクライアントIDを作成します。[こちら](https://console.cloud.google.com/apis/credentials)から作成画面に入ってください。画面に入ったら「認証情報を作成」を押して「OAuthクライアントID」を押してください。

![記事4-5. OAuthに入る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/115a3c2f-8e0f-5352-e4f5-671a9d06b68e.png)

設定画面に入ったらアプリケーションの種類は「ウェブアプリケーション」を選択し、名前は適当につけてください。設定が終わったら「作成」を押してください。

![記事4-6. OAuthクライアント設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/87d7b89d-fc24-d313-7621-3ab5167e2051.png)

すると最初の画面に戻ってくるはずなので、もう一度作成したIDをクリックします。
![記事4-7. OAuth新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/8a6b91f3-3cc8-bc42-4eaa-bcf508ef7f83.png)

下の画像のようにクライアントIDに関する情報がみれると思います。水色で隠してあるクライアントIDとクライアントシークレットは後ほど使用します。また赤く囲った部分は後ほど入力します。そのためこの画面は作業が終わるまで開いておいてください。

![記事4-8. ID情報（改）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/9acec34b-c5ac-ca15-e804-f1df6e8aef86.png)

## GPTsの設定
先ほどのOAuthクライアントIDの画面は開いたまま、別のウィンドウでGPTs作成画面を開きます。そして「Configure」を押して「Actions」ボタンを押して下記の画面を開いてください。

![記事4-9. schema.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/5f20d3ba-4a31-5d6f-60e8-11cb772d5465.png)

すると「Schema」の部分が空になっていると思いますので以下のコードをコピペしてください。

```
{
  "openapi": "3.1.0",
  "info": {
    "title": "Create GAS Project",
    "description": "Create GAS Project",
    "version": "v1.0.0"
  },
  "servers": [
    {
      "url": "https://script.googleapis.com"
    }
  ],
  "paths": {
    "/v1/projects": {
      "post": {
        "description": "Create GAS project",
        "operationId": "CreateProject",
        "parameters": [
          {
            "name": "title",
            "in": "query",
            "description": "GAS project name",
            "required": true,
            "schema": {
              "type": "string"
            }
          }
        ],
        "deprecated": false
      }
    }
  },
  "components": {
    "schemas": {}
  }
}
```


さて、いよいよ本題です。
先ほどの「Schema」の下に「Authentication」があるので「Edit」をクリックしてください（上の画像にも映っています）。

すると下図のような設定画面になりますので、クライアントIDとクライアントシークレットを入力します。クライアントIDの画面はこの後も使うのでまだ閉じないでください。

![記事4-10. OAuth設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/c1551c16-f2f8-505c-1cfc-0756c4e210c7.png)

その他の項目は以下のように入力してください。

```markdown:Authorization URL
https://accounts.google.com/o/oauth2/auth
```
```markdown:Token URL
https://www.googleapis.com/oauth2/v4/token
```
```markdown:Scope
https://www.googleapis.com/auth/script.projects
```

Token Exchange Methodはデフォルトのままで大丈夫です。
上記の設定を行ったら「save」ボタンを押します。
これでGPTsでの設定は終了で、ここからチャットを進めながら認証を行います。

## OAuth
さてここからチャットを通してOAuthを通していきたいと思います。
まずは「Actionsに記載したAPIを叩いてください」とプロンプトに入力し、GPTsにAPIを叩かせてください。すると下記の画面の赤い四角ようにサインインを求められるはずです。サインインボタンを押してください。

![記事4-11. サインイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/6815e599-c9bf-93a6-864d-5b6451fba191.png)

すると下記のようにエラーが起こるはずです。

![記事4-12. リダイレクト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/9420602d-2a46-e5dc-9bf3-ac7fadea80aa.png)

ここでもう一つ設定が必要になります。上記のエラー画面からブラウザバックしてGPTsの画面に戻ると下の画像のようにCallback URLというのが見えるかと思います。こちらをコピーしてください。

![記事4-13. コールバックURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/e67c2525-de23-dff8-934c-5f8cb88d55b0.png)

コピーしたCallback URLをクライアントIDで見えていた「URLを追加」の部分に貼り付けます。

![記事4-14. URL貼り付け.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/75da8305-d7c4-c3f8-eb68-0218c56051af.png)

クライアントIDの画面でURLを貼り付けて「保存」を押したらしばらくお待ちください。私の場合、5分くらい待ちました。こちらのURLの設定が反映されるまで少しラグがあるようです。

さて、再びGPTsの画面に戻り、もう一度APIを叩くプロンプトを入力してください。また、サインインを求められるはずです。しかし、今度はGoogle Accountの認証画面に入れるはずなので、全て許可をしてください。

![記事4-15. 再度サインイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/df5375b9-c594-0b31-0d66-eb8b3b03afe5.png)

Googleの認証が終わると謎のアラートが出てChatGPTの画面に戻されると思います。うまくいっているので安心してください。

![記事4-16. 戻される.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/a5e75a69-4696-c9fc-06ea-13b51e3317b9.png)

再度、GPTsの画面に戻ってAPIを叩きます。APIを計3回叩いていますがこれで最後です。
今度はサインインではなく「Allow」のボタンが出ると思いますので押します。

![記事4-17. allow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/f64c1db8-fe6c-dedc-24ec-67b56170ee97.png)

すると下記のように、GASのプロジェクトが新規作成されると思います🙇

![記事4-1. 何を作ったか（改）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619737/a2b7579a-0a86-6561-3b80-7ba4354f971c.png)

# Done
OAuthにはかなり苦労しましたがなんとかGoogleのAPIが叩けたのでここから効率化が捗りそうです！
この記事が少しでも皆様のお役に立てることを願っております。

それではまた！！