見出し画像

署名つきcookieの実装方法

-まえがき-

※↑noteの連載で達成することはこちらから

ー本編ー

署名つきcookieとは

cookieに鍵情報を記載して特定の人にだけ送り、その人だけがページやコンテンツを視聴できるようにするための機能です。
cookieは以下のようにサーバーとやりとりする際にHTTPヘッダー内に情報を記録して通信を行います。

以下のページが実装のサンプルです。
https://wwdaisukeee.com/service/buy/index.html

画像3

署名つきcookieを使ったアクセスの流れ

【視聴者側からアクセスするステップ】
視聴者が有料の動画配信サイトにアクセスすると仮定して、説明をします。
(クリックで図は拡大できます)

画像1

1,2 : 動画配信ページのURLを入力してサイトへアクセスしroute53へアクセスするとページの場所を教えてくれます
3 : 動画視聴サイトへアクセス
4: 鍵がないため視聴ページにアクセスできません。
5, 6 : 鍵を取得するためにチケット購入ページへのURLへアクセス、ページの場所をRoute53が教えてくれる。
7,8 : 購入処理をすると、動画配信ページへアクセスるための秘密鍵がユーザーに渡されます。
11, 12 : 秘密鍵を持っているので、動画配信ページにアクセスすることができます。 

【署名つきcookie実装の手順】

署名つきcookieの実装の方法について、cookieに関する箇所を中心に実装の手順を説明していきます。

画像2

ー署名つきCookieの発行手順についてー
1 : CloudFrontのアクセスに必要になる、秘密鍵を作成
メニュー右上のマイセキュリティ資格情報をクリック

画像4

以下の画面が表示されるので、新しいキーペアを作成をクリック。
鍵ファイルを自分のPCにダウンロードすることが出来る。

画像5

ダウンロードすると以下のような鍵ファイルを確認することが出来る。
この鍵を次のステップで、AWSのsecrets managerへ保管する

画像6

2 : cloudfrontで発行した鍵をsecrets managerで保管する
AWSの「secrets manager 」サービスを開くと、以下の画面が表示されます。
新しいシークレットを保存するを選択

画像7

以下の画面が表示されるので、こちらに先ほどダウンロードした鍵ファイルの情報を入力して保存する

画像8

他の箇所については基本設定で問題ありません。
次にこちらに保管した鍵情報を自動で取得してくるためのlambdaの設定を行います。

4 : lambdaで自動で鍵の取得が出来るように設定す
lambdaのサービスを選択して、以下の画面が表示されます。
関数の作成で、自動で鍵を取得するためのプログラムを追加します。

画像9

最初に何をきっかけにしてこのlambdaを作動させるのかを設定します。
(次のステップで説明するAPI gatewayを設定)
API Gatewayにアクセスすれば、このlambdaが動作するようにします

画像10

次にlambdaの実行内容を以下に記録していきます。
プログラムの内容の流れとしては、大まかに
1. 対象のsecrests manager 、cloudfrontを指定
2. secrets manager に保管されている秘密鍵の情報を取得してくる
3. 署名付きcookieを作成(cookieが適用されるURLなども設定)
という流れです。

プログラム内容は以下のサイトを参考とさせていただきました。
https://dev.classmethod.jp/articles/spa-signed-cookie/

画像11


5 : 視聴者にcookieを引き渡すためにAPI gatewayを作成します。

さきほど作成したlambdaにアクセスしてもらうために、API Gatewayを作成します。
このAPI Gatewayはアプリケーションにアクセス出来るようにするための入り口のような役割を果たします。
今回ですと、lambdaの「鍵を自動で取得する」というアプリケーションに対する入り口をここで設定するような形です。

API gatewayのサービスを開き、rest APIを選択します。

画像12

名前を設定し、次へ移行します。

画像13

↓次の画面で、以下のようなタブが出るので、リソースを作成をクリックします。

画像15

↓先ほど作成したリソースに対して、メソッドを作成します。
このメソッドの後に「get」を選択します。

画像14

次に以下の画面が表示されるので、作成したlambdaの関数名を入力してAPI gatewayとの紐づけを行います。

画像16

保存をしたら、
↓次にAPIデプロイを選択します。これでアクセスポイントを作成できます。

画像17

左タブのステージを押すと、先ほど作成したものが表示されています。
右枠の「URLの呼び出し」に表示されているURLをクリックすると、作成したlambaが稼働して、署名つきcookieを取得できるようになります。

画像18

6 : 視聴者が鍵を使ってcloudFrontにアクセスして動画が視聴できるようになります。
さきほど作成したAPI Gateway にアクセスすると以下のようにブラウザの開発ツールで署名つきcookieで取得している内容を確認することができます。
これによって、アクセスに必要な鍵情報が引き渡されるので、対象のcloudfrontにアクセス出来るようになります。

画像19



この記事が気に入ったらサポートをしてみませんか?