5 / 1. ブラウザのサードパーティCookie拒否に対応する - RailsAPIとNuxt.jsで作るJWTログイン認証

RailsAPIとNuxt.jsで作るJWTログイン認証

Udemy ブログ構築TS Nuxt3 小ネタ集

イントロ

このコースで作成するアプリケーションについて解説します。

1. このコースで作れるもの

Docker入門

Dockerの基礎知識を習得します。

1. Docker for Macをインストールしよう

2. Dockerとは何か?

3. DockerComposeとは何か?

Dockerを使ったRails+Nuxt.js環境構築

Docker上にRailsとNuxt.jsの開発環境を構築します。

1. 開発環境の全体像を理解する

2. Gitのインストールとセットアップ

3. Railsを動かすDockerfileを作成する 1/2 ~作成編~

4. Railsを動かすDockerfileを作成する 2/2 ~解説編~

5. Nuxt.jsを動かすDockerfileを作成する

6. Dockerfileのベストプラクティス

7. docker-compose.ymlの環境変数設計

8. .env, .gitignore, docker-compose.yml を作成する

9. docker-compose.ymlを理解する

10. Railsアプリを立ち上げる

11. Nuxt.jsアプリを立ち上げる

複数プロジェクトのGit管理

GitHubへSSH接続設定を行いプロジェクトをプッシュします。

1. Git管理の全体像を理解する

2. apiとfrontリポジトリのコミット

3. rootリポジトリのコミット

4. GitHubへのSSH接続設定

5. GitHubにプロジェクトをPushする

RailsAPI × Nuxt.js 初めてのAPI通信

"Hello"を返す簡単なAPIアプリケーションを作成します。

1. 【Rails】"Hello"を返すコントローラーを作成する

2. 【Nuxt.js】axiosの初期設定を行う

3. 【Rails】CORS設定を行う

heroku.ymlを使ったDockerデプロイ

Docker環境のRailsとNuxt.jsをHerokuにデプロイし、Helloを返すAPIアプリケーションをインターネット上に公開します。

1. Heroku会員登録とHerokuCLIのインストール

2. 【Rails】Pumaの設定とheroku.ymlの作成 ~ デプロイ準備編 ~

3. 【Rails】開発環境の起動コマンドを変更する ~ デプロイ準備編 ~

4. 【Rails】HerokuCLI-manifestを使ってアプリを構築する ~ デプロイ準備編 ~

5. HerokuへSSH接続を行いRailsをデプロイする ~ デプロイ編 ~

6. 【Rails】HerokuのPostgreSQLを初期化する ~ デプロイ編 ~

7. 【Nuxt.js】Dockerfileの編集とheroku.ymlの作成 ~ デプロイ準備編 ~

8. 【Nuxt.js】Herokuにアプリを作成しプロジェクトをPushする ~ デプロイ編 ~

モデル開発事前準備

ユーザーモデルを作成する前のRailsの初期設定を行います。

1. Railsアプリケーションのタイムゾーン設定

2. Railsデータベースのタイムゾーン設定

3. Railsのi18nとオートロードパスの設定を行う

4. モデル開発に必要なGemをインストールする

ユーザーモデル開発

Railsにユーザーモデルを作成し、ユーザーテーブル設計の考え方やモデル開発の基礎知識を学びます。

1. ユーザーテーブル設計と認証設計を理解する

2. Userテーブルを作成する

3. Userモデルのバリデーション設定

4. バリデーションメッセージの日本語化

5. emailカラムのカスタムバリデーション設定

6. ユーザーテーブルにSeedデータを投入する

7. バリデーションテストの事前準備

8. Userモデルバリデーションテスト 1/2

9. Userモデルバリデーションテスト 2/2

10. Nuxt.jsからユーザーテーブルを取得する

Nuxt.js フロント開発事前準備

フロントエンド開発に必要なモジュールの導入を行います。

1. UIフレームワーク Vuetifyを導入する

2. VuetifyにカスタムCSSを追加する

3. nuxt-i18nを導入する

10.

ログイン前のレイアウト構築

Nuxt.jsのレイアウト、ページ、コンポーネントの役割を理解し、ログイン前のレイアウトを構築します。

1. Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう

2. 【ウェルカムページ 1/4】コンポーネントファイル群を作成しよう

3. 【ウェルカムページ 2/4】アイキャッチ画像・アプリ名・メニューを表示しよう

4. 【ウェルカムページ 3/4】スクロールイベントでツールバーの色を変化させよう

5. 【ウェルカムページ 4/4】レスポンシブデザインに対応させよう

6. ログイン前のレイアウトファイルを作成しよう

7. 会員登録フォームを作成しよう

8. 親子コンポーネント間の双方向バインディングを理解しよう

9. 会員登録フォームの双方向バインディングを実装しよう

10. Vuetifyを使った会員登録フォームのバリデーション設定

11. ログインページを作成しよう

11.

ログイン後のレイアウト構築

NuxtChildコンポーネントや、動的なルーティングに対するページ設定、Vuexなど、より実践的なNuxt.jsの使い方を理解します。

1. ログイン後のツールバーを作成しよう 1/2 ~下準備編~

2. ログイン後のツールバーを作成しよう 2/2 ~inject編~

3. NuxtChildコンポーネントを理解しよう

4. NuxtChildを使ってアカウントページを作成しよう

5. ログイン後のトップページにプロジェクト一覧を表示しよう

6. 動的なルートに表示する個別プロジェクトページを作成しよう

11. エンターキーでフォームを送信しよう

12.

サーバーサイドのログイン認証

JWTの理解とJWTを使ったログイン機能の実装について理解します。

1. JWTとは何か?

2. RailsコンソールからJWTを発行してみよう

3. JWTの3つのメリットと注意点を理解しよう

4. JWTを使ったログイン認証の流れを理解しよう

5. JWTの初期設定ファイルを作成しよう

6. トークン発行クラスの共通モジュールを作成しよう

7. リフレッシュトークンクラスを作成しよう

8. アクセストークンクラスを作成しよう

9. トークンを簡単に扱うためのモジュールを作成しよう

10. アクセストークンからcurrent_userを取得しよう

11. リフレッシュトークンからsession_userを取得しよう

12. 認証を行うコントローラーを作成しよう

13. 認証コントローラーのテストをしよう

14. 認証モジュールのテストをしよう

15. 本番環境のクレデンシャル設定をしてHerokuにデプロイしよう

13.

フロントエンドのログイン認証

Nuxt.jsのログイン機能、トークンリフレッシュ機能、エラー画面の構築などを行い、フロントエンドを完成させます。

1. Nuxt.jsからRailsへログインリクエストを送ろう

2. ログインレスポンスをVuexに保存しよう

3. アクセストークンを使ってプロジェクト一覧を取得しよう

4. ログアウト機能を実装しよう

5. リフレッシュトークンを使ってログイン状態を維持しよう

6. サイレントリフレッシュでアクセストークンを更新しよう

7. ログイン前ユーザーのリダイレクト処理を行おう

8. グローバルイベントのトースターを作成しよう

9. ログイン前ユーザーがアクセスしたルートを記憶しよう

10. ログイン済みユーザーのリダイレクト処理を行おう

11. エラーページをカスタマイズしよう

12. Herokuにデプロイして、本番環境でログインしてみよう

14.

本番環境への対応

本番環境でもログイン状態が維持できるように、Herokuにカスタムドイメインを設定し、リダイレクト処理と常時SSL化の設定を行います。

1. ブラウザのサードパーティCookie拒否に対応する

2. Nuxt.jsにカスタムドメインを設定してSSL化しよう

3. Nuxt.jsにSSLリダイレクト処理を行おう

4. Railsにカスタムドメインを設定してSSL化しよう

5. RailsにSSLリダイレクト処理を行おう【完】

14. 本番環境への対応
5 / 1. ブラウザのサードパーティCookie拒否に対応する

この動画はUdemyで購入できます。

動かして身につく。RailsAPIとNuxt.jsで作るJWT（JSONWebToken）ログイン認証【22時間超解説】

見てみる

5 / 1. ブラウザのサードパーティCookie拒否に対応する

