esm アジャイル事業部 開発者ブログ

永和システムマネジメント アジャイル事業部の開発者ブログです。

部分SPAのRalisアプリにおけるフロントエンドからAuth0のアクセストークンを取得する方法

こんにちは、nand2tetrisにハマっているyuki0920です。

今回は業務で得たTipsである「部分SPAのRalisアプリにおけるフロントエンドからAuth0のアクセストークンを取得する方法」を紹介します。

前提: フロントエンドからアクセストークンを使いたい

一部SPA構成のRails製のアプリケーションを運用しており、認証基盤にAuth0を利用しています。 Railsアプリはユーザーから受け取ったメールアドレスとパスワードをAuth0へ送信するなどの認証処理を担っており、認証後のアクセストークンはRailsアプリが受け取っています。

今回、部分SPAのフロントエンドから、ログイン画面を経ずにアクセストークンを使いたい事情がありました。しかし、ドキュメントにはこのようなユースケースは記載されていませんでした。

Auth0にフロントエンド用のアプリケーションを追加する

Railsサーバー用のAuth0アプリケーションと同一テナントにフロントエンド用のアプリケーションを作成することで実現できました。

下記の画像のようにフロントエンド用のAuth0アプリケーションを、Railsサーバー用のアプリケーションと同一のテナント内に作成します。ここが最大の要点となります。

Auth0のアプリケーション作成後の設定は、ドキュメントを参考に、コールバックURL等を設定します。フロントエンドでは、Auth0のSDKをインストールし実装します。

このようにすることで、フロントエンドから、ログイン画面を介さずにアクセストークンを取得することができました。

なぜフロントエンドではログイン画面を介さずにアクセストークンを取得できるのか

なぜフロントエンドではログイン画面を介さずにアクセストークンを取得できるのでしょうか?

それは、Auth0のログイン状態の保持の仕方と関係があります。

Auth0のログイン状態は、Auth0のテナントに設定されたドメインに紐づくクッキーに保持されています。Auth0は同一テナント内であれば、どのアプリケーションも共通のドメインが設定されています。

今回のケースではRailsアプリにログインした時点でAuth0のログイン状態が保持されているため、フロントエンドからはログイン不要でアクセストークンを取得できた、というわけです。

参考: Application Session Management

まとめ

Auth0を利用したアクセストークンの取得方法について紹介させていただきました。 この記事を書くにあたり、クッキーなどのWEB技術やAuth0を深堀りするきっかけとなり、勉強になりました。