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

bubble
1

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

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

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

2

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

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

  1. oauth2の認証ページを

https://www.dropbox.com/oauth2/authorize?client_id=<client_id>&token_access_type=offline&response_type=code

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

image
image1476×990 62.2 KB

image
image1476×788 46.9 KB

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

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にアクセスが来て、

{
  "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を取り出して、ユーザーのテーブルとかに保存する必要があります。

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

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

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

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は認証方法に種類があり、もっと簡素なフローもあるかもしれません。
なにかのご参考になれば幸いです:pray:

「いいね！」 1
3

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

「いいね！」 1
4

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

「いいね！」 1