1月28日に、「パスキーのすべて」という本を共著で出版させてもらうことになりました。
出版社の技術評論社のページに、本書の「はじめに」を掲載頂いています。1分で読み終わるので是非ご覧ください。
また、数ページほど、本文からの抜粋もご覧頂けます。どういった内容が書いてあるのか、イメージをつかんで頂いて、購入をご検討ください。
また、共著者のえーじさんが、本を紹介するブログを書いてくださっています。
さらに、テスト販売で10冊置いていただいていた書泉さんでは、完売されたということです。お買い求め頂いた方、ありがとうございます。ぜひご感想をお聞かせください。
諸先輩方のように、毎日ブログを書くことは私にはとても難しいので、3人で共著なのを理由にして、1月28日の発売まで、3日に1本ぐらいの感覚で、どこかのブログで記事を書き続けるチャレンジをしてみたいと思います。1ヶ月ぐらいならきっと続くことを祈ります。これは7本目。
パスキーを普及させるには、まずパスワードマネージャーを普及させ、クレデンシャルの管理を任せることに慣れてもらうことが必要なのではないかという意見があります。
もっと過激な（？）意見としては、そもそも、パスワードマネージャーが普及すれば、仮にパスキーが普及しなくとも、インターネットのサービスは十分安全なのではないかという意見もあります。（鍵アカなので引用省略）
と、いうことで、今回は、パスワードマネージャーを強引に普及させるため、
パスワードマネージャーからの入力しか受け付けない パスワードフォームを作ってみたいと思います。
今回の投稿はネタに走っています。あまり参考にしないでください。
実際に作ってみたもの
パスワードマネージャーによる入力は可能で、ログインボタンも押せますが、
キーボードの入力や、右クリックでの貼り付けをしようとすると、エラーが表示されます。
作り方
実際は、ほとんどAIに書いてもらったので、私はコピペをしただけです。
思いつく限りの操作を無効化して、パスワードマネージャによる入力のみを受け付けるようにします。
MacのChrome, Safariでは動くことを確認しています。
実際の動きはこちらのデモページで確認できます。
<body>
<div class="login-form">
<h2>ログイン</h2>
<form id="loginForm" action="#" method="post">
<input
type="text"
id="username"
name="username"
placeholder="ユーザーID"
required
/>
<input
type="password"
id="password"
name="password"
placeholder="パスワード"
required
onpaste="return nopaste()"
oninput="return validateInput()"
/>
<div id="errorMessage" class="error-message"></div>
<button id="submitButton" type="submit" disabled>ログイン</button>
</form>
</div>
<script>
const passwordInput = document.getElementById("password");
// password欄にフォーカスがある状態でキーボードを押したらすべてエラーとする
passwordInput.addEventListener("keydown", function (event) {
showError(
"パスワードの手入力・ペーストはできません。パスワードマネージャーを利用してください。"
);
event.preventDefault();
return false;
});
passwordInput.addEventListener("keypress", function (event) {
event.preventDefault();
return false;
});
passwordInput.addEventListener("keyup", function (event) {
event.preventDefault();
return false;
});
// inputのonpasteで呼ばれる
function nopaste() {
showError(
"パスワードの手入力・ペーストはできません。パスワードマネージャーを利用してください。"
);
return false;
}
let errorTimeout;
function showError(message) {
const errorMessage = document.getElementById("errorMessage");
errorMessage.textContent = message;
errorMessage.style.opacity = "1";
clearTimeout(errorTimeout);
errorTimeout = setTimeout(() => {
errorMessage.style.opacity = "0";
}, 2000);
}
// password欄のoninputで呼ばれる（パスワードマネージャーによる入力時に呼ばれる）
function validateInput() {
var password = document.getElementById("password").value;
var errorMessage = document.getElementById("errorMessage");
if (password.length <= 10) {
showError("ユーザーIDとパスワードは10文字より長く設定してください。");
return false;
} else {
document.getElementById("submitButton").disabled = false;
errorMessage.style.display = "none";
return true;
}
}
// ログインボタンを押された際の処理
document
.getElementById("loginForm")
.addEventListener("submit", function (event) {
event.preventDefault();
alert("成功");
});
</script>
</body>
よい子はマネしないでください。
実際には、もう少し優しく丁寧に、パスワードマネージャーの利用を案内するのだと思います。
それにもちろん、開発者ツールで動作を上書きすることが可能なので、ちょっと詳しい人には回避されてしまうでしょう。
不必要にユーザの自由を制約するUIは、ユーザから嫌われてしまいます。正々堂々、パスワードマネージャー、そしてパスキーの啓蒙を続けるしかないですね。
今回の投稿はネタに走っています。あまり参考にしないでください。