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
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