背景
AWS Amplify + AppSync + Vue で爆速でモダンなフロントエンドが開発できるという噂を聞きつけ、実際に試してみたところ、とてもみみっちいところで躓いてしまったのでその対処法を記述します。
なお、本来の趣旨である「爆速でモダンなフロントエンド開発」という点については、確かに革命的な効果を感じましたので、今後も引き続き深堀りしていきたいと思います。特にAppSyncにはかなり将来性を感じました。
Amplify + AppSync + Vue での具体的なフロントエンド構築方法が知りたい方は、以下の記事を読むことをお勧め致します。私も参考にさせて頂きました。
https://qiita.com/nakayama_cw/items/6d3514b51c5fbf9ba450
https://qiita.com/shunp/items/d491adfadd570f66f990
サインアップできないようにしたい…！
上記の記事を参考にAmplifyから環境構築し、認証をCognito、APIをAppSyncで作成しました。（ここまで本当にあっという間にできます。）
バックエンド部分はAmplify Consoleのおかげもあり、ほとんどが自動でできます。さすがにフロントエンド部分は自分で書かないといけませんが、それでもaws-amplify-vueというパッケージが用意されており、これを使うことで面倒なログイン画面などの作成をスキップすることができます。
ということで、早速このパッケージを使って、ログイン機能を実装しました。具体的な方法は以下の記事が参考になります。
https://qiita.com/maniju/items/d33d64f0b729630d0c3d
おお、簡単にできました！ログインだけでなく、パスワードリセットの機能やアカウント作成の機能までコンポーネントを読み込んで配置するだけであっという間にできます。
サインアップ画面もこの通り。（ログイン画面のCreate accountより遷移）
必要な項目の追加や削除もパラメータ設定によって変更することができます。（具体的な設定内容は以下ドキュメントを参考のこと。）
https://aws-amplify.github.io/docs/js/vue#authentication-components
さて、自分が作っているサイトは実に細々としたものなので、一般ユーザに勝手に登録されるのも困ります。Cognitoの方は「管理者のみがユーザ登録可能」な設定になっているので、サイトからもサインアップができないようにする必要があります。
が…上述のドキュメントをいくら読んでも、サインアップをさせないようにする設定が書かれていません…orz
サインアップ画面から項目全部消したり、signUpConfig: nullとかやってみたものの全然ダメでした。
結論
GitHubのIssueに書いてありました。
https://github.com/aws-amplify/amplify-js/issues/1993
export default {
...
data: function(){
return {
authConfig: {
signInConfig: {
isSignUpDisplayed : false // ← コレ！！
}
}
}
}
}
消えた！
（「No account? Create account」のリンクが。）
このパラメータ、需要は多いと思うんですが、なぜか上述のドキュメントにはまだ載っていません。
この記事が私と同じように悩んでいる方の参考になれば幸いです。