カテゴリー
コンピューター

AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード!

CORS を前提としたコードを書くときのポイント

  • AngularJS では $http のヘッダーに ‘Content-Type’: ‘application/x-www-form-urlencoded’ を追加する。しかし、Basic 認証をはじめ、カスタムヘッダーを追加する場合、この Content-Type 追加は意味が無い。
  • サーバでは、プリフライトリクエストがあった場合に対応する次のヘッダーをレスポンスに含めるようにする。
    • Access-Control-Allow-Origin:* ← 許可する接続元(* はどこからでも受け入れる)
    • Access-Control-Allow-Methods ← 許可するメソッド(POST など)
    • Access-Control-Allow-Headers ← 許可するヘッダー(authorization や独自のカスタムヘッダーなど)

CORS = HTTP access control = クロスサイト HTTP アクセス制限、とは?

  • ブラウザは、アクセスしたページ以外のドメインから何かを取ってくることを制限している。基本的にはできないようになっている。
  • そのため、たとえば次のようなことができない。ローカルホスト上のウェブサーバに AngularJS のサンプルを置いたとする。ページのボタンを押したら、とあるサイトからデータを取ってきて表示する。
  • ローカルホストドメインと、とあるサイトのドメインは異なる。ウェブブラウザでローカルホストのページを表示している。そのため、別ドメインであるとあるサイトのデータへのアクセスは制限される。
  • これは、セキュリティ上の観点から施された、ブラウザの仕様

リクエストを送信するウェブブラウザから見た CORS 時に必要な措置

カテゴリー
Linux

AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません><

追記。問題解決できました!

以下、追記前の本文です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24

と試行錯誤してまいりました。これらに続きまして、AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST する方法を探っております!

できませんの><。

今回はせめてどのような結果となったのか、残しておきますの><。

カテゴリー
Linux

AngularJS を使って PHP へ JSON データを POST する方法

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
  4. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません>< | oki2a24
  5. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード! | oki2a24

追記終わり!

AngularJS を使用してウェブブラウザのページでボタンを押すと、サーバへ JSON データを POST して PHP で受け取ってファイルに出力したい。

AngularJS を使用してウェブブラウザのページでボタンを押すと、サーバへ JSON データを POST して PHP で受け取ってファイルに出力してみようと試みました!

苦労しましたので、記録を残しますわ♪

ポイント

  • AngularJS で サーバに JSON をポストしたところエラーとなった。
    • フロント側では、Access-Control-Allow-Origin のエラーが発生していた。
    • サーバ側では method が POST ではなく、OPTIONS となっていた。
  • クロスドメイン問題が原因だった。
    • ちなみに、異なるドメインのデータにアクセスすることを、クロスドメインという。
  • フロント側、サーバ側の両方で対応する必要がある。
    • フロント側では、config で $httpProvider の Content-Type で x-www-form-urlencoded を設定する。
    • サーバ側では、header(‘Access-Control-Allow-Origin: *’); を設定してやる。

エラーが発生した AngularJS のコード抜粋

カテゴリー
Linux

cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
  4. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません>< | oki2a24
  5. AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード! | oki2a24

追記終わり!

ウェブサーバに Basic 認証をかけ、JSON の POST を受け取る PHP プログラムの準備

次のページを参考に準備いたしました。Nginx の設定内容や、JSON を扱う PHP の内容はすべてコピーで作ることができました。

次のようなテスト環境といたしましたの。

  • https://oki2a24.com/basictest/json.php へ JSON を POST
  • Basic 認証のユーザ名: basicuser、パスワード: basicpass
  • 正常時のレスポンス: {“response”:”OK”}

1.Basic 認証で失敗することを確認

カテゴリー
コンピューター

【JavaScript】JSON そのものと操作方法を整理♪

JSON の仕様について整理したポイント

  • 公式ページ → JSON
  • JavaScript Object Notation → JSON
  • データ転送フォーマット
  • 実態としては単なるテキスト
  • JSON は「名前」と「値」でデータを扱う。名前と値はセミコロンで区切る。
    • 名前は、名前の他にメンバー、キー、プロパティなどとも呼ばれる印象
    • 値は、値またはバリューと呼ばれる印象
  • 名前は、二重引用符「”」で囲む。
  • 値の種類
    • 文字列。二重引用符「”」で囲む。
    • 数字。
    • true、もしくは、false。いわゆる boolean
    • null
    • オブジェクト。JSON では名前と値のペアの集合を挿す。
    • 配列
  • データの構造は配列 [] とオブジェクト {} で定義
  • JSON では二重引用符、ダブルクオーテーション「”」のみが許される。「’」は使用不可。

JSON を JavaScript で扱うときのポイント

  • ネイティブ JSON を使う | MDN
  • JSON.parse() メソッド → JSON.parse() – JavaScript | MDN
    • JSON データから JavaScript オブジェクトへ変換する。つまり、JSON フォーマットで記述された文字列を、JavaScript オブジェクトへ変換する。
    • JSON データを作りたいときは、オブジェクトを作り、それから JSON.parse() メソッドで変換する。
  • JSON.stringify() メソッド → JSON.stringify() – JavaScript | MDN
    • JavaScript オブジェクトを JSON データにシリアライズする。つまり、JavaScript オブジェクトを JSON フォーマットの文字列に変換する。
    • 受け取った JSON データからメンバーの値を取得したいときは、JSON.stringify() メソッドで JavaScriptのオブジェクトに変換し、そのオブジェクトから値を取得する。
  • JSON データ では関数や正規表現リテラルは使用できない。よって、JSON.stringify() メソッドを通すと関数は除去され、それ以外の部分が JSON データへと変換される。
  • JSON – JavaScript | MDN

JSON を JavaScript で扱うときの例としてのコード

カテゴリー
コンピューター

【Android】多次元の JSON オブジェクトを作る♪それを Volley で POST する!

ポイント

  • JSON 内部の配列部分を作るには、JSONArray を使う。
  • この JSONArray を JSONObject.put メソッドの value にセットしてやれば良い。
  • Volley ライブラリの JsonObjectRequest をインスタンス化し、RequestQueue.add メソッドの引数とすることで URL にアクセスできる。
  • JsonObjectRequest をインスタンス化するときに、URL、リクエストデータ、レスポンス時の挙動オブジェクト、エラー時の挙動オブジェクトを引数にセットする。

JSON オブジェクトを作って Volley で POST する。完成したコード全体!

カテゴリー
Linux

JSON の Request が POST されているかを確認するだけの簡単な PHP

JSON が開発中プログラムから正しく送信されているかどうか確かめたいですの!

条件や作りたいもの

  • https://oki2a24.com に JSON 受け取り用の PHP を作って置く
  • PHP ファイル名は recieveJson.php
  • 受け取った JSON は見やすい形に整形(デコード)してファイルに書き込む。
  • JSON の内容を書き込むファイル名は recieved_json.txt とする。

JSON を受け取ってファイル出力するだけの簡単な PHP プログラム