SPAでのログイン・ログアウト機能実装方法のベストプラクティスが分からなかった事と、脆弱性についての知識が不足しているので情報収集。 session認証とトークン認証の違い。 cookiesを使ったsession認証 Cookieとは、Webサーバーがクライアント(PC等)に預けておく極小さなファイル。クライアントがWebサーバーに初めて接続(Login)した際に、Webサーバーがクライアントに対してCookieファイル(SessionID)を発行し、HTTPレスポンスのヘッダを利用して送ります。その際に発行されたSession情報(SessionID)にはログイン情報が含まれます。 サーバにアクセスする度にクライアント側のリクエストヘッダに含まれるCookieファイル(session ID)とサーバ側に保存されているSessionID情報を比較して合致した際に認証されたとみなされる。 ト
概要 業務でフロントを分離したくなってLaravelのAPI認証について調べてみると、 Laravel7からSanctumの利用が推奨されていた。 Nuxtとの連携を調査したので作業ログも兼ねて記事として残します。 Sanctumについて APIトークンを発行するタイプと、SPA認証の2種類を提供するライブラリです。 ここではSPA認証を紹介します。 和訳ドキュメント 完成品 最終的なコードを置いておきます。 環境 docker-composeで構成し、nginxでRPしています。 Host:Mac Docker nginx:1.19-alpine node:13.8-alpine (Nuxt2.14.x) php:7.4-fpm-alpine (Laravel8.x) docker-composeは下記の通りです。 version: '3' services: nginx: contai
概要 SPA な Web アプリを継続的デリバリーする環境を作るシリーズ第一回、バックエンド編。 ちなみに序章はこちら。 kkznch.hatenablog.com 全4部構成でお届けする。 SPA な Web アプリを継続的デリバリーする環境を作る (1) 〜 バックエンド( Laravel )編 ← 本記事 SPA な Web アプリを継続的デリバリーする環境を作る (2) 〜 フロントエンド( Vue.js )編 SPA な Web アプリを継続的デリバリーする環境を作る (3) 〜 インフラ( AWS )編 SPA な Web アプリを継続的デリバリーする環境を作る (4) 〜 継続的デリバリー( GitLab CI/CD )編 ハンズオンするぞ ひたすら手を動かそう。 Laravel プロジェクトの作成と git の初期設定 バックエンドで動作する Laravel プロジェクトを
GitHub Pagesとは 概要 GitHub Pages GitHubのリポジトリを静的WEBページとして簡単に公開できるサービス。 公開方法 ユーザー毎に作成可能なページ(例: https://[youraccount].github.io) リポジトリ毎のページ(例: https://[youraccount].github.io/[yourRepository]) 本記事では、リポジトリ毎のページとしてデプロイしてみる。 本記事の構成 アジェンダ GitHubリポジトリ作成 簡単なSPA実装 GitHub Pagesへのデプロイ 使用する言語・ツール みんな大好きVue.js vue-router (ルーティング) webpack (モジュールバンドラ) Yarn (インストーラ) GitHubリポジトリ作成 お手持ちのアカウントでリポジトリを作成。 ローカルへクローンする。
はじめに Firebase使ってみて便利さに感動したのでポイントまとめてみました Reactとかフロントエンドのフレームワーク使ってSPA作る分には結構戦えますね とはいえ最終的に細かい作り込みをすると辛いところは出てきそう… 作ったもの https://喫煙所.net 見たまんまですが、喫煙所の共有サービスです 喫煙者の皆様は是非使ってみてくださいw 使ったもの Firebase Hosting Reactでbuildした静的ページの配信 Authentication 非ログイン時は匿名認証 SNS認証使ってログイン時にグレードアップ Cloud Firestore 喫煙所情報の保存 いいね情報の保存 公開用のユーザ名の保存 Cloud Functions for Firebase Firestoreの更新をトリガーにAlgoliaのインデックス更新を実行 Algolia 主に喫煙所の検
Google がホスティングするサーバーでAppsをJavascriptでかけるシステム。 Google Apps Script で 業務アプリを作る利点 Googleの各種サービスに非常に簡単にアクセスできる。 riot.js とは react.js ライク な フロントエンドを構築する javascript のライブラリ。 フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 を読んでみよう。 boostrap とは グリッドシステムがとても使いやすいCSSのフロントエンドのフレームワーク。 実践 Google Apps Script の基本部分を作成 [コード.js] function doGet(){ var pageTemplate = HtmlService.createTemplateFromFile('index');
AngularJSは公式で分かりやすいチュートリアルが用意されているし、日本語の記事も増えてきたし、けっこう簡単に使い始めることができるんじゃないかと思います。 でも、チュートリアルやサンプルはクライアントサイドオンリーなことが多くて、サーバーサイドも含めたWebアプリを作ろうと思うと、どういう構成にすればいいのか迷うのではないでしょうか?(僕がそうでした) 最初は試行錯誤していたのですが、書籍やネットの記事を読んだりGitHubで見つけたアプリを真似たりしているうちに、どういう構成にすればいいのかだんだん見えてきたので、解説してみたいと思います。 SPA 最近、SPA(Single Page Applicationまたは Single Page Web Application)という言葉をよく耳にするようになりました。 SPAとは、最初のページだけ通常のWebアプリと同じようにサーバーか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く