JavaScriptを使用してクライアントブラウザからGoogle Cloud Storageにアップロード

Question

私はGoogle Cloud Storageを使用しています。クラウドストレージにアップロードするには、私はさまざまな方法を見てきました。最も一般的な方法は、ファイルがサーバーに送信され、そこからGoogle Cloudストレージに送信されることです。

ファイルをユーザーのウェブブラウザからGoogle Cloud Storageに直接移動したいとします。私はこれに関連するチュートリアルを見つけることができません。 JavaScriptのGoogle APIクライアントSDKを読んだことがあります。

Google APIリファレンスには、HTTP要求を使用してファイルを転送できることが記載されています。しかし、私はそれを使用して行う方法について混乱していますAPI client library for JavaScript.

ここで人々はいくつかのコードを共有する必要があります。しかし、私はコードを書いていない、私は仕事を行う方法を見つけることに失敗しました。

Answer 1

EDIT 1：未テストサンプルコード

だから私はこの中に本当に興味を持って、一緒にいくつかのコードをスローするように数分を持っていました。私はアクセストークンを取得するために小さなExpressサーバーを構築することに決めましたが、依然としてクライアントからアップロードを行います。私はfetchを使って、クライアントライブラリの代わりにアップロードを行いました。

私はGoogleクラウドアカウントを持っていないため、これをテストしていないため、動作しているかどうかは確認できませんが、なぜそうはならないのかわかりません。コードはon my GitHub hereです。

実行する前にそれを読んで必要な変更を加えてください。特に、秘密鍵ファイルの場所を指定するだけでなく、そこにあることを確認する必要があり、バケット名をindex.htmlに設定する必要があります。編集の

エンド1

免責事項：私は今まで電子メールを送信するためのNode.jsのGoogleクライアントライブラリを使用しましたが、私はGoogleのAPIの基本把握していると思います。

Googleサービスを使用するには、自分の身元を確認するためのアクセストークンが必要です。ただし、すべてのユーザーが独自のCloud Storageバケットにアップロードできるようにするため、標準のOAuthプロセスを実行する必要はありません。

Googleはサービスアカウントと呼ばれるサービスを提供しています。サービスアカウントは、Googleの独自のリソースにアクセスする独自のアプリケーションのインスタンスを識別するために使用するアカウントです。標準のOAuthプロセスでは、私たちのアプリをサービスに指定する必要がありますが、ユーザーが私たちのアプリの使用に同意して（したがって、私たちに許可を与える）、特定のユーザーのアクセストークンを取得してから、 ;サービスアカウントでは、ユーザーの同意プロセスをスキップすることができます。サービスアカウントを使用すると、Google APIコンソールから生成された認証情報を使用してJWT（JSON Webトークン）を生成し、クラウドストレージサービスへのリクエストに使用するアクセストークンを取得することができます。このプロセスに関するGoogleのガイドについては、hereをご覧ください。

以前は、this oneのようなパッケージを使ってJWTを生成しましたが、JWTをエンコードするためのクライアントライブラリは見つかりませんでした。これはほとんどがサーバー上でほとんど独占的に生成されているためです。しかし、私はthis tutorialを見つけました。これは、わかりやすく、独自のエンコーディングアルゴリズムを書くのに十分なようです。

私は私はあなたが考えられてきたと確信しているようにGoogleのリソースへの公共の無料アクセスを許可するようにアプリを開くと、将来的にあなたやあなたの組織にとって有害なるかもしれないことをここで指摘したいと思います。これは大きなセキュリティ上のリスクです。これまでに見たチュートリアルでは2回の連続したアップロードが実装されています。

私の場合は、少なくともサーバー上で認証プロセスの最初の部分を実行します。ユーザーがアップロードする準備ができたら、サーバーにGoogleサービスのアクセストークンを生成するリクエストを送信します私のサービスアカウントの資格情報を取得し、私のサーバーが生成した新しいアクセストークンを各ユーザーに送信します。この方法では、認証の負担が私のサーバーにあり、アップロードだけがクライアントによって行われるため、外界とGoogleアカウントの間にセキュリティの層が追加されています。

はとにかく、一度私たちは私たちのバケットにファイルをアップロードする CORS feature that Google providesを利用することができ、アクセストークンを持っています。この機能により、標準の XHR 2リクエストをGoogleのサービスを使用することができ、基本的に JavaScript client libraryの代わりに使用するように設計されています。 CORS機能をクライアントライブラリに使用するほうが好ましいのは、それがもう少し簡単で実装が少し柔軟だと思うからです。 （私はこれをテストしていませんが、 fetchは XHR 2だけでなくここでもうまくいくと思います）。

ここから、我々は（読み：ファイル名）をユーザーからファイルだけでなく、ファイルに関する彼らから私たちが望むすべての情報を取得する必要があるだろうに置き換え（、その後、https://www.googleapis.com/upload/storage/v1/b/<BUCKET_NAME_HERE>/oにPOST要求を行いますあなたのバケツの名前）を、認証リクエストを作成するセクションのURLに追加したアクセストークンをCORS feature pageとし、含まれるボディ/クエリ文字列内のその他のパラメータをCloud Storage API documentation on inserting an objectとします。クラウドストレージサービスのAPIリストは、参考としてhereです。私はこの前にやったことがない、と私はこれをテストする能力を持っていないので

、私は私の答えを含めるために、任意のサンプルコードを持っていないが、私は私のポストは明らかに十分なものであることを願っていますコードをまとめるのは、ここから比較的簡単です。

ただ、ストレートのレコードを設定するために、私はいつものOAuthはかなり混乱することがわかってきた、と一般的に離れて、その未知数の私の恐怖にそれで遊んでから敬遠しています。しかし、私は最終的には、特にこのポストの後に、それを習得したと思うので、私はそれで遊んで自由な時間を得るために待つことはできません。

私が言った何かがクリアまたはコヒーレントでない場合は私に知らせてください。