# API Connectorを使ったGoogle Drive, Dropbox連携

**URL:** <https://www.nocode-faq.com/t/topic/2082>\
**Category:** bubble\
**Tags:** api関連\
**Created:** [2021 年 8 月 23 日午前 7:18 UTC](https://www.nocode-faq.com/t/topic/2082 "2021-08-23T07:18:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/ryo/32/1818_2.png) [@Ryo](https://www.nocode-faq.com/u/Ryo)\
**Post date:** [2021 年 8 月 23 日午前 7:18 UTC](https://www.nocode-faq.com/t/topic/2082/1 "2021-08-23T07:18:40Z")

</div>

pdfファイルやjpgファイルをGoogle DriveやDropboxにAPI Connectorを利用して連携する方法を考えています。

条件として、指定したGoogleアカウントへ送信するのではなく、  
ボタンをクリックしたユーザーのGoogle DriveやDropboxにファイルを送るイメージです。

試した方法  
Google Drive、DropBox共にソーシャルログインにて連携させ、ファイル送信することを考えましたが、通常のメールアドレスログイン後に利用することが難しくなります。

---

<div class="post-metadata">

**Author:** ![TaishoKondo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taishokondo/32/4_2.png) [@TaishoKondo](https://www.nocode-faq.com/u/TaishoKondo)\
**Post date:** [2021 年 8 月 23 日午前 9:27 UTC](https://www.nocode-faq.com/t/topic/2082/2 "2021-08-23T09:27:21Z")

</div>

Ryoさんお疲れ様です！！！  
Oauth2という認証方式を利用すれば行けると思います。  
Dropboxしか読んでないですが、おそらくDriveでもいけるはずです。

> **[HTTP - Developers - Dropbox](https://www.dropbox.com/developers/documentation/http/documentation)**
>
> Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Never email yourself a file again!

このドキュメントを読んでまとめた内容になります。もしかすると異なっている場合があります。。。実際にまだbubbleで試せてないので、イメージになるのでご了承ください🙏

1. oauth2の認証ページを

[https://www.dropbox.com/oauth2/authorize?client\_id=](https://www.dropbox.com/oauth2/authorize?client_id=)\<client\_id\>&token\_access\_type=offline&response\_type=code

こういうURLをbubble上でエンドユーザーにクリックしてもらい、トークンを発行してもらいます。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8b500848b28c524a8e9c32fa27f545bf4977e69c.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/625044e51fda0e5396ed89865d32989b1c8835f4.png)

もらったトークンから認証を行うため、API Connectorにて通信を行います。  
トークンをコピペしてもらい、input formとかに貼り付けて送信ボタンを押してもらいます。このトークンだけでは認証はまだ完了しておらず、もうワンステップあります。

```auto
curl https://api.dropbox.com/oauth2/token \
    -d code=<もらったトークン> \
    -d grant_type=authorization_code \
    -d redirect_uri=<REDIRECT_URI> \
    -u <APP_KEY>:<APP_SECRET>

```

このURLにPOSTアクションでデータを送る。  
そうすると、データに設定しているredirect\_uriにアクセスが来て、

```auto
{
  "access_token": "sl.AbX9y6Fe3AuH5o66-gmJpR032jwAwQPIVVzWXZNkdzcYT02akC2de219dZi6gxYPVnYPrpvISRSf9lxKWJzYLjtMPH-d9fo_0gXex7X37VIvpty4-G8f4-WX45AcEPfRnJJDwzv-",
  "expires_in": "13220",
  "token_type": "bearer",
  "scope": "account_info.read files.content.read files.content.write files.metadata.read",
  "account_id": "dbid:AAH4f99T0taONIb-OurWxbNQ6ywGRopQngc",
  "uid": "12345",
}

```

こういうデータが送られてきます。ここで得られるaccess\_tokenを利用して今後UploadAPIとかを叩けるようになるので、それをもとにしてアップロード処理などができるようになります。

redirect\_urlというのは自分のbubbleアプリケーションのエンドポイントである必要があるので、backend workflowで公開しているAPI workflowとかになります。そこで受け取ったJSONからaccess\_tokenを取り出して、ユーザーのテーブルとかに保存する必要があります。

また、このアクセストークンは期限が決まっているため、トークンが切れる可能性があります。そのあたりもチェックしないといけませんね。

この当たり非同期で行われるのでユーザーが送信ボタンをおしたときに同期的に行えるフローではないのでちょっと考えないといけませんね👀

ファイルの送信はこのAPIを叩くことになりそうですかね👀

```auto
curl -X POST https://content.dropboxapi.com/2/files/upload \
    --header "Authorization: Bearer <ここにaccess_tokenを貼り付ける>" \
    --header "Dropbox-API-Arg: {\"path\": \"/Homework/math/Matrices.txt\",\"mode\": \"add\",\"autorename\": true,\"mute\": false,\"strict_conflict\": false}" \
    --header "Content-Type: application/octet-stream" \
    --data-binary @local_file.txt

```

ただAPI Connectorはバイナリを送信できないはずだったので、pdfを正しく送信できるかは微妙です。。。

これで一応pdfは送信できるはずですが、かなりめんどくさいですね。。。

Oauth2は認証方法に種類があり、もっと簡素なフローもあるかもしれません。  
なにかのご参考になれば幸いです🙏

---

<div class="post-metadata">

**Author:** ![TaishoKondo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taishokondo/32/4_2.png) [@TaishoKondo](https://www.nocode-faq.com/u/TaishoKondo)\
**Post date:** [2021 年 8 月 23 日午前 9:36 UTC](https://www.nocode-faq.com/t/topic/2082/3 "2021-08-23T09:36:32Z")

</div>

分かりづらいですね💦  
ぼくも気になるのでまた何かあればお伺いさせてください🙏

---

<div class="post-metadata">

**Author:** ![Ryo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/ryo/32/1818_2.png) [@Ryo](https://www.nocode-faq.com/u/Ryo)\
**Post date:** [2021 年 8 月 23 日午前 9:41 UTC](https://www.nocode-faq.com/t/topic/2082/4 "2021-08-23T09:41:54Z")

</div>

ありがとうございます！  
参考にしながらやってみます！  
詰まったら相談させてください！