AWSの勉強をする

eriko

適当にAWSの勉強記録を残します

コメント大歓迎

気が向いたときに記事にまとめます

eriko

とりあえずCognitoとは…
認証とかユーザー管理ができるもの

ユーザープール
アプリケーションのユーザーサインアップ、サインインに使う
IDプール
他のAWSサービスにアクセスするための認証

ただアプリにサインイン機能をつけたいだけならユーザープールでよさそう？

eriko

とりあえずチュートリアル見ながらユーザープール作ってhosted UIでサインアップ、サインインまでできた。

UIは日本語対応してないらしい。

UIを自作するメリットは日本語化できる、自由に作れる、以外にある？
難しくなさそうなのでちょっと作ってみようかな…

eriko

Amplifyとは？？？？
とりあえず@aws-amplify/ui-reactを入れてログイン画面作れたけど、
AmplifyUIとAWSコンソールにあるAWS Amplifyは別？

eriko

日本語化

I18n.putVocabularies(translations)とI18n.setLanguage('ja')を追加する

import { Amplify, I18n } from 'aws-amplify';
import { Authenticator, translations } from '@aws-amplify/ui-react';

I18n.putVocabularies(translations);
I18n.setLanguage('ja');

手動設定しないとダメな箇所もあった

I18n.putVocabularies(translations);
I18n.putVocabularies({
  ja: {
    "Enter your Username": "ユーザー名",
    "Enter your Password": "パスワード",
    "Please confirm your Password": "パスワード再入力",
    "Reset Password": "パスワードリセット"
  }
});
I18n.setLanguage('ja');

eriko

Amazon Cognito がホストする UI は、カスタム認証フローをサポートしていません。

カスタム属性をサインイン時に入力させる、カスタム認証チャレンジのLambdaトリガーを使う、にはUI自作する必要がある。

用意されたUIは意外と自由じゃない。。。

eriko

Amplify UIで簡単に作れる

eriko

AWS CLI
ユーザー作成

aws cognito-idp admin-create-user --user-pool-id [ユーザープールID] --username [ユーザー名] --user-attributes Name="属性名",Value="値"

パスワードを変更してステータスを確認済みにする

aws cognito-idp admin-create-user --user-pool-id [ユーザープールID] --username [ユーザー名] --password [パスワード]

eriko

カスタム認証の実装

説明読みながら作ったけど認証失敗する。

NotAuthorizedException: Incorrect username or password.

eriko

これはそのまま認証失敗で、フロントから受け取った答えが間違ってるということだった。
このメッセージは変更できるのかな。

eriko

LambdaからCognitoにアクセスしたい

まずアクセス権限を付与する
IAM→ポリシー→AmazonCognito～→ポリシーの使用状況で対象のLambda関数をアタッチ

AWS SDKをLambdaでインポートして使う

Lambdaで使うときのインポートはこう書く

import { CognitoIdentityProviderClient, AddCustomAttributesCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS = require('aws-sdk');は前のバージョンの書き方らしい

eriko

Lambdaからパラメータストアを参照する

Lambda関数→レイヤー
AWSレイヤー AWS-Parameters-and-Secrets-Lambda-Extensionを追加する

http://localhost:2773/systemsmanager/parameters/get/?name=hogehoge
にHTTPリクエスト

ポートはデフォルトで2773。ログでも確認できた。
ヘッダーに必要なトークンは環境変数から取得できる。

  const params = {
    method: 'GET',
    headers: {
      'X-Aws-Parameters-Secrets-Token': process.env.AWS_SESSION_TOKEN,
    }
  };

  const response = await fetch("http://localhost:2773/systemsmanager/parameters/get/?name=hogehoge", params);