会員登録画面に2段階認証を実装する

概要

新規会員登録時に、ランダム6桁のワンタイムパスワード(OTP)を発行して認証させる2段階認証を実装します。

ヒント

本チュートリアルではメールを使用した2段階認証を紹介しますが、twillioと連携することでSMSによる2要素認証も同様の手順で実装できます。

学べること

新規会員登録時の2段階認証は、それぞれの以下の手順で実装します。

• 会員登録時の2段階認証
  • エンドポイントの作成
  • 内部利用のエンドポイントの作成
  • カスタム処理の作成
  • SwaggerUIで動作を確認する
  • フロントエンドの実装をする

前提条件

このページは、KurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだ構築していない場合は、下記のチュートリアルを参照してください。

備考

• Kurocoビギナーズガイド
• KurocoとNuxt.jsで、新規会員登録画面を構築する
• 会員登録画面に仮登録機能を実装する

ヒント

SMSによる2要素認証を実装する場合は以下のチュートリアルも実施が必要です。

• Twilioと連携してSMSを送信する

備考

本チュートリアルでは以下のバージョンでコードを書いています。
Nuxt2: v2.15.8
Nuxt3: v3.8.0

事前準備

APIの作成

DefaultのAPIと、内部処理用のInternalのAPIを利用します。

内部処理用のAPI作成

Kuroco内部でのみ利用するエンドポイントはAPIを分けておくことをお勧めします。
そこで、まずは内部利用のためのAPIを新規で作成します。
既に追加済みの場合は次のステップに進んで構いません。

APIの作成

Kuroco管理画面のAPIより「追加」をクリックします。

API作成画面が表示されるので、下記入力し「追加する」をクリックします。

項目	設定内容
タイトル	Internal
版	1.0
ディスクリプション	内部処理用のAPI

APIが作成されました。

セキュリティの設定

次にセキュリティの設定をします。[セキュリティ] をクリックします。

セキュリティを[動的アクセストークン]に設定して、[保存する]をクリックします。

セキュリティを[動的アクセストークン]に設定後、Login::tokenのエンドポイントが無い場合、利用をお勧めされますが、内部利用のみの場合は無視して構いません。

CORSの設定

次にCORSの設定をします。[CORSを設定する] をクリックします。

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

• 管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。

• GET
• POST
• OPTIONS

CORS_ALLOW_REDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。

問題なければ [保存する] をクリックします。

会員登録時の2段階認証

それでは、会員登録時の2段階認証を実装してみます。
フロントエンドからの操作は以下の3ステップを想定します。

ステップ	フロント(ユーザー)の操作	Kurocoの処理	利用するAPI
1	メンバー登録のための基本情報を送付する	仮メンバーを作成する	Member::invite
2	招待メールのURLにアクセスし、ワンタイムパスワード送付のボタンをクリックする	emai_hashを利用して、仮メンバー情報にアクセス、ワンタイムパスワードを追加し、メールを送信する	Api::request_api Member::invite MemberProvisional::update
3	ワンタイムパスワードを入力して送付	emai_hashを利用して、仮メンバー情報にアクセス、ワンタイムパスワードが一致した場合に会員登録をする	Api::request_api Member::invite Member::insert

エンドポイントの作成

DefaultのAPIから[新しいエンドポイントの追加]をクリックしてエンドポイントを追加します。

今回は下記エンドポイントを作成します。

• 仮メンバー登録のエンドポイント
• ワンタイムパスワードを作成・送付するカスタム処理を呼ぶエンドポイント
• ワンタイムパスワードの確認と本登録をするエンドポイント

仮メンバー登録のエンドポイント

項目	設定内容
パス	2step_member_invite
カテゴリー	メンバー
モデル	Member
オペレーション	invite

ワンタイムパスワードを作成・送付するカスタム処理を呼ぶエンドポイント

項目	設定内容
パス	set_and_send_otp
カテゴリー	API
モデル	Api
オペレーション	request_api_post
name	set_and_send_otp

ワンタイムパスワードの確認と本登録をするエンドポイント

項目	設定内容
パス	check_otp_and_regist
カテゴリー	API
モデル	Api
オペレーション	request_api_post
name	check_otp_and_regist

内部利用のエンドポイントの作成

InternalのAPIから[新しいエンドポイントの追加]をクリックしてエンドポイントを追加します。

今回は下記エンドポイントを作成します。

• 仮メンバー更新のエンドポイント
• メンバー登録のエンドポイント

メンバー登録のエンドポイント

メンバー登録のエンドポイントを下記設定にて作成します。

項目	設定内容
パス	pre_member_update
カテゴリー	メンバー
モデル	MemberProvisional
オペレーション	update

メンバー登録のエンドポイント

メンバー登録のエンドポイントを下記設定にて作成します。

