SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
即戦力人材と企業をつなぐ転職サイト「ビズリーチ」は2009年にサービスを開始し、スカウト可能会員数は190万人以上（2023年1月末時点）のユーザーにご利用いただくサービスに成長しました。 今回、その「ビズリーチ」の認証基盤としてIDaaS（Identity as a Service）のOkta Customer Identity Cloud（Powered by Auth0）（以下Auth0という）の導入を行いました。 本記事では認証基盤を刷新するに至った背景とAuth0を用いて100万を超えるユーザーをログアウトさせることなく移行した方法についてご紹介いたします。 前提 本記事で得られる情報 本記事を読むことで以下のような情報を得ることができます。 IDaaSを選ぶ理由 IDaaSを用いて認証・認可を運用中のプロダクトに組み込んだ事例 運用中のプロダクトに組み込む際に発生しうる課題と対
Firebase Authentication 7つの落とし穴 - 脆弱性を生むIDaaSの不適切な利用 - Flatt Security Blog
はじめに こんにちは、株式会社 Flatt Security セキュリティエンジニアのぴざきゃっと (@pizzacat83) です。 認証機構を自作せずに導入できる Firebase Authentication は様々なアプリケーションにて利用されていますが、その特性を十分に理解せずに導入すると、実は不具合や脆弱性が生じることがあります。そこで本稿では Firebase Authentication を利用するうえで、注意しなければ不具合や脆弱性に繋がりうる 7 個の「落とし穴」について解説します。 はじめに IDaaS の利点と欠点 落とし穴 1. 自己サインアップ リスク 対策 不十分な対策 落とし穴 2. ユーザーが自身を削除できる 対策 落とし穴 3. 他人のメールアドレスを用いたユーザー登録 リスク リスク 3-1. メールアドレス誤入力によるユーザー乗っ取り リスク 3-2
みなさま、認可の設計に苦しんでいるでしょうか？私は苦しんでいます。苦しまなかった瞬間などありません。昔「アプリケーションにおける権限設計の課題」を執筆しましたが、あれから3年以上が経ちます。 当時は認可の設計に関する情報がうまくまとまっている記事などほとんど無く、調べに調べて得たナレッジを書き記したのが上記の記事です。3年以上経ちますが、苦悩が今も特に変わっていないことが驚きです。 ただし、世の中的には認可のライブラリであったりサービスというのは少しずつ増えてきている印象があります(Auth0の OpenFGA であったりOsoの Oso Cloud 、Asertoの Topaz )。 認可の設計に関する記事も少しずつ増えている印象があり、その中でも本記事で紹介したいのがAuthorization Academyです。 これは認可サービスである Oso Cloud やOSSのライブラリ o
Reactチュートリアル2：レビューサイトを作ろう
本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 React チュートリアル：犬画像ギャラリーを作ろう 基本情報技術者試験レベルの関係データベースの知識 本資料で学ぶこと 本資料では以下の内容を学びます。 Express と Sequelize による API サーバー開発 React と API サーバーの連携 Cross-Origin Resourcer Sharing React によるルーティング Auth0 によるユーザー認証 Heroku による API サーバーの公開 ライセンス この作品はクリエイティブ・コモンズ 表示 4.0
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。サーバーサイドエンジニアの越川氏からはToken認証機能について。 Rails APIモードで開発するときの認証用のトークンはどこに保存すればいいの問題 越川佳祐氏：私からは、「Rails APIモードにおけるToken認証機能について」というテーマでLT（ライトニングトーク）をしようと思っていたんですが、スライドを作っていて「あれ、これ別にRailsだけの話じゃなくない？」と思ってしまいました。みなさんの中にも、そう思う方がいるかもしれないんですが、もうこれで作っちゃったのでご了承ください。 私は株式会社iCAREで、サーバーサイドエンジニアをしている、越川と申します。Twitterは@kossy0
こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成
Auth0のアクセストークンをLocal Storageに保存するのは安全？メリット・デメリットをin-memory方式と比較して検討する - Flatt Security Blog
※追記: 本記事の続編としてin-memory方式からアクセストークンを奪取するPoCを下記記事で公開しました。ぜひあわせてご覧ください。 はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事では、Auth0のSPA SDKでアクセストークンのキャッシュを有効化する際の考慮ポイントについて紹介し、それを切り口にアクセストークンの保存場所に関してin-memory方式とlocalStorage方式の2つについて解説します。 Auth0のようなIDaaSは昨今かなり普及が進んでいると思いますが、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用まで観点に含めて専門家がチェックすることが可能です。 ご興味のある方は是非IDaaS利用部
【PoC編】XSSへの耐性においてブラウザのメモリ空間方式はLocal Storage方式より安全か？ - Flatt Security Blog
はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Auth0のアクセストークンの保存方法について解説した前回の記事の補足となる記事です。前回の記事の要旨をざっくりまとめると以下のようなものでした。 Auth0はデフォルトではアクセストークンをブラウザのメモリ空間上にのみ保存するin-memory方式であり、XSSへの耐性のなさ等の理由でlocalStorageで保存することを推奨していない しかし、XSSでアクセストークンを奪取できるのはin-memory方式でも同じのはず(検証は行いませんでした)。localStorage方式を過度に忌避する必要はないのではないか なお、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用
Auth0にPassKeyが搭載されたぞ！！！
はじめに 先日ふと Auth0 のダッシュボードを眺めていると、興味深い項目が表示されていました。 Passkey がある!!! なので、今回は Auth0 に搭載されたパスワードレス認証方式である Passkey の説明をしていきます。 なお、Auth0 の設定方法についてはAuth0 からリリースされた記事を参考にして、記載しています。 パスワード認証の課題 Passkey の説明をするまえに、パスワード認証の課題について見ていきます。 認証方法として当然とされているパスワード認証ですが、以下の 3 つの課題を持っています。 ① パスワードの使い回し ② 推測されやすいパスワードの使用 ③ フィッシングアプリへのパスワード入力 それぞれ見ていきましょう。 ① パスワードの使い回し ログインが必要なアプリにはそれぞれ異なるパスワードを使用するというのは皆さんご存知だとは思います。 とはい
AWSアカウント シングルサインオン構成のご紹介(電通デジタル自社開発部門 2020年上期版)｜Dentsu Digital Tech Blog
電通デジタルでSite Reliability Engineer(SRE)をしている齋藤です。 先日(8/5)に7/22開催のAWS Black Belt Online Seminar「AWSアカウント シングルサインオンの設計と運用」の資料が公開されました。 資料中では以下の内容を説明しています。 ・AWSではアカウントに個別のIAMユーザを作成してログインする代わりに、IDプロバイダ(IdP)を使用し、シングルサインオンができること ・シングルサインオンは組織に独自のID基盤がある場合や、複数のAWSアカウントを使用している場合に有効であること ・シングルサインオンの実現の方法にはいくつかパターンがあり、運用をふまえながら何を選択するのがよいかであること 弊社の自社開発部署もAWSをマルチアカウント構成-シングルサインオンで運用しています。今回はその事例を上記資料の選定パターンチャート
Next.jsとAuth0で本管理サイトを作ってみた
Next.jsとAuth0を使って読んだ本を管理するサイトを作ったので使った技術等を紹介します。 github どんなサイトか？ まずは、どんなサイトを作ったのかを紹介します。読んだ本の管理を行うサービスで、主な機能は3つです。 Google Book APIに登録されている本を検索して本棚に保存できる 登録されていないなくてもアプリ内で新しく登録できる。 今まで本棚に登録した本の合計ページ数・本の高さ・本の重さを表示。1ページ当たり0.5g、0.15mmで計算します。 画面遷移 1.トップ画面 アプリのトップ画面。「アカウント作成・ログイン」ボタンを押すことでログイン画面に遷移します。 2.ログイン画面 Auth0を使ったログイン画面。認証方法は2種類あります。 Googleアカウントを使ったログイン メールを使ったログイン 3.ホーム画面 今まで読んだ本を管理する画面。最近読んだ本の表
SPAとサービス開発と認証への気持ちをまとめました
[Auth0] IPAの「クラウドサービス安全利用の手引き」で参考になりそうなAuth0の参考情報をまとめてみた | DevelopersIO
Auth0を始めとした様々な便利なSaaSがありますが、いざ業務で使おうとすると、社内・組織の承認が必要なるでしょう。 そんなときに便利なのが、IPAが公開しているクラウドサービス安全利用の手引きです。 中小企業の情報セキュリティ対策ガイドライン：IPA 独立行政法人 情報処理推進機構 付録6： クラウドサービス安全利用の手引き 本記事では、上記のクラウドサービス安全利用の手引きを参考にして、Auth0の関連リンクを紹介していきます。 まずは下記でAuth0の構成を見てから、Auth0の各ドキュメントを読むと用語が分かりやすいと思います。 おすすめの方 Auth0を使うにあたって、社内承認に必要な参考情報を知りたい方 はじめに 本記事の内容を参考にすれば、100％OKというわけではありません あくまでも参考情報であり、会社や組織などで最終判断をしてください Auth0の利用に関する文章を読
![[Auth0] IPAの「クラウドサービス安全利用の手引き」で参考になりそうなAuth0の参考情報をまとめてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/247159e9ae832fc63863b32c15dc936cd0630df3/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F03%2Fauth0-eyecatch.001.png)
こんにちは、のびすけです。Auth0のサンプルはダウンロードすると、結構多くのファイルが入っていて、内容を理解するのが難しい印象です。 今回はAuth0のサンプルとチュートリアルを試してみて、 必要最低限に削ぎ落としたサンプルを作ってみたので紹介します。 たったの3ファイルです。もっと削ぎ落としてindex.htmlだけにすることもできますが、あまり我流になると分かりにくいかもしれないのでなるべく公式のサンプル(auth0-samples/auth0-javascript-samples)の構成を変えないようにしています。 また、 サーバーサイドの実装は思い切って無しでGitHub Pagesを使って公開していきます。 静的サイト(Static Site)でのサンプルは思ったより例が無いですね。 完成コードだけを見たい人はこちらをご参照下さい。 動作イメージ 先に完成の動作イメージです。ア
「上司から『認証は簡単な仕組みだから自社開発できるでしょ？』『SaaSを使う必要あるの？』と問われ、Auth0（オースゼロ）の導入に苦戦しました」――。NTTドコモの兼岡弘幸氏（サービスデザイン部 クラウドアプリ開発担当 主査）は、Auth0日本法人がこのほど開いたイベント「Auth0 Day 2019」でこう語った。 ドコモは現在、3月にリリースしたドローン管理プラットフォーム「docomo sky」の会員ログイン基盤に「Auth0」を活用している。Auth0は、ログインに必要な認証機能や、二段階認証、不正アクセス検知などのセキュリティ機能を、ベンダーの米Auth0がクラウド経由で提供するサービス。SaaSの一種で、いわゆる「IDaaS」（Identity as a Service）にも該当する。 IDaaSを活用すると、開発の高速化、ID管理の効率化、セキュリティ強化などが見込まれるた
Auth0 は認証・認可サービスをクラウドで提供している SaaS ベンダーです。 「認証」という機能はどのアプリケーションにも求められる重要な要件ですが、プロダクトの本質的なビジネス価値を持たない場合が多いでしょう。Auth0 を使用することで、この「認証」機能という Undifferentiated Heavy Lifting な作業を排除できます。 本記事では、簡単な React アプリケーションを作成して Auth0 を使用した認証機能を実装します。また、作成したアプリケーションを Vercel（旧 Zeit now）にデプロイする方法を解説します。ユーザのサインアップ後の確認メールなどは SendGrid から送信されます。 以下は、本記事で紹介するアプリケーションの簡単な構成図です。また、本記事で実装されたアプリケーションは Vercel にデプロイしています。こちらからアクセ
Leaner Technologies でエンジニアをしている @corocn です。 社内では IDaaS 利用していきたいねという機運が高まっているのですが、toB で SAML 対応の IDaaS について比較検討してみて難しいな〜と思ったところをまとめてみました。 前提 BtoB SaaS では、初期のプロダクトの領域を起点に事業領域を隣接する領域に広げていくことが多いですよね。バックオフィス向けの SaaS を開発しているメガベンチャーを見ているとそう感じます。 新しく立ち上げたプロダクトを既存のユーザーさんにも提供したい。そうなると、必然的に複数のプロダクトに対して共通で ID 基盤を持ちたくなるはず。認証ドメインを分離しようとすると、自前で作るか、KeyCloack などの OSS をベースに運用するか、IDaaS の利用を検討することになるでしょう。 最初は認証基盤も含めて
Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる - SMARTCAMP Engineer Blog
エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne
技術書典8で頒布予定でした。 ## 概要 ユーザーのIDを管理するのはWebサービスを展開する上で必要になりますが、独自で実装するにはハードルが高いです。外部のサービスを利用することでユーザーのサインアップとサインインを比較的簡単に実現できます。この本ではCognito User Pools、Auth0、Firebase Authenticationを中心にサービスの紹介と比較をします。 ## 本書の目的 「認証サービスCognito Auth0 Firebaseを比べる」を手にとっていただき、ありがとうございます。筆者はこれまで、CognitoUserPoolsを利用してオンプレミスで実装されていた認証システムの移行や、Keycloakを利用したシステムの構築を担当してきました。そのなかで、認証の機能を提供するサービスは数多くあるにもかかわらず、サービスを比較するような情報があまりないと
Serverless FrameworkのExampleを見て、サーバーレスの様々な実装を学ぼう | DevelopersIO
概要 CX事業本部の佐藤です。 Serverless FrameworkではExampleとして、さまざまなサーバーレスの実装パターンを公開しています。実際に業務で使用するようなサーバーレス実装が多数ありサンプルコードが公開されているため、実際に動かしてみたりソースコードを見たりして学ぶことができ、とても参考になります。 サンプルコードはGitHubリポジトリに公開されています。 https://github.com/serverless/examples オーソドックスなサーバーレス実装パターン Exampleのサーバーレスのサンプルパターンの中からオーソドックスな実装パターンを一覧にしてみました API Gateway、Lambda、DynamoDBを使用したシンプルなREST API Cognito、Auth0を使用したカスタムオーソライザー Kinesis Data Streamと
Auth0をシングルページアプリケーションに組み込む方法がより簡単になりました！ #Auth0JP | DevelopersIO
Auth0のシングルページアプリケーション組み込み用モジュール「auth0-spa-js」がリリースされました。非常に簡単にAuth0を組み込むことができるようになりました。 auth0-spa-js が正式リリース！ 認証基盤サービス（IDaaS）であるAuth0。最近は国内でもかなり認知度が上がってきたように思います。 Auth0をシングルページアプリケーションに組み込む方法は、今まで auth0.js を使う方法が一般的でしたが、つい先日シングルページアプリケーションでの利用に特化したモジュール auth0-spa-js が正式リリースされました。 auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE どこが簡単になったの？ Auth0のReactサンプルアプリケーシ
こんにちは。ROBOT PAYMENT （以下、ロボペイ）でエンジニアをしているtakamoriです。 私が所属しているチームでは、請求先マイページ機能を開発しており、その中でユーザー認証基盤をAuth0からCognitoへと移行させました。そこで今回は、Auth0からCognitoへのユーザー移行手順を書いていきたいと思います。 ※ 本記事ではAuth0やCognitoの環境構築は対象外で、それぞれの環境が構築済み前提となります。 移行手順 Auth0からユーザーをエクスポート Auth0ユーザー情報をCognitoユーザー情報へマッピング Cognitoへユーザーをインポート Auth0からユーザーをエクスポート Auth0からのユーザーをエクスポートするには、ExportUsersJob APIを利用します。GetUsers APIを利用して取得することも可能ですが1,000件の取得
IDaaS（Identity as a Service）という言葉を耳にする機会が増えている。本来は複雑な手間やコストがかかる認証基盤の構築をクラウドサービスとして提供してくれるため、サーバー管理のコスト削減だけでなく、ライブラリの追加などにより工数が削減できるなど開発者にとってもメリットは大きい。日本においてもIDaaSを提供する企業が多く参入している中で、今注目を集めているのがAuth0だ。今回は、同社で認証アーキテクト責任者を務めるヴィットーリオ・ベルトッチ（Vittorio Bertocci）氏へ、盛り上がりをみせるIDaaSの現状やコロナ禍による影響などを尋ねた。 IDaaSはなぜ注目を集めるのか Auth0は、2013年に創業された認証基盤サービスを提供する企業であり、既に日本を含む世界中で9,000社以上の導入実績を持っているという。そのような同社で首席アーキテクト責任者を務
Auth0で保護されたAWS AppSync(GraphQL)をReactからApollo Clientで利用する方法をチュートリアルとしてまとめた | DevelopersIO
Create React App（CRA）を使ってアプリケーションを生成します。任意の作業用ディレクトリに移動後、下記のコマンドを実行します。 再現性を高めるために、パッケージのバージョンを固定してインストールしています。 npx create-react-app@3.4.1 --template typescript react-appsync-protected-by-auth0 cd react-appsync-protected-by-auth0 React RouterとAuth0のSPA用SDKをインストールします。 yarn add react-router-dom@5.1.2 @auth0/auth0-spa-js@1.8.1 yarn add -D @types/react-router-dom@5.1.2 Auth0をReactで利用する為のCustom Hookを作成
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
100万ユーザーをログアウトさせずに新認証基盤に移行した話
認可のアーキテクチャに関する考察（Authorization Academy IIを読んで）
認証用トークン保存先の第4選択肢としての「Auth0」
Next.jsとAuth0で会員制メディアを作る【1. 認証編】
Webサービス開発とSPAの認証の話 / spa-and-identity
Auth0 + GitHub Pagesでミニマムなログインサンプルを作る
ドコモの「IDaaS」導入秘話 「認証の仕組みは簡単」「自社開発できるでしょ？」と説く上司との戦い
React アプリに Auth0 でシュッと認証を組み込んで Vercel に爆速デプロイする - Qiita
BtoB SaaSにおけるIDaaSの選択が難しい
認証サービスCognito・Auth0・Firebaseを比べる - s-takayanagi - BOOTH
Auth0からCognitoへのユーザー移行 - ROBOT PAYMENT TECH-BLOG
Auth0認証アーキテクト責任者がIDaaSの今を語る