見出し画像

Angular/認証(IBM Cloud)

akimoto

IBM Cloud™ App ID/認証の管理

ディレクトリーを使用する場合、App ID が ID プロバイダーになります。 ユーザー名または E メールとパスワードによるユーザー登録およびサインインを行えるように、スケーラブルなユーザー・レジストリーをアプリのために作成することができます。 ユーザーに提供するセルフサービスのレベルを決定できます。 例えば、ユーザーが自分でアプリに登録できるようにしたり、アプリからアカウント設定 (パスワードの再設定など) を管理できるようにしたりします。

ディレクトリー設定の管理

ダッシュボードを使用して、アプリケーションで許可するセルフサービスのレベルを構成できます。 

「認証の管理」タブに移動し、「クラウド・ディレクトリー」を「使用可能」に切り替えます。 

「認証設定」タブに移動し、リダイレクト URI とサインインの有効期限設定を構成します。

「ユーザーがサインアップとサインインに使用する情報」で、アプリに使用する方法を選択します。 ユーザーを追加するには、「E メール・アドレスとパスワード」構成を使用する必要があります。

「ユーザーがアプリケーションにサインアップできるようにする」を「はい」に設定します。 

「ユーザーがアプリケーションからアカウントを管理できるようにする」を「はい」に設定すると、パスワードの再設定または変更、あるいはユーザー詳細の再設定をユーザーが行うことができます。 

ユーザー追加

画像1


SPA
https://www.ibm.com/cloud/blog/secure-your-single-page-angular-apps-using-app-id
+Node
https://www.ibm.com/cloud/blog/securing-angularnode-js-applications-using-app-id



Thanks

（IBM Cloud）SPA（シングルページアプリケーション）
-サンプル・アプリ
バックエンドなしで単一ページ・アプリケーション (SPA) を保護できます。 前提条件
Node 8.0.0 以上
「認証の管理」>「認証設定」で、http://localhost:3005/* が、許可されたリダイレクト URI のリストに追加されました。
 `config.json`ファイルで、<CLIENT_ID>と<WELL_KNOWN_ENDPOINT>をアプリケーション資格情報の` clientId`と `discoveryEndpoint`に置き換えます。

ビルドと実行　※pakage.json（'cp' が内部コマンド実行できること）
npm install　
npm start
ブラウザーで、アプリを開いてサインインし、サービスが作動していることを確認します。
（プロファイル表示可能）
（ログインのカスタマイズ可能）

https://cloud.ibm.com/docs/appid?topic=appid-cloud-foundry

-Angular
https://ponzmild.hatenablog.com/entry/2019/12/01/181820

SPA on Microsoft
https://docs.microsoft.com/ja-jp/azure/active-directory/develop/tutorial-v2-angular#prerequisites

SPA on AWS 
https://qiita.com/daikiojm/items/18f718df07c28965b7b3
https://qiita.com/daikiojm/items/66c7b9ae67e6f51f0996

Tool
https://uibakery.io/templates/sign-up-page
https://itnews.org/news_contents/product-ui-bakery