基本から理解するJWTとJWT認証の仕組み | 豆蔵デベロッパーサイト
これは、豆蔵デベロッパーサイトアドベントカレンダー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について 記事は上記のような内容
Next.jsでローカルのJSONファイルからデータの取得と表示 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。 Next.jsの事前レンダリング ページ制限 セットアップ JSONデータの作成 データの取得 getStaticPropsを使用せずに静的JSONデータをローカルで取得 最後に サーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。 これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。 Next.jsの事前レンダリング Next.jsはいくつかの異なるデータ取得戦略を提供しています。 それらは下記の通りです。 ・クライアント側のレンダリング(CSR) ・サーバー側レンダリング(SSR) ・静的サイトレンダリング(SSG)
半自動で多言語・国際化を実現できるAngular i18nがすごい。DeepLでの自動翻訳も紹介
Angular公式のi18nパッケージ（パッケージ名 @angular/locale）がとても出来がよく、DeepLを使った自動翻訳も簡単にできたので、何がよかったかをご紹介したいと思います。「いやいやそんなのまだまだだ」「こっちのツールの方が強強だ」という方はぜひ記事を書いていただき、知見を共有できれば幸いです。 Angular i18nというと「Angular公式のi18nパッケージ」（ @angular/locale ）と「Angularのi18n化（国際化）」の2つの意味がありややこしいですが、本文では前者の「Angular公式のi18nパッケージ」を指すことにします。 Angular i18nのよかったこと4選 私が採用してとても開発者体験がよかった点を4つご紹介したいと思います。 1. compiletime i18nによりパフォーマンスの問題がない まず、SPAの多言語化には
構造化データで複数アイテムをマークアップする際のガイドラインをGoogleが更新。ネストするか@idで関連付けする
[レベル: 上級] 1 つのページで、複数のアイテム（タイプ）を構造化データでマークアップする際の注釈を構造化データのガイドラインに Google は追加しました。 関連するエンティティのタイプはネストするかもしくは @id で関連付けます。 一方で、独立したエンティティは個別にマークアップできます。 複数タイプをネスト たとえば、解説動画付きのレシピの構造化データは次のようにマークアップできます。 <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "バナナブレッドのレシピ", "description": "とっても美味しいバナナブレッドのレシピ", "image": "http://example.com/banana-bread.jpg
html+javascriptでxmlファイルをjsonデータへjsonデータをxmlファイルに変換 - Elsaの技術日記(徒然なるままに)
前回まででjsonファイルの読み込みやcsvファイルの読み込み、 csv⇔jsonデータの変換を行ってきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com 今回は最後で、xmlファイルを読み込みjsonデータに変換したり、jsonデータをxmlファイルに変換させてみたいと思います。 json⇔xmlの変換はこちらを用いれば簡単にできそうですが、、、 http://goessner.net/download/prj/jsonxml/ ライセンスがGPLでしたので、、あえて自分で作ることにしました！！ ■前提について ■xmlファイルからデータを読み出してjsonデータに変換 ■jsonデータをxmlファイルに変換・出力 ■最後に ■参考 ■前提について 今回の変換ですが、様々なパターンでの変
Elasticsearch Rest APIでのIndex再構築
https://www.elastic.co/こんにちは。APIチームの小島です。 今回はElasticsearchのIndex再構築手順について書きます。 Elasticsearchを運用している中でスキーマを変更する際、Shard数を変更する場合にIndexを新しく作り直す事があります。再構築に関してはElasticsearchの使い方、サービスの性質、利用ツールによりやり方はそれぞれなのであくまでも一例として紹介します。 環境・Elasticsearch 6.2 Indexについて今回はユーザ情報を入れるIndexとして以下のような命名で説明します。 ・使用中のIndex名： user_v20180701000000 ・新しく作るIndex名： user_v20181001000000 ・Aliase名： user Aliaseはサービスから参照させたいIndexに結びつけておき、I
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
あの手この手でTypeScriptからJSON形式データをimportする - Qiita
はじめに この記事はLIFULL その2 Advent Calendar2018の19日目の記事です。 TypeScriptを使用した際に、外部ファイル化したJSON形式のデータをどのようにimportすれば良いのかを何パターンか表してみました。 (あくまで思いついたもののみとなります。) JSON形式で管理する ハッシュ形式のデータはJSON形式で管理したいというケースになります。 ▶︎ 型定義ファイルで拡張 TypeScriptの型定義ファイルをJSON用に作成します。 この定義ファイルにより、JSON形式のデータをimportできるようになります。 汎用性のため、anyで定義しているので補完や型は使用できません。 補完 型
TypeScriptでJSONファイルを型付きで読み込む - Qiita
自動で型定義 typescript@^2.9.1(2018.5.31~)からはtsconfig.jsonでresolveJsonModuleとmoduleResolutionを設定すれば型の付いたJSONを直接インポートできるようになりました。
jq コマンドを使う日常のご紹介 - Qiita
jq コマンドとは http://stedolan.github.io/jq/ JSONから簡単に値を抜き出したり、集計したり、整形して表示したりできるJSON用のgrepとかawkみたいなコマンドです。 WebサービスがJSONを吐いたり、AWS CLIが JSON を吐いたりする現代社会で大変便利なコマンドです。 マニュアル だいたいここ読めばOK. http://stedolan.github.io/jq/manual/ あ、これで、終わってしまう。だけど気にせず進めます。 簡単な例 まず、空気をつかみましょう。 以下jqコマンドの記法を見ていきます。JSON { "hoge": "value" } があった場合、 . がルート {} を表します。.hoge で "value" を表現します。だいたいこんな感じです。 ただの整形 しばらく下記のJSONを例に進めます。itemsには配
TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
Could not find a declaration file for module 'foobar'. Try npm install @types/foobar if it exists or add a new declaration (.d.ts) file containing declare module 'foobar'; とコンパイルエラーが発生します。 大まかに分けると3対処法があります。 @types からインストールする 型定義ファイル( d.ts )を自作する require でモジュール読み込み 1. @types からインストールする 型定義ファイルが提供されているか試します。 TypeScript コンパイラの指示通り @types からのインストールを試します。 無事インストール出来たら解決です。 もし型定義が提供されておらず、 error An une
[小ネタ] シェルスクリプト内で YAML -> JSON 変換する #ruby | DevelopersIO
シェルスクリプト内で とある YAML ファイル（あるいはデータ）を JSON で出力したい時 例えば「 sample.yaml 」ファイルを JSON 形式に変換したい場合は、下記のようにするとできます。 ruby -rjson -ryaml -e 'print YAML.load(STDIN.read).to_json' < sample.yaml # 出力 : JSON もちろんパイプで入力してもいいですし、結果を jq コマンドなどに喰わせてもいいです。 cat sample.yaml | \ ruby -rjson -ryaml -e 'print YAML.load(STDIN.read).to_json' | \ jq . シェルスクリプト内なら、関数にしてしまうと使い勝手がいいですね。 function yaml_to_json(){ ruby -rjson -ryaml
![[小ネタ] シェルスクリプト内で YAML -> JSON 変換する #ruby | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/499289c4ea21cd46a0311d1581b6e4728e5d304c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F04%2Fruby-eyecatch-1200x630.png)
JSONの代わりにYAMLを使う
JSONはいいですね。扱いやすくて。 でもコメントが書けないとか、ネストが深くなると可読性が悪くなるとか色々問題があります。 そういった問題を解決するためにJSON5やらCSONやらいろんなaltJSONが存在します。 使ったことはないけどコメントが書けるっていうだけでも全然違いますね。 ただ、自分はコメントはもちろん配列やらオブジェクトの記号([]とか{})も極力書きたくないし、なんならダブルクォーテーションやカンマも書きたくない。 そんなワガママを実現するためにYAMLをよく使います。 PHPのSymfonyとかを触ったことがある人には馴染みがあると思います。 YAMLとは「人間が読みやすいように最適化された、すべてのプログラミング言語のための標準的なデータシリアライゼーション」と公式サイトがおっしゃっております。 YAMLの書き方 記述方法はいくつかありますが、下記はよく使う書き方で
JSON API — A specification for building APIs in JSON
If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON:API can help you stop the bikeshedding and focus on what matters: your application. By following shared conventions, you can increase productivity, take advantage of generalized tooling and best practices. Clients built around JSON:API are able to take advantage of its features around efficiently cachi
RESTful APIの記述標準化を目指す「Open API Initiative」をマイクロソフト、Google、IBMらが立ち上げ。Swaggerをベースに
RESTful APIの記述標準化を目指す「Open API Initiative」をマイクロソフト、Google、IBMらが立ち上げ。Swaggerをベースに 10年以上前、XMLの登場に続いてXMLベースのAPIを記述する標準フォーマット「WSDL」が提唱されました。 WSDLにはAPIの仕様がマシンリーダブルな形で記述されており、APIを呼び出すためのプロトコルやデータフォーマットをあらかじめ知ることができます。WSDLを利用することで、APIをコールするためのコードを自動生成することが可能でした。 しかしXMLベースのAPIは期待されたほど普及せず、現在ではよりシンプルなRESTful APIが事実上の標準となっています。 そしてRESTful APIのためのWSDLとも言うべき、RESTful APIのインターフェイスを記述するための標準フォーマットを推進する団体「Open AP
PHP : 文字列をjavascript用にエスケープする – 仙人の心得
PHPで作成した文字列をjavascript上で使用したいときのエスケープ処理について。 ダブルクォーテーションやシングルクォーテーション、バックスラッシュ等をjavascript上で文字列として扱うにはエスケープが必要になる。 PHPのjson_encode関数は自動で文字列をjavascript用にエスケープしてくれるが、これは配列やオブジェクトにも使える関数で、前後に””が付いた形で出力される。 単に文字列として扱いたい場合前後のダブルクォーテーションは邪魔なのでそれを取り除いて返す関数を作成した。 最初のifはNULLを文字列の”null”で返さないようにするため。 function js_string($str){ if(!$str) $str = ''; $tmp = json_encode($str); preg_match('/^"(.*)"$/',$tmp,$m); re
PHPのJSONのエスケープ
(Last Updated On: 2023年12月8日) 追記：最近のOWASPガイドの更新でJavaScript文字列はUnicodeエンコードで安全性を確保するよう変更されました。元々このブログでもUnicodeエスケープのまま利用するように書いています。他の言語のユーザーはUnicodeエスケープを利用しましょう。PHPもASCII領域の文字をUnicodeエスケープするようにした方が良いと思います。これは提案して実現するように努力します。 JSONはJavaScriptのオブジェクトや配列を表現する方式でRFC 4627で定義されています。メディアタイプはapplication/json、ファイル拡張子はjsonと定義されています。 PHPにJSON形式のデータに変換するjson_encode関数とjson_decode関数をサポートしています。 JSON関数がサポートされている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transform
JSON-LDで構造化データマークアップをする書き方超入門 | Moz - SEOとインバウンドマーケティングの実践情報
JSON SchemaとPHP
