【フロントUI/バッグエンド開発】ログイン項目を追加

Toyo-Daichi commented 2 years ago

起票日：2022.01.31

Toyo-Daichi commented 2 years ago

Amplifyでログイン項目を作成する。前提がCognitoを用いることくらいしか決まっていない、、

Toyo-Daichi commented 2 years ago

下記の項目を実施する。

[ ] Cognitoの料金体系について調査
[ ] APIとCognitoのUser Poolとの接続を調査

Toyo-Daichi commented 2 years ago

Cognitoの料金体系について

Monthly Active User (MAU)が50名以下だった場合、無料枠で収まる。それ以降は0.0055USDで増加していく。参考url: https://aws.amazon.com/jp/cognito/pricing/

CognitoのUser PoolとId Poolについて

User Poolでは認証ができ、サインインやサードパーティーの連携も可能。
ID Poolでは認可ができ、ユーザーに一意なIDを作成して、他のAWSサービス (API Gateway ...)への許可をすることができる

参考url: https://aws.amazon.com/jp/premiumsupport/knowledge-center/cognito-user-pools-identity-pools/

Toyo-Daichi commented 2 years ago

要件定義

CognitoをTerraformを用いて実装する。（別Issue展開）
chaliceでCognito User/ID Poolを用いて認証認可をとれるようにする。

Toyo-Daichi commented 2 years ago

AWS Amplifyが新しくAuthenticator コンポーネントをリリースしたようなので、こちらで再構築してみる。なお、Cognito側の設定は同じなのでいじらない。 https://aws.amazon.com/jp/about-aws/whats-new/2021/11/aws-amplify-authenticator-ui-component-react-angular-vue/

Toyo-Daichi commented 2 years ago

認証周りなのでできるだけ早く更新するのが定石らしい、、

Toyo-Daichi commented 2 years ago

新しいコンポーネント参考資料

→コンポーネントで言うと、AmplifyAuthenticatorからAuthenticatorに代わる。 ※fromは、どちらも@aws-amplify/ui-reactの対応

Toyo-Daichi commented 2 years ago

現状の`AmplifyAuthenticator`の整理

aws-export.jsに、Authの情報を埋め込んでおく
authStateを確認してサインインが済んでいないときに、<AmplifyAuthenticator>ブロックの中に、<AmplifySignIn />と<AmplifySignUp />を加える場合とwithAuthenticatorでwrapperする場合がある。 https://zenn.dev/dove/articles/63494de652511c#amplify-auth%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

Toyo-Daichi commented 2 years ago

`Authenticator`の整理

まず同様に、、

aws-export.jsに、Authの情報を埋め込んでおく
<Authenticator>で直接書く場合と、withAuthenticatorでwrapperする場合の２通りがある。 https://ui.docs.amplify.aws/components/authenticator#internationalization-i18n

→現状の気持ち的には、後者の方が理解しやすいので、単純に <Authenticator>で囲んでみる。

Toyo-Daichi commented 2 years ago

Relate commit, but error occured.

Toyo-Daichi commented 2 years ago

AmplifyAuthenticatorからのMigrationは、次のサイトに載っていた！！！ https://ui.docs.amplify.aws/getting-started/migration?platform=react

Toyo-Daichi commented 2 years ago

related commit (simple UI)

Toyo-Daichi commented 2 years ago

関連チケットかどうかは分からないが、サーバーレスの認証周りのため、こちらで記述。

SSRとCSR

Server Side Rendering (SSR)とClient Side Rendering (CSR)がある。最近のトレンドはSSRで、CSRはphpのLaravelやpythonのdjango、Rubyのruby on railsなどのフレームワークがある。この二つの違いはクライアント側（端末）でレンダリングするか、サーバー側でレンダリングするかの違い。サーバーレスではクライアント側でレンダリングすることになるので、否応なしにSSRを選択することになる。これまでサーバーレスとサーバーを使う有無としては、Lambdaの15分制限などがあったが、セキュリティ面の意味でも判断材料として挙げられると分かった。 CSRでの課題は、JSON Web Token (JWT)が発行された際に他の端末に持ち込んだ場合にログインができてしまうことである。SSRでの課題は、認証をしてからレンダリングするのでサーバー側が実行する権利を持つので問題ないとのこと。

Toyo-Daichi commented 2 years ago

現状のステータス

問題点としては下記の通り

[ ] ヘッダーとフッターとの間に動的な余白が欲しい
[ ] コンポーネントを真ん中に寄せたい

現状の気持ち的には、後者の方が理解しやすいので、単純に <Authenticator>で囲んでみる。

[x] 理解向上のため、withAuthenticatorのラッパーの形も実装できるようにしたい、、！

Toyo-Daichi commented 2 years ago

コンポーネントを真ん中に寄せたい

related commit.
こちらでもできたが、HeaderとFooterの部分的に収めることができない。

理解向上のため、withAuthenticatorのラッパーの形も実装できるようにしたい、、！

ラッパーするようなコンポーネントに整形する必要があり、少し面倒だから挟む形式を採用。

Toyo-Daichi commented 2 years ago

<AmplifyProvider />でwrapを行うことで、Themingを扱うことで一括で制御をすることができる。

Toyo-Daichi commented 2 years ago

https://ui.docs.amplify.aws/components/authenticator?platform=react#additional-css-styling

You can also override the authenticator's amplify-* classes.

amplify-*のクラスはスタイリングシートで上書きできるみたい、、！

Toyo-Daichi commented 2 years ago

おそらくAuthenticator周りの問題と思うので、同じチケットで対応する。

[ ] ログイン後のレイアウトが小さいことが気になっている。どこで設定するのかをAuthenticator周りで調査する。

Toyo-Daichi / push-link