INNOVATED.当サイトは、ブラウザのJavaScript設定を有効にしてご覧ください。CIC(Auth0)の認証方法(connection)は複数種類があります。Connectionsです。Connectionsがあります。Connectionsについては以前のブログ記事にてご紹介しました。Connectionsを利用した外部IdPを活用した認証をご紹介します。Connect認証、及びSAML認証方式について試していきます。今回ご紹介する外部IdP認証の設定は、法人ユーザーの利便性を向上することができる機能です。概要デモ構成イメージ今回作成するサンプルの構成図です。外部IdPとしてAuth0環境を2テナント用意します。それとは別に、サービスプロバイダー(SP)として、Auth0テナントを作成し、サンプルアプリ(React)への認証を行います。2」に登録されたユーザーがサンプルアプリ(React)へログインを行います。今回は動作確認のため、デフォルトアプリを利用します。設定としては、ユーザーの作成のみを行います。「XXXidp-oidc@XXX」というユーザーを登録しました。1)と同様に、ユーザーを登録しておきます。「XXXidp-saml@XXX」というユーザーを登録しました。加えて、デフォルトアプリのSMAL設定が必要になります。APPを有効化します。下記の通り設定します。SPで作成するSAMLコネクションの名称}"}さらに、Usageタブより下記の値をメモしておきます。コネクション作成時に使用しますAuth0(SP)の設定サンプルアプリ(React)用にアプリケーションを作成します。URLsにて、下記の通り設定します。http://localhost:3000/callbackサンプルアプリの構築サンプルアプリはAuth0公式のReactアプリを使用しました。各種パラメータを自分のテナント設定に変更します。src/auth_config.jsonを下記のように変更します。Connectionsの設定@Auth0(SP)Auth0(SP)にて外部IdPとの接続を行っていきます。Connectのcreateボタンを押下します。下記の通り設定しました。IDを入力します作成したコネクションを見ていきます。Discoveryは、今回は使用しませんが、ユーザーのメールアドレスのドメインによってConnectionを振り分ける機能です。Aドメインのメールアドレスであれば外部IdP(OIDC)に振り分ける、などといった挙動が可能です。Buttonはオンにします。Loginの画面にて、ユーザーはConnectionを自分で選択することが可能になります。忘れずにサンプルアプリにて該当Connectionを有効化しておきます。(2)SAMLApplications>Enterprise>SAMLのcreateボタンを押下します。下記の通り設定しました。Certificateです。Connect」と同じです。Buttonをオンにし、アプリケーションで接続を有効化します。動作確認サンプルアプリの右上のログインボタンを押下します。キャプチャ左の通り、ログイン画面が現れ外部IdPを選択することができます。2)へリダイレクトされます。それぞれ、先程登録したユーザー名、パスワードを入力しログインします。結果は以下の通り、外部IdPのユーザーでログインすることができました。2)を利用してログインした場合なお、外部IdPユーザーが初回ログインした場合にAuth0(SP)にもユーザーが作成されます。Connect両方)経由での認証の実装方法をご紹介いたしました。CIC(Auth0)では様々な認証方法に対応しているのが便利なポイントです。今回のケースは、Webアプリケーション(今回はReactのサンプルアプリ)を法人向けに提供し、利用される法人が採用するIdPでログインしたいというビジネス要件に対応できるものです。外部IdP認証の設定は、法人ユーザーの利便性を向上することができる機能です。この記事を参考に、ぜひ自社のシステムに適用してみてください。Cloudの認定も取得しています)。Platform」を発表しました!このサービスを活用いただくことで、事業部やサービス間の調整を減らし、リリースまでの期間を早め、ユーザー体験を向上させるといったメリットの多い開発プランをご提供します。サービス紹介サイトトライアル・MVP開発の段階から、どのようにIDaaS/CIAMを導入するかについてもサポートさせていただきますので、お気軽にお問い合わせください。Platformに関する詳細のご紹介資料は以下からダウンロードいただけます!ひとまず情報のキャッチアップだけしておきたいという方は、こちらからニュースレターの購読ができます。