着信認証ASPで2要素認証を実装する

## 『着信認証』について
『着信認証』は[株式会社オスティアリーズ](https://ostiaries.co.jp)が提供する電話番号を利用した認証サービスです。
<img width="200" alt="着信認証" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745216/ff230f8f-beed-0120-ed06-f2edfd22d1d6.png">
詳しくは[こちら](https://www.youtube.com/watch?v=jooW8Dh7BS8)をご覧ください。
今回は、2021年よりサービスを開始しました、着信認証を手軽に実装出来るサービス『着信認証ASP』について紹介させて頂きます。
また、概要については「[大学生が【着信認証ASP】実装をやってみた！](https://www.youtube.com/watch?v=8bLNQ-MTfeY&t=1021s)」でも動画で紹介されておりますのでご参照ください。

## 利用開始まで
実装の前段階は下の流れになります。
・[『着信認証ASP』](https://asp.ostiaries.jp/signup)にアクセスしサインアップ
　↓
・登録したメールアドレスに送られる管理ツールにアクセス
　↓
・決済情報の登録の後、管理ツールが利用可能となる
　↓
・管理ツールにて『着信認証』を導入したいサービス情報の登録
　※この際にアクセスキーなどの情報が作成されます

## 『着信認証ASP』を実装してみる
案内に従いサービスを登録すると、
管理ツールの「デベロッパー情報」にコピペ用のテキストと実装のTipsが閲覧できます。
![qiita1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745216/7ca10aa1-6262-0758-a607-dd6caf84f677.png)

「デベロッパー情報」の内容に従って、
既に稼働しているサイトの会員登録へ実装を行い、画面遷移を
＜現在の画面遷移＞
・会員登録
　↓
・確認画面
　↓
・完了
＜着信認証導入後の画面遷移＞
・会員登録
　↓
・確認画面
　↓
・<b>着信認証画面</b>
　↓
・完了
のように変えてみます。

###### Step1. 着信認証を呼び出すJavaScriptのコピー
確認画面のテンプレートの適当な箇所にJSを埋めます。
```
<!DOCTYPE html>
<html lang="ja">
<head>
<title>会員登録確認</title>
<script src="js/jquery-3.6.0.min.js"></script>
<!-- ここにコピペ -->
```
###### Step2. 着信認証実行をWEBページへ設定
着信認証ASPの「デベロッパー情報」にはcall_auth_run（着信認証実行関数）の実行方法がいくつか記載されていますが、
取り急ぎ、フォームのSUBMITをボタンに変えてクリックイベントでcall_auth_runを呼び出すようにします。
```
<form>
    <input type="button" onclick="call_auth_run('{$tel}')" value="登録">
</form>
```

###### Step3. CGIからパラメータの編集
会員登録CGI（今回はPHP）にて確認画面の出力の際に、テンプレートに
・着信認証OKの遷移先
・着信認証NG及びキャンセル時の遷移先
・認証したい電話番号
を出力。
```index.php
//--------------
// 着信認証の設定
$ok_url = urlencode('https://sample.com/entry/ok.php?sess_id=xxxxxxxxxxxx');	// 着信認証OKの遷移先を出力
$back_url = urlencode('https://sample.com/entry/ng.php?sess_id=xxxxxxxxxxxx');	// 着信認証NG及びキャンセルの遷移先を出力
$smarty->assign('tel', $_REQUEST['tel']);  // 入力画面から送信された電話番号を出力
```

###### 動かしてみる
上の編集を行ってサイトアクセスしてみます。

<img width="900" alt="動作確認2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745216/8227cdea-b983-0d97-f319-fc8aab5cd095.png">

のように着信認証が動きました！

###### Tips
着信認証管理ツールでは、着信時の振る舞いやセキュリティの設定があります。
・着信時の振る舞い
| 設定項目                   | 内容                                               | 値                                                                                                                               | 
| -------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 
| 待機秒数                   | 着信認証画面に遷移後、電話が着信するまでの待ち時間 | 30 60 90 120秒から選択可能                                                                                                       | 
| 着信設定                   | 電話着信時の振る舞い                               | busy ：話中音で応答（ユーザに通話料金が発生しない）<br>voice: テキスト文字の音声読み上げ（任意のメッセージを設定）<br>を選択可能 | 
| 着信認証の利用エリア設定   | 利用場所による電話番号表記の設定                   | 海外向けを選択すると「+81XXXX」形式になります                                                                                    | 
| 認証対象外電話番号帯の設定 | 着信番号のフィルタ                                 | 固定電話番号を排除<br>携帯電話番号を排除<br>050電話番号を排除<br>海外電話番号を排除<br>が必要に応じて選択可能です。              | 

・セキュリティ関連の設定
| 設定項目                   | 内容                                                                                                | 値                                                                                                                  | 
| -------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | 
| アクセス許可ホスト名       | 着信認証画面が許可するアクセス元ホスト名                                                            | サービスを提供するホスト名<br>（ワイルドカード使用可能）                                                            | 
| 検証用キー                 | 着信認証ASPからの遷移であることを検証するためのキー情報。<br>着信認証成功時の遷移先にPOSTで値を送信 | 管理ツールに表示                                                                                                    | 
| 認証対象外電話番号帯の設定 | 着信番号のフィルタ                                                                                  | 固定電話番号を排除<br>携帯電話番号を排除<br>050電話番号を排除<br>海外電話番号を排除<br>が必要に応じて選択可能です。 | 



## 最後に
昨今、認証の2要素化について各種ガイドラインで推奨又は必須化の流れが多く、予算とリソースに悩むところが多いかと思います。
現行仕様をあまり弄る事なく2要素化が可能なサービスとして『着信認証ASP』が導入されるケースが増えております。

★着信認証とは
株式会社オスティアリーズが提供する電話番号を利用した認証サービスです。
<img width="300" alt="着信認証" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745216/ff230f8f-beed-0120-ed06-f2edfd22d1d6.png">
『着信認証』についてのお問合わせは[こちら](https://ostiaries.co.jp/contact.php)