Node.jsでAuth0を利用してユーザー認証を実装する
この記事について
この記事ではNode.jsで Auth0 を使って Express のWebアプリにユーザー認証を実装する方法について紹介します。
おおまかな手順
おおまかな手順を下記に示します。
- アプリケーションの登録
- アプリケーションの設定
- コーディング
- 動作確認
アプリケーションの登録
Auth0を利用するには事前にアプリケーションを登録する必要があります。
アプリケーションを登録するにはまず Auth0のWebサイト にアクセスしてログインします。
なお、Auth0のアカウントを持っていない場合は サインアップ ページから利用登録をします。
Auth0にログインしたらページ左のナビゲーションからApplicationsのページへ移動します。
Applicationsのページへ移動したらページ右上の「Create Application」リンクをクリックします。
「Create application」モーダルが表示されたらNameにアプリ名（例：Column Auth0 Web App）を入力してからChoose an application typeとして「Regular Web Applications」を選択し、右下の「Create」ボタンをクリックします。
アプリケーションの登録が完了するとQuick Start（アプリケーションの詳細ページ）が表示されます。
アプリケーションの設定
アプリケーションの登録が完了したので続けてアプリケーションの設定を行います。
アプリケーションの初期設定時はQuick Startを利用するのが便利です。
Auth0のQuick Startは言語×フレームワーク別に用意されているので「Node.js (Express)」を選んでクリックします。
Choose your pathのページが表示されたら左側の「Integrate Now」リンクをクリックします。
Configure Auth0のページが表示されたらページの下側にある「SAVE SETTINGS AND CONTINUE」ボタンをクリックします。
Integrate Auth0のページが表示されたらConfigure Routerセクションに含まれる下記の3点を後の手順のために控えます。
- baseURL
- issuerBaseURL
- clientID
secretは下記のコマンドを実行するなどして生成します。
openssl rand -hex 32
コーディング
下記のコマンドを実行してコーディングの準備をします。
mkdir column-auth0-webapp
cd column-auth0-webapp
npm init -y
npm install --save dotenv express express-openid-connect
touch main.js
touch .env
エディタで.envを開いて先の手順で控えた内容を入力します。
続いてエディタでmain.jsを開いて下記の内容を入力します。
ポイントを下記に示します。
- ユーザー認証のミドルウェアを登録しています。必要な設定は環境変数から読み込んでいます。
- "/"へのGETリクエストに対するハンドラーを登録しています。
- "/private/"から始まるパスへのリクエストに対するミドルウェアを登録しています。requiresAuthミドルウェアは未認証のリクエストをAuth0のログインページへ転送します。
- "/private/"へのGETリクエストに対するハンドラーを登録しています。
- req.oidc.user.subはユーザーを一意に識別するIDとして利用することができます。
- 環境変数PORTで指定されたポートでリクエストの待ち受けを開始します。
動作確認
下記のコマンドを実行してWebサーバーを起動します。
node -r dotenv/config main.js
Webブラウザで http://localhost:3000 にアクセスしてページが表示されることを確認します。
続けてWebブラウザで http://localhost:3000/private/ にアクセスしてAuth0のログインページへ転送されることを確認します。
Googleアカウントを利用するなどしてログインするとページの内容が表示されることを確認します。
ちなみにログアウトするには http://localhost:3000/logout にアクセスします。
おわりに
Auth0はWebアプリのユーザー認証だけではなく、ネイティブアプリやシングルページWebアプリケーションがバックエンドのAPIにアクセスするための認可のしくみを実装するためにも利用することができます。
詳しい手順については 別の記事 で紹介していますので興味がありましたらご覧いただければ幸いです。
最後まで読んでいただきありがとうございました！
Discussion