<h2 id="he2485005d0">目的</h2>APIの処理をAPIを叩いてきたユーザー名によって変えたいということがありました。そこで、Cognitoでオーソライズを行っているLambda関数にて、API Gatewayの認証情報をLambda(Golang)の中で取得する方法を調べました。<h2 id="hcb9dacb773">結論</h2>以下のコードでユーザー名を取得できます。<pre><code class="language-go">func handler(ctx context.Context, apiGWEvent events.APIGatewayProxyRequest) (events.APIGatewayProxyResponse, error) {

	ユーザー名取得
	diaryGetter := apiGWEvent.RequestContext.Authorizer[&quot;claims&quot;].(map[string]interface{})[&quot;cognito:username&quot;].(string)

  /// ...略
}
</code></pre>割と途中のコードとかが謎ですので、以下に解説を載せておきます。(これより単純に取得できる方法がありましたらご教授いただけると幸いです。)<h2 id="hc499e4ad38">解説</h2>(前提として、LambdaのオーソライザーにCognitoのユーザープールが設定されていることを確認)まず、events.APIGatewayProxyRequestにはどのようなhttpリクエストを受け取ったのかが格納されます。ドキュメントを参照すると、<pre><code class="language-go">type APIGatewayProxyRequest struct {
  Resource            string            `json:&quot;resource&quot;` // The resource path defined in API Gateway
  Path              string            `json:&quot;path&quot;`   // The url path for the caller
  HTTPMethod           string            `json:&quot;httpMethod&quot;`
  Headers             map[string]string       `json:&quot;headers&quot;`
  MultiValueHeaders        map[string][]string      `json:&quot;multiValueHeaders&quot;`
  QueryStringParameters      map[string]string       `json:&quot;queryStringParameters&quot;`
  MultiValueQueryStringParameters map[string][]string      `json:&quot;multiValueQueryStringParameters&quot;`
  PathParameters         map[string]string       `json:&quot;pathParameters&quot;`
  StageVariables         map[string]string       `json:&quot;stageVariables&quot;`
  RequestContext         APIGatewayProxyRequestContext `json:&quot;requestContext&quot;`
  Body              string            `json:&quot;body&quot;`
  IsBase64Encoded         bool             `json:&quot;isBase64Encoded,omitempty&quot;`
}
</code></pre>となっております。参考:[<a href="https://qiita.com/saki-engineering/items/e5cf56301d94ceea3ce0" target="_blank" rel="noopener noreferrer nofollow">GoDoc package aws/aws-lambda-go/events</a>]参考:[<a href="https://qiita.com/saki-engineering/items/e5cf56301d94ceea3ce0" target="_blank" rel="noopener noreferrer nofollow">AWS Lambda+API Gateway+DynamoDBでCRUD APIを作るのをGolangでやってみた</a>]こちらの、RequestContext構造体には、Authorizer情報が`map[string]interface{}`型で入っています。僕が作成したアプリのdev環境用のCognitoの情報を取得してみると、以下の様になっています。<pre><code class="language-go">map[claims:map[aud:tekitoutekitou auth_time:12345678 cognito:username:テスト太郎 event_id:tekitou-d37c-41c9-be67-tekitou exp:Tue May 11 14:18:46 UTC 2021 iat:Tue May 11 13:18:46 UTC 2021 iss:https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-tekitou sub:tekitou-c7e9-4649-ab16-tekitou token_use:id]]
</code></pre>こちらから、claimsキーの中の、cognito:usernameキーがユーザーネームであることがわかります。最初この構造を見たとき、<pre><code class="language-go">diaryGetter := apiGWEvent.RequestContext.Authorizer[&quot;claims&quot;][&quot;cognito:username&quot;]
</code></pre>みたいな感じでとれるんじゃないの？と思ったのですが、これをやろうとすると、<pre><code>invalid operation: cannot index apiGWEvent.RequestContext.Authorizer[&quot;claims&quot;] (map index expression of type interface{})
</code></pre>となってしまいます。interface型の知識が欠如しておりました。&gt; どんな型の値でも受け取れるinterface{}ですが、interface{}型の引数で受け渡された値は、元の型の情報が欠落しています。（元の型の値を操作するための関数等を実行できません）引用:<a href="https://blog.y-yuki.net/entry/2017/05/08/000000">https://blog.y-yuki.net/entry/2017/05/08/000000</a>元の型の値を操作できないため、辞書型のキーを取り出すという動作ができないっぽいです。なので、型アサーションをして、取り出す必要がありました。さらにこの`diaryGetter`はstring型として扱いたいので、最後も型アサーションをする必要があったということです。まず、<pre><code class="language-go">apiGWEvent.RequestContext.Authorizer[&quot;claims&quot;]
</code></pre>を型アサーションで`map[string]interface{}`型にして、mapのキーを取り出すという感じです。

