React=ネイティブおよびAPIバックエンドを使用した認証

Question

oauthでReactネイティブアプリと別のNodeJS/Express APIバックエンドを使用します。理解できます https： //github.com/adamjmcgrath/react-native-simple-auth は、React Native app and http://passportjs.org/ NodeJSバックエンドの認証を提供します。ログインとAPIへのアクセスの認証のためにこれら2つを接続する方法がわかりません。

ユーザーがReactネイティブアプリにメールとパスワードまたはFacebook/Twitter/Google経由でログインすることを希望します。アプリにログインしたら、APIに何を送信して確認しますかそれらは認証され、特定のルートにアクセスできますか？

ログインして、ログインしているユーザーの設定を確認するフローの例を次に示します。

1. ユーザーはReactメール/パスワードまたはFacebook/Twitter/Google経由のネイティブアプリにログインします。
2. ユーザーが認証されます
3. アプリがGET/api/settingsをリクエストします
4. APIはユーザーが認証されていることを確認し、ユーザーの設定を返すか、APIがユーザーが認証されていないことを確認して403を返します。

Answer 1

この質問には非常に多くのことがあるので、すべてが単一のSO回答に収まらないようになっていますが、ここにいくつかのヒントと、お望みのものに広く収まる一般的な概要を示します達成します。

OAuth2認証

その音から、あなたはOAuth 2を使用してソーシャルログインを提供することに興味があります承認、そしてファーストパーティ認証 =電子メールとパスワードを使用した代替手段として。ソーシャルログインの場合、OAuth 2暗黙的なフローを使用してアクセストークンを取得します。これは広く認識されているパターンです。 authenticate電子メールとパスワードを持つユーザーは、OpenID Connectに精通することをお勧めします。OpenIDConnectは、OAuth 2の拡張であり、認可。

どちらの場合でも、ユーザーがメール/パスワードのコンボを送信するか、ソーシャルIDプロバイダーを通じて許可を与えると、応答でアクセストークンおよび（オプションで）IDトークンを受け取ります。トークン、おそらくJWT（JSON Web Token、 jwt.io を参照）はbase64エンコードされた文字列として扱われ、JWTの結果を検査するためにデコードできます。ユーザーのメールアドレス、名前などの詳細.

さまざまなタイプのフローの詳細については、 このデジタルオーシャンの優れた概要 を参照してください。

API認証にトークンを使用する

アクセストークンを取得したので、それをすべてのリクエストとともにAPIに渡して、適切に認証されたことを示すことができます。これを行うには、HTTPヘッダー、具体的にはAuthorizationヘッダーのアクセストークンを渡して、base64でエンコードされたアクセストークン（承認要求に応じて最初に受け取ったもの）の前にBearer。そのため、ヘッダーは次のようになります。

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

API側では、そのトークンを受け取り、デコードしてから、verifyIDとそのクレームを受け取ります。 subプロパティのトークンの一部として渡されるのは、subject、またはリクエストを行うユーザーのIDです。これは、アクセスを識別し、それぞれのユーザーの権限、権限などを使用してAPI側で処理を開始する方法です。また、validateも重要です。 API側でアクセストークンを受け取ったら、スプーフィングまたは手作りされていないことを確認します。

暗黙フローのRNでの表示

一般的なプロセスは、React Native for OAuth 2暗黙的なフローです。これはソーシャルIDプロバイダーに使用します。

1. ユーザーはReactネイティブUIでソーシャルログインボタンの1つをタップします
2. ボタンに応答するコードは、それぞれが望むものに応じて、それらのプロバイダーへのリクエストURLを作成します（わずかに異なるため）。
3. RNのLinking AP​​Iを使用して、デバイス上のブラウザーでそのURLを開き、ユーザーをソーシャルプロバイダーに送信して、ログイン/承認ダンスを実行させます。
4. 完了すると、ソーシャルプロバイダーはユーザーをプロバイダーのURLにリダイレクトします。モバイルデバイスでは、独自のカスタムURLスキームを使用して、ユーザーをWebビューからアプリに移動します。このスキームは、my-awesome-app://など、アプリの一部として登録するもので、ソーシャルプロバイダーに渡すリダイレクトURLはmy-awesome-app://auth_complete/のようになります。これらのURLスキームとディープリンクを構成する方法については、 Linking APIドキュメント を参照してください。
5. その新しいURLスキーム/ディープリンクのハンドラーで、URLの一部として渡されたトークンを取得します。手動またはライブラリを使用して、URLからトークンを解析し、アプリに保存します。この時点で、JWTとしてそれらの検査を開始し、APIアクセスのためにHTTPヘッダーでそれらを渡すことができます。

リソース所有者パスワード付与フローのRNでの表示方法

暗黙的なフローに固執するか、リソース所有者パスワード付与フローに切り替えるかのいずれかの独自のアカウントのメール/パスワードの組み合わせのオプションがありますif APIとアプリは相互に信頼されています。アプリとAPIの両方を作成していること。 UXのほうがはるかに優れているため、可能な限りモバイルアプリのROPGフローを好みます。別のWebビューを開く必要はなく、アプリで直接UI要素にメールとパスワードを入力するだけです。ということで、次のようになります。

1. ユーザーが電子メール/パスワードコンボログインボタンをタップすると、RNは電子メールとパスワードのTextInputを含むUIで応答します
2. 適切に作成されたURLと、電子メールとパスワードを渡す本文の詳細を含むPOST許可サーバー（APIまたは別のサーバーの場合があります）への要求を作成します。要求。
3. 認証サーバーは、応答本文の関連トークンで応答します。この時点で、上記のステップ5で以前に行ったのと同じことを行うことができます。ここでは、後でAPIリクエストで使用するためにトークンを保存し、関連するユーザー情報を検査します。

ご覧のとおり、ROPGはより簡単ですが、信頼性の高いシナリオでのみ使用してください。

APIで

API側では、Authorizationヘッダー内のトークンを検査し、前述のように、見つかった場合はユーザーが認証されたと想定します。トークンとユーザーのアクセス許可を有効にして検証することは、依然としてセキュリティ上の良い習慣です。リクエストとともに送信されたトークンがない場合、または送信されたトークンの有効期限が切れている場合、リクエストを拒否します。

お役に立てば幸いです！確かにそれはたくさんありますが、それは一般的な概要を提供します。