前回は amplify-google-button
の紹介でした。
amplify-google-button / Amplify UI Components のドキュメントに無いコンポーネント紹介1こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 7日目の記事です。 AWS Amplify のドキュメントで紹介されている UI Components を使うと、 Amplify の認証機能と連携の取れ… もちろん、他の認証を使ったボタンも存在しています。
が、 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 認証周りは、機能として提供されていて使うことはできると思いますが、ドキュメント関係がまだ十分には整備されているとは言い難い気がします。
少しでも情報提供になれば、幸いです。
関連