Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを考える

こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。

先日、試してみたAmplify FrameworkのUIコンポーネントについて、実際のAngularプロジェクトでの使い方を考えてみました。

今回、既存のAngularプロジェクトが既に存在しており、そのプロジェクトに対して認証を設けたいと考えた場合、いくつか検討すべき事項があったのでまとめてみます。

検討事項１：どこにamplify-authenticatorを埋め込むか

先日試した際には、公式のドキュメントにあるサンプルコードと同じく、以下のようにapp.component.htmlにamplify-authenticatorを埋め込みました。

<amplify-authenticator>
  <div>
    My App
    <amplify-sign-out></amplify-sign-out>
  </div>
</amplify-authenticator>

これにより、amplify-authenticatorの内部のDOM要素は認証を行わないと表示されないようになり、認証を済ませると表示される、という動きになりました。

動きとしては良いのですが、これを既存のAngularプロジェクトに埋め込みたい時にはちょっと検討が必要そうです。

既存プロジェクトではroutingを利用しているので、app.component.htmlのコードは以下になります。

<router-outlet></router-outlet>

お馴染みのrouter-outletです。また、app-routing.module.tsはこんな感じです。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './components/home/home.component';


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

コンポーネントとして、HomeComponentを利用しており、アクセスすると単純にこのコンポーネントを表示しています。

これに対して認証を掛けていきたいと思います。

amplify-authenticatorで括ってみる

単純にrouter-outletをamplify-authenticatorで括ってみます。

<amplify-authenticator>
  <router-outlet></router-outlet>
</amplify-authenticator>

この状態で、起動してみましたが画面遷移としては特に問題ありませんでした。 https://localhost:4200/や、https://localhost:4200/homeにアクセスするとログイン画面が出ますし、ログイン後は想定通りのroutingがされています。

後は必要な箇所にamplify-sign-outでサインアウトボタンを配置してあげれば問題ないですね。

検討事項２：ログイン画面の配置

特に何も考えずに下記のようにすると、ログイン画面は左上に配置されます。

<amplify-authenticator>
  <router-outlet></router-outlet>
</amplify-authenticator>

ちょっとイケてないので、配置を直してみます。

<div class="authenticator">
  <amplify-authenticator>
    <router-outlet></router-outlet>
  </amplify-authenticator>
</div>

div.authenticator {
    margin-top: 50px;
    text-align: center;
}

こんな感じに直すと、以下のようにそれっぽいログイン画面の位置になります。なお、amplify-authenticatorにclass指定でも良いかなと思いましたが、margin-topが効かないのでdivを利用しました。

ログイン後のhome.component.htmlと画面はこんな感じです。簡略化のため、home.component.scssは利用していません。

<div style="width: 300px">
  I'm home.
  <amplify-sign-out></amplify-sign-out>
</div>

当然ですが、こちらのコンポーネントもログイン画面でのmargin-topとtext-alignが効いていますね。ちょっと困るので、app.component側を修正します。

<div class="authenticator">
  <amplify-authenticator>
    <div class="authenticated-container">
      <router-outlet></router-outlet>
    </div>
  </amplify-authenticator>
</div>

div.authenticator {
    margin-top: 50px;
    text-align: center;
}

div.authenticated-container {
    margin-top: -45px;
    text-align: initial;
}

すると、ログイン後の画面は以下のようになります。

良さそうです。all: initialでも良いかなと思いましたが、margin-topの相殺も消えてしまうのでtext-align: initialにしました。

まとめ

以上、Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを試してみました。これで、既存Angularプロジェクトにもうまく組み込めそうです。また、CSSは得意ではないので、より良い書き方があれば教えて頂けると喜びます！

どなたかのお役に立てば幸いです。それでは！