[point_maker type=“heading_icon” base_color=“apple_green” title_icon=“info-circle-solid” title_color_background=“true” title_color_border=“false” content_type=“text” content_color_background=“true” content_color_border=“false” block_editor=“true”]

こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 7日目の記事です。

[/point_maker]

AWS Amplify のドキュメントで紹介されている UI Components を使うと、 Amplify の認証機能と連携の取れたUIを簡単に作れます。

このように、 UI Components にはフロントエンドのフレームワークをまたがったパーツがいくつか提供されているのですが、実はドキュメントに無いパーツもいくつかあります。(2020年12月6日現在)

ドキュメント化されていないものの中から、「とりあえず使える」やつを紹介してみます。

まずは、 amplify-google-button から。

前提

フロントエンドは Vue.js で書きます。

amplify-google-button

表示の確認

まずは、画面から見てみましょう。

このような感じで、ロゴ入りのボタンが作成されます。

フロントエンドコード

コードは、下記のように書くだけです。

<template>
  <v-container>
    <v-row>
      <v-col>
        <label>amplify-google-button</label>
        <amplify-google-button @click="signinByGoogle"></amplify-google-button>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { Auth } from 'aws-amplify'

export default {
  methods: {
    signinByGoogle: function () {
      Auth.federatedSignIn({ provider: 'Google' })
    },
  },
}
</script>

GitHub の内容から

https://github.com/aws-amplify/amplify-js/tree/master/packages/amplify-ui-components/src/components/amplify-google-button

README.md に少し情報がありますね。

client-id を設定するとこのボタンだけで Google の認証を行なえそうなのですが、現時点ではうまくいかないようです。

認証部分のコードは、現在は下記のようになっています。

    await Auth.federatedSignIn(
      'google',
      { token: id_token, expires_at },
      {
        email: profile.getEmail(),
        name: profile.getName(),
        picture: profile.getImageUrl(),
      },
    );

自分の実装だとプロバイダ名のみですが、こちらはいくつかプロパティを渡していますね。
( picture は認証設定時に追加しないと有効にならないはずなので、何か影響あるのかも?)

文字部分は I18n.get(Translations.SIGN_IN_WITH_GOOGLE) となっているので、下記のようなコードを追加すると日本語化もできそうです。

import { I18n } from 'aws-amplify'
import { Translations } from '@aws-amplify/ui-components'

I18n.setLanguage('ja-JP')
I18n.putVocabulariesForLanguage('ja-JP', {
  [Translations.SIGN_IN_WITH_GOOGLE]: 'Google でサインイン',
})

このような感じでUIパーツとして使うには問題ないので、Goolge でサインインする機能を使うときには使っておきたいですね。