asp.net webフォームでSMS認証を作る twilio編

携帯電話番号で認証

asp.net webフォームを利用して、テキストボックスに携帯電話番号を入力し確定すると、SMSに6桁のPINコードが送信され、そのコードによって認証されるwebページを作ってみます。

twilio

SMS送信にはtwilioを利用します。

Twilioは、音声通話、メッセージング(SMS/チャット)、Eメールなどの様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウドコミュニケーションプラットフォームです。

twilio

webの準備

携帯電話番号入力用のテキストボックスを作成します。

テキストボックスのプロパティに、Phone属性を与えます。

.NET 4.5 ではTextBoxModeの列挙値が16種類に増えており、HTML5で新たに追加されたtype属性の値をサポートするようになっています。

なお、このモードを選択すると、テキストボックスとしての働きは変わりませんが、携帯電話でアクセスすると数値入力キーボードが起動します。

スマホからテキストボックスの動作チェックをしたい場合

ローカルマシーンの開発環境IISにアクセスさせるための方法はこちら

C#携帯文字列チェック

正規表現を利用して、テキストボックスに入力された数値が携帯番号かどうかを確認します。

            //ハイフン付きで入力された場合はハイフンをすべて削除
            string PhoneNumber = t_Keitai.Text.Replace("-", "");

            if (Regex.IsMatch(PhoneNumber, @"^(070|080|090)\d{8}$"))
            {
                C_Keitai.Text = "";
            }
            else
            {
                C_Keitai.Text = "※電話番号を正しく入力";
                InputOK = false;
            }

内容

070,080,090 のいずれかで始まっている

その後は数値8文字になっている

ハイフンは無視する

PINコードSMS送信

twilio api を利用して、6桁の数値PINコードを携帯に送付します。

            Random rnd = new Random();
            Session["SmsPinCode"] = rnd.Next(100000, 999999);

            // Find your Account Sid and Token at twilio.com/console
            // and set the environment variables. See http://twil.io/secure
            string accountSid = Environment.GetEnvironmentVariable("AC5a36**********");
            string authToken = Environment.GetEnvironmentVariable("c118d49df************");

            TwilioClient.Init("AC5a36**********", "c118d49df************");

            var message = MessageResource.Create(
                body: "デジタルマヒカリシ\n\r" + "PINコード:" + Session["SmsPinCode"],
                from: new Twilio.Types.PhoneNumber("+190********"),
                to: new Twilio.Types.PhoneNumber("+81" + PhoneNumber.Remove(0,1))
            );

PINコードはセッション変数に格納しておきます。

PINコードの検証

入力されたPINコードが、送付したPINコードと等しいか確認します。

            try
            { 
            if (int.Parse(PinCode.Text) == (int)Session["SmsPinCode"])
                l_Ninsho.Text = "0K";
            else
                l_Ninsho.Text = "NG";
            }
            catch
            {
                l_Ninsho.Text = "PINコードは数値のみ";
            }