Q&A
Redux を含め、JavaScript の変数は別タブには引き継がれないので、クッキーか Local Storage を使う必要があるのでは。また、「セッション」という言葉は人によって意味が違ったりしますが、普通はクライアントには認証用のトークンと表示する内容だけ持たせて、ユーザーに値が書き換えられても問題が起こらないようにするような…。
React.jsを最近勉強しています。
バックエンド(API)をLaravel6でフロントエンドをReact.jsで作成しています。
ユーザー情報(access_tokenやuid等)をRedux(LocalStorage)管理にしています。
現状
- example.comでログイン，ユーザー情報をreduxに保存
(ユーザー情報をredux管理にしなければ，新しいタブなどを開くと再度ログインしなければならないため)
- fetchを使って，api.example.comとheaderにBearerを含めて通信し，情報の送受信
問題点
- ユーザー情報がRedux管理なため，ユーザーに値を書き換えられてしまう。
実現したい内容
- login.example.comでログイン(phpページ)，ユーザー情報をセッション(phpの$_SESSION)に保存
- ログイン後，example.comにリダイレクト(React.jsのSPA)
- API通信はexample.comからlogin.example.com/api.php(セッションからheaderにBearerを追加)を経由して，api.example.comと通信
(.phpは実際には入れません。便宜上入れています。)
のように考えています。
ログインページはreact.jsにせず，phpで行いたいと考えています。
また，fetchで直接APIのurlを叩くと，ユーザーにAPIのURLがばれてしまうので間にapi.phpを経由し，cURLでデータの送受信をしようと考えています。
ご教授して頂きたい内容
- login.example.comでログイン，ユーザー情報をセッション(phpの$_SESSION)に保存という方法でもAPI通信の時にセッションの値を参照することは可能か
(セッションの仕組み的に不可能そうだなと思います)
- react.jsでログインして，ユーザー情報をユーザーに値が書き換えられず，かつ，新しいタブを開いてもログインが維持できる方法
(要するにphpのWebアプリでログイン情報をセッション(phpの$_SESSION)で管理するような感じ)
- api.phpを経由しなくてもapi.example.comのAPIエンドポイントがユーザーにばれない方法
値が書き換えられても大丈夫なようにする対策を思いつかなかったので質問をさせていただきました。
Redux(LocalStorage)でaccess_tokenを管理するようになっているのでそのaccess_tokenを別の人のものに書き換えられると，例えばAPIでパスワード変更のクエリを送信されると成り済まされちゃうなと思いました。(パスワードは現パスワードと照合するので起こりにくいでしょうが)
「セッション」についてはまだ理解が曖昧なんだと思いますけど，PHPでいう$_SESSIONに格納する値の意味です。
PHP のセッションは、まず access_token を発行して cookie にセットして、PHP 側では access_token に紐づけた連想配列 $_SESSION の情報をサーバー上のどこかに保存するというもので、access_token が盗まれれば他人になりすますことはできますが、十分に長いランダムな値なので適当に書き換えたくらいでは他の人の access_token にヒットする可能性は天文学的に低く、実用的には安全なはず、という感じです。
React でも同様に、ログイン時にサーバーに access_token を発行してもらい、重要な情報は access_token に紐づけてサーバー側で持つことになるでしょう。一部の情報 (例えばユーザー名など) は React 側でも持っていた方が便利ですが、それはあくまでも表示のためだけに使うというか、API リクエストの際にはユーザーの認証は access_token (に紐づけてサーバー側で持っている情報) だけを使い、React 側で持っているそれ以外の情報 (ユーザー名など) はいっさい信用しない、ということになるかと。
あなたの回答
tips
プレビュー
