SPIRALは、主にエンタープライズ向けのローコードプラットフォームになります。ローコードプラットフォームなので、プログラミング知識がなくともWebアプリケーションを開発できるのが魅力です。
今回は、SPIRALを使った認証機能の作成方法について解説します。
SPIRALの認証システムについて
SPIRALでは、認証後のページ（マイページなど）をマイエリアと呼びます。このマイエリアを実現するのが、SPIRALの認証システムです。
データベースの準備
最初に、通常DBを作成します。今回は「認証デモ（AuthDemo）」という名前で作成しました。
カラムは以下の通りです。
| No. | フィールド名 | フィールドタイプ | 差替キーワード |
|---|---|---|---|
| 1 | メールアドレス | メールアドレス（大・小文字無視） | |
| 2 | 名前 | テキストフィールド(32 bytes)かな | name |
| 3 | 年齢 | 整数 | years |
| 4 | パスワード | パスワード | password |
ユーザー登録の作成
Webメニューのフォームを選択し、新規作成をクリックします。
入力項目は以下の通りです。
- DB：先ほど作成した「認証デモ（AuthDemo）」を選択
- 名前：認証デモ登録フォーム
- タイトル： Registration
作成すると、登録用のURLが発行されますので、そのURLにアクセスしてユーザー登録を行います。
マイエリアの作成
ここから、実際に認証部分を作成します。Webメニューの中のマイエリアを選択し、新規作成をクリックします。
入力項目は以下の通りです。
- DB：先ほど作成した「認証デモ（AuthDemo）」を選択
- 名前：認証デモエリア
- タイトル： AuthDemoArea
- 識別キー： メールアドレス
- パスワード：使用する。項目は「パスワード」
- 管理者のメールアドレス：任意のメールアドレス
- メンバー宛の通知先：メールアドレス
認証する
マイエリアを作成すると、ログイン用のURLが発行されます。そのURLにアクセスすると、以下のようなログイン画面が表示されます。
先程登録したメールアドレスとパスワードを入力してログインします。
情報ページの作成
マイエリアの中にある「メンバー情報ページ」を作成します。
ここで、ログインユーザーは自分の情報を確認できるようになります。その際、どの情報を表示するかと言った設定が、このページ上で簡単にできます。
作成すると、このページへのリンクが %url/rel:mpgt:member_info% のような形式で表示されます。
認証後の画面の作成
マイエリアの中に「カスタムページ」というのがあります。デフォルトで作成されているものは、認証後に表示されるページとなります。
そして、ページソースを以下のように編集します。
<!DOCTYPE html>
<html id="SMP_STYLE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>ログインページ</title>
</head>
<body class="body">
<h1>ログイン後のページ</h1>
<h2>%val:usr:name%さん、こんにちは！</h2>
<div><a href="%url/rel:mpgt:member_info%">情報確認ページ</a></div>
<div><a href="%form:act:logout%">ログアウト</a></div>
</body>
</html>
%val:usr:name% の部分は、ログインしているユーザーの名前が表示されます。 また、%url/rel:mpgt:member_info% は、先ほどのユーザー情報確認ページへのリンクになります。
%form:act:logout% はログアウトの用のURLと差し替わるキーワードになります。
まとめ
今回はSPIRALを使った認証機能の作成方法について解説しました。SPIRALの認証システムを利用することで、簡単にログイン機能を実装できます。ぜひ試してみてください。
認証方式としては今回紹介したID・パスワード認証の他に、FIDOデバイス認証や、パスワードの自動発行（アンケートを後で編集する場合など）もサポートしています。詳細は公式ドキュメントをご参照ください。
現在、SPIRALではエンジニアβという無料アカウントを配布しています。SPIRALに興味がある型はこちらから試してみてください。