項目	設定内容
パス	2step_member_regist
カテゴリー	メンバー
モデル	Member
オペレーション	insert
default_group_id	適用するメンバーグループのIDを入力してください。 グループIDはグループより確認できます。
login_ok_flg	チェックを入れる

カスタム処理の作成

ワンタイムパスワードを発行・送信するカスタム処理

ワンタイムパスワードとその有効期限を作成し、仮メンバー情報を更新、ワンタイムパスワードをユーザー宛に送付するカスタム処理を作成します。

[オペレーション] -> [カスタム処理]をクリックします。

[追加]をクリックします。

以下のように入力します。

項目	設定
タイトル	set_and_send_otp
識別子	set_and_send_otp
処理	以下のコード

set_and_send_otp

loading...

View on GitHub

ヒント

ワンタイムパスワードをSMSで送付する場合はsendmailのto=$pre_member_info.data.emailの部分を

to="`$pre_member_info.data.ext_info.tel`@twilio.r-cms.jp"のように変更します。

ワンタイムパスワードの一致判定をするカスタム処理

ワンタイムパスワードが一致した場合にMember::insertで会員登録をするカスタム処理を作成します。

[オペレーション] -> [カスタム処理]をクリックします。

[追加]をクリックします。

以下のように入力します。

項目	設定
タイトル	check_otp_and_regist
識別子	check_otp_and_regist
処理	以下のコード

check_otp_and_regist

loading...

View on GitHub

SwaggerUIで動作を確認する

KurocoのAPIとカスタム処理の準備ができたらSwaggerUIを利用して動作の確認をします。

会員登録のリクエストを送る

Default エンドポイントのSwaggurUIから/rcms-api/1/2step_member_invite をクリックします。

[try it out]をクリックします。

Request bodyに以下を入力して[Execute]をクリックします。

{
  "email": "example@dexample.com",
  "ext_info": {
    "name": "MyName",
    "login_pwd": "********",
    "tel": "00011112222"
  }
}

200のレスポンスを確認します。

招待メールが届くのでkeyの部分をコピーします。

ヒント

招待メールの内容はメッセージひな形のmember/pre_regist_thanksのテンプレートで編集が可能です。 リンク部分を{$smarty.const.ROOT_URL}/login/2step_regist?key={$preregist_key}のように修正して、 メールから直接遷移できるように調整してください。

ワンタイムパスワードの送付リクエストを送る

/rcms-api/1/set_and_send_otp をクリックします。

[try it out]をクリックします。

Request bodyに以下を入力して[Execute]をクリックします。

{
  "email_hash": "KEY"
}

注意

"KEY"の部分は先ほどコピーした招待メールのkeyにしてください。

200のレスポンスを確認します。

ワンタイムパスワードがメールで届くので確認します。

ワンタイムパスワードを送る

/rcms-api/1/check_otp_and_regist をクリックします。

[try it out]をクリックします。

Request bodyに以下を入力して[Execute]をクリックします。

{
  "email_hash": "KEY",
  "otp":"OTP"
}

注意

"OTP"と"KEY"の部分は先ほどコピーした招待メールのkeyにしてください。

200のレスポンスを確認します。

メンバー情報一覧に遷移すると、ユーザー登録されていることが確認できます。

以上でKuroco側の設定は完了です。
SwaggerUIで確認した動作をフロントエンドで実装ください。

フロントエンドの実装をする

仮登録用のページ作成

/login/2step_pre_regist/のディレクトリで表示できるよう以下のファイルを作成します。

Nuxt2

/pages/login/2step_pre_regist/index.vue

loading...

View on GitHub

Nuxt3

/pages/login/2step_pre_regist/index.vue

loading...

View on GitHub

注意

上記サンプルのサンプルは参考のため最低限のコードになっています。
実際に利用する際には、フォームのバリデーション処理も追加ください。

本登録用のページ作成

/login/2step_regist/ のディレクトリで表示できるよう以下のファイルを作成します。

Nuxt2

/pages/login/2step_regist/index.vue

loading...

View on GitHub

Nuxt3

/pages/login/2step_regist/index.vue

loading...

View on GitHub

備考

email_hashはクエリで受け取るようにしました。

動作確認

自身の環境に合わせて調整し、動作確認ができたら、新規会員登録時の2段階認証の実装は完了です。

仮登録

追加のワンタイムパスワード登録

関連ドキュメント

• Kurocoビギナーズガイド
• KurocoとNuxt.jsで、新規会員登録画面を構築する
• 会員登録画面に仮登録機能を実装する
• メッセージひな形
• Smaratyプラグイン
• カスタム処理と紐づいたAPIエンドポイントを作成する
• カスタム処理を利用して、APIに独自のバリデーションを実装する
• ログイン画面に2段階認証を実装する