ReactでOpenID Connectを実装する～その２

OpenID Connectによるログイン認証を簡単に実装するために、インターネット上で認証サービスを提供しているAuth0というサイトを使ってみます。今回はAuth0へのユーザ登録と設定を行います。

～目次～

Auth0に無料登録する

Auth0はインターネット上で認証・認可サービスを提供しているサイトです。

7,000アクティブユーザまでであれば無料でサービスを利用できるのと、さまざまな言語に対応した使い勝手のよいAPIを提供しています。このためOpenID Connectに詳しくない人でも簡単にログイン認証処理を実装することができます。

認証処理の基本的なフローを知るために、まずはAuth0サービスを使ってログイン認証を実装してみることにします。

 

まずは習うより慣れろで、Auth0に無料登録してみます。

 

料金体系の画面からFree planの「Start Buillding with Auth0」を押します。

 

Sign Up画面でお自身のEmailアドレスとPasswordを入力してID登録します。

 

（注）Auth0に関する情報は2021年8月時点のものです。将来的に変更となる可能性があります。

 

Auth0の設定

ここからはAuth0の管理画面で、さまざまな設定をしていきます。

ログイン画面の選択

エンドユーザがログインIDとパスワードを入力する画面、いわゆるログイン画面を定義します。

自サイト内でログイン認証する従来までのやり方では、当然ログイン画面を自分自身で作成して、自サイト内に配置する必要があったのですが、Auth0のような認証プロバイダを使う場合、ログイン画面はAuth0サービスが準備しエンドユーザに表示することになります。

 

メニューから「Getting Started」を選択します。そして「Getting Started」画面の「Try your Login box」から「Customize→」をクリックします。

 

「Universal Login」画面が表示されます。この画面ではあらかじめ用意されている「New」と「Classic」の２パターンのログイン画面を選択することができます。どちらか好きなデザインを選択してください。

 

ただやはりログイン画面を自分のサイトに合わせたデザインに変えたい場合もありますので、このような場合には「Login」タブを選択し「Customize Login Page」画面を表示します。ここではログイン画面のHTMLを修正することができます。

 

認証利用アプリから接続できるようAuth0に接続定義を作成

今回作成するサンプルアプリ(AuthSample1)がAuth0に接続できるように、Auth0に定義情報を作ります。Auth0ではこれを「Application」と呼んでいます。

 

メニューから「Getting Started」を選択します。そして「Getting Started」画面の「Integrate Auth0 into your application」から「Create Application→」をクリックします。

 

「Create Application」画面が表示されます。「Name」に適当な名前を入力します。ここでは「AuthSample1」とします。

続けて「application type」を選びます。今回は認証利用アプリをReactで作成するので「Single Page Web Applications」を選びます。

最後に「Create」ボタンを押します。

 

「AuthSample1」の設定画面が表示されます。「Settings」タブを選択して設定を進めます。

 

Name

任意の名称を指定します。先ほど入力したAuthSample1が設定されているので変更不要です。

Domain

認証利用アプリからAuth0にアクセスする際に使われるドメイン名です。認証利用アプリ側が接続時に使う情報になるのでメモしておいてください。
Client ID
認証利用アプリからAuth0にアクセスする際に認証利用アプリを識別するためのIDです。Auth0はこのClient IDでどの認証利用アプリからの接続なのかを識別します。Auth0が任意の値を自動生成してくれるのでその値をそのまま使います。認証利用アプリ側が接続時に使う情報になるのでメモしておいてください。
Client Secret
第三者から不正アクセスされないよう認証利用アプリと認証プロバイダ(Auth0)間で事前に秘密コード(パスワード)を取り交わすために使います。今回はClient Secretを利用しないので変更せずに放置しておきます。

設定入力を続けます。

 

Application Logo
ロゴを変えたい場合には画像を指定します。今回はデフォルトを使います。
Application Type
今回はReactで認証利用アプリを作りますので「Single Page Application」を選択します。
Token Endpoint Authentication Method
認証利用アプリと「Client Secret」をやり取りする際の方法を指定します。「None」が選択されているので変更せずにそのままとします。