この動画では、現状の本番環境の問題点を整理し、解決方法を理解します。
00:00 現状の問題点
02:27 Cookie拒否の解決方法
02:55 同一サイトとは?
03:25 このチャプターで達成すること
04:06 チャプターに入るための前提条件
05:32 次回は?

この動画のリソース

Understanding "same-site" and "same-origin" - web.dev
Heroku の価格 - Heroku
Full Third-Party Cookie Blocking and More - WebKit（Safari）
An updated timeline for Privacy Sandbox milestones - Google（Chrome）

← Prev

13. フロントエンドのログイン認証

12. Herokuにデプロイして、本番環境でログインしてみよう

14. 本番環境への対応

2. Nuxt.jsにカスタムドメインを設定してSSL化しよう

イントロ

このコースで作成するアプリケーションについて解説します。

1. このコースで作れるもの

Docker入門

Dockerの基礎知識を習得します。

1. Docker for Macをインストールしよう

2. Dockerとは何か?

3. DockerComposeとは何か?

Dockerを使ったRails+Nuxt.js環境構築

Docker上にRailsとNuxt.jsの開発環境を構築します。

1. 開発環境の全体像を理解する

2. Gitのインストールとセットアップ

3. Railsを動かすDockerfileを作成する 1/2 ~作成編~

4. Railsを動かすDockerfileを作成する 2/2 ~解説編~

5. Nuxt.jsを動かすDockerfileを作成する

6. Dockerfileのベストプラクティス

7. docker-compose.ymlの環境変数設計

8. .env, .gitignore, docker-compose.yml を作成する

9. docker-compose.ymlを理解する

10. Railsアプリを立ち上げる

11. Nuxt.jsアプリを立ち上げる

複数プロジェクトのGit管理

GitHubへSSH接続設定を行いプロジェクトをプッシュします。

1. Git管理の全体像を理解する

2. apiとfrontリポジトリのコミット

3. rootリポジトリのコミット

4. GitHubへのSSH接続設定

5. GitHubにプロジェクトをPushする

RailsAPI × Nuxt.js 初めてのAPI通信

"Hello"を返す簡単なAPIアプリケーションを作成します。

1. 【Rails】"Hello"を返すコントローラーを作成する

2. 【Nuxt.js】axiosの初期設定を行う

3. 【Rails】CORS設定を行う

heroku.ymlを使ったDockerデプロイ

Docker環境のRailsとNuxt.jsをHerokuにデプロイし、Helloを返すAPIアプリケーションをインターネット上に公開します。

1. Heroku会員登録とHerokuCLIのインストール

2. 【Rails】Pumaの設定とheroku.ymlの作成 ~ デプロイ準備編 ~

3. 【Rails】開発環境の起動コマンドを変更する ~ デプロイ準備編 ~

4. 【Rails】HerokuCLI-manifestを使ってアプリを構築する ~ デプロイ準備編 ~

5. HerokuへSSH接続を行いRailsをデプロイする ~ デプロイ編 ~

6. 【Rails】HerokuのPostgreSQLを初期化する ~ デプロイ編 ~

7. 【Nuxt.js】Dockerfileの編集とheroku.ymlの作成 ~ デプロイ準備編 ~

8. 【Nuxt.js】Herokuにアプリを作成しプロジェクトをPushする ~ デプロイ編 ~

モデル開発事前準備

ユーザーモデルを作成する前のRailsの初期設定を行います。

1. Railsアプリケーションのタイムゾーン設定

2. Railsデータベースのタイムゾーン設定

3. Railsのi18nとオートロードパスの設定を行う

4. モデル開発に必要なGemをインストールする

ユーザーモデル開発

Railsにユーザーモデルを作成し、ユーザーテーブル設計の考え方やモデル開発の基礎知識を学びます。

1. ユーザーテーブル設計と認証設計を理解する

2. Userテーブルを作成する

3. Userモデルのバリデーション設定

4. バリデーションメッセージの日本語化

5. emailカラムのカスタムバリデーション設定

6. ユーザーテーブルにSeedデータを投入する

7. バリデーションテストの事前準備

8. Userモデルバリデーションテスト 1/2

9. Userモデルバリデーションテスト 2/2

