前回は amplify-google-button の紹介でした。

amplify-google-button / Amplify UI Components のドキュメントに無いコンポーネント紹介1こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 7日目の記事です。 AWS Amplify のドキュメントで紹介されている UI Components を使うと、 Amplify の認証機能と連携の取れ…

続きを読む

 blog.tacck.net

もちろん、他の認証を使ったボタンも存在しています。

が、 Google 以外の Federation 認証を使ったことが無いので、今回は紹介だけに留めておきます。

amplify-amazon-button

画面はこちら。

GitHub はこちらになります。

amplify-js/packages/amplify-ui-components/src/components/amplify-amazon-button at master · aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - amplify-js/packages/amplify-ui-components/src/components/amplify-amazon-button at master · aws-amplify/amplify-js

 github.com

こちらも Google の時と同じように client-id を設定すると使える想定、のようです。

ボタンの文言変更する時は、 Translations.SIGN_IN_WITH_AMAZON を設定すれば良いようです。

amplify-auth0-button

画面はこちら。

GitHub はこちらになります。

amplify-js/packages/amplify-ui-components/src/components/amplify-auth0-button at master · aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - amplify-js/packages/amplify-ui-components/src/components/amplify-auth0-button at master · aws-amplify/amplify-js

 github.com

こちらは config プロパティで認証情報を設定するようです。

ボタンの文言変更する時は、 Translations.SIGN_IN_WITH_AUTH0 を設定すれば良いようです。

amplify-facebook-button

画面はこちら。

GitHub はこちらになります。

amplify-js/packages/amplify-ui-components/src/components/amplify-facebook-button at master · aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - amplify-js/packages/amplify-ui-components/src/components/amplify-facebook-button at master · aws-amplify/amplify-js

 github.com

こちらは app-id で認証情報を設定するようです。

ボタンの文言変更する時は、 Translations.SIGN_IN_WITH_FACEBOOK を設定すれば良いようです。

amplify-oauth-button

画面はこちら。

ボタンをクリックすると、 Cognito が提供するこの画面が表示されます。

GitHub はこちらになります。

amplify-js/packages/amplify-ui-components/src/components/amplify-oauth-button at master · aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - amplify-js/packages/amplify-ui-components/src/components/amplify-oauth-button at master · aws-amplify/amplify-js

 github.com

config で設定をするようですが、コードをみた感じ config.label 以外は明示的にこのコンポーネントでは触らないようです。(が、私はうまく設定できませんでした。)

ボタンの文言は、 config.label が設定されていればそちらを、未設定であれば Translations.SIGN_IN_WITH_AWS を使うようです。

まとめ

Federation 認証周りは、機能として提供されていて使うことはできると思いますが、ドキュメント関係がまだ十分には整備されているとは言い難い気がします。

少しでも情報提供になれば、幸いです。