オレンジの国

VisualStudioデバッグ環境

VisualStudioデバッグ環境で、webアプリ開発の際、スマホからのアクセス画面を確認したいです。別に立てたIISサーバに配置するのもちょっとおっくうだし、開発しながらスマホで開きたいと思い、開発環境のローカルIISにLAN内スマホからアクセスできるように設定してみました。

開発環境はVisualStudio 2017です。

WindowsDefender ファイヤーウォールを無効

まずは、WindowsDefender ファイヤーウォールを無効にします。

IISの設定変更 applicationhost.config

VisualStudioインストール時にIIS Expressが同時インストールされています。この設定ファイルをさがすのに苦労しました。

VisualStudio2017では、開発したプロジェクトのフォルダにコンフィグが入っています。

プロジェクトフォルダの　.vs を開くとconfigフォルダがあります。この中に

applicationhost.config

が入っています。

hostsファイルを書き換えて、直接ドメイン名でアクセスさせるような事も可能ですが、スマホアクセスだとDNSの設定なども面倒なので、ローカルホストに割り当てられたIPアドレスを調べます。

コマンドプロンプトから、自分のマシンに割り当てられているIPアドレスを調べます。

192.168.10.30

です。

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .: flets-west.jp
   IPv6 アドレス . . . . . . . . . . . .: b3:81db:9879
   一時 IPv6 アドレス. . . . . . . . . .: :73ac:3951:1b4e
   リンクローカル IPv6 アドレス. . . . .: :81db:9879%22
   IPv4 アドレス . . . . . . . . . . . .: 192.168.10.30
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: :8ea0%22
                                          192.168.10.1

applicationhost.config　に

<binding protocol=”http” bindingInformation=”*:8493:192.168.10.30″ />

を書き加えます。

            <site name="WebApplication1" id="2">
                <application path="/" applicationPool="Clr4IntegratedAppPool">
                    <virtualDirectory path="/" physicalPath="C:\Users\User\Documents\Visual Studio 2017\Project\webappli" />
                </application>
                <bindings>
                    <binding protocol="http" bindingInformation="*:8493:localhost" />
		    <binding protocol="http" bindingInformation="*:8493:192.168.10.30" />
                </bindings>
            </site>

VisualStudio　プロジェクトのプロパティ

プロジェクトのプロパティから web の設定で

プロジェクトのURLを

http://192.168.10.30:8493/

と設定し、「仮想ディレクトリの作成」ボタンを押下

URLの予約

管理者権限で起動したコマンドプロントにおいて、

Microsoft Windows [Version 10.0.19042.1052]
(c) Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>netsh http add urlacl url=http://192.168.10.30:8493/ user=Everyone

URL 予約を正常に追加しました

を実行します。

スマホからアクセス

デバッグを開始し、LAN内スマホから

http://192.168.10.30:8493/

にアクセスすると、webページが表示できました。

まとめ

上記手順により、同一LAN内スマホから開発中のwebアプリにアクセスが可能になります。

参考にさせて頂いたサイト

http://surferonwww.info/BlogEngine/post/2017/04/23/where-is-applicationhost-config-file-for-iis-express.aspx

https://devadjust.exblog.jp/23066969/

情報をまとめてくださっている方々に感謝

携帯電話番号で認証

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コードは数値のみ";
            }