AWS Cognitoでユーザー情報をAWS Lambda(...

TwitterやLINEなどでリンクを貼った時、OGPの設定をしていればタイトル、画像、概要などをカードのような形で表示できるようになります。逆に設定していないとせっかくリンクを共有しても目に止まらない可能性が高いです。OGPが動的というのは、例えばブログ記事のidによってタイトル、画像、概要を出し分けるということです。ということでNext.jsで作成したサイトで動的OGPを作成する方法についてのメモです。<h2 id="h40b4e638d1">コンポーネント作る</h2>まずはOGP用のコンポーネントをnext/headを使って作っていきます。<a href="https://qiita.com/TK-C/items/cd34d0f6d4b001053443" target="_blank" rel="noopener noreferrer nofollow">こちらのサイトを参考にさせていただきました。</a><pre><code class="language-typescript">import Head from &apos;next/head&apos;;

const Seo = ({ pageTitle, pageDescription, pagePath, pageImg, pageImgWidth, pageImgHeight }) =&gt; {
 const defaultTitle = &apos;サンプル&apos;;
 const defaultDescription = &apos;サンプルディスクリプション&apos;;
 const defautlImg = &apos;https://sample.jp/sample-logo.png&apos;;

 const title = pageTitle ? `${pageTitle} | ${defaultTitle}` : defaultTitle;
 const description = pageDescription ? pageDescription : defaultDescription;
 const url = pagePath;
 const imgUrl = pageImg ? pageImg : defautlImg;
 const imgWidth = pageImgWidth ? pageImgWidth : 1200;
 const imgHeight = pageImgHeight ? pageImgHeight : 630;

 return (
 &lt;Head&gt;
 &lt;title&gt;{title}&lt;/title&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot; /&gt;
 &lt;meta name=&quot;description&quot; content={description} /&gt;
 &lt;meta property=&quot;og:url&quot; content={url} /&gt;
 &lt;meta property=&quot;og:title&quot; content={title} /&gt;
 &lt;meta property=&quot;og:site_name&quot; content={title} /&gt;
 &lt;meta property=&quot;og:description&quot; content={description} /&gt;
 &lt;meta property=&quot;og:type&quot; content=&quot;website&quot; /&gt;
 &lt;meta property=&quot;og:image&quot; content={imgUrl} /&gt;
 &lt;meta property=&quot;og:image:width&quot; content={String(imgWidth)} /&gt;
 &lt;meta property=&quot;og:image:height&quot; content={String(imgHeight)} /&gt;
 &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; /&gt;
 &lt;link
 href=&quot;https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&amp;amp;display=swap&quot;
 rel=&quot;stylesheet&quot;
 /&gt;
 &lt;link rel=&quot;canonical&quot; href={url} /&gt;
 &lt;/Head&gt;
 );
};

export default Seo;
</code></pre>こちらをトップページに埋め込むととりあえずはOGPが設定された状態になります。これをブログ記事によって変えたいのであれば、propsに値を渡すことで可能になります。<pre><code class="language-typescript">import Layout from &apos;../components/Layout&apos;;
import Seo from &apos;../components/SeoOgp&apos;;

export default function Home({ blog, totalCount }) {
 return (
 &lt;Layout title=&quot;Home&quot;&gt;
 &lt;Seo /&gt;
 &lt;/Layout&gt;
 );
}
</code></pre>このように設定します。例えば、ブログ記事の情報に変えたいなら、blogs/[id].jsなどのファイルで、<pre><code class="language-typescript">import Layout from &apos;../../components/Layout&apos;;
import Seo from &apos;../../components/SeoOgp&apos;;

export default function BlogId({ blog }) {
 return (
 &lt;Layout title=&quot;blog&quot;&gt;
 &lt;Seo
 pageTitle={blog.title}
 pageDescription={blog.body}
 pageImg={blog.image.url}
 pageImgWidth={1280}
 pageImgHeight={960}
 /&gt;
 &lt;/Layout&gt;
 );
}
</code></pre>などとします。

Next.jsで動的OGPを生成しメタ情報を出し分けてみた

<h2 id="h29cf429e5c">一旦文章なし</h2><h2 id="h922edff87b">実装</h2><pre><code class="language-typescript">import Link from &apos;next/link&apos;;

export const Pagination = ({ maxPageNumber, currentPageNumber }) =&gt; {
 currentPageNumber = Number(currentPageNumber);
 maxPageNumber = Number(maxPageNumber);
 const prevPage = currentPageNumber - 1;
 const nextPage = currentPageNumber + 1;


 return (
 &lt;div className=&quot;flex px-3 my-12&quot;&gt;
 {currentPageNumber !== 1 &amp;&amp; (
 &lt;Link href={`/blogs/page/${prevPage}`}&gt;
 &lt;a&gt;&amp;lt; Previous&lt;/a&gt;
 &lt;/Link&gt;
 )}
 {currentPageNumber !== maxPageNumber &amp;&amp; (
 &lt;Link href={`/blogs/page/${nextPage}`}&gt;
 &lt;a className=&quot;ml-4&quot;&gt;Next &amp;gt;&lt;/a&gt;
 &lt;/Link&gt;
 )}
 &lt;/div&gt;
 );
};
</code></pre><pre><code class="language-typescript">import Image from &apos;next/image&apos;;
import Blog from &apos;../components/Blog&apos;;
import { client } from &apos;../libs/client&apos;;
import { Pagination } from &apos;../components/Pagination&apos;;

export default function Home({ blog, totalCount }) {
 return (
 &lt;Layout title=&quot;Home&quot;&gt;
 &lt;p className=&quot;text-4xl m-10&quot;&gt;blog一覧&lt;/p&gt; 
 &lt;Blog blog={blog} /&gt;
 &lt;Pagination currentPageNumber={1} maxPageNumber={Math.ceil(totalCount / 4)} /&gt;
 &lt;/Layout&gt;
 );
}


export const getStaticProps = async () =&gt; {
 const offset = 0;
 const limit = 4;
 const queries = { offset: offset, limit: limit };
 const data = await client.get({ endpoint: &apos;blogs&apos;, queries: queries });
 return {
 props: {
 blog: data.contents,
 totalCount: data.totalCount,
 },
 };
};
</code></pre><pre><code class="language-typescript">import { client } from &apos;../../../libs/client&apos;;
import Layout from &apos;../../../components/Layout&apos;;
import Blog from &apos;../../../components/Blog&apos;;
import { Pagination } from &apos;../../../components/Pagination&apos;;

export default function BlogPageId({ blog, totalCount, currentPageNumber }) {
 return (
 &lt;Layout title=&quot;blogpage&quot;&gt;
 &lt;Blog blog={blog} /&gt;
 &lt;Pagination currentPageNumber={currentPageNumber} maxPageNumber={Math.ceil(totalCount / 4)} /&gt;
 &lt;/Layout&gt;
 );
}

export const getStaticPaths = async () =&gt; {
 const range = (start, end) =&gt; [...Array(end - start + 1)].map((_, i) =&gt; start + i);
 const data = await client.get({ endpoint: &apos;blogs&apos; });

 const { totalCount } = data;
 const paths = range(1, Math.ceil(totalCount / 4)).map((i) =&gt; `/blogs/page/${i}`);
 return { paths, fallback: false };
};

export const getStaticProps = async (context) =&gt; {
 const numId = context.params.id;
 const offset = (numId - 1) * 4;
 const limit = 4;
 const queries = { offset: offset, limit: limit };
 const data = await client.get({ endpoint: &apos;blogs&apos;, queries: queries });


 return {
 props: {
 blog: data.contents,
 totalCount: data.totalCount,
 currentPageNumber: numId,
 },
 };
};
</code></pre><h2 id="h03e7af0d39">参考リンク</h2><a href="https://blog.hpfull.jp/nextjs-microcms-pagination/">Next.js × microCSSブログでページネーションを実装する (with Tailwind CSS)</a>