Expressサーバ、Passportを使用したReactJSとリレーアプリケーションの認証方針

Question

ReactJSアプリケーションをビルドする数週間後、認証を追加する時間。これは私にとって非常に混乱しているので、私はSOコミュニティにいくつかの助けを求めることにしました。

私のアプリケーションが構成されます：ポート3001

にマングース/ MongoDBのオーバーGraphQL Serverを実行するOLAP ServerのクライアントReactJS +がポート3000上で実行して、ルータV4に反応してアプリケーションをリレー

私はサーバーとクライアントの両方を同時に起動するスクリプトを用意しています（npm start）ので、すべて正常に動作します。サーバがロードされ、クライアントがロードされ、ブラウザはポート3000で開き、ポート3001のサーバ上のRelayJsを使用してGraphQLデータを要求します。

LocalStrategyを使用して過去にPassport認証を使用しました。 Passportはデータベースに行き、ユーザー名とパスワードをチェックして、エクスプレスミドルウェアのルータを使用してリクエストをプロセスします。うまく動作しますが、サーバー側ではクライアント側ではありません。許可されていない、それは、ログインページにリダイレクトされます

• ：

  私の目標は、ユーザーだせクライアントアプリケーション（今日はポート3000にブラウザを指して）、それらを作ることです。

• 認証された場合、ユーザーはアプリケーションにリダイレクトされます。

• 「私を覚えています」を使用すると、ユーザーはログインしなくても（同じブラウザで1日中）、アプリに戻ることができます。

• ユーザーがユーザー名/パスワードを覚えていない場合は、リセットを要求し、新しい資格情報が電子メールで送信されます。

今のところ私はこれらのことがどのように連動するのか分かりません。 Passportはサーバー上で動作し、そのロジックはすべてクライアントで実行されます（MongoDBのユーザー情報の収集を除く）。

私は2つのアプローチを見ることができます：

a）に認証され、それは別の内部ポートで実行される実際のReactJSアプリケーションにプロキシする場合はexclusivellyポート3000上で認証を処理するプロキシサーバーを構築します。しかし、そうすることで、最初にポート3000に当たったときにユーザーがログインする方法を見つけることができません。create-react-appがwebpack-dev-serverに埋め込まれているため、クライアントを変更する必要があります実際には取り出した後、クライアントのスクリプト内で何が起こっているのか分かりません）。要するに、私のアーキテクチャを変更する必要があり、混乱する必要があります。

b）ReactJSアプリケーションにPassportを追加します。これはパスワードがノード（サーバー側）上で実行されるようにビルドされているので機能しません。これが可能かどうか、それをどうやって行うのかは分かりません。

これらの「わかりにくく混乱している」アーキテクチャの後、私は何をすべきかを見つけることができません。

このシナリオでは、フォワードを移動する方法をいくつかアドバイスしてください。ヘルプは非常に感謝しています。

Answer 1

あなたはこのようにそれを行うことができます。

• そのルート
• にログイン
• 使用パスポートミドルウェアのため急行でルートを作成して、ログインフォームを作成し
• を反応させるためにPOSTを経由して、フォームの資格情報データを送信しますそのログインルートを表現する
• パスポートは、ユーザー名とパスワードが問題ないことを確認した後、すべてがOKであることを返し、ユーザーをあなたのアプリケーションに送ることができます。

あなたが送信する特典は、クライアントで使用するものによって異なります。それは

そのようにあなたが

が、私は同様の設定を使用（APIは/ graphql上で、ログインが/ログインの上にある）graphql graphql前とせずに認証を処理している...（JWT）トークンクッキー、することができ、 ）あなたがそれを必要とする場合は、私はあなたに多くの情報を与えることができます;）