クライアントに署名を追加し、データをOSSにアップロードするにはどうすればよいですか? - Object Storage Service

JavaScriptを使用してクライアントに署名を追加し、Object Storage Service (OSS) にデータをアップロードできます。この方法では、クライアントからOSSにオブジェクトを直接アップロードできます。これにより、ワークフローが簡素化され、アップロードが高速化されます。このトピックでは、POSTポリシーに基づいてクライアントに署名を追加し、フォームアップロードを使用してOSSにデータをアップロードする方法について説明します。

使用上の注意

JavaScriptを使用してクライアントに署名を追加した後、OSSにデータをアップロードできます。ただし、AccessKey IDとAccessKeyシークレットはJavaScriptコードに含まれているため、公開される場合があります。サーバーから署名情報を取得してOSSにデータをアップロードするか、STSが提供する一時的な資格情報を使用してOSSにアクセスすることを推奨します。
このトピックで提供されるアプリケーションサーバーコードは、HTML 4、HTML 5、Flash、Silverlightなどのプロトコルをサポートしています。ブラウザがこれらのプロトコルをサポートしていることを確認します。「お使いのブラウザがFlash、Silverlight、またはHTML5をサポートしていません! 」というメッセージが表示された場合は、ブラウザをアップグレードする必要があります。

手順

迅速な展開

Resource Orchestration Service (ROS) を使用して、Elastic Compute Service (ECS) インスタンスとOSSバケットを設定し、ECSインスタンスにクライアントソースコードをデプロイできます。 ROSを使用してPOSTポリシーに基づいてクライアントに署名を追加し、OSSにデータをアップロードするには、次の手順を実行します。

数回クリックするだけでクラウドリソースをデプロイできます。
1. ROSコンソールの [スタックの作成] ウィザードに移動します。
2. ROSコンソールの [スタックの作成] ウィザードの [テンプレートの選択] ステップで、スタック名と作成するOSSバケットの名前を入力します。購入するECSインスタンスのゾーン、インスタンスタイプ、システムディスクカテゴリ、およびパスワードを指定し、作成する をクリックします。
  表示されるページの [スタック情報] タブで、スタックのステータスは [作成中] になります。
3. スタックのステータスが [作成済み] になったら、[出力] タブをクリックして、数回クリックするだけでデプロイされるECSインスタンスやOSSバケットなどのリソースを表示します。
クライアントに署名を追加し、データをOSSにアップロードします。
1. [出力] タブで、UploadPathの値をコピーしてブラウザで開きます。
2. [WebクライアントからOSSへのデータ転送] ページで、[ファイルの選択] をクリックし、特定の種類のファイルを選択し、[アップロード] をクリックします。
不要なコストを回避するためにテストリソースをリリースします。
1. スタックページの右上隅にある削除をクリックします。
2. リソーススタックの削除 ダイアログボックスで、スタックを削除する方法 を リソースのリリース に設定し、決定をクリックします。

手動展開

ステップ1: ブラウザで実行されるクライアントコードをダウンロードする

この例では、フォームデータ (PostObject) をOSSにアップロードするためにPluploadを使用します。 WeChatまたはコンピュータや携帯電話のブラウザで、JavaScriptでサンプルコードを実行できます。複数のオブジェクトを選択し、オブジェクトがアップロードされるディレクトリを指定できます。また、アップロードするオブジェクトの名前がアップロードしたローカルファイルの名前と同じかどうか、または名前がOSSによってランダムに指定されているかどうかを指定することもできます。進行状況バーでアップロードの進行状況を表示できます。

ブラウザークライアントコードパッケージをダウンロードします。
ダウンロードしたパッケージを解凍します。

説明

この例では、フロントエンドプラグインとしてPluploadが使用されています。ビジネス要件に基づいて別のプラグインを使用できます。

ステップ2: 設定ファイルの変更

アクセス設定を変更します。

upload.jsファイルを開き、次のいずれかの方法を使用してアクセス設定を変更します。

RAM ユーザーの使用

