はじめに
Webアプリケーションを作る目的として、ユーザを限定するためにユーザ認証の仕組みを取り入れる必要があります。
独自で作成することもできますが、簡単に、しかし強力な機能を持ち合わせたサービスを使うのも1つの選択肢となり得ます。
ユーザ認証の機構としてはFirebaseやAWS Cognitoなどもありますが、今回の記事ではAuth0というサービスを使ってみようと思います。
やること
- Spring FrameworkのプロジェクトにAuth0でユーザ認証の仕組みを取り入れる
- ローカル環境(localhost)においてユーザ認証を行い、プロジェクトの画面をブラウザに表示させる
Auth0とは?
Auth0(読み方:オースゼロ)は、
Auth0は誰でも簡単に導入できる認証・認可プラットフォーム
https://auth0.com/jp
です。
ユーザ認証にはEmail / Password という標準のものから、Googleアカウント、Facebookアカウントなどのソーシャルネットワーキングサイトのアカウント連携で行うもの、またSMSやEmailを介して認証を行うワンタイムコードの方式が可能です。
さまざまなアプリケーションとの連携が可能で、Auth0公式が提供するサンプルコードも充実しています。
公式ページはこちら: https://auth0.com/jp
本記事を読み進めるための前提
- Spring Frameworkのプロジェクトがある
- Auth0のアカウントがある
1. Auth0アプリケーションをセッティングする
まずはAuth0のセッティングを進めていきましょう
Applicationを作成する
Auth0の画面から Applications > Applications
をクリックし、 Create Application
ボタンをクリックします。(下の画像の赤枠)

次にアプリケーションの種類を聞かれます。今回は普通のWebアプリケーションを使うので、 Regular Web Applications
を選択します。

Applicationの設定を行う
Applicationができたら、URL系の設定を行います。
設定が必要なのは、 Allowed Callback URLs
、Allowed Logout URLs
、そしてAllowed Web Origins
です。
それぞれ、以下を入力します。もちろん、カスタマイズ可能なので独自の値を入れても構いません。
- Allowed Callback URLs:
http://localhost:8080/login/oauth2/code/auth0
- Allowed Logout URLs:
http://localhost:8080
- Allowed Web Origins:
http://localhost:8080
入力したら、画面を下にスクロールし、 Save Changes
ボタンをクリックします。
これで完了です。
Spring Frameworkプロジェクトの設定を行う
Dependenciesを整える
以下のDependenciesが必要となりますので、プロジェクトに取り込んでください。
org.springframework.boot:spring-boot-starter-oauth2-client
application.yamlを整える
- 元々は
application.properties
というファイルでしたが、ここでは拡張子を.yaml
形式に変更したものを使います。
server:
port: 8080
spring:
security:
oauth2:
client:
registration:
auth0:
client-id: ここにAuth0のクライアントIDを貼る
client-secret: ここにAuth0のクライアントシークレットを貼る
scope:
- openid
- profile
- email
provider:
auth0:
issuer-uri: ここにAuth0のドメインを貼る
Controllerを整える
これは適当に作ります。ログイン認証が成功した後に最初に来るページのコントローラになります。
Viewテンプレートは index.html
を見るようにします。
package com.nothingbehind.auth0_sample.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("/")
public String index(Model model) {
return "index";
}
}
Viewテンプレートを整える
ログインした状態で You are logged in!
を表示する画面を作ります。
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<body>
<div sec:authorize="!isAuthenticated()">
<p>You are not logged in!</p>
</div>
<div sec:authorize="isAuthenticated()">
<p>You are logged in!</p>
</div>
</body>
</html>
これで準備OKです。
ブラウザで http://localhost:8080 にアクセスしてみましょう!
ブラウザでアクセスしてみる
ブラウザで http://localhost:8080 にアクセスすると・・・・

Auth0のログインページに遷移しました!
初回であればここでサインアップしてみましょう。
ユーザ認証が終わると、、、

成功しました!