↓↓↓こういうやつです。QRコードは縦と横方向に情報をもたせることができるので、情報量がバーコードより多くすることができる、いわば「発展系バーコード」ですが、今回はこのQRコードを読み取ることで自動ログインができたら面白いなと思いサンプルを作ってみることにしました。最後に今回のソースコード一式をダウンロードすることができます。合わせて読みたい前提としてこの記事の前提として、Laravelのログイン機能がインストール済みであるものとします。方は以下の記事を参考にして準備しておいてください。Chromeでテストする場合、ローカルであってもウェブカメラにアクセスするにはHTTPS環境である必要があります。HTTPSを導入していない方は以下を参考にしてください。今回、自動ログインを実現する手順は次のとおりになってます。JavaScriptでQRコードを読み取る読み取ったデータ(UUID)を持ったユーザーを探す見つかればログインするこうすることでめんどうなログインフォームへの入力をショートカットできますし、月一回強制的にUUID(他とかぶらないID番号)を変更してQRコードを新しく発行するようにすれば、セキュリティも向上すると思います。DB内の準備usersテーブルにUUIDを保存するフィールドを追加するでは、QRコードで読み取る文字列(UUID)を保存しておくフィールドをusersテーブルに追加しておきましょう。以下のコマンドでマイグレーションを作成します。add_uuid_to_users_tableすると、database/migrations/****_**_**_******_add_uuid_to_users_table.phpというファイルが作成されますので、このファイルを開いて以下のように変更します。}}変更したらマイグレーションを実行。migrate実行するとテーブルは次のようになります。テストユーザーを作成する後で実際にログインのテストをしますのでSeederを使ってテストデータを作成します。以下のコマンドを実行してください。UsersTableSeederdatabase/seeds/UsersTableSeeder.phpが作成されるので、run()内に以下のコードを追加します。}}変更したらUsersTableSeederが有効になるようにdatabase/seeds/DatabaseSeeder.phpのrun()内に登録します。$this->call(UsersTableSeeder::class);}ではSeederでテストユーザーを登録しましょう。--seed実行が完了すると、以下のようにusersテーブルの各ユーザーにUUIDが登録されます。自動ログイン機能をつくるではここからが実際にコードを書いていく作業になります。QRコードを読み取る部分をつくるログインフォームの代わりとして、QRコードを読み取るページをつくっていきましょう。ルートをつくるはじめにroute/web.phpにルートを追加します。Ajax通信コントローラーをつくる続いて、ルートで指定したコントローラーを以下のコマンドで作成します。Auth\\QrLoginControllerapp/Http/Controllers/Auth/QrLoginController.phpが作成されるので以下のようにメソッドを追加します。}}ビューをつくるでは、ビューがまだないのでresources/views/auth/qr_login.blade.phpにファイルを作成し、中身を以下のようにして保存してください。</script></body></html>【追記:2019.07.30】バグがあることがわかりましたので変更しました。cloneで設置して使います。(本来はnpmでインストールしてビルドすべきですが、説明が複雑になってしまうので今回は割愛します😅)コマンドラインでpublic/jsに移動して以下のコマンドを実行してください。https://github.com/cozmo/jsQR.git設置が完了するとこのようになります。このビューの中でやっていることは以下のとおりです。送信されてきたUUIDでログインができたらアラートを表示(ログインに失敗したら)2〜4を繰り返すそして、実行したものがこちらです(ウェブカメラにはシールを貼ってある状態です)ログイン部分をつくる残るは、Ajax通信でUUIDが送信されてきたときにログインを実行する部分です。先ほど作成したQrLoginControllerを開いてlogin()を追加してください。];}中身としてはシンプルで、送信されてきたUUIDを使ってユーザーをDBから探し出し、もしユーザーが存在していたらAuth::login()で強制的にログインさせるという流れになっています。テストしてみるでは、お待たせしました。ここまでで開発してきたコードで自動ログインを実行してみたいと思います。読み取るQRコードはテストユーザーの「太郎さん」のUUIDで、QRコードの画像は、いつも使わせてもらっているQRのススメさんでスマホをつかって作成することにします。実際はログインできたらユーザー専用ページへリダイレクトする形になると思いますが、今回はテストなのでここで終了にしたいと思います。お疲れ様でした!ソースコードをダウンロードする今回実際に開発したソースコード一式を以下からダウンロードすることができます。jsQRのインストールやDBテーブルの準備はご自身で実行していただく必要があります。【追記:2019.07.30】バグがあることがわかりましたので変更しました。おわりに今回、QRコードの読み取りをJavaScriptのみで実行してみましたが、感想としては「えっ、こんなに反応早いの!?」でした。正直なところ、ブラウザだとどうしても動作がモサッとしてしまって、ユーザビリティとしてはあんまり・・・なんてことになるのかと思いきや、あまりにQRコードの読み取りが早くてテスト画像は何回も取り直ししました😂(というのもQRコードは一部分がかけていてもデータを読み取れるので、QRコードが画面の真ん中に来ないのに自動ログインが完了してしまったんです)ということで今回はQRコードを読みとって自動ログインするサンプルを作ってみました。Piと連携させて入室管理システムなんていうのもつくれるんじゃないでしょうか。テクノロジーの進歩ってすごいですね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。