JavaScriptを使用してクライアントブラウザからGoogleCloudStorageにアップロードする
Google CloudStorageを使用しています。クラウドストレージにアップロードするために、私はさまざまな方法を見てきました。私が最も一般的に感じる方法は、ファイルがサーバーに送信され、そこからGoogleCloudストレージに送信されることです。
ファイルをユーザーのウェブブラウザからGoogleCloudStorageに直接移動したい。これに関連するチュートリアルが見つかりません。 JavaScript用のGoogleAPIクライアントSDKを読みました。
Google APIリファレンスを調べると、HTTPリクエストを使用してファイルを転送できることが記載されています。しかし、JavaScript用の APIクライアントライブラリを使用してそれを行う方法について混乱しています。
ここの人々はいくつかのコードを共有する必要があります。しかし、私はコードを書いていません。仕事をする方法を見つけることができませんでした。
編集1：テストされていないサンプルコード
だから私はこれに本当に興味を持ち、いくつかのコードを一緒に投げるのに数分かかりました。アクセストークンを取得するために小さなExpressサーバーを構築することにしましたが、それでもクライアントからアップロードを行います。クライアントライブラリの代わりにfetchを使用してアップロードを行いました。
私はGoogleクラウドアカウントを持っていないので、これをテストしていないので、それが機能することを確認できませんが、なぜ機能しないのかわかりません。コードは ここのGitHubにあります 。
実行する前に、それを読み、必要な変更を加えてください。特に、秘密鍵ファイルの場所を指定し、そこにあることを確認する必要があります。また、バケット名をindex.htmlに設定する必要があります。
編集の終わり1
免責事項：私はこれまで、メールの送信にNode.js Googleクライアントライブラリのみを使用しましたが、GoogleのAPIの基本を理解していると思います。
Googleサービスを使用するには、本人確認のためのアクセストークンが必要です。ただし、すべてのユーザーが独自のCloud Storageバケットにアップロードできるようにすることを検討しているため、標準のOAuthプロセスを実行する必要はありません。
Googleは、サービスアカウントと呼ばれるものを提供しています。これは、独自のリソースにアクセスする独自のアプリのインスタンスを識別するために使用するアカウントです。標準のOAuthプロセスでは、サービスに対してアプリを識別し、ユーザーにアプリの使用に同意してもらい（したがって、権限を付与し）、その特定のアクセストークンを取得する必要があります。ユーザー、そしてサービスにリクエストを送信します。サービスアカウントを使用すると、ある意味で私たち自身のユーザーであるため、ユーザーの同意プロセスをスキップできます。サービスアカウントを使用すると、Googleから生成された資格情報を簡単に使用できます。 JWT（JSON Webトークン）を生成するAPIコンソール。これを使用してアクセストークンを取得し、クラウドストレージサービスにリクエストを送信します。 here を参照してください。このプロセスに関するGoogleのガイド。
過去に、 this one のようなパッケージを使用してJWTを生成しましたが、JWTをエンコードするためのクライアントライブラリが見つかりませんでした。主な理由は、ほとんどサーバー上でのみ生成されるためです。ただし、 このチュートリアル を見つけました。これは、一見すると、独自のエンコーディングアルゴリズムを作成するのに十分なようです。
ここで指摘したいのは、アプリを開いてGoogleリソースへの一般の無料アクセスを許可すると、あなたやあなたの組織にとって将来的に有害になる可能性があるということです。これは重大なセキュリティリスクであるため、これまでに見たすべてのチュートリアルで2つの連続したアップロードが実装されています。
私の場合、少なくともサーバーで認証プロセスの最初の部分を実行します。ユーザーがアップロードする準備ができたら、サーバーにリクエストを送信して、サービスアカウントの認証情報を使用してGoogleサービスのアクセストークンを生成します。 、次に、サーバーが生成した新しいアクセストークンを各ユーザーに送信します。このように、認証の負担はサーバーにあり、アップロードのみがクライアントによって行われるため、外部とGoogleアカウントの間にセキュリティのレイヤーが追加されます。
とにかく、アクセストークンを取得したら、Googleが提供する CORS機能 を利用してファイルをバケットにアップロードできます。この機能を使用すると、標準のXHR 2リクエストを使用してGoogleのサービスを使用でき、基本的に JavaScriptクライアントライブラリ の代わりに使用するように設計されています。クライアントライブラリよりもCORS機能を使用したいのは、実装がもう少し簡単で、柔軟性が少し高いと思うからです。 （私はこれをテストしていませんが、fetchはここでもXHR 2と同様に機能すると思います。）.
ここから、ユーザーからファイルと、ファイルに関する必要な情報（読み取り：ファイル名）を取得してから、POSTリクエストをhttps://www.googleapis.com/upload/storage/v1/b/<BUCKET_NAME_HERE>/oに送信する必要があります（ CORS機能ページの認証済みリクエストの作成セクションに従ってURLにアクセストークンが追加されたバケットの名前（もちろん） および オブジェクトの挿入に関するCloudStorage APIドキュメント に従って、本文/クエリ文字列に含めるその他のパラメータ。クラウドストレージサービスのAPIリストは、参照用に here にあります。
私はこれまでこれを行ったことがなく、これをテストする能力がないため、回答に含めるサンプルコードはありませんが、コードをまとめるのに十分明確な投稿であることを願っていますここからは比較的簡単なはずです。
記録を正すために、私はいつもOAuthがかなり混乱していることに気づき、未知のものを恐れて、一般的にそれで遊ぶことを避けてきました。しかし、私は私が思う特にこの投稿の後、ようやくそれをマスターしたので、私はそれで遊ぶための自由な時間を得るのが待ちきれません。
私が言ったことが明確または首尾一貫していない場合はお知らせください。