【React/Next.js】署名バージョン4でIAM認証を突破!

【React:Next.js】署名バージョン4でIAM認証を突破!
悩んでいる人

Reactで署名バージョン4(Signature V4)を作成してIAM認証を突破したいんだけど、やり方がわからないんだよね…

こんな疑問にお答えします。

  • 本記事の執筆者
プロフィール
  • フリーランスエンジニア(保有資格約20個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • Twitterフォロワー約2,000人
いずみん

本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。

結論、署名バージョン4でIAM認証を突破するのは非常に簡単です。

本記事を読んでもらえれば、Reactで署名バージョン4を作成してIAM認証を突破する方法が理解できるので、早速見ていきましょう!

いずみん

すぐ読み終わるので、是非最後まで読んでみてください。

\ 年収が2倍に?! /

目次

署名バージョン4でIAM認証を突破する方法

早速ですが、署名バージョン4でIAM認証を突破する方法を解説します。

前提

前提は以下になります。

  • 一時クレデンシャル情報はCognitoのIDプールから取得する
  • IAM認証付きのAPIがある ※API Gatewayを利用

CognitoのIDプールとAPI Gatewayの作成については「【Python】ID PoolでAPI GatewayのIAM認証を突破する方法」で解説しています。

React/Next.jsのソースコード

React/Next.jsのソースコードは下記になります。

import axios from "../axios";
import Head from 'next/head'
import Image from 'next/image'
import React, { useState, useEffect } from 'react'
import styles from '../styles/Home.module.css'
import { 
  CognitoIdentityClient,
  GetCredentialsForIdentityCommand,
  GetCredentialsForIdentityCommandInput,
  GetIdCommand,
  GetIdInput,
} from "@aws-sdk/client-cognito-identity";
import { HttpRequest } from '@aws-sdk/protocol-http';
import { Sha256 } from '@aws-crypto/sha256-universal';
import { SignatureV4 } from '@aws-sdk/signature-v4';

export default function Auth() {
  const [response, setResponse] = useState('');

  useEffect(() => {
    auth();
  });

  const auth = async (): Promise<void> => {
    const apiUrl = new URL('https://*****.execute-api.ap-northeast-1.amazonaws.com/api/authorizer/');

    const client = new CognitoIdentityClient({ region: 'ap-northeast-1' });

    // IDプールからidentityIdを取得する
    const idInput: GetIdInput = {
      IdentityPoolId: 'ap-northeast-1:*****',
    };
    const id = await client.send(new GetIdCommand(idInput));

    // identityIdを元に、クレデンシャル情報を取得する
    const credentialsForIdentityCommandInput: GetCredentialsForIdentityCommandInput = {
      IdentityId: id.IdentityId,
    };
    const credentialsForIdentity = await client.send(new GetCredentialsForIdentityCommand(credentialsForIdentityCommandInput));

    // 署名V4を作成する
    const signatureV4 = new SignatureV4({
      service: 'execute-api',
      region: 'ap-northeast-1',
      credentials: {
        accessKeyId: credentialsForIdentity.Credentials?.AccessKeyId!,
        secretAccessKey: credentialsForIdentity.Credentials?.SecretKey!,
        sessionToken: credentialsForIdentity.Credentials?.SessionToken!
      },
      sha256: Sha256,
    });

    // HTTPリクエストを作成する
    const httpRequest = new HttpRequest({
      headers: {
        host: apiUrl.hostname,
      },
      hostname: apiUrl.hostname,
      method: 'GET',
      path: apiUrl.pathname,
    });

    // 署名リクエストを作成する
    const signedRequest = await signatureV4.sign(httpRequest);

    // APIを実行する
    axios.get('https://*****.execute-api.ap-northeast-1.amazonaws.com/api/authorizer/', {
      headers: {
        authorization: signedRequest.headers.authorization,
        'x-amz-content-sha256': signedRequest.headers['x-amz-content-sha256'],
        'x-amz-date': signedRequest.headers['x-amz-date'],
        'x-amz-security-token': signedRequest.headers['x-amz-security-token'],
      }
    })
    .then((response) => {
      setResponse(JSON.stringify(response.data));
    })
    .catch((error) => {
      console.log(error)
    });
  };

  return (
    <div>
      { response }
    </div>
  )
}
いずみん

↑のコードを使えばIAM認証を突破できます。
色々ハマって1日かかりました。。

よくある質問|署名バージョン4でIAM認証を突破する方法

署名バージョン4の公式ドキュメントはありますか?

下記になります。

まとめ|署名バージョン4でIAM認証を突破するのは簡単

今回は、Reactで署名バージョン4を作成してIAM認証を突破する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • IDプールを使うことで一時的な権限を払い出せる。
  • AWSのライブラリを使えば署名処理は簡単。

この記事があなたのお役に立てば幸いです。

サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。

最後までお読みいただきありがとうございました!

最後に

僕が個人的におすすめするReactエンジニア向けのフリーランスエージェントをご紹介します。

いずみん

エンジニアで実務経験のある方(目安は3年)はフリーランスも視野に入れましょう。

僕自身、フリーランスになって収入が2倍(年収+280万)になりました。

あなたの貴重なスキルを安売りしないようにしましょうね!

初めてのフリーランスなら「レバテックフリーランス」

総合評価案件数(公開)面談
約40,000件無料
マージン率単価アフターフォロー
10〜20%あり
Good Point
  • 国内最大級のフリーランスエージェント
  • 案件数は約40,000件(国内最多)
  • 高単価案件が豊富
  • マージン率は10〜20%

は国内最大級のフリーランスエージェントです。

高単価案件が豊富で、初めてフリーランスになる方におすすめのエージェントです。

いずみん

僕も最初はレバテックを利用しましたが、おかげさまで収入が約1.5倍になりました(笑)。

正社員並みの保証なら「Midworks(ミッドワークス)」

総合評価案件数(公開)面談
約3,000件以上無料
マージン率単価保証
非公開
Good Point
  • 正社員並みの手厚い保証
  • 給与保証あり
  • 非公開案件が豊富
  • マージン率は一律20%

正社員並みの手厚い保証を受けたい方におすすめのエージェントです。

非公開案件が豊富で給与保証も付いているので、安心してフリーランスにチャレンジできますよ!

いずみん

ちなみに僕はMidworks経由でフルリモート案件に参画できました!
営業担当の方も真摯に対応してくれて非常に助かりました。

【React:Next.js】署名バージョン4でIAM認証を突破!

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次