【Rails×Nuxt.js】SafariのクロスサイトCookie保存拒否に対応する
  • 2020.11.03に公開
  • Udemy
  • 14. 本番環境への対応
  • No.1 / 1

今回達成すること

今回は、Safariのブラウザで正常にログインできるように設定します。

RailsとNuxt.js、それぞれのアプリをHerokuにデプロイしている前提で話を進めます。

また、この記事には

  • Herokuに独自ドメインを設定する方法
  • 独自ドメインをSSL化する方法
  • httpとHerokuドメインを独自ドメインにリダイレクトする方法

が書かれています。

現状の問題

現在は、Safariのブラウザでログインを行うと、401認証エラーが返ってきます。

2020-10-31 01-56-04

原因

原因は、SafariがデフォルトでクロスサイトのCookieを保存できない仕様になっているためです。

クロスサイトリソースのCookieは、デフォルトで全面的にブロックされるようになりました。これは、例外の感覚を取り除くか、「少しのクロスサイト追跡が許可される」ため、プライバシーの大幅な改善です。

引用: Full Third-Party Cookie Blocking and More | WebKit

CookieにアクセストークンがないままRailsにリクエストを行なっているため、ログイン直後のプロジェクト取得リクエストが拒否されるために起こるエラーです。

解決

解決方法は、フロントとサーバーサイド共に同じDNSサーバーで運用することです。

これにより、Safariはサーバーサイドをサードパーティと見なさず、Cookieが保存できないエラーを回避できます。

具体的には、

  • Nuxt.jsアプリのサブドメインと
  • Railsアプリのサブドメイン

両方を同じDNSサーバー内のCNAMEに追加します。

注意点

この解決方法は、Herokuの有料プランを使用するため、月$7 × 2 = $14 (2020年11月現在)の料金が発生します。

実験的に実装する場合は、1ヶ月以内に無料プランへ戻してください。

また、ドメイン取得前提で話を進めますので、まだの方は先にドメインを取得しここへ戻ってきてください。

実装手順

長くなるので手順を整理します。

フロント(Nuxt.js)

  1. Herokuに独自ドメインを追加する
  2. ドメインのDNS設定を行う
  3. Heroku SSLを使って独自ドメインをSSL化(https)する
  4. RailsのAPI_DOMAINの値を変更する
  5. httpとherokuapp.comのリダイレクト処理を行う

サーバー(Rails)

  1. Herokuに独自ドメインを追加する
  2. ドメインのDNS設定を行う
  3. Heroku SSLを使って独自ドメインをSSL化(https)する
  4. Nuxt.jsのAPI_URLの値を変更する
  5. httpとherokuapp.comのリダイレクト処理を行う

【Nuxt.js】Herokuに独自ドメインを追加する

ドメインを取得している前提で操作を進めます。

「front」ディレクトリに移動してHerokuにログインします。

root $ cd front
front $ heroku login
heroku: Press any key to open up the browser to login or q to exit: <Enterキー>
# ブラウザよりログインする

今回はサブドメインを設定する方法です。

domains:addコマンドでドメインを追加します。

ドメイン名はご自身のドメインに置き換えて実行してください。

front $ heroku domains:add udemy-v1.cloud-acct.com

DNSターゲット名が表示されます。

Configure your app's DNS provider to point to the DNS Target <DNSターゲット>.herokudns.com.

domainsコマンドでも、ドメインに関連付いたDNSターゲット名の確認ができます。

front $ heroku domains

Domain Name             DNS Record Type DNS Target                                           
udemy-v1.cloud-acct.com CNAME           <DNSターゲット>.herokudns.com 

参考: Custom Domain Names for Apps | Heroku Dev Center

【Nuxt.js】ドメインのDNS設定を行う

ここからはドメイン設定画面に移動します。

筆者は、G Suite経由のGoDaddy(ゴーダディ)でドメインを取得したので、その管理画面を前提に説明します。

