オレンジの国

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

変数が消える

asp.net で開発しています。

グローバルな領域に変数を定義したのですが、メソッド間をまたいで変数を利用しようとするとリセットされてる。

メソッド間でまたがっても利用できるようにすればどのようにすればよいかです。

webアプリで使うセッション変数

ブラウザを立ち上げて、web閲覧を始めるとサーバからクライアントに向けてセッションIDがふられます。そのセッションIDと紐づけて格納されるのがセッション変数です。

このセッション変数は、複数の画面から確認する事が可能になります。

ブラウザを立ち上げて接続をすると固有のセッションＩＤがふられる事になり、そのユーザ単位に、変数を扱う事が可能になります。

セッション変数の使い方

Session["変数名"]

利用例

SMSで送信するパスワードをセッション変数に代入

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

送られてきた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コードは数値のみ";
            }

ページ間でも受渡可能

この方法を取る事により、メソッド間での変数の受け渡し、ページ間での変数の受け渡しが可能になります。

乱数を発生させる

6桁の整数を発生させる

            Random rnd = new Random();
            int pwd = rnd.Next(100000, 999999);

seed値がポイントで、seed値に何も指定しない場合は、以下と同義になります。

            int seed = Environment.TickCount;
            Random rnd = new Random(seed);
            int pwd = rnd.Next(100000, 999999);

seed値を変更させるため

Environment.TickCount　によってコンピューターが最後に起動してからの経過時間をミリ秒単位で取得しそれを指定しています。

.NET Framework では、既定のシード値は時間に依存します。 .NET Core では、既定のシード値は、スレッド静的、擬似乱数ジェネレーターによって生成されます。

乱数ジェネレーターのインスタンス化

上記の例は.NET Frameworkの事であり、.NET Coreではまた別のシード値が採用されています。

乱数ジェネレーター Random クラス

擬似乱数は、少数の数値から等しい確率で選択されます。 選択した数値は、数学的アルゴリズムを使用して選択するため、完全にはランダムではありません

Random クラス

シード値って何？

疑似乱数生成アルゴリズムの開始値の事。シード値は、明示的または暗黙的に指定できます。

同じシード値を利用すると、同じ一覧の乱数が生成されます。

例　シード値を揃える

            Random rnd = new Random(10);
            int pwd = rnd.Next(100000, 999999);

必ず同じ乱数が発生します。

乱数が同一になる可能性

１つのオブジェクトで、15ミリ秒以内に作成されたオブジェクトのシード値が同一になる可能性があります。

実行例はこちらに記載があります。

乱数ジェネレーターのインスタンス化

かなりタイミングが重ならないと同じにはなりませんが、まれに同じ値が生成される事があります。なので、このような場合はシード値を明示的に指定します。

1つ目

            int seed = Environment.TickCount;
            Random rnd = new Random(seed);
            int pwd = rnd.Next(100000, 999999);

2つ目

            int seed = Environment.TickCount;
            Random rnd = new Random(seed++);
            int pwd = rnd.Next(100000, 999999);

引数なしのコンストラクタを使用した場合はシード値にEnvironmentクラスのTick Countプロパティが設定されます。これを、かならず違う値が入るように指定すると上記の例のようになります。

まとめ

単一の6桁整数をランダムに生成したい場合は、

            Random rnd = new Random();
            int pwd = rnd.Next(100000, 999999);

でOK!

この記事で説明している事

この記事では、.NET Coreを利用し、コンソールアプリを作成して、Linux上で自己完結型の実行可能ファイルを実行しています。

.Net Coreはクロスプラットフォーム

クロスプラットフォームで実行する際に

１．自己完結型

２．フレームワーク依存型

の2つの形式があります。

自己完結型にすると、そのアプリに.NETランタイムが含められます。ユーザは、.NETフレームワークのインストールをすることなく実行が可能です。

クロスプラットフォームバイナリ作成

dllファイルの形式で、フレームワーク依存として発行すると、クロスプラットフォームバイナリが作成されます。

Linux上に filename.dllを置くと

dotnet <filename.dll> 

というコマンドで実行が可能でした。ただ、この方法だと、あらかじめLinux上にも対象のFrameWorkをインストールしておく必要があります。

自己完結型バイナリの作成

VisualStudio から、ビルドメニュー　→　「アプリ名」の発効をクリック

開始ボタンをクリック

発行先としてフォルダを選択

ターゲットの場所の右端、「構成」ボタンをクリックします

配置モードを自己完結、ターゲットランタイムを linux-x64とします

発効します

発効にはしばらく時間がかかり、一つのフォルダに184個のファイルが出来上がりました。これは利用するdllなどでサイズが変わると思います。

アプリ配置と実行

出来上がったフィルをすべてLinux上にコピーします

/publish# chmod 755 ConsoleApp1

実行するとこんな感じです

/publish$ ./ConsoleApp1
Hello World!

単一アプリの作成

184個のファイルができるのもうっとおしいのですが、VisualStudio 2019 で作成すると、単一ファイルの作成が可能です。

とりあえずターゲットフレームワークも3.1にしてみました。

この状態で発行すると、すべて一つのファイルにまとまります。サイズは76MB程度になりました。

~$ chmod 755 ConsoleApp1

一つのファイルだけでも実行できました。

~$ ./ConsoleApp1
Hello World!

この実行方法は、自己完結型のクロスプラットフォームバイナリという位置づけで、予めLinuxに.NET Coreをインストールしておく必要がありません。

詳しくは、こちらからhttps://techlive.tokyo/archives/10101/embed

まとめ

自己完結型の実行ファイルは、ファイルサイズが大きくなりますが、そのファイルを置くだけで実行が可能になります。

ロリポップでは実行不可

さすがに普通のWordPressなどが利用できるようになっているレンタルサーバでは実行できませんでした。ロリポップのエンタープライズプランを利用しています。

$ ./ConsoleApp1
Failed to resolve full path of the current executable [/proc/self/exe]