この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは!DA(データアナリティクス)事業本部 インテグレーション部の大高です。
先日、試してみたAmplify FrameworkのUIコンポーネントについて、実際のAngularプロジェクトでの使い方を考えてみました。
今回、既存のAngularプロジェクトが既に存在しており、そのプロジェクトに対して認証を設けたいと考えた場合、いくつか検討すべき事項があったのでまとめてみます。
検討事項1:どこにamplify-authenticatorを埋め込むか
先日試した際には、公式のドキュメントにあるサンプルコードと同じく、以下のようにapp.component.html
にamplify-authenticator
を埋め込みました。
src/app/app.component.html
<amplify-authenticator>
<div>
My App
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>
これにより、amplify-authenticator
の内部のDOM要素は認証を行わないと表示されないようになり、認証を済ませると表示される、という動きになりました。
動きとしては良いのですが、これを既存のAngularプロジェクトに埋め込みたい時にはちょっと検討が必要そうです。
既存プロジェクトではroutingを利用しているので、app.component.html
のコードは以下になります。
src/app/app.component.html
<router-outlet></router-outlet>
お馴染みのrouter-outlet
です。また、app-routing.module.ts
はこんな感じです。
src/app/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
で括ってみます。
src/app/app.component.html
<amplify-authenticator>
<router-outlet></router-outlet>
</amplify-authenticator>
この状態で、起動してみましたが画面遷移としては特に問題ありませんでした。
https://localhost:4200/
や、https://localhost:4200/home
にアクセスするとログイン画面が出ますし、ログイン後は想定通りのroutingがされています。
後は必要な箇所にamplify-sign-out
でサインアウトボタンを配置してあげれば問題ないですね。
検討事項2:ログイン画面の配置
特に何も考えずに下記のようにすると、ログイン画面は左上に配置されます。
src/app/app.component.html
<amplify-authenticator>
<router-outlet></router-outlet>
</amplify-authenticator>
ちょっとイケてないので、配置を直してみます。
src/app/app.component.html
<div class="authenticator">
<amplify-authenticator>
<router-outlet></router-outlet>
</amplify-authenticator>
</div>
src/app/app.component.scss
div.authenticator {
margin-top: 50px;
text-align: center;
}
こんな感じに直すと、以下のようにそれっぽいログイン画面の位置になります。なお、amplify-authenticator
にclass
指定でも良いかなと思いましたが、margin-top
が効かないのでdiv
を利用しました。
ログイン後のhome.component.html
と画面はこんな感じです。簡略化のため、home.component.scss
は利用していません。
src/app/app.component.html
<div style="width: 300px">
I'm home.
<amplify-sign-out></amplify-sign-out>
</div>
当然ですが、こちらのコンポーネントもログイン画面でのmargin-top
とtext-align
が効いていますね。ちょっと困るので、app.component
側を修正します。
src/app/app.component.html
<div class="authenticator">
<amplify-authenticator>
<div class="authenticated-container">
<router-outlet></router-outlet>
</div>
</amplify-authenticator>
</div>
src/app/app.component.scss
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は得意ではないので、より良い書き方があれば教えて頂けると喜びます!
どなたかのお役に立てば幸いです。それでは!