Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
Yahoo! JAPAN は日本にて検索やニュースといったメディアサービス、e コマース、メールサービスなど、100を超えるサービスを提供している企業です。これらのサービスで利用するためのユーザーアカウントも長年提供し続け、月間のログインユーザーは 5,000 万を超える規模となっています。しかし、このユーザーアカウントを提供する中で、ユーザーアカウントに対しての攻撃を継続的に受けており、また、アカウントを継続利用する上での課題についてユーザーから問い合わせも多く頂いていました。これらの課題の多くはパスワードという認証手段に依存するものでした。また、当時、技術的にもパスワード以外の認証手段を提供するための機能やデバイスの普及が始まりつつありました。こういった背景のもと、Yahoo! JAPAN はパスワードによる認証からパスワードレスな認証へ移行すると判断しました。 なぜパスワードレスか
フィッシングサイトへの自動入力のリスク SMS OTPとWebサイトが紐付かない状態では、正規のSMS OTPがフィッシングサイトへ自動入力されるリスクが生じる。現実的なリスクとして、GutmannらはMITMと組み合わせた「ログインにおける2要素認証の回避」と「ソーシャルログインの偽装による電話番号確認の回避」、「オンライン決済における取引認証の回避」の3つのシナリオを示している⁷。2要素認証の回避につながるリスクは、iOSの自動入力がPayPayの偽サイトで発動した前回の検証で確認している。今回の検証ではAndroidの自動入力がPayPalの偽サイトで発動するか確認する。 2要素認証の回避 PayPalの偽サイトは前回と同様にMITMフィッシングフレームワーク「Evilginx2」で複製し、一般利用者が誤ってアクセスしないようインバウンド接続を制御した。Android 11のChro
ritou です。 Developers Summit 2023にてパスキーについて講演させていただきました。 資料も公開しました。難しい話ではないです。 同じ時間帯の他の講演者の方々が豪華なのでワンチャン誰も聞いていなかった説がありますが、それもいいでしょう。とりあえず無事に終わりましたというところで、発表内容全部書き出してみたをやってみます。 講演内容 (省略) 今回の内容です。コンシューマ向けサービスにおけるこれまでの認証方式を振り返り、最近話題のパスキーとはどういうものかを紹介します。そして、実際に導入を検討する際に考えるべきポイントをいくつか紹介できればと思います。 早速、これまでのユーザー認証について振り返りましょう。 最初はパスワード認証です。知識要素を利用する認証方式であり、ユーザーとサービスがパスワードを共有します。 このパスワード認証を安全に利用するために、ユーザーとサ
ritouです。 Digital Identity技術勉強会 #iddance Advent Calendar 2020 19日目の投稿です。 急に穴が空いたのでアカウントリカバリーとかの話でリカバリーしましょう。 今年は認証やら本人確認などが騒がしい年でありました。 大きな問題の話はおいといて、自分のブログ記事に書いたぐらいの話を用いて振り返ります。 1. 一般的なパスワード認証 - パスワード = メール/SMSを用いたパスワードレス認証? bosyuがTwitter/Facebookのソーシャルログインに加え、メールでリンクや認証コード的な文字列を送信、それを検証することでログイン状態とするパスワードレスな認証機能を実装されていました。 bosyuが実装したメールアドレスでの登録/ログイン機能とは!? - r-weblife (追記: ころちゃん氏が関連する記事を書いてました。パスワ
Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x Stay organized with collections Save and categorize content based on your preferences. Yahoo! JAPAN is one of the largest media companies in Japan, providing services such as search, news, e-commerce, and e-mail. Over 50 million users log in to Yahoo! JAPAN services every month. Over the years, there
Sign-up form best practices Stay organized with collections Save and categorize content based on your preferences. Help your users sign up, log in and manage their account details with a minimum of fuss. If users ever need to log in to your site, then good sign-up form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress. Poorly designe
こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個
おはようございます、ritouです。 Google I/O の "A path to a world without passwords" っていう発表、ご覧になりましたか？ www.youtube.com FIDO, WebOTP, FedCM...いいネタ揃ってますね！今回はFIDOの話をしましょう。 パスワード認証はもう終わり！時代はパスワードレス認証ですよと言い続けてはや数年経ちましたが、最近こんなプレスリリースが出ていました。 prtimes.jp すべての人にとってウェブをより安全で使いやすいものにするための共同の取り組みとして、Apple、Google、Microsoftは本日、FIDOアライアンスとWorld Wide Web Consortium（以下、W3C）が策定した共通のパスワードレス認証のサポートを拡大する計画を発表しました。 何やら大ごと感ありますが、3行でまと
WebOTP API は、特別な形式の SMS メッセージの受信時にワンタイムパスワードを生成することで、電話番号がユーザーのものであることを検証する方法を提供します。 電話番号はアプリケーションがユーザーを識別する方法としてよく使用され、番号がユーザーのものであることを検証するため、SMS がよく使用されます。通常のシナリオでは、ユーザーにワンタイムパスワードを含むメッセージが送信されます。そして、ユーザーはこのパスワードを、番号がユーザーのものであることを検証するフォームにコピペしなければならないでしょう。 WebOTP API は、アプリケーションがパスワードをコピペなしで自動で受信して検証することを可能にし、この手続きで生じるイライラを解消します。
今度は「WebOTP」についてFrontend Weekly LT（社内勉強会）でお話しました - BASEプロダクトチームブログ
はじめましての人ははじめまして、こんにちは！フロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 今回は社内勉強会 Frontend Weekly LT にて、WebOTP / OTPの概要と使い方について発表をしたので、その内容を皆さまにも共有できればと思って記事にしました。 （以前、同じように社内勉強会での発表内容が記事化された 「Frontend Weekly LT（社内勉強会）で「Vite」について LT しました」の記事もぜひどうぞ） 元々、BASEのどこかに使えないかなぁと思って個人的に調べていた内容を社内共有用にまとめたものなので一部 web.dev の記事をなぞっただけの部分もあるのですが、その内容と共にBASEでのOTPの使い方やWebOTPの利用状況についてのシェアしていければと思います。 イントロ Chrome 93から新機能が追加され、Andr
SMS OTP form best practices Stay organized with collections Save and categorize content based on your preferences. Asking a user to provide the OTP (one time password) delivered via SMS is a common way to confirm a user's phone number. There are a few use cases for SMS OTP: Two-factor authentication. In addition to username and password, SMS OTP can be used as a strong signal that the account is o
Chrome 93で実装されたCross Device WebOTPフローを試してみた - r-weblife
おはようございます ritou です。 8月ですよ。お仕事の進捗大丈夫ですか？ 最近、Google方面からDecoupled AuthNの香りがしたので追ってみました。 何の話? この話です。 developer.chrome.com WebOTPとは? Webアプリケーションがモバイル端末でSMS経由のOTP認証をしようと思った時、画面に「認証コードを送信しました」なんて出た後にSMSを確認できるアプリを起動して確認してまたブラウザに...とかをやったことがある人は多いでしょう。 WebOTPとは、モバイル端末上のブラウザであればアプリの切り替えをせずにワンタップでSMSで受け取ったOTPの値を読み込んで検証リクエストに繋げられる、しかもSMSを発信したWebアプリを特定できるフォーマットになっていることでフィッシングサイトからはこのフローを使えなくするような仕組みのことです。 web.
フィッシング対策観点でメールでリンクが送られない世界を目指すために我々は何ができるか - r-weblife
ritou です 急に寒くなりましたね。 この記事は何の話か 最近のメール経由のフィッシングの話で、 その辺のユーザーにとって、メールの送信元が正規のものかどうかの確認は容易ではない さらに、メール本文に含まれるURLの確認が容易ではない という現状があります。 前者がうまいこと解決されると一番良いんでしょうけれども、そうもいかないのでしょう？ 後者のところでよく「メールに含まれる怪しいリンクをクリックしないでください」と言うのがあります。 そもそも怪しいかどうかがわからないからクリックするわけなので、「怪しい」部分を説明するのも大事なことですが、細けーことは一般ピーポーには無理なので、「メールに含まれるリンクをクリックしないでください」まで振り切る方がいい気がしてます。 しかし、これはこれで サービスはユーザーとのコミュニケーションツールとしてリンクを送る(クリックして欲しい) ユーザー
はじめに 本記事はBASE アドベントカレンダー 2023の14日目の記事です。 こんにちは！NEW Dept/Pay ID Dev/Web Backendエンジニアをしている@zanです。 主にPay IDの機能開発を担当しています。 SMS OTPで用いられるメッセージの形式を題材に、 どのような経緯で形式が決まったかを調べてみました。（ちょっとした考古学？みたいなものです。） SMS OTPとは SMS OTPと関連技術について振り返ってみましょう。 ...と思いましたが、 過去@gatchan0807が書いた今度は「WebOTP」についてFrontend Weekly LT（社内勉強会）でお話しました に詳しく書かれているので、気になる方はご一読いただけると幸いです。 （※2021年の記事なので一部情報が古くなっている可能性があります。） 簡単に言ってしまうと SMS OTP =
Verify phone numbers on the web with the WebOTP API | Identity | Chrome for Developers
What is the WebOTP API? These days, most people in the world own a mobile device and developers are commonly using phone numbers as an identifier for users of their services. There are a variety of ways to verify phone numbers, but a randomly generated one-time password (OTP) sent by SMS is one of the most common. Sending this code back to the developer's server demonstrates control of the phone n
開発本部 MIXI M事業部の ritou です。 MIXI M｜ミクシィエム - 決済やアカウント認証、個人データを管理する統合プラットフォームサービス MIXI Mは、認証から決済までワンストップで提供できる基盤システムおよびWALLETサービスです。 認証に関しては、MIXI Mとして提供しているサービスのID管理だけでなく、社内外のサービスにID連携機能を提供するIdentity Providerでもあります。決済に関しては最近、PCI 3DSの準拠認定についての記事が公開されていますので、こちらもぜひご覧ください。 MIXI MにおけるPCI 3DS準拠のための道のり | by k-asm | Sep, 2023 | MIXI DEVELOPERS この投稿では、MIXI Mのパスキー対応について紹介します。 これまでのユーザー認証 MIXI Mでは、サービス開始当初からパスワー
色々言われているSMS OTPの需要
ritouです。 最近、SMS経由でOTPを送信する認証方式について色々言われています。 SMS Traffic Pumping Fraud Twitterもやられたというやーつ。 認証に限らず他の用途でもSMS送信を利用しているサービスにとっては頭の痛い問題。 SIMスワップ SIM再発行時の対面KYCのところを突破されたらどうしようもない感 SMSだけに頼っているサービスならSMSをやられたから被害に遭う、それはそうだが... この件は割とターゲットを絞って行われたお金持ち狙いの攻撃なのでは？とも思わなくない こういう事案が発生しているので、SMSを使ってどこまでできていいのかという話、やられたらどうするかの想定、リスク受容について見直すべきという意見はごもっともです。 もっと簡単にeSIMが発行できるところがあるみたいな話もありますし、今回の例では悪い人が対面で偽造免許持っていく手間
こんにちは！BASE product blog編集部です。みなさまそろそろ年の瀬ですが、いかがお過ごしでしょうか。 今年も恒例のBASEメンバーによるアドベントカレンダーを開催します！ 毎年公開しているアドベントカレンダーも今年で6回目を迎えます。 過去の様子 2022年のアドベントカレンダー 2021年のアドベントカレンダー 2020年のアドベントカレンダー 2019年のアドベントカレンダー 2018年のアドベントカレンダー 今年も毎日記事を公開する予定です。1日に2記事リリースされる日もあります！ 下記の記事カレンダーも随時更新していきますので、ぜひお楽しみに！ 記事カレンダー 日付 テーマ、タイトル 12/1 創業期CTOが残っている会社が上場するとどうなるのか 12/1 HTML / CSS でショップに雪をふらせましょう ⛄ 12/2 インシデント対応入門 〜初動フェーズ編〜 1
What's new, what's missing, new challenges and new abilities by Maximiliano Firtman Twitter @firt About Newsletter Published 4 years ago (16 Sep 2020) About 21 min reading time #ios #webview #pwa #store From today, iOS 14 and iPadOS 14 are available to most users in the world. I've played with it, and here you have a list of the essential changes for PWA and Web Designers and Developers. As usual
みなさん、二要素認証は実装していますか？ WWDC21にて発表があったとおり、iOS15, iPadOS15, Safari15でのiCloudキーチェーンがTOTPにも対応しました。 従来であれば、Google AuthenticatorやMicrosoft AuthenticatorなどTOTPに対応した別アプリを使用する必要がありましたが、OS自体に組み込まれることでApple製品上ではよりシームレスな認証体験ができるようになります。 すでにTOTPに対応しているサービスでは特別な対応をすることなく、ユーザーはiCloudキーチェーンのTOTPを使用できます。 ですが、ちょっとしたポイントに気をつけるだけで、ユーザーはより便利に使いやすくなります。 本記事では、iCloudキーチェーンを使用するユーザーがより快適に二要素認証を使用する上で、実装上気をつけるべきポイントについてご紹介し
Fill OTP forms within cross-origin iframes with WebOTP API Stay organized with collections Save and categorize content based on your preferences. SMS OTPs (one-time passwords) are commonly used to verify phone numbers, for example as a second step in authentication, or to verify payments on the web. However, switching between the browser and the SMS app, to copy-paste or manually enter the OTP mak
おはようございます、ritouです。 何の話か 6/21(火) 19時から、OpenIDファウンデーション・ジャパン主催のイベントがあります。 openid.connpass.com ここで取り上げられるFedCMについて、3部作ぐらいで 非公式解説 を書いていきます。 ID連携の課題とFedCMのアプローチ 今回はこれ 現状のFedCM実装解説 FedCM vs OIDC 仕様の差分、RP/IdPの対応、差分解消案 上記イベントでの自分の発表内容は2,3あたりになる予定です。 FedCMとは FedCMについては、4月末ぐらいにいろいろなドキュメントが公開されました。 英語が読める方はこんな非公式情報を信用せずに、公式なドキュメントを読みましょう。 developer.chrome.com FedCMで解決したい課題 現在、OpenID ConnectやSAMLを用いたID連携はわりと普
Federated Credential Management API | Privacy Sandbox | Google for Developers
Federated Credential Management API Stay organized with collections Save and categorize content based on your preferences. A web API for privacy-preserving identity federation. What is FedCM? FedCM (Federated Credential Management) is a privacy-preserving approach to federated identity services (such as "Sign in with...") whereby users can log into sites without sharing their personal information
Federated Credential Management API | Privacy Sandbox | Google for Developers
Federated Credential Management API コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 プライバシー保護 ID 連携のためのウェブ API。 FedCM とは FedCM（Federated Credential Management）は、フェデレーション ID サービス（「... でログイン」など）に対するプライバシー保護のアプローチであり、ユーザーは ID サービスやサイトと個人情報を共有せずにサイトにログインできます。 実装ステータス Chrome プラットフォームのステータス FedCM は Chrome 108 で実装されています。 FedCM の提案は一般公開されています。 FedCM は、他のブラウザではまだサポートされていません。 Mozilla は Firefox 用のプロトタイプを実装しており、Apple
This is a compatibility list of supported features on Safari on iOS and iPadOS vs. what's available in the most used PWA browser in current market share for similar mobile devices: Google Chrome on Android. This list is based and maintained on private tests I frequently do. WebKit is getting better documenting these things, but there is still a huge gap. High-level PWA support # Ability Supported
こんばんは、ritouです。 いつもお友達同士でキャッキャウフフさせていただいているTwitterにてこんな投稿をしたところ、珍しくたくさんの反応をいただけました。 ピッコマって漫画サービス、前回のログイン方法を覚えて教えてくれる。ソーシャルログイン実装してるとこは見習うべき。 pic.twitter.com/obAMF6b1Rb— 👹秋田の猫🐱 (@ritou) 2021年8月17日 簡単に説明すると、 ソーシャルログインとかメアド/パスワードとかでログインできるサービスがある 一度ログアウトして再びログイン画面を訪れると、「お前は前回Facebookでログインしたよな」って教えてくれた どれ使ってたっけ...で迷わない！いい感じ〜 ってな話です。 特にソーシャルログインのボタンが並んでいる時にどれ使ってたっけ...っていう問題はNASCAR Problem(そのうちJapanese
Googleは8月31日(現地時間)、デスクトップ版Chromeブラウザの最新版「Chrome 93」をリリースしました(Chrome Releases、Neowin)。 Chrome 93.0.4577.63では、深刻度Highの脆弱性5件を含む合計27件の脆弱性が修正されています。セキュリティ関連の修正の詳細はChromium Security Pageで確認可能です。 Chrome 93では、TLS(Transport Layer Security)における3DES暗号ブロックチェイニング(CBC)のサポートが廃止されました。Googleは過去数十年の間にAESベースのより優れた代替品が登場しているとし、3DESは、Sweet32攻撃にも弱く、特にモバイルプラットフォームでは動作が非常に遅く、バッテリーを消費し、CPUに負荷がかかると削除した理由を説明しています。またALPACA攻撃
Theme 第 82 回のテーマは 2021 年 4 月の Monthly Web です。 Show Note Chrome 動向 Stable: 90 Updates Chromium Blog: Chrome 91: Handwriting Recognition, WebXR Plane Detection and More https://blog.chromium.org/2021/04/chrome-91-handwriting-recognition-webxr.html Origin Trials New Origin Trials Declarative Link Capturing for PWAs WebTransport WebXR Plane Detection API Completed Origin Trials battery-savings Meta Ta
先日、ライブの帰りに新横浜〜東京間で新幹線を使おうと思ったら、EX予約のきっぷ発券手続きがあまりに面倒すぎて大変でした。 これ、知人でもハマっている人が複数いまして、例えば 乗車券は別に持ちたい（特定都区市内制度を使いたい等）ので、特急券だけEX予約した人 小学生未満の子供などSuicaを持たない同行者がいる旅行 などの場合は同様の罠にハマると思います。 今回の私がたどった発券フローは以下の通り。 flowchart TD classDef redblock fill:#ee7800,font-weight:bold; A[EXアプリに指紋認証でログイン] --> B[EXアプリ上で受取QRコード用ワンタイムパスワード発行]:::redblock --> C[登録メールアドレスでワンタイムパスワード受信]:::redblock --> D[EXアプリにワンタイムパスワード入力]:::red
・@以降は対応するドメイン、#以降はワンタイムパスワード iOS と Android ・iOS: OSでサポートしていて自動的に入力まで行われる。特に対応はいらない。 ・Android: 日本語SMSメッセージでは自動では行われない様子。スクリプトで対応。 Chrome on Android 用スクリプト <script> if ('OTPCredential' in window) { window.addEventListener('DOMContentLoaded', function(e) { var input = document.querySelector('input[autocomplete="one-time-code"]'); if (!input) return; var ac = new AbortController(); var form = input.cl
WebOTP API を使用してウェブ上で電話番号を確認する | Identity | Chrome for Developers
WebOTP API とは 最近では、世界中のほとんどの人がモバイル デバイスを所有しており、デベロッパーはサービス ユーザーの識別子として電話番号を使用するのが一般的です。 電話番号の確認にはさまざまな方法がありますが、SMS によってランダムに生成されるワンタイム パスワード（OTP）が最も一般的な方法の 1 つです。このコードをデベロッパーのサーバーに送信すると、電話番号を制御することができます。 この考え方はすでに多くのシナリオで採用されており、 ユーザーの ID としての電話番号。ウェブサイトによっては、新しいサービスに登録する際に、メールアドレスではなく電話番号を尋ねて、アカウント ID として使用することがあります。 2 段階認証プロセス。ウェブサイトはログイン時に、セキュリティを強化するため、パスワードなどの知識要素に加えて、SMS でワンタイム コードを SMS で送信す
Webにおいて、二要素認証やアカウント復旧のためにSMSでワンタイムパスワードを発行し、フォームに入力させる事がある。 ユーザはSMSで送られたきたワンタイムパスワードをコピー&ペーストなり手入力することになる。 端末(電話番号)の所持確認をより自動的に行えるように、「SMS Receiver API」という機能がChromeの開発者メーリングリスト(Blink-dev)で議論されている。(AndroidのSMS Retriever APIをもとにしている) 提案自体は、下記URLにある。 https://github.com/samuelgoto/sms-receiver Demo Githubリポジトリ上にあるgitアニメーションがわかりやすい。幾つか検討案があり、オプトアウト をするかや、モーダルを出すかの違いがある。 ユーザは電話番号を入力する (もしくは候補から選択する) 電話番
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sign-in form best practices | Articles | web.dev
Yahoo! JAPAN はパスワードレス認証で問い合わせを 25% 削減、ログイン時間も 2.6 倍速に
SMS OTPの自動入力によるリスクとその対策
Developers Summit 2023にてパスキーについて講演しました
パスワードレスな認証方式やアカウントリカバリーについての振り返り2020
Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x | web.dev
Sign-up form best practices | Articles | web.dev
ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う - hogashi.*
FIDOの最新動向から考える巨大プラットフォーマーとの関係 - r-weblife
WebOTP API - Web API | MDN
SMS OTP form best practices | Articles | web.dev
SMS OTP で使われるメッセージの形式の歴史 - BASEプロダクトチームブログ
パスワードレス認証をより安全便利に - MIXI Mがパスキーに対応しました
BASE Advent Calendar 2023はじまるよー！ - BASEプロダクトチームブログ
Safari on iOS 14 and iPadOS 14 for PWA and Web Developers－firt.dev
iCloudキーチェーンのTOTPを使いやすくするちょっとした気遣い | 株式会社ヌーラボ(Nulab inc.)
Fill OTP forms within cross-origin iframes with WebOTP API | Articles | web.dev
FedCM入門 その1 ~ ID連携の課題とFedCMのアプローチ - r-weblife
iOS PWA Compatibility－firt.dev
NASCAR problemを軽減できるかもしれない簡単な実装とさらなる妄想 - r-weblife
Google Chrome 93 リリース - WebOTPのクロスデバイスサポートやCSS Module Scriptsなど
Chrome 93がリリース - WebOTPのサポートなど | ソフトアンテナ
ep82 Monthly Web 202104 | mozaic.fm
エクスプレス予約のきっぷ発券手続きが面倒すぎる件 - むしゃくしゃしてやった，今は反省している日記
【JavaScript】WebOTP API で UI/UX を向上させる - Qiita
WebのSMS Receiver API (WebOTP API) - Qiita