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

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

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 認証で失敗することを確認

カテゴリー
Linux

【Nginx】Basic 認証をかける方法手順メモ

追記。「ログインページを介さず 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

追記終わり!

nginx で Basic 認証をかけたいですの。まずは、静的な HTML ファイルと簡単な PHP ファイルを表示いたします。

その準備、手順を記していきますわ♪

Nginx で Basic 認証をかけるためのポイント

  • ユーザ名、パスワードを生成するのは nginx とは別のコマンド「htpasswd」を使用すると便利
  • 「htpasswd」は httpd がインストールされていれば使用可能。使えず、Apache をインストールする必要もなければ「httpd-tools」を yum でインストールすると良いとのこと。
  • Basic 認証をかけるには nginx 設定ファイルに「location パス」のディレクティブに auth_basic、auth_basic_user_file を指定すれば良い。

Nginx で Basic 認証をかける手順ポイント

  1. Basic 認証で使用するユーザ名、パスワードを記述したファイルを作成し、適切なディレクトリに置く。
  2. Nginx の設定ファイルに、Basic 認証をかけるパス、Basic 認証の有効化、認証情報ファイルの場所の情報を追記する。
  3. Nginx 設定をリロードし、Basic 認証がかかっていることを確認する。
カテゴリー
コンピューター

Basic 認証の作成方法をおさらいです。

https://oki2a24.com/test/ 配下のページにアクセスしたときに Basic 認証を求めるサンプルです。サーバ上のディレクトリは次になります。

  • /・・・略・・・ドキュメントルート/test/

ユーザ名、パスワードは、次のようにします。

  • testuser
  • testpassword