AngularとRailsを分離し、セキュアに繋ぐ方法

Angular + Railsの理想的な関係

• Railsはバックエンドとして完全にAPIを提供するのみで、フロントサイド(AngularJS)と完全に分離

AngularとRailsの間をどうセキュアに繋ぐか？

• RailsがOAuth2 Providerとなって、APIの許可を行う
  • OAuth2 Provider用のgem doorkeeperを用いるとよい
  • APIの提供は、grapeを用いるとよい

理想的な Rails, AngularJS 環境の構築 - ボクココ

AngularJS x Railsで ユーザ認証を実現するためのアプリ設計 - ボクココ

Grape+DoorkeeperによるOAuth2 ProviderとAPIの提供

• 構成は以下のとおり
  • Resource Owner (User) - Devise
  • Authorization Server (OAuth 2 Provider) - Doorkeeper
  • Resource Server (API) - Grape
• ただし、Authorizationリクエストヘッダフィールドに詰めたBearer Tokenを受け取るための実装が別途必要
  • DoorkeeperとGrapeのつなぎ、つまり、Doorkeeperでtokenを認証し、Grapeでさばくための実装が必要
• Bearer Tokenを渡す方法については、以下を参照

The OAuth 2.0 Authorization Framework: Bearer Token Usage（日本語）

Authorizationリクエストヘッダフィールドに詰めたBearer Tokenを受け取るための実装例

grape-doorkeeperを用いた例

• Implicit Grant Flowを採用
• Consumer(Resource Server)とService Provider(Authorization Server)を1サーバーに同居させている
• AngularとRailsをセキュアに繋ぐならこの例が一番参考になった(サンプルコードもあります)

CODETUNES · OAuth Implicit Grant with Grape, Doorkeeper and AngularJS

fuCtor/grape-doorkeeper

rack-oauth2を用いた例

• Authorization Code Grant Flowを採用
• この例は、Angular関係ないですが、Bearer Tokenを受け取るところの実装の参考として

OAuth 2.0 Tutorial: Protect Grape API with Doorkeeper « 鴨七・chitsaou

nov/rack-oauth2