操作画面は違いますが、DNS設定は自体は同じなので、ご自身の操作画面と照らし合わせて進めてください。

ドメイン管理画面より、DNS設定へ移動します。

2020-11-01 12-14-18

CNAMEを追加する

DNS管理画面の右下の「追加」ボタンよりタイプCNAMEを選択します。

2020-11-01 12-17-11

  • ホストは、追加したサブドメインのドット以前部分(udemy-v1
  • ポイント先は、HerokuのDNSターゲット名をコピーしたもの

を追加して保存します。

2020-11-01 12-21-29

以上で、Herokuにサブドメインが追加できました。

この設定はHerokuの「Settings」タブからも確認ができます。

DNS設定の反映は、24時間以上かかる場合もあります。

2020-11-01 12-26-14

確認が取れれば独自サブドメイン(http://udemy-v1.cloud-acct.com)でNuxtアプリが起動できます。

【Nuxt.js】HerokuでSSL設定を行う

今のままではドメインがhttpとなっており、Cookieが保存できません。

これは、Rails上で「本番環境でのみCookieのsecureを有効にする」実装を行なっているためです。

secureを有効にした場合、https経由のSSL通信でないとCookieが保存されません。

そこで、Herokuに設定したサブドメインをSSL通信に変更します。

Herokuを有料プランに変更する

まずは有料プランへの変更を行います。

これから行うSSL設定は、Herokuが取得した証明書を使用するため、月$7(2020年11月現在)の料金が必要です。

Price - Heroku

Heroku管理画面の「Resources(リソーシズ)」タブから「Change Dyno Type(チェンジ ダイノ タイプ)」をクリックします。

2020-11-01 13-11-13

Hobby(ホビー)」を選択し、保存します。

2020-11-01 13-14-34

SSL設定の確認を行う

有料プランに変更すると、Herokuが自動でSSL設定を行なってくれます。

Settings」タブの、「SSL Certificates(エスエスエル サーティフィケート )」メニューを確認し、緑のチェクマークが入っていればSSL設定ができています。

2020-11-01 13-26-49

ドメインもhttpsに変わっていますね。

手動でSSL設定を行う

手動で設定する場合は、「Configure SSL(コンフィギュア エスエスエル)」をクリックします。

2020-11-01 12-39-39

開いたウィンドウの「Automatic Certificate Management (ACM)(オートマチック サーティフィケート マネジメント)」を選択します。

これがSSL証明書を取得、自動更新するプランです。

2020-11-01 13-06-58

これでSSL設定は完了です。

ブラウザで、httpsのサブドメインでNuxt.jsアプリが稼働していることを確認してください。

【Rails】環境変数のAPI_DOMAINを変更する

Railsの本番環境で使用するAPIドメインを変更します。

環境変数のAPI_DOMAINを、今回取得したサブドメインに変更します。

front $ cd ../api
api $ heroku config:set API_DOMAIN=udemy-v1.cloud-acct.com
api $ heroku config

API_DOMAIN:               udemy-v1.cloud-acct.com
...

【Nuxt.js】httpとherokuappのリダイレクト処理

今のNuxt.jsは

  • http://udemy-v1.cloud-acct.com
  • https://udemy-v1.cloud-acct.com (本番用)
  • https://udemy-demoapp-v1-front.herokuapp.com

の3つのドメインに紐づいています。

全てのドメインを、本番用のhttps://udemy-v1.cloud-acct.com にリダイレクトする処理を行います。

Nuxt.jsアプリ直下に「server」ディレクトリと、redirectSsl.jsを作成します。

api $ cd..
root $ mkdir front/server && touch $_/redirectSsl.js

nuxt.config.jsserverMiddlewareから、作成ファイルを読み込むよう設定します。

ここで指定したファイルは、 Nuxt.jsが読み込まれた直後のサーバサイドで実行されます。

front/nuxt.config.js
export default {
  ...
  modules: [
    ...
  ],

  // 追加
  // Doc: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware
  serverMiddleware: [
    // 301 redirect
    '~/server/redirectSsl.js'
  ],
  ...
}

redirectSsl.jsにリダイレクト処理を追加します。

URLがhttpherokuapp.comを含む場合に、正規のURLへリダイレクトします。

front/server/redirectSsl.js
// req、res => https://nuxtjs.org/docs/2.x/internals-glossary/nuxt-render
export default (req, res, next) => {
  const { NODE_ENV, BASE_URL } = process.env
  const isProduction = NODE_ENV === 'production' && !!BASE_URL

  const isRedirectDomain = /herokuapp.com/.test(req.headers.host)
  const isRedirectProtocol = req.headers['x-forwarded-proto'] === 'http'

  // httpとHerokuの場合にリダイレクト処理
  if (isProduction && isRedirectProtocol || isProduction && isRedirectDomain) {
    const redirectUrl = BASE_URL + req.url

    // リクエストにレスポンスヘッダーを送信する
    // https://nodejs.org/api/http.html#http_response_writehead_statuscode_statusmessage_headers
    res.writeHead(301, { Location: redirectUrl })

    // すべての応答ヘッダーと本文が送信されたことをサーバーに通知する
    // https://nodejs.org/api/http.html#http_response_end_data_encoding_callback
    return res.end(redirectUrl)
  }
  return next()
}

参考: redirect-ssl - GitHub

herokuapp.comから独自ドメインに301リダイレクト【Nuxt.js】 - Qiita

Herokuに環境変数をセットする

「front」ディレクトリに移動し、本番用URLを代入した環境変数BASE_URLを追加します。

root $ cd front
front $ heroku config:set BASE_URL=https://udemy-v1.cloud-acct.com

確認しよう

変更をHerokuにPushして、アプリを開きます。

front $ git add -A && git commit -m "add_serverMiddleware_redirectSsl.js"
front $ git push && git push heroku && heroku open

Herokuのドメインがhttpsにリダイレクトされています。

同じくhttpにもアクセスできないことを確認してください。

【Rails】Herokuに独自ドメインを追加する

Railsにも独自ドメインを設定します。

front $ cd ../api
api $ heroku login

# 好きなドメインを指定
api $ heroku domains:add udemy-v1-api.cloud-acct.com

【Rails】ドメインのDNS設定を行う

お使いのドメインDNS設定で、表示されたDNSターゲットとサブドメインを追加します。

タイプ ホスト ポイント先
CNAME udemy-v1-api <DNSターゲット>.herokudns.com

【Rails】HerokuでSSL設定を行う

Herokuにログインし、「Resources」から有料プランに変更します。

Heroku SSLの証明書が設定できているか確認します。

api $ heroku certs:auto

...
Issuer:         /C=US/O=Let's Encrypt/CN=Let's Encrypt Authority X3

Let's Encryptの証明書が発行できています。

【Nuxt.js】環境変数API_URLを変更する

「front」ディレクトリのheroku.ymlで設定したAPI_URLを書き換えます。

front/heroku.yml
build:
  docker:
    web: Dockerfile
  config:
    WORKDIR: app
    # 変更
    API_URL: "https://udemy-v1-api.cloud-acct.com"
    # 削除
    # API_URL: "https://udemy-demoapp-v1-api.herokuapp.com"
run:
  web: yarn run start

「front」ディレクトリ上でHerokuにpushします。

front $ git commit -am "edit_heroku.yml" 
front $ git push && git push heroku

証明書の適用はタイムラグがあります。(筆者は30分ほどアクセスできなかった)

確認するには、Rails側のhttpsのURLにアクセスしてください。

こんな画面が出てきた場合、まだSSLが有効ではありません。時間の経過で有効になります。

24時間経過しても有効にならない場合は、もう一度設定をやり直してください。

間違っている可能性があります。

SSL設定が無効の状態

2020-11-02 07-42-52

確認しよう

Rails側のSSL設定が完了したら、Safariでログインしてみましょう。

今度はサードパーティCookieとは見なされず、無事ログインすることができました。

2020-11-02 09-27-44

【Rails】httpとherokuappのリダイレクト処理

サーバーサイドはユーザーから何も見えませんが、リクエストを返すドメインが複数存在するのはセキュリティ上好ましくないので、リダイレクト処理を行います。

httpからhttpsへリダイレクトさせる

production.rbの40行目付近のコメントを外します。

この設定は、SSL通信の使用を強要するもので、自動でhttpsへリダイレクトするようになります。

api/config/environments/production.rb
...
# 40行目付近
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
config.force_ssl = true

参考: Can Heroku force an application to use SSL/TLS? - Heroku Help

herokuapp.comから独自ドメインへリダイレクト

Herokuのアプリドメインにアクセスした場合に、独自ドメインへリダイレクトを行う処理を実装します。

今回実装するリダイレクト処理は、無効なURLの場合(404エラー)のリダイレクトを行いません。

全てのURLをリダイレクトする場合は Gem rack-rewrite(ラック リライト)で実装できると思われます。(未確認)

application_controller.rbbefore_actionを追加します。

api/app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  # 追加
  # 301リダイレクト(本番環境のみ有効)
  before_action :moved_permanently, if: :is_redirect

  include ActionController::Cookies
  include UserAuth::Authenticator

  # 以下、追加
  private

    # リダイレクト条件に一致した場合trueを返す
    def is_redirect
      target = "herokuapp.com"
      # include? => 文字列に引数の文字列が含まれている場合trueを返す
      Rails.env.production? && ENV["BASE_URL"] && request.host.include?(target)
    end

    # 301リダイレクトを行う
    def moved_permanently
      redirect_to "#{ENV["BASE_URL"]}#{request.path}", status: 301
    end
end

Herokuの環境変数にBASE_URLを追加し、新しく追加したhttpsのURLを代入します。

front $ cd ../api
api $ heroku config:set BASE_URL=https://udemy-v1-api.cloud-acct.com

これでRails側のリダイレクト処理は完了です。

確認しよう

ここまでの変更をHerokuにpushします。

api $ git commit -am "add_ssl_and_301_redirect_application.rb"
api $ git push && git push heroku

デプロイが完了したら、ブラウザから

  • Herokuのドメイン と

    https://<Herokuアプリ名>.herokuapp.com/api/v1/users/current_user

  • 独自ドメインのhttp

    http://<独自ドメイン>/api/v1/users/current_user

アクセスしてください。

双方ともhttps + 独自ドメイン にリダイレクトされていれば成功です。

rootディレクトリもpushしとく

以上でSafariのクロスサイトでのCookie保存エラーに対応できました。

最後に「root」ディレクトリをpushします。

api $ cd ..
root $ git commit -am "finished_Safari_cross_domain_Cookies_and_ssl_redirects"
root $ git push

まとめ

今回は、Herokuに独自ドメインの設定と、リダイレクト処理を行いました。

同じDNSサーバー内でフロントとサーバーサイドを運用することで、SafariのCookieの保存拒否に対応することができます。

Chromeも2022年までに、Safariと同じようにサードパーティのCookieを拒否する仕様にするよう動いているようで。

こうやってHerokuの無料枠で本番環境の動きを確認できるのも、今だけかもしれませんね。

幸せな時代に開発できました。

参考: Building a more private web: A path towards making third party cookies obsolete

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
Udemyの投稿
1
  • このカテゴリーの歩き方
  • /
  • #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
2
  • このカテゴリーの歩き方
  • /
  • #02
アプリケーション仕様書
3
  • このカテゴリーの歩き方
  • /
  • #03
このカテゴリーの歩き方(まずはここをチェック)
4
  • このカテゴリーの歩き方
  • /
  • #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
1
  • Docker入門
  • /
  • #01
Docker for Macをインストールする手順
2
  • Docker入門
  • /
  • #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
3
  • Docker入門
  • /
  • #03
分かるDocker解説。DockerComposeとは何か?
1
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
2
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #02
【MacOS】Homebrew経由でGitをインストールする方法
3
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
4
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
5
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
6
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
7
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
8
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #08
docker-compose.ymlを使ってNuxt.jsを構築する
1
  • 複数プロジェクトのGit管理
  • /
  • #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
2
  • 複数プロジェクトのGit管理
  • /
  • #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
3
  • 複数プロジェクトのGit管理
  • /
  • #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4
  • 複数プロジェクトのGit管理
  • /
  • #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
1
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #01
【Rails6】"Hello" jsonを返すコントローラを作成する
2
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
3
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
1
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #01
デプロイ準備。Herokuへ新規会員登録を行いHerokuCLIをインストールする
2
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
3
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
4
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
5
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
1
  • モデル開発事前準備
  • /
  • #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
2
  • モデル開発事前準備
  • /
  • #02
【Rails6】モデル開発に必要なGemのインストールとHirb.enableの自動化
3
  • モデル開発事前準備
  • /
  • #03
【Docker+Rails】A server is already running. Check /tmp/pids/server.pidエラーの対応
4
  • モデル開発事前準備
  • /
  • #04
【Docker】<none>タグのイメージを一括削除する & Rails .gitignoreの編集
1
  • ユーザーモデル開発
  • /
  • #01
Railsユーザーモデル作成。テーブル設計・ユーザー認証設計を理解する
2
  • ユーザーモデル開発
  • /
  • #02
Railsユーザーモデルのバリデーション設定(has_secure_password解説)
3
  • ユーザーモデル開発
  • /
  • #03
Railsバリデーションエラーメッセージの日本語化(ja.yml設定方法)
4
  • ユーザーモデル開発
  • /
  • #04
EachValidatorクラスのカスタムバリデーション設定(Rails6/lib以下読込)
5
  • ユーザーモデル開発
  • /
  • #05
Rails環境ごとにSeedデータ切り替えるseeds.rbの書き方
6
  • ユーザーモデル開発
  • /
  • #06
Rails6から導入された並列テストを理解する
7
  • ユーザーモデル開発
  • /
  • #07
Railsユーザーモデルバリデーションテスティング(name/email/password)
8
  • ユーザーモデル開発
  • /
  • #08
Nuxt.jsからRailsのユーザーテーブルを取得しHerokuにデプロイする
1
  • Nuxt.jsフロント開発事前準備
  • /
  • #01
【Nuxt.js2.13超解説】バージョンアップ手順と6つの新機能+2つの変更点
2
  • Nuxt.jsフロント開発事前準備
  • /
  • #02
Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する
3
  • Nuxt.jsフロント開発事前準備
  • /
  • #03
VuetifyにカスタムCSSを導入してオリジナルブレイクポイントを作る
4
  • Nuxt.jsフロント開発事前準備
  • /
  • #04
Nuxt.jsにnuxt-i18nを導入して国際化に対応する
1
  • ログイン前のレイアウト構築
  • /
  • #01
Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
2
  • ログイン前のレイアウト構築
  • /
  • #02
Nuxt.js ウェルカムページを構成するコンポーネントファイル群を作成しよう(1/4)
3
  • ログイン前のレイアウト構築
  • /
  • #03
Nuxt.js ウェルカムページにアイキャッチ画像・アプリ名・メニューボタンを表示しよう(2/4)
4
  • ログイン前のレイアウト構築
  • /
  • #04
Nuxt.js addEventListenerでスクロールを検知しツールバーの色を変化させよう(3/4)
5
  • ログイン前のレイアウト構築
  • /
  • #05
Nuxt.js ウェルカムページをレスポンシブデザインに対応させよう(4/4)
6
  • ログイン前のレイアウト構築
  • /
  • #06
Nuxt.js 会員登録ページのレイアウトファイルを作成しよう(1/4)
7
  • ログイン前のレイアウト構築
  • /
  • #07
Nuxt.js 名前、メール、パスワードのコンポーネントファイルを作成しよう(2/4)
8
  • ログイン前のレイアウト構築
  • /
  • #08
Nuxt.js 親子コンポーネント間の双方向データバインディングを実装する(3/4)
9
  • ログイン前のレイアウト構築
  • /
  • #09
Nuxt.js Vuetifyのv-text-fieldを使った会員登録フォームのバリデーション設定(4/4)
10
  • ログイン前のレイアウト構築
  • /
  • #10
Nuxt.js ログインページ実装とHerokuデプロイまで(router. replaceとpushの違いとは)
1
  • ログイン後のレイアウト構築
  • /
  • #01
Nuxt.js ログイン後のツールバーを作成しよう(inject解説)
2
  • ログイン後のレイアウト構築
  • /
  • #02
Nuxt.js アカウントメニューページ・ログアウト機能を実装しよう(nuxt-child解説)
3
  • ログイン後のレイアウト構築
  • /
  • #03
Nuxt.js ログイン後のトップページにプロジェクト一覧を表示しよう
4
  • ログイン後のレイアウト構築
  • /
  • #04
Nuxt.js プロジェクトページにVuetifyのナビゲーションドロワーを追加しよう
5
  • ログイン後のレイアウト構築
  • /
  • #05
Nuxt.js paramsIDからプロジェクトを検索してVuexに保存しよう
1
  • サーバーサイドのログイン認証
  • /
  • #01
JWTとは何か?(ruby-jwtのインストール)
2
  • サーバーサイドのログイン認証
  • /
  • #02
【Rails×JWT】ログイン認証解説とJWT初期設定ファイルの作成
3
  • サーバーサイドのログイン認証
  • /
  • #03
【Rails×JWT】トークン発行とデコードを行うAuthTokenクラスの作成
4
  • サーバーサイドのログイン認証
  • /
  • #04
【Rails×JWT】 ログイン判定を行うAuthenticatorモジュールの作成
5
  • サーバーサイドのログイン認証
  • /
  • #05
【Rails×JWT】UserクラスからJWTを扱うTokenizableモジュールの作成
6
  • サーバーサイドのログイン認証
  • /
  • #06
【Rails×JWT】AuthTokenクラスとAuthenticatorモジュールをテストする
7
  • サーバーサイドのログイン認証
  • /
  • #07
【Rails×JWT】JWTをCookieに保存するログインコントローラーの実装
8
  • サーバーサイドのログイン認証
  • /
  • #08
【Rails×JWT】ログインコントローラーのテストとHerokuデプロイ
1
  • フロントエンドのログイン認証
  • /
  • #01
【Rails×Nuxt.js】クロスオリジン通信でのCookie共有設定
2
  • フロントエンドのログイン認証
  • /
  • #02
【Nuxt.js】Railsからのログイン成功レスポンスをVuexに保存する
3
  • フロントエンドのログイン認証
  • /
  • #03
【Nuxt.js】ローカルストレージの有効期限を暗号化する(crypto-js解説)
4
  • フロントエンドのログイン認証
  • /
  • #04
【Nuxt.js】JWT有効期限内のユーザーをログインしたままにする実装
5
  • フロントエンドのログイン認証
  • /
  • #05
【Nuxt.js】ログイン前後のリダイレクト処理をミドルウェアで実装する
6
  • フロントエンドのログイン認証
  • /
  • #06
【Nuxt.js】ログイン失敗時のトースターをグローバルイベントとして作成する
7
  • フロントエンドのログイン認証
  • /
  • #07
【Nuxt.js】エラーページを作成する
8
  • フロントエンドのログイン認証
  • /
  • #08
【Rails×Nuxt.js】デモプロジェクトの作成とHerokuデプロイ(ログイン認証完)
1
  • 本番環境への対応
  • /
  • #01
【Rails×Nuxt.js】SafariのクロスサイトCookie保存拒否に対応する
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。