SpringブートとAngular 2 CLIを使用したGoogle OAuth2認証

Question

Webアプリケーションにソーシャルログインを統合する必要があります。バックエンドにはSpring Bootを使用し、フロントエンドにはAngular 2を使用します。私はthisのチュートリアルに従ってプロジェクトを設定しました。

これは完全に動作し、http：/ localhost：4280のhttp：/ localhost：8080とAngular 2ではSpringブートが実行されています。この理由は、ライブリロード開発サーバー機能にAngular-Cliを使用しているためです。

クロスオリジンポリシーのため、角度プロジェクトではプロキシを使用する必要があります。あなたがこれを行う場合は以下のようにあなたが春のAPIをアクセスもでき

{ 
    "/api": { 
    "target": "http://localhost:8080", 
    "secure": false 
    } 
} 

：あなたはproxy.conf.jsonファイルを設定する必要があります前のチュートリアルで述べたように、HTTP：/ localhostを：例えば4200/API /ユーザーは、 （すべての '/ api'リクエストはSpringサーバーに転送されます）。

上記のすべてが完璧に機能しています。今私はGoogleログインでOauth2を使用する必要があります。私はthisのような多くのチュートリアルを試しましたが、私はこれをうまく処理できないようです。

これを実装して、http：/ localhost：8080（Springブートアドレスから）に移動すると、Googleログインページにリダイレクトされますが、http：/ localhost：4200/api/authenticate私はログインページにリダイレクトせずに、http：/ localhost：4200/login immediatlyにリダイレクトするだけです。

私はevrywhereをオンラインで見ましたが、この特定の問題を見つけることはできませんでした。誰かが私の理解を助けることができますか、私は間違って何をしている、多分誰かが素晴らしいだろうサンプルコードがあります！

Answer 1

私の問題の解決策が見つかりました。最初に私は 'href =/api/authenticate'とのログインリンクを持っていましたが、これはうまくいきませんでした！

注：/ 4200 /：あなただけのhttp何らかの理由で、ログインページ

にリダイレクトされるように確保されているパスにAPIをアクセスもする必要があるので、EnableOAuth2Sso標準@サーバー上のすべてのパスを確保認証が失敗した場合、または認証されなかった場合は、@ EnableOAuth2Ssoの標準的な動作でなければなりません）

私はhrefを ' href = http：/ localhost：8080/api/authenticate 'と入力します。これは完全に動作し、私はGoogleログインページにリダイレクトされました。

私が直面したもう一つの問題は、リダイレクトURLでした。私はリダイレクトURLを 'http：/ localhost：4200/profile'に直接設定してみましたが、ユーザプロファイルにログインした後にナビゲートしましたが、これはうまくいきませんでした。

いくつかのテストの後、私は、最初にあなたをapiドメインにリダイレクトする必要があることを理解しました（理由は分かりません）。

だから私は、HTTPのリダイレクトURLを設定：/ localhostを：私は、その後の検索と長いへの道のためにテストした後、ポート4200

@GetMapping("/callback") 
void redirect(HttpServletResponse response) throws IOException { 
    response.sendRedirect("http://localhost:4200/profile"); 
} 

上のプロフィールページにリダイレクト8080 /コールバックを、私は感じますこれはどこにも書かれていませんでした。

Answer 2

申し訳ありません私はこの回答に間違いがありますが、これは以前のことだったので、正確に覚えていません。

<a href="http://localhost:8080/api/login" class="btn loginBtn loginBtn-google">Login with Google</a> 

を使用すると、すべてのパスが自動的にのOAuth2認証で保護された場所での@ EnableOAuth2Ssoを持っているとして：以下のコードスニペットに示すように、しかし、私は、ログインボタンを持っていました。ログインボタンをクリックすると自動的にgoogleの認証ページが表示されます。私はそれがあなたのフロントエンドドメインにあなたに春のドメインではなくコールバックするために、いくつかの奇妙な理由で、nessecaryである私の最初の答えで説明したように

@GetMapping("/api/login") 
public void login(HttpServletResponse response) throws IOException { 
    response.sendRedirect("http://localhost:4200/profile"); 
} 

：

あなたが認証

は正常に私は以下のコードにリダイレクト。上記のコードに示すように、正しいforntendページをリダイレクトします。