これは、豆蔵デベロッパーサイトアドベントカレンダー2022第8日目の記事です。 JSON Web Token(JWT)の単語を目にすることがよくあると思いますが、それと一緒に認証と認可や、RSAの署名や暗号化、そしてOpenIDConnectやOAuth2.0までと難しそうな用語とセットで説明されることも多いため、JWTって難しいなぁと思われがちです。しかし、JWT自体はシンプルで分かりやすいものです。そこで今回は素のJWTの説明からJWS、そしてJWT(JWS)を使った認証を段階的に説明していきます。 おな、この記事はJWT全体の仕組みや使い方の理解を目的としているため、以下の説明は行いません。 RSAやHMACなど暗号化やアルゴリズムの細かい説明 JWTを暗号化するJWEとJSONの暗号鍵表現のJWKについて OpenIDConnectとOAuth2.0について 記事は上記のような内容
The Cache API: A quick guide Stay organized with collections Save and categorize content based on your preferences. The Cache API is a system for storing and retrieving network requests and their corresponding responses. These might be regular requests and responses created in the course of running your application, or they could be created solely for the purpose of storing data for later use. The
カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント
きっかけ最近、IE/Edge確認のためSurface goを買って使ってるんですが、ナビゲーションとかでうまく動かないサイトをたまに見かけます。 ↓は、bootstrapのhoverを利用したドロップダウンメニューライブラリbootstrap-dropdown-hoverをタブレットで操作している様子です。 ちょっとわかりにくいですが、タップしてもドロップダウンメニューが表示しないことがあります。 なにが起きてるのか?パソコンではhover時に下層メニューが表示します。 スマホでは、タブレット同様、hoverという操作は存在しませんが、タップ時に下層メニューが表示します。 これは、多くのスマホの場合、 タップしている最中 と タップ後 が :hover の擬似クラスに割り当てられているためです。 よって、CSSの :hoverクラス で実装されていればパソコン同様に操作可能です。 スマホで
Firebaseエミュレータとは FirebaseにはFirestoreやFunctionsなど、いろいろなサービスがあります。これらを使って開発していると、デプロイしないと挙動を確認できなかったり、発見したバグ修正のため再デプロイしないといけないことがあります。 そんなときに使えるのが、ローカル環境で各サービスを実行できるFirebaseエミュレータです。 対象 Firebaseのコードを書ける方を対象 Firebase JavaScript SDK ver.9を対象。ver.8とはエミュレタへつなぐためのコードが若干異なります。(公式ドキュメント参照) 有効化 エミュレータは、ローカルでFirebaseプロジェクトを作るときに有効化できます。 # Firebase CLIをインストール $ npm install -g firebase-tools # Firebaseプロジェクトを作
恒例の年末に記事を書くやつ向けの記事です。 今回は AR.js についてご紹介します。 (過去の記事) 2019 - Three.js 2020 - Google Earth Studio 2021 - Deck.gl この記事でやってみること Step 1 : HTML のみで AR を実現 AR.js Studio (Marker based) QR コードの生成 3D モデルの取得 Step 2 : エンティティの動的追加 AR.js Studio (Location based) 位置座標の取得 (Google Map) 相対位置/座標の角度と距離の対応 Step 3 : インタラクションの追加 モデルの切替 テキスト表示 アニメーション Web AR とは AR(Augmented Reality; 拡張現実)は,現実世界にコンテンツのオーバーレイ(重ねること)を可能にするテクノ
概要 Next.js + TypeScriptプロジェクトで出来る超シンプルなSEO対策をご紹介します。 デプロイ先はVercelとなります。 今回は、Open Graph Protocolを利用してSNSでシェアするときに画像付きに出来てリッチな感じに出来るようになりましょうの回です。 SEO対策は多岐に渡り、飛びつける最適解がないので迷いますよね・・・・(´・ω・`) SEOとは Search Engine Optimization(検索エンジン最適化)の略称になります。 Webサイトを上位表示させる為に不可欠な項目です。 Open Graph Protocolとは Open GraphはFacebookによって作成されたプロトコルです。 Open Graphを使用すると、Webページのコンテンツを最適化して、ユーザーがメインのソーシャルネットワークFacebook、Twitter、L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く