開発合宿 RedwoodJS Googleログイン実装 フロントエンド定例 2022/11/4

開発合宿 RedwoodJS Googleログイン実装

開発合宿では管理画面を試しにRedwoodJSで作ってみようというのをやってみました。
川原さんの記事とも被りそうなので自分がやってみたところの紹介だけをしたいと思います。

RedwoodJSを選定した理由

ORMとしてPrisma採用していたのがあり、今までデータベースのスキーマ管理をsqldefで管理していたのが置き換えるのと同時に、コードとして使用するモデルの定義としても自動に生成してくれるのもあるので良さそうというのがありました。
Prisma Studioも使い方によってはphpMyAdminの代わりとして使えそうだなというのもあって色々サービスにあるロールの整理にもなりそうというのもありました。

またジェネレートコマンドが充実しており、自動にページとテストファイル(JestとStorybookのファイル)も生成される統一感があって良さそうというのが大きかったです。

Prismaでやってみたこと

下記のコマンドでPrisma Schemaの作成とデータベースの更新ができることを確認をしました。

既存のデータベースからPrisma Schemaを更新

yarn rw prisma db pull

作成済のPrisma Schemaからデータベースを更新

yarn rw prisma db push

また、ログイン機能のところで実際にORMとしてのPrismaの機能を使ってみたりもしました。

ジェネレートコマンドでやってみたこと

モデルに紐づいたページを作成

yarn rw g scaffold <model>

でPrismaに定義されているものからページを作ってみようとしましたが
Prisma Schemaのモデル名とデータベースのテーブル名の問題
にぶつかりました。

Prisma的には単数系のモデル名を推奨しているためRedwoodJSでモデルを扱う際も単数系の想定でジェネレーターもモデルの読み込みをしようとするのでPrisma Schema側で@@mapによる単数系のモデル名を生成し直さないといけない問題がありました。

Googleログイン実装

最初はRedwoodJSのログイン画面生成機能を使ってみようとしたのですが

yarn rw setup auth dbAuth

既にサービス側で管理ユーザの権限など決まっていたので生成されたコードだけ参考にし独自に認証させるようにしました。

RedwoodJSが提供しているuseAuthというHook関数やPrivate Routesを通させるためにAPIの実装として

• functions/auth（useAuthで都度認証チェックするためのAPI）
• Googleの認証画面の遷移・管理画面にGoogle認証情報を持たせる実装

細い要件を記載すると

• ログインボタンからGoogleの認証画面に遷移できる
  • リダイレクトを複数回かましてあるがSessionをRedisに保存したりGoogleの情報からemail取得してusersにあるemailのユーザなのかを確認し再度ログインの画面に遷移させてる
    • ログイン画面に遷移させた時にiframeからtokenを取ってる
      • Auth0っぽい認証方式のためiframeを他のアプリケーションに入れてtokenを取るようなことが可能
        • ある意味ちゃんと権限とかみてないと乗っ取られた時危なそうというのはある
• 見えないiframeでSessionID(Token)をpostMessageでこのページに送りCookieに保存している

 

という要件で作成しました。

Googleの認証アプリの作成は下記を参考にして作成しました。

https://hugo-de-blog.com/node-passport-google/

Googleの認証自体はGoogle公式にあるgoogle-auth-libraryを使用しました。

昔はPassportを使用した認証用のクライアントを使用していましたがGoogle公式のライブラリの方がスコープの指定など型も充実している印象があってよかったです。

 

 

 

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例