NextAuth.jsを使ってDrupalのOAuthを利用する

概要

NextAuth.jsを使ってDrupalのOAuthを利用する方法に関する備忘録です。

挙動

Next.jsで作成したアプリにアクセスして、「Sign in」ボタンを押します。

Drupalにログインしていない場合には、ログイン画面に遷移します。

ログイン済みの場合、「許可」するかのボタンが表示されるので、許可します。

ログイン情報が表示されます。

Drupal側の準備

モジュールのインストール

以下のモジュールをインストールします。

https://www.drupal.org/project/simple_oauth

本記事執筆時点の最新の以下をインストールしました。

トークンを暗号化するための鍵の生成

鍵のペアを生成し、セキュリティのためにドキュメントルートの外に保存します。

鍵のパスを設定

鍵のパスを管理画面で設定します：

/admin/config/people/simple_oauth

Amazon LightsailでDrupalを動作させている場合、以下のように、ユーザを変更する必要がありました。

Clients

/admin/config/services/consumerにアクセスします。

default_consumerがすでに作成されているため、こちらを編集します。

• New Secretに値を入力します。
• Grant typesでAuthorization Codeを選択します。
• Redirect URIsに以下を入力します。
  • http://localhost:3000/api/auth/callback/drupal
  • https://oauth.pstmn.io/v1/callback （Postmanでのチェック用）
• Access token expiration timeに値を入力します。

Postmanでの動作確認

以下のように入力します。Drupalがhttps://drupal.example.orgにセットアップされていると過程します。

• 認可 URL: https://drupal.example.org/oauth/authorize
• アクセストークン URL: https://drupal.example.org/oauth/token
• クライアント ID: Drupalで設定した値
• クライアントシークレット: Drupalで設定した値

「新しいアクセストークンを取得」を押すと、冒頭の挙動で示した通り、Drupalの画面に遷移し、許可したのち、以下に遷移しました。

https://oauth.pstmn.io/v1/callback?code=...

Next.jsからの利用

ソースコードを以下でご確認いただけます。

https://github.com/nakamura196/drupal_oauth_app

完全の余地があるかと思いますが、以下のような設定により、動作確認ができました。

まとめ

DrupalのOAuthの利用にあたり、参考になりましたら幸いです。