(注) Auth0では、Application Typeとして「Single Page Application」を選択した場合にToken Endpoint Authentication Methodが「None」固定となります。つまりClient Secretなしでの接続に限定されます。なぜこのような仕様になっているのかは分かりません。詳しい方がいたら教えてほしいです...
 

さらに設定入力を続けます。

 

Application Login URI
今回は何も設定しません。Auth0から認証利用アプリが準備するログインページにリダイレクトする際に使います。
Allowed Callback URLs
Auth0が表示したログイン画面でログインIDとパスワードを入力した後、認証利用アプリに認証コードを通知するためにリダイレクトするのですが、そのリダイレクト先のURLを指定します。今回はローカルPC上で認証利用アプリを立ち上げるので「http://localhost:3000」を指定します。
Allowed Logout URLs
Auth0でログアウト処理をした後、認証利用アプリにリダイレクトするのですがそのURLを指定します。今回はCallback URLと同じ「http://localhost:3000」を指定します。
 

さらにさらに設定入力を続けます。

Allowed Web Origins
クロスオリジン通信を許可するサイトをURLで記載します。今回は認証利用アプリを「http://localhost:3000」で立ち上げるのでそのURLを設定します。

セキュリティの観点からこの定義は必ず設定するようにしましょう。
Allowed Origins (CORS)
Java ScriptからAuth0 APIの呼び出しを許可するサイトをURLで記載します。先に設定した「Allowed Web Origins」はDefaultで許可されるとのことなので今回は設定不要です。
 

最後に「Save Changes」で設定を保存します。

Auth0 API設定の確認

認証利用アプリから呼び出すAuth0 APIの設定を確認しておきます。
メニューから「Applications > APIs」を選びます。「Auth0 Management API」をクリックします。
 
IdentifierのURL文字列をメモしておきます。のちほど認証利用アプリからAuth0 APIを呼び出す際に、audienceパラメタにこの値を設定する必要があるためです。

 

ログインユーザの作成

次に認証利用アプリで使うログインユーザを、Auth0に登録していきます。

自サイト内でログイン認証する従来までのやり方では、ユーザIDとパスワードのリストを自サイト内のデータベースなどに格納していたわけですが、Auth0のような認証プロバイダを使う場合、ユーザID、パスワード、氏名などのログインユーザ情報をAuth0サービスに登録して、Auth0側で管理・保持します。

 

メニューから「User Management > Users」を選択します。画面が表示されたら、右上の「+ Create User」を押します。

 

この画面で、ログインユーザID(=Eメールアドレス)やパスワードを入力します。

 

Email
Eメールアドレスを設定します。Auth0のデフォルト設定ではEmail = ユーザIDとなります。
Password
パスワードを設定します。
Repeat Password
パスワードをもう一度設定します。
Connection
今回は普通のログインユーザID・パスワード認証を使うので、Username-Password-Authenticationを設定します。
 

のちほど動作確認ができるように、２～３個ほどログインユーザIDを作っておきましょう。

ちなみにEメールアドレスとは別にログインユーザIDを作りたい、パスワードポリシーを変えたいなど詳細な設定をしたい場合には、メニューの「Authentication > Database」にて細かな設定ができます。

 

Auth0の設定は以上です。

【参考】Auth0の公式サンプルプログラム

Auth0からは公式のサンプルプログラムも提供されています。こちらを使って動作確認してみてもよいでしょう。

 

「Quick Start」タブを選択し、Reactアイコンを選択します。

 

「DOWNLOAD SAMPLE」ボタンを押すと、サンプルプログラムをダウンロードできます。またこのページには基本的な設定方法やコーディング方法が書かれているので参考にすると良いでしょう。

 

次はこのAuth0にアクセスする認証利用アプリ(AuthSample1)を実装していきます。


ReactでOpenID Connectを実装する～その３　Auth0サービスを使ってみる (アプリ開発編)