1Password で 2FA の OTP が自動補完されない

id:kizashi1122 です。

弊社では Re:lation という SaaS 型の BtoB サービスを展開しています。
認証方法はID/パスワードだけでなく、2FA や SAML 認証もサポートしています。

しかし

私自身も、本サービスを 2FA を利用して使っています。 しかしちょっと気になるところがありました。

1Password で 2FA の OTP(ワンタイムパスワード)が自動入力(自動補完)されないんです!!

OTPが保管されない

しかたなくコピー&ペーストしていました。
(ちゃんとペースト時にOTPが6分割されて入力されます)

なんとかしたい

なんとかならないか。自動的に OTP が入力されるあの体験はなかなかに気持ちいい。
(1Password でパスワードと2FAを一緒に管理するのはどうなんだという問題は置いておいて)

さて、1Password は何をもって自動入力しているのでしょうか。

1password.community

このあたりを見ますと中の人が HTML の name 属性が OTP だったり two_factor だったら自動入力されると言っています。 どうやら DOM 解析をしているようですね。
どうも name 属性の値が重要らしく、 secretKey では補完されないようです(少なくともこの記事時点では) name 属性の値がそれっぽいとうまくいくようです。

さて、Re:lation ではもともと Javascript でサブミットの処理をしていたので、テキストフィールドに name 属性を指定していませんでした。 上記の理屈上、補完されないことと整合します。

これはやってみる価値がありそうです。

やってみた

名前を otp にしてみました。6つテキストフィールドがあるので ott[0] ~ otp[5] にしてみました。

name属性追加

結果

やったー。自動入力されたー。

1Password で自動入力できた

このことがお役に立てればうれしいです。