// Alibaba CloudアカウントのAccessKeyペアには、すべてのAPI操作に対する権限があります。 これらの資格情報を使用してOSSで操作を実行することは、リスクの高い操作です。 RAMユーザーを使用してAPI操作を呼び出したり、ルーチンのO&Mを実行することを推奨します。RAMユーザーを作成するには、RAMコンソールにログインします。 
accessid= 'yourAccessKeyId';
accesskey= 'yourAccessKeySecret';
// バケットのドメイン名を指定します。 形式: BucketName.Endpoint. 例: http://examplebucket.oss-cn-hangzhou.aliyuncs.com。 
host= 'yourHost';

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': accessid、 
        ....
    };

STS の使用

// Security Token Service (STS) から取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
accessid= 'yourAccessKeyId';
accesskey= 'yourAccessKeySecret';
// バケットのドメイン名を指定します。 形式: BucketName.Endpoint. 例: http://examplebucket.oss-cn-hangzhou.aliyuncs.com。 
host = 'http:// examplebucketbucket.oss-cn-hangzhou.aliyuncs.com ';
// 指定されたロールのAlibaba Cloudリソース名 (ARN) を指定します。 例: acs:ram::137918634953 ****:role/test。 
STS_ROLE = '';

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': STS.accessid、 
        // STSから取得したセキュリティトークンを指定します。 
        'x-oss-security-token':STSToken、
        ....
    };

ロールのARNの詳細については、「AssumeRole」をご参照ください。
STSから一時的なアクセス資格情報を取得する方法の詳細については、「STSが提供する一時的な資格情報を使用してOSSにアクセスする」をご参照ください。

policyText設定を変更して、オブジェクトの有効期間 (有効期限) とアップロードするオブジェクトのサイズ制限 (content-length-range) を変更します。

var policyText = {
    "expiration": "2023-12-01T12:00:00.000Z", // ポリシー内のオブジェクトの有効期間を指定します。 時刻は UTC である必要があります。 有効期間が終了すると、オブジェクトはアップロードできません。 
    "conditions": [
    ["content-length-range", 0, 1048576000] // アップロードするオブジェクトのサイズ制限を指定します。 単位：バイト この例では、サイズ制限は1 GBです。 アップロードするオブジェクトがサイズ制限を超えると、オブジェクトはOSSにアップロードされません。 サイズ制限を指定しない場合は、最大5 GBのサイズのオブジェクトをアップロードできます。 
    ]
}

詳細については、「付録: ポリシー」をご参照ください。

ステップ3: CORSの設定

フォームアップロードを使用してクライアントからOSSにデータをアップロードすると、Originヘッダーを含むリクエストがブラウザーからOSSに送信されます。 OSSは、Originヘッダーを含むリクエストがクロスオリジンリクエストであるかどうかを確認します。したがって、POSTベースのリクエストを許可するには、バケットのクロスオリジンリソース共有 (CORS) ルールを設定する必要があります。

OSSコンソールにログインします。
左側のナビゲーションウィンドウで、バケットリスト をクリックします。 [バケット] ページで、目的のバケットを見つけてクリックします。
左側のナビゲーションウィンドウで、[コンテンツセキュリティ] > [CORS] を選択します。
CORSページで、[ルールの作成] をクリックし、次の図に示すパラメーターを設定します。
重要
データのセキュリティを確保するために、OSSでリクエストを許可する実際のドメイン名を [ソース] フィールドで指定することを推奨します。詳細については、「CORSの設定」をご参照ください。

ステップ4: クライアントに署名を追加し、OSSにデータをアップロードする

解凍されたダウンロードファイルを格納するディレクトリでindex.htmlファイルを開きます。
[ファイルの選択] をクリックして、アップロードする1つ以上のオブジェクトを選択します。次に、オブジェクトの命名規則を選択し、オブジェクトを格納するディレクトリを指定します。
[アップロード] をクリックし、アップロードが完了するまで待ちます。
アップロードが完了したら、OSSコンソールにログインしてアップロードオブジェクトを表示します。

