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


こんな悩みを解決できる記事を書きました!
僕は現役フリーランスエンジニア(歴10年)で、資格は13個保有しています。
結論、署名バージョン4でIAM認証を突破するのは非常に簡単です。


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



すぐ読み終わるので、ぜひ最後まで読んでくださいね♪
【当サイト】おすすめフリーランスエージェント3選 | |||
---|---|---|---|
エージェント | 評価 | ポイント | 公式サイト |
![]() ![]() レバテックフリーランス ![]() ![]() | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
![]() ![]() Midworks ![]() ![]() | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
![]() ![]() ITプロパートナーズ ![]() ![]() | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
署名バージョン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日かかりました…
【当サイト】おすすめフリーランスエージェント3選 | |||
---|---|---|---|
エージェント | 評価 | ポイント | 公式サイト |
![]() ![]() レバテックフリーランス ![]() ![]() | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
![]() ![]() Midworks ![]() ![]() | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
![]() ![]() ITプロパートナーズ ![]() ![]() | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【厳選】フリーランスエンジニアにおすすめなエージェント3選


フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。



エージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス


」

- 業界最大級の案件数。
- 業界トップクラスの高単価報酬、低マージン(平均年収862万円)。
- 案件参画中のフォローの充実。
※詳細は「【業界最大手】レバテックフリーランスとは?メリットや利用手順を解説!」を参照。
レバテックフリーランス
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです!



僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ(僕はJavaの経験3年でも案件を貰えました)。
手厚い保障を重視したいなら「Midworks


」

- 手厚い保障で正社員並みの安心感。
- 還元率60%超え&単価公開でクリアな契約。
- 給与保障制度(審査あり)。
Midworks
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。



僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ


」

- IT案件に特化したフリーランスエージェント。
- 週2〜3日の案件が豊富。
- リモート案件が多く、直エンドなので単価も高い。
※詳細は「【週2・3案件】ITプロパートナーズとは?メリットや利用手順を解説!」を参照。
ITプロパートナーズ
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。



週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました!
よくある質問
署名バージョン4の公式ドキュメントはありますか?
下記になります。
まとめ
今回は、Reactで署名バージョン4を作成してIAM認証を突破する方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Reactの勉強なら「React.js&Next.js超入門 第2版



最後までお読みいただき、ありがとうございました!
【当サイト】おすすめフリーランスエージェント3選 | |||
---|---|---|---|
エージェント | 評価 | ポイント | 公式サイト |
![]() ![]() レバテックフリーランス ![]() ![]() | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
![]() ![]() Midworks ![]() ![]() | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
![]() ![]() ITプロパートナーズ ![]() ![]() | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本



海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。