Auth0は簡単に導入できた（ログイン画面まで表示）

簡単にサイトにログインフォームを組み込みい方

• 「Customize」をクリックする
• ログインフォームの色やレイアウトを対象変更することが可能で、GUI上で設定した内容がHTMLおよびJavascirptとして出力されてサイトにタグを埋め込むだけでログイン機能が実装できそうです。

今回は、この方法は試さず、サーバーからレンダリングされた結果を返す方法を試してみたいとおもいます。

カスタマイズ実装したい方

• 独自でカスタマイズしたい方はこちで「Create Application」をクリックする
• 実装する方法とアプリケーション名を指定します。今回はバックエンド側で実装したいため、「Regular Web Applications」を選択します。

• 利用したいスクリプトを選択します。自分はexpressで実装したいため、Node.js(express)を利用します。

• 下記の画面でCallbackURL等を指定します。こちらの設定は皆さんの環境にあわせて設定してください。

auth0を実装する

• express-openid-connectをインストールします。（既にexpressがインストールされている前提で進めます。）

npm install express-openid-connect --save

• 下記のコードを自分のサイトに実装する

const { auth } = require('express-openid-connect');

const config = {
  required: false,
  auth0Logout: true,
  appSession: {
    secret: 'a long, randomly-generated string stored in env'
  },
  baseURL: 'http://{{あなたのURL}}:3000',
  clientID: '{{あなたのクライアントID}}',
  issuerBaseURL: '{{あなたのベースURL}}'
};

// auth router attaches /login, /logout, and /callback routes to the baseURL
app.use(auth(config));

// req.isAuthenticated is provided from the auth router
app.get('/', (req, res) => {
  res.send(req.isAuthenticated() ? 'Logged in' : 'Logged out');
});

auth0で提供されるログイン画面

総評

上記の実装だけでログインフォームが表示されるところまできました。 次回はログインして、ユーザー情報を表示するなど、どのようにシステム連携できるか調査したいと思います。