APIを使用してモダンなウェブアプリケーションを構築する方法を紹介します。APIを使用してモダンなウェブアプリケーションを構築する方法を紹介します。Boot、Kotlin、GraphQLを使ってモダンなウェブアプリケーションを構築する方法をご紹介していきます。Auth0を使用してバックエンドとフロントエンドアプリケーションを保護する方法についてもご紹介します。本シリーズで構築するアプリケーションの概要については、このGitHubレポジトリをご覧ください。APIを使用してモダンなウェブアプリケーションを構築する方法を紹介します。This前提条件このチュートリアルを効果的に利用するには、システムに次のツールがインストールされている必要があります。8以上がインストールされている必要があります。インストールしていない場合は、こちらからインストールしてください。フロントエンド開発用のNode.jsとNPM。Node.jsをインストールしていない場合は、このリソースを参照してください。-vを実行すると、インストールされているNode.jsのバージョンが表示されます。NPMに関しては心配しなくて大丈夫です。Node.jsのインストール時に一緒にインストールされます。インストールしていない場合はこのリソースを使用してインストールします。このページでは、システムにインストールされているVueのバージョンも調べられます。CLIは、Vue.jsアプリケーションをスキャフォールディングするコマンドラインツールです。Appの作成に相当するものです。最後に、お好みのテキストエディタまたはIDE。Routerの基礎知識も必要となります。モダンなウェブアプリケーションのアーキテクチャモダンなウェブアプリケーションのほとんどは、バックエンドAPIと通信するシングルページアプリケーション(SPA)として構築されます。SPAなのでしょうか?SPAは、サーバーがブラウザにシングルテンプレートを提供するブラウザベースのアプリケーションであり、他のページを動的にレンダリングするためにJavaScriptが使用されます。SPAはたいてい最初のページの読み込みに時間がかかりますが、その後はスムーズなユーザーエクスペリエンスを提供します。コンテンツのアップデートでは、SPAはJavaScriptでバックエンドAPIにクエリする必要があります。従来、APIはRESTパターンに従って設計されてきましたが、現在では多くの人が、RESTよりも効率が良いという理由からGraphQLを使ってAPIを構築しています。APIリクエストを1つのAPIリクエストに変換できるからです。Kotlinでは開発者の生産性アップを図れる。Vue.jsはドキュメンテーションが優れている。Board"というアプリケーションを構築していきます。Boot、Kotlin、GraphQLでバックエンドAPIを構築します。Initializrに話を移して、必要なツールとライブラリを選んでいきましょう。Initializrページでは、フォームで次のアイテムを選択する必要があります。com.exampleArtifact:MovieReviewBoard次に"Dependencies"セクションで、Web、H2、JPAライブラリなどの検索ボックスを使用します。それではプロジェクトを生成してください。するとブラウザで.zipファイルがダウンロードされます。このフォルダを解凍して、そこにbackendフォルダを作成します。このbackendフォルダへのパスはMovieReviewBoard/backendとします。MovieReviewBoardフォルダのすべてのコンテンツをbackendフォルダに入れます。IDEにロードできるようになります。Bootのservletコンテナはポート8080で待機するため、システム内の他のプログラムはそのポート番号で待機できなくなります。残念ながらWebpack(Vue.jsが使用するサーバー)もポート8080で実行されるので、同時に両方のプログラムを実行することはできなくなります。この問題を解決するには、アプリケーション内の/MovieReviewBoard/backend/src/main/resources/application.propertiesファイルに移動してserver.port=8888を追加します。Bootがポート8080ではなくポート8888で待機するようになります。Bootアプリケーションにhelloworldエンドポイントを作成します。com.example.MovieReviewBoardという行を新しいファイルの冒頭に加えてから、次のコードを追加します。}注:simpleCorsFilter()メソッドがバックエンドAPIにクロスオリジンのサポートを追加します。このメソッドは、サーバーが送信するHTTP応答にAccess-Control-Allow-Originヘッダーが設定されます。このヘッダーの値をhttp://localhost:8080に設定すると、このドメインからサーバーへのリクエスト送信を許可することをブラウザに指示できます。bootRunを実行するか、IDEで実行してバックエンドサーバーを実行します。ブラウザでhttp://localhost:8888/helloworldに移動すると、次のページが表示されます。CLIを使ってフロントエンドアプリケーションをスキャフォールディングする必要があります。CLIがインストールされているか確認してください。アプリケーションをスキャフォールディングするには、ターミナルを開いてMovieReviewBoardディレクトリに移動し、次のコマンドを実行します。frontendターミナルにダイアログが作成されて設定に関する質問が提示されるので、次のように応答します。CLIがVueアプリケーションの入ったfrontendフォルダを生成します。次に、バックエンドAPIのhelloworldエンドポイントを使用するボタンを追加します。そのためには、MovieReviewBoard/frontend/src/views/About.vueページを次のように変更する必要があります。}};</script>上記の.vueファイルによって、Aboutページのテンプレートにボタンが追加され、@click属性をcallAPIに設定するときにこのボタンのonClickイベントハンドラーとしてcallAPI()メソッドも追加されます。メッセージでテンプレートを更新する、greetingデータ属性が更新されます。このテストを行う前に、axios(バックエンドAPIを呼び出すためにcallAPI()で使用されるHTTPクライアントモジュール)を追加します。コマンドラインでMovieReviewBoard/frontend/ディレクトリに移動して、次を実行します。bootRunを実行してバックエンドサーバーを起動させます。API」ボタンをクリックします。するとサーバーからのhelloworldメッセージが表示されます。現時点ではバックエンドに誰でもアクセスできる状態にあります。これでは事業に差し障りがあるので、APIを保護しましょう。APIの保護には、Auth0のようなアイデンティティ管理プロバイダが必要です。セキュリティにAuth0を使用するには、アカウントがない場合にはアカウントを作成し、アカウントがある場合にはログインする必要があります。Auth0アカウントにサインアップしたら、Auth0でバックエンドAPIを表すAPIを作成して構成し、リクエストを認証する必要があります。API」ボタンをクリックします。すると、ダッシュボードに入力の必要なフォームが表示されます。Kotlin」にします)。Identifier:これはAPIのURL識別子です(ここではhttp://localhost:8888など、有効なURLに近いものにします)。Algorithm:このフィールドにはRS256を選択します。その後、「Create」ボタンをクリックしてAPIの作成を完了します。次に、backend/build.gradleファイルを開いて次のコードを追加します。2.0.でAPIを保護する機能が加わります。このライブラリを使用するのに必要な設定を追加するには、2つの手順が必要です。最初に、securityパッケージをcom.example.MovieReviewBoardパッケージに作成し、そこにSecurityConfig.ktファイルを作成します。その後、以下のコードをcom.example.MovieReviewBoard.securityのSecurityConfig.ktファイルにコピーします。2.0.で保護されたリソースサーバーに便利です。Securityフィルタが自動で有効になります。API識別子を登録して、どのエンドポイントを保護したいのか(ここでは/helloworld)を特定してやる必要があります。次に、APIに送信されるアクセストークンを検証するために、resourceIdとAPI用のエンドポイントを定義してパブリックキーを取得する必要があります。これにはMovieReviewBoard/backend/src/main/resources/application.propertiesを開いて次の設定を追加します。...security.oauth2.resource.id=<YOUR-AUTH0-API-IDENTIFIER>security.oauth2.resource.jwk.keySetUri=https://<YOUR-AUTH0-DOMAIN>/.well-known/jwks.json上記の手順を完了すると、APIのhelloworldエンドポイントが保護されるようになります。API」ボタンをクリックすると、401ステータスのエラーメッセージが表示されるはずです。このページは、helloworldエンドポイントでコンテンツを表示する権限がないことを示しています。ここでは次のようなaboutページが表示されるはずです。Auth0でAPIを保護したことで、APIにリクエストを送信するにはAuth0からアクセストークンを取得しなければならなくなりました。SPAでアクセストークンを取得するには、これもAuth0でSPAを保護する必要があります。Auth0でSPAの認証を実装するには、Auth0アプリケーションを作成することから始めなければいけません。Application」ボタンをクリックします。ボタンをクリックするとAuth0にダイアログが表示されます。そこにアプリケーションの名前(例えば"MovieReviewBoard"などにします)を入力して、アプリケーションのタイプにSPAを選択する必要があります。「Create」ボタンをクリックしてください。Startセクションにリダイレクトされます。Origins(CORS)」の各フィールドに追加します。Changes」をクリックして設定を保存します。次に、SPAにAuth0を統合する必要があります。プロジェクトのフロントエンドディレクトリで次のコマンドを実行して、アプリケーションにauth0.jsをインストールします。auth0-jsこれでプロジェクトにauth0.js依存関係ができるので、それを使用して認証サービスを作成する必要があります。これにはMovieReviewBoard/frontend/にauthディレクトリを作成して、そこにauthService.jsファイルを作成します。最後に、authService.jsに次のコードを追加します。AuthService();現時点ではこのコードは意味不明に見えるかもしれませんが、ここから詳しく説明していきます。上記のファイルは、まずはじめにauth0-js認証ライブラリ、そしてAuth0アプリケーションの設定の一部を含むJSONファイルauth_config.json(このファイルの作成方法は後ほど説明するのでご心配なく)とVueイベントバスをインポートします。その後、auth_config.jsonの設定を使用してAuth0ウェブ認証インスタンスを作成し、Auth0にID_トークン、アクセストークン、ユーザープロファイルを戻すように指示します。上記の各メソッドの機能は次のとおりです。login:Auth0にログインフローを開始するよう指示します。handleAuthentication():Auth0が認証を完了すると、Auth0ウェブ認証インスタンスで設定されたredirectUriにリダイレクトされ、id_token、access_token、expires_in(アクセストークンの有効期限)がブラウザのURLに提供されます。このメソッドはURLからこれらの値を取得し、解析してlocalLoginを呼び出し、これをメモリに保存します。説明が多くて失礼しました!次は、MovieReviewBoard/frontend/にauth_config.jsonを作成し、そこにAuth0アプリケーションの設定を次のように追加します。"<Auth0-API-IDENTIFIER>"}その後、MovieReviewBoard/frontend/にevent-bus.jsファイルを作成して次のコードを追加します。EventBus;すると、アプリケーションはVueのイベントバスを使用してイベントの作成と処理が行えるようになります。authService.jsファイルにAuth0ウェブ認証インスタンスのredirectUriプロパティを定義しますが、このリダイレクトURLのルートとコンポーネントはまだ作成していません。この問題を解決するには、まず下記のように、MovieReviewBoard/frontend/src/router.jsでルートを作成します。]});このファイルがCallbackコンポーネントのルートをアプリケーションに追加し、ルーティングモードを履歴モードに変更します(ルーティングモードの詳細はこちら)。次に、MovieReviewBoard/frontend/src/componentsディレクトリにCallback.vueファイルを作成して次のコードを追加します。scoped></style>Auth0で認証後にこのコンポーネントを作成すると、認証サービスのhandleAuthentication()メソッドにより解析されるURLで、Auth0のトークンが取得できます。handleAuthentication()は、locallogin()を通してログインイベントを生成します。このイベントはその後、aboutページにリダイレクトするhandlelogin()を呼び出すことにより、上記のcreated()メソッドで処理されます。APIに認可リクエストを送ることができるようになりました。}};</script>APIへのHTTP呼び出しについては、トークンで認可ヘッダーを設定することに注意してください。ここまでの手順を完了すれば、アプリケーションがユーザーを認証できるようになるはずですね。それが実はまだなのです。認証プロセスを始動させるログインボタンをまだ追加していないのです。そのためには、Home.vueページを次のように修正します。}};</script>テンプレートにはブレークとボタンタグが追加されていますね。ボタンタグには、ボタン上のクリックイベントを待機して、アプリケーションの認証プロセスを始動させるlogin()メソッドを呼び出すイベントリスナー@clickがあります。API」ボタンをクリックすると、次が表示されます。Bootアプリケーションは@Auth0を使って簡単に保護できます。This終わりにこれでシリーズの第1部は終了です。今回はフロントエンドとバックエンドの両方をブートストラップすることで、第2部に向けて基礎作りができました。Auth0で保護し、フロントエンドがバックエンドからのデータをどう使用するかを説明しました。AwesomeによるUIの完成を重点的に説明していきます。