質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

OAuth

OAuth(Open Authorization)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3651閲覧

SPAでのログイン、認証について

suny

総合スコア48

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

OAuth

OAuth(Open Authorization)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

4クリップ

投稿2020/06/28 04:24

初めてSPAでアプリを実装しています。

そこでログイン、認証機能を作ろうと思い色々ググって見たのですがそこで、

Reactを始めとしたSPA(Single Page Application)では一般的にトークンを用いた認証方式が用いられます。そもそも今までのWebアプリケーションフレームワークなどではセッションベースの認証方式が一般的でした。

しかし、SPAではサーバーサイドにそのようなユーザ情報を保存しないというのが一般的です。

ではサーバーサイドに情報を保存しないのであれば、どこに認証情報を保存すればいいのでしょうか?
当然クライアントサイドということになります。サーバーサイドから発行されたトークンと呼ばれるものをクライアントサイドに保存し、
それをサーバーへのアクセス時に送ることで認証を行います。

とあったのですが、なぜcockieを用いたsession機能は基本的に使わないのでしょうか。

またこれはRailsチュートリアルのようなパスワードとemailなどの別の属性が一致することにより、session情報をブラウザに保存することをSPAではしない。
という理解でよろしいでしょうか。

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

文字通りのSPA(Single Page Application)であれば、画面遷移をしないので、画面間で状態を受け渡しする必要がありません。そもそもCookieは画面間で情報を保持するために考案されたものなので、画面遷移をしないのであれば、Cookieは必要ない理屈になります。すべてJavaScriptの変数に保存すればよいわけです。
ただ、SPAであってもCookieを使う場合はありますし、SPAでも、たとえば複数タブで使いたいということであれば、タブ間で情報を共有する必要があります。なので、Cookie等を使う・使わないは、アプリケーションの仕様次第で変わります。

またこれはRailsチュートリアルのようなパスワードとemailなどの別の属性が一致することにより、session情報をブラウザに保存することをSPAではしない。

という理解でよろしいでしょうか。

これは認証の状態をセッションで保持することを指しているのだと思いますが、純粋なSPAであれば前述のようにセッションを使わないことができますし、マルチタブに対応や、SPA的ではあってもページ遷移もあり得るということであれば、セッションを使わなければならないケースもでてきます。

投稿2020/06/29 02:05

ockeghem

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suny

2020/06/29 02:27

返答ありがとうございます! 理解できました。 再度質問なのですが、「cookieなどの実装に関してはアプリケーションの仕様による。」とのことですが、実際にSPAではどのような形で認証機能が実装されることが多いのでしょうか? OAuthが流行ってる的な記事は見たのですが、僕自身学生で実務経験がないため、ベストプラクティスがわかりません。 これもアプリケーションによるのだと思いますが、その中でも全体的な傾向を教えていただけたら嬉しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問