解決したいこと
ローカル環境で立ち上げているポートが違うreactプロジェクト(localhost:3001)
と、
rails apiモード(localhost:3000)のプロジェクト
があり、
reactからのトリガーでSNS(facebook,google)認証を行いたいと考えています。
理想としては、
react➡ facebook等の認証➡ railsが認証後にjson web token(jwt)発行➡ reactがそれを受け取りローカルストレージに保存
という形で認証の仕組みを作るつもりです。
恐らくreactに限らずiosとかもrails apiを使って同じようにやっている企業はあるのでできるとは思うのでアプローチ方法はいくつかあるかと思うのですが、なかなかうまくいきません。
参考記事を基にomniauthの仕組みは作りました。
api想定、最後はrender jsonで返却する形で直しています。
問題点
react(localhost:3001)からaタグのhrefでrails apiのurl(例: http://localhost:3000/users/auth/facebook)
を叩くと、facebookの認証画面が立ち上がり、入力すると、
rails側で正しい認証処理は行われるのですが、
SNS認証後の返ってくるurlが
http://localhost:3000/users/auth/google_oauth2/callback?state=~~(省略)
になり
localhost:3001に戻ってきてくれません。
reactからaxiosでGET処理でurl(例: http://localhost:3000/users/auth/facebook/omniauth)を叩くと、
rails側のログで
INFO -- omniauth: (facebook) Request phase initiated.
というログが出て、そのまま処理が止まってしまいます。
ポート番号が違うのが問題なのかということで、railsのpublicフォルダ内に、npm run buildで生成した本番用のファイルを配置し,同じポート3000番で試してみましたが、そうなるとフロント側のルーターは機能しないのか、railsのrouting errorになってしまいます。
どうか、お知恵を貸して頂けますと幸いです。
あなたの回答
tips
プレビュー