This is an about page
{{ greeting }}
上記の.vueファイルによって、**About**ページのテンプレートにボタンが追加され、`@click`属性を`callAPI`に設定するときにこのボタンのonClickイベントハンドラーとして`callAPI()`メソッドも追加されます。**CallAPI**メソッドが呼び出されると、バックエンドからhelloworldエンドポイントが呼び出され、これに応答して**helloworld!** メッセージでテンプレートを更新する、greetingデータ属性が更新されます。このテストを行う前に、`axios`（バックエンドAPIを呼び出すために`callAPI()`で使用されるHTTPクライアントモジュール）を追加します。コマンドラインで`MovieReviewBoard/frontend/`ディレクトリに移動して、次を実行します。
```bash
npm install axios --save
```
この変更を行ったら、コマンドラインかIDEを使って、`MovieReviewBoard/frontend/`で`npm run serve`を実行してフロントエンドサーバーを起動し、`MovieReviewBoard/backend/`で`./gradlew bootRun`を実行してバックエンドサーバーを起動させます。2台のサーバーが起動したら、ブラウザで `http://localhost:8080/#/about` に移動して「**Call API**」ボタンをクリックします。するとサーバーからのhelloworldメッセージが表示されます。
## Spring BootとVue.jsアプリケーションの保護
現時点ではバックエンドに誰でもアクセスできる状態にあります。これでは事業に差し障りがあるので、APIを保護しましょう。APIの保護には、[Auth0](https://auth0.com/)のようなアイデンティティ管理プロバイダが必要です。セキュリティにAuth0を使用するには、アカウントがない場合には[アカウントを作成](https://auth0.com/signup)し、アカウントがある場合には[ログイン](https://auth0.com/auth/login)する必要があります。
Auth0アカウントにサインアップしたら、Auth0でバックエンドAPIを表すAPIを作成して構成し、リクエストを認証する必要があります。これを行うには、[Auth0ダッシュボードのAPIセクション](https://manage.auth0.com/#/apis)に移動して「**Create API**」ボタンをクリックします。すると、ダッシュボードに入力の必要なフォームが表示されます。
* Name：これはAPIのラベルです（例えば「**Spring Boot Kotlin**」にします）。
* Identifier：これはAPIのURL識別子です（ここでは`http://localhost:8888`など、有効なURLに近いものにします）。
* Signing Algorithm：このフィールドにはRS256を選択します。
その後、「**Create**」ボタンをクリックしてAPIの作成を完了します。次に、`backend/build.gradle`ファイルを開いて次のコードを追加します。
```gradle
// ...
dependencies {
// ...
implementation 'org.springframework.security.oauth.boot:spring-security-oauth2-autoconfigure:2.1.3.RELEASE'
}
// ...
```
この依存関係により、OAuth 2.0.でAPIを保護する機能が加わります。このライブラリを使用するのに必要な設定を追加するには、2つの手順が必要です。まず最初に、`security`パッケージを`com.example.MovieReviewBoard`パッケージに作成し、そこに`SecurityConfig.kt`ファイルを作成します。その後、以下のコードを`com.example.MovieReviewBoard.security`の`SecurityConfig.kt`ファイルにコピーします。
```kotlin
package com.example.MovieReviewBoard.security
import org.springframework.beans.factory.annotation.Value
import org.springframework.context.annotation.Configuration
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer
import org.springframework.security.oauth2.config.annotation.web.configuration.ResourceServerConfigurerAdapter
import org.springframework.security.oauth2.config.annotation.web.configurers.ResourceServerSecurityConfigurer
@Configuration
@EnableResourceServer
class SecurityConfig : ResourceServerConfigurerAdapter() {
@Value("\${security.oauth2.resource.id}")
private lateinit var resourceId: String
@Throws(Exception::class)
override fun configure(http: HttpSecurity) {
http.authorizeRequests()
.mvcMatchers("/helloworld").authenticated()
.anyRequest().permitAll()
}
@Throws(Exception::class)
override fun configure(resources: ResourceServerSecurityConfigurer) {
resources.resourceId(resourceId)
}
}
```
上記の`@EnableResourceServer`の注釈は、OAuth 2.0.で保護されたリソースサーバーに便利です。これによって、受信したリクエストを認証するSpring Securityフィルタが自動で有効になります。Spring Bootがこれを処理するには、`resourceId`とも呼ばれるAuth0 API識別子を登録して、どのエンドポイントを保護したいのか（ここでは`/helloworld`）を特定してやる必要があります。
次に、APIに送信されるアクセストークンを検証するために、`resourceId`とAPI用のエンドポイントを定義してパブリックキーを取得する必要があります。これには`MovieReviewBoard/backend/src/main/resources/application.properties`を開いて次の設定を追加します。
```java
# ...
security.oauth2.resource.id=