Fujitsu KEAN Stack 開発
2017-03-24
Machine-translated — the English original is authoritative.
KEAN – K5、Express、Angular(2)、NodeJS
私はkeanです（意図的にそう名乗っています）。FujitsuのK5 IaaS、またはOpenStack Keystone認証APIの使用方法を実演するために、今回は退屈なブログ記事ではなく、動画という新しいメディアを試しています。こちらの方が理解しやすいことを願っています。
開発フレームワークとしてAngular 2を選択しました。現在非常に人気のあるフレームワークです。動画の内容を追うためにAngularの知識は必要ありません。私はWebフロントエンド開発に初めて挑戦しましたが、それが簡単だとは言えないのは嘘になります。しかし、GoogleのAngularのようなフレームワークが登場したことで、以前よりもはるかに簡単になりました。+1（高評価）です。
このアプリケーションは、K5の資格情報を取得し、バックエンドのK5認証（ID）エンドポイントであるKeystoneに対してリクエストを送信します。資格情報が有効であれば、トークンを返します。
K5のエンドポイントはCross-Origin-Resource-Sharing（CORS）をサポートしていないため、このブログで詳述されている回避策を提供しています。
動画の後に、すべてのソースコードを掲載しています。
K5_Angular_2_Example_Login
更新 – 2017年3月23日 – Angular 2とK5のCORS課題を解決しました…軽量なCORS PROXYサーバーの使用により
解決策については、cors_proxy_service.jsを参照してください。
https://github.com/allthingsclowd/K5_Angular_2_Example_Login
このリポジトリは、FujitsuのK5プラットフォーム向けにAngular 2 SPA（シングルページアプリケーション）を構築する際に、CORS認証の課題を回避する方法を実演するために作成されました。
課題
主要な課題は、Fujitsu K5が現在CORSをサポートしておらず、以下のエラーが発生することです。
「XMLHttpRequest cannot load https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000‘ is therefore not allowed access. The response had HTTP status code 404.”
この詳細なCORSブログ – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
の提案を試みると、'preflight checks'を送信する際に以下のエラーが発生します。
解決策
CORSプロキシサーバーを使用して、ブラウザからのリクエストを受け取り、サーバーリクエストとして転送することで、CORS（ブラウザ）の問題を回避します。
インストール
2017年3月23日更新 – 単純なnodejsプロキシサービスを使用して解決しました – npm cors-anywhereモジュールを参照
- https://nodejs.org/en/download/からNodeJS (> v4)とNPM (> v3)をインストールします。コマンドラインで node -v および npm -v を実行して、インストールされているバージョンを確認できます。
- git clone https://github.com/allthingsclowd/K5_Angular_2_Example_Login
- cd K5_Angular_2_Example_Login
- npm install –save-dev @angular/cli@latest
- npm install
- npm start
2017年3月23日更新 – 上記のアプリケーションは、以下のプロキシサーバーを使用するように構成されています
- 新しいターミナルウィンドウを開く
- npm install cors-anywhere
- cors_proxy_serverフォルダに移動する
- node cors_proxy_service.js
http://localhost:3000にアクセスしてください
注意:
K5へのHTTPリクエストを行うために、authentication.service.tsファイルとlogin.component.htmlファイルのみをハックしました…完全なSPAにするにはまだ多くの作業が必要ですが、これにより初期の認証のハードルを乗り越えるのに十分はずです。…今後はあなたの想像力のみが制限となります。
raw表示
Angular2_OpenStack.md
hosted with ❤ by GitHub
ソースコードはここにあります – https://github.com/allthingsclowd/K5_Angular_2_Example_Login
Happy Stacking!（スタッキングを楽しみましょう！）
withk5youcan
Originally published on allthingscloud.eu (2017-03-24).