10. Nuxt.jsからユーザーテーブルを取得する

Nuxt.js フロント開発事前準備

フロントエンド開発に必要なモジュールの導入を行います。

1. UIフレームワーク Vuetifyを導入する

2. VuetifyにカスタムCSSを追加する

3. nuxt-i18nを導入する

10.

ログイン前のレイアウト構築

Nuxt.jsのレイアウト、ページ、コンポーネントの役割を理解し、ログイン前のレイアウトを構築します。

1. Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう

2. 【ウェルカムページ 1/4】コンポーネントファイル群を作成しよう

3. 【ウェルカムページ 2/4】アイキャッチ画像・アプリ名・メニューを表示しよう

4. 【ウェルカムページ 3/4】スクロールイベントでツールバーの色を変化させよう

5. 【ウェルカムページ 4/4】レスポンシブデザインに対応させよう

6. ログイン前のレイアウトファイルを作成しよう

7. 会員登録フォームを作成しよう

8. 親子コンポーネント間の双方向バインディングを理解しよう

9. 会員登録フォームの双方向バインディングを実装しよう

10. Vuetifyを使った会員登録フォームのバリデーション設定

11. ログインページを作成しよう

11.

ログイン後のレイアウト構築

NuxtChildコンポーネントや、動的なルーティングに対するページ設定、Vuexなど、より実践的なNuxt.jsの使い方を理解します。

1. ログイン後のツールバーを作成しよう 1/2 ~下準備編~

2. ログイン後のツールバーを作成しよう 2/2 ~inject編~

3. NuxtChildコンポーネントを理解しよう

4. NuxtChildを使ってアカウントページを作成しよう

5. ログイン後のトップページにプロジェクト一覧を表示しよう

6. 動的なルートに表示する個別プロジェクトページを作成しよう

11. エンターキーでフォームを送信しよう

12.

サーバーサイドのログイン認証

JWTの理解とJWTを使ったログイン機能の実装について理解します。

1. JWTとは何か?

2. RailsコンソールからJWTを発行してみよう

3. JWTの3つのメリットと注意点を理解しよう

4. JWTを使ったログイン認証の流れを理解しよう

5. JWTの初期設定ファイルを作成しよう

6. トークン発行クラスの共通モジュールを作成しよう

7. リフレッシュトークンクラスを作成しよう

8. アクセストークンクラスを作成しよう

9. トークンを簡単に扱うためのモジュールを作成しよう

10. アクセストークンからcurrent_userを取得しよう

11. リフレッシュトークンからsession_userを取得しよう

12. 認証を行うコントローラーを作成しよう

13. 認証コントローラーのテストをしよう

14. 認証モジュールのテストをしよう

15. 本番環境のクレデンシャル設定をしてHerokuにデプロイしよう

13.

フロントエンドのログイン認証

Nuxt.jsのログイン機能、トークンリフレッシュ機能、エラー画面の構築などを行い、フロントエンドを完成させます。

1. Nuxt.jsからRailsへログインリクエストを送ろう

2. ログインレスポンスをVuexに保存しよう

3. アクセストークンを使ってプロジェクト一覧を取得しよう

4. ログアウト機能を実装しよう

5. リフレッシュトークンを使ってログイン状態を維持しよう

6. サイレントリフレッシュでアクセストークンを更新しよう

7. ログイン前ユーザーのリダイレクト処理を行おう

8. グローバルイベントのトースターを作成しよう

9. ログイン前ユーザーがアクセスしたルートを記憶しよう

10. ログイン済みユーザーのリダイレクト処理を行おう

11. エラーページをカスタマイズしよう

12. Herokuにデプロイして、本番環境でログインしてみよう

14.

本番環境への対応

本番環境でもログイン状態が維持できるように、Herokuにカスタムドイメインを設定し、リダイレクト処理と常時SSL化の設定を行います。

1. ブラウザのサードパーティCookie拒否に対応する

2. Nuxt.jsにカスタムドメインを設定してSSL化しよう

3. Nuxt.jsにSSLリダイレクト処理を行おう

4. Railsにカスタムドメインを設定してSSL化しよう

5. RailsにSSLリダイレクト処理を行おう【完】