PassportJS + RestAPI + SPA

Question

私はRestAPIを構築するためにExpressJSを使用しています。クライアントはSPAで、PassportJS経由でGoogle/FaceBook/GitHub/...によって認証をサポートしています。私の質問、社会的なログインからのコールバックはRestAPIまたはSPAに戻りますか？システムがRestAPIに戻ると、SPAのホームページにどのようにリダイレクトできますか？別のケースでは、システムコールバックSPAの場合、RestAPIはどのようにしてクライアントからトークンを受信して​​検証できますか。私には共通のアプローチを教えてください。

おかげで、

Answer 1

あなたが認証サービスにコールバックURLを提供し、あなたはあなたがSPAやAPIでルートを扱うかどうかを決定します。 Oauth認証（簡略化）には2つのステップがあります。 githubの上のイラスト：

ステップ1）https://github.com/login/oauth/authorize?client_id=*YOUR_CLIENT_ID*$redirect_uri=*YOUR_REDIRECT_URI*
は、あなたのアプリケーションを許可するユーザーを要求したポップアップダイアログを開くとクエリパラメータのコードを使用してREDIRECT_URI = AUTHORIZATION_CODE

ステップ2）に成功したリターン？あなたは上記のAUTHORIZATION_CODEを長期アクセストークンのために交換します​​

あなたのアーキテクチャでは、SPAのステップ1と残りのAPIのステップ2を実行する必要があります。認証プロバイダから認証コードを取得し、残りのAPIに送信し、残りのAPIを長期アクセストークンに交換し、そのトークンをデータベースに保存し、それを使用してユーザー情報を取得するか、または行うあなたがそれで何でもしたいなら、ユーザーにログインしてください。

手順1では、手順2のCLIENT_IDとCLIENT_SECRETだけでCLIENT_IDが必要です。このため、CLIENT_SECRETをサーバー側に保存することで、アプリケーションを安全に保つことができます。

残りのapiによってコールバックURIが処理されるという問題は、コールバックuriがSPAではなく認証プロバイダ（この場合はgithub）によって呼び出されるため、リダイレクトする応答を送信できないことですユーザーをホームページに誘導する。これはテンプレートとルーティングがサーバー側で処理された場合にのみ機能します。これは、ご使用のアーキテクチャーには当てはまりません。

app.post('/login', passport.authenticate('github'),のようなルートにパスポートミドルウェアを登録すると、ミドルウェアは「コード」クエリパラメータにAUTHORIZATION_CODEが含まれているかどうかを確認し、そうでない場合はステップ1を実行しますステップ2。

Answer 2

私は同じスタック（express、angular、パスポート）を使用し、その方法に従った。

私はボタンを作成しました。

<a href="/auth/facebook">Login with facebook</a> 

また、私はパスポート

// send to facebook to do the authentication 
    app.get('/auth/facebook', passport.authenticate('facebook', {scope: 'email'})); 

    // handle the callback after facebook has authenticated the user 
    app.get('/auth/facebook/callback', passport.authenticate('facebook', { 
    successRedirect: '/#/profile', 
    failureRedirect: '/' //Redirect Homepage 
    })); 

のための2つのルートこのコードを持っているが、あなたが正常にログインする場合は、リダイレクトした後、角度のルート（/＃/プロファイル）にリダイレクトされることを示していますが、クッキーを持っていますpassportjsはexpress-sessionを使用するため、connect.sidという名前のトークンを持っています。

その後、ユーザーが、このミドルウェアでどこでもで

// route middleware to ensure user is logged in 
function isLoggedIn(req, res, next) { 
    if (req.isAuthenticated()) 
    return next(); 

    res.redirect(301, '/'); 
} 

を記録している場合は、上記のコードが含まれている私のリポジトリを見てみることができます確認することができます。 https://github.com/AOnurOzcan/meanTest

問題が発生した場合は、お知らせください。