コアコード分析

OSSはPOSTリクエストをサポートしています。 Pluploadを使用してリクエストを送信する場合は、POSTリクエストに署名を追加する必要があります。

説明

コードが期待どおりに実行されるようにするには、キー、success_action_status、およびその他のパラメーターの前にOSSAccessKeyIdパラメーターを配置することを推奨します。

コアコード

関数set_upload_param(up、filename、ret)
{
  g_object_name = g_dirname;
  if (filename != '') {
      suffix = get_suffix(filename)
      calculate_object_name (ファイル名)
  }
  new_multipart_params = {
      'OSSAccessKeyId': accessid、
      'key' : g_object_name、
      'policy': policyBase64、
      'success_action_status ': '200', // success_action_statusを200に設定しない場合、オブジェクトをアップロードするとHTTPステータスコード204が返されます。 
      'signature': signature、
  };

  up.setOption({
      'url': ホスト、
      'multipart_params': new_multipart_params
  });

  up.start();
}
....

アップロードされたオブジェクトの元の名前を保持

'key': g_object_nameは、アップロードされたオブジェクトのパスを指定します。アップロードされたオブジェクトの元の名前を保持する場合は、このフィールドを 'key': '${filename}' に設定します。サンプルコード：

new_multipart_params = {
  'OSSAccessKeyId': accessid、
  'key': '${filename}' 、
  'policy': policyBase64、
  'success_action_status ': '200', // success_action_statusを200に設定しない場合、オブジェクトをアップロードするとHTTPステータスコード204が返されます。 
  'signature': signature、};

オブジェクト名を変更せずに特定のディレクトリにオブジェクトをアップロード

オブジェクト名を変更せずにabcディレクトリなどの特定のディレクトリにオブジェクトをアップロードする場合は、'key': g_object_nameを 'key': 'filepath' + '${filename}'' に設定します。サンプルコード：

new_multipart_params = {
  'OSSAccessKeyId': accessid、
  'key': 'abc/'+'${filename}'、
  'policy': policyBase64、
  'success_action_status ': '200', // success_action_statusを200に設定しない場合、オブジェクトをアップロードするとHTTPステータスコード204が返されます。 
  'signature': signature、};

アップロードされたオブジェクトの名前がOSSによってランダムに指定されることを指定します

OSSでアップロードされたオブジェクトの名前をランダムに指定する場合は、次の関数を呼び出します。

関数check_object_radio() {
    g_object_name_type = 'random_name';
}

アップロードされたオブジェクトの名前の指定

アップロードされたオブジェクトの名前を指定する場合は、次の関数を呼び出します。

関数check_object_radio() {
    g_object_name_type = 'local_name';
}

オブジェクトをアップロードするディレクトリの指定

オブジェクトを特定のディレクトリにアップロードできます。次のサンプルコードは、ディレクトリをabc /に設定する方法の例を示しています。ディレクトリ名はスラッシュ (/) で終わる必要があります。

関数get_dirname() {
    g_dirname = "abc/";
}

よくある質問

アップロードするオブジェクトの形式を指定するにはどうすればよいですか?

Pluploadフィルターを使用して、画像の種類やアップロードするオブジェクトのサイズ制限などのアップロード条件を設定できます。詳細については、「アップロード条件の設定」をご参照ください。

アップロードされたオブジェクトのURLを取得するにはどうすればよいですか?

アップロードされたオブジェクトのURLは、オブジェクトを格納するバケットのドメイン名とオブジェクトパスに基づいて取得できます。詳細については、「オブジェクトとオブジェクトURLの共有」をご参照ください。

アップロードされたオブジェクトのMD5ハッシュを取得するにはどうすればよいですか?

アップロードされたオブジェクトのMD5ハッシュを取得するには、ブラウザの開発者ツールを開き、オブジェクトをアップロードします。次の図に示すように、オブジェクトがアップロードされた後、レスポンスヘッダーにMD5ハッシュが表示されます。