この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
CX事業本部デリバリー部の平内(SIN)です。
Flutterでの利用も提供されている、Amplify UI Componentsを使用すると、Cognitoと組み合わせて、ユーザーログインが簡単に準備できます。
https://ui.docs.amplify.aws/flutter/connected-components/authenticator
しかし、このUIは、デフォルトで「Create Account(ユーザーのサインアップ)」が可能になっており、メールアドレスを登録して、送られてきた Verification Codeを入力することで、アカウントが作成されます。
至れり尽くせりなのですが、「アカウント追加は、管理者のみで行う」というような要件では、ちょっと、このままでは利用できません。
そこで、今回は、Amplify UI Componentsを最大限利用しつつ、サインアップ機能は公開しないようにしてみました。
2 動作環境
今回使用したバージョンは、以下の通りです。
% amplify -v
9.2.1
% flutter --version
Flutter 3.3.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision e3c29ec00c (3 days ago) • 2022-09-14 08:46:55 -0500
Engine • revision a4ff2c53d8
Tools • Dart 2.18.1 • DevTools 2.15.0
3 Amplify UI Components
最初に、Amplify UI Componentsをデフォルトで利用する要領です。
Flutterアプリを作成し、必要なAmplifyのライブラリを追加します。
% flutter create sample_app
% cd sample_app
% flutter pub add amplify_flutter
% flutter pub add amplify_auth_cognito
% flutter pub add amplify_authenticator
Amplifyの設定です。認証機能を有効にしてデプロイしています。
% amplify init
% amplify add auth
% amplify push
/lib/main.dartは、以下のとおりです。
ログイン後に表示する画面を、Authenticator()の home: に設定しているだけです。
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';
import 'package:sample001/amplifyconfiguration.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
final _amplify = Amplify;
@override
void initState() {
_configureAmplify();
super.initState();
}
Future _configureAmplify() async {
try {
await _amplify.addPlugins([
AmplifyAuthCognito(),
]);
await _amplify.configure(amplifyconfig);
} catch (e) {
debugPrint(e.toString());
}
}
@override
Widget build(BuildContext context) {
return Authenticator(
child: MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
builder: Authenticator.builder(),
home: const HomePage(),
),
);
}
}
// ログイン後に表示される画面
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: ElevatedButton(
child: const Text("Logout"),
onPressed: () {
Amplify.Auth.signOut();
},
),
),
);
}
}
上記のコードで、ログイン・パスワード変更・サインアップが可能なアプリの完成です。
4 サインアップの無効化
Amplify UI Componentsは、カスタマイズが可能です。
ログイン画面をカスタマイズし、サインアップ(Create account)が、選択できないように、画面上部のタブを消しました。 なお、Paddingについては、画面が横になっても違和感のないように、画面サイズから計算しています。
@override
Widget build(BuildContext context) {
return Authenticator(
authenticatorBuilder: (context, state) {
switch (state.currentStep) {
case AuthenticatorStep.signIn:
return Scaffold(
body: Padding(
padding: EdgeInsets.fromLTRB(
MediaQuery.of(context).size.width / 10,
MediaQuery.of(context).size.height / 10,
MediaQuery.of(context).size.width / 10,
0,
),
child: Column(
children: [
const Text(
"Sign in your accunt",
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
),
SignInForm(),
],
),
),
);
default:
return null;
}
},
child: MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
builder: Authenticator.builder(),
home: const HomePage(),
),
);
}
}
Create Accountは、選択できなくなっています。
5 セルフサービスのサインアップ
Cognitoのコンソールでは、「セルフサービスのサインアップ」で、「自己登録の有効化」という設定があるので、こちらも外しておきます。
6 最後に
今回は、Amplify UI Componentsを使用して、ユーザーが自由にサインアップができないUIを作成してみました。
アプリ作成で、ユーザ認証を必要する場面は多いと思いますが、とりあえず簡単な作業で、この辺が実装できると、色々捗ります。