ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

Okta CIC(Auth0) のForms で遊んでみた ~ 性格診断アプリ

Okta CIC Forms を使って、性格診断アプリを作ってみた

こんにちは、山崎です。

今回は、 柔軟な開発が出来るログイン管理サービス Okta CIC の活用法について紹介します。

今回は Okta CIC の Forms 機能を使って、ID管理とは全然関係ない性格診断アプリを作ってみた内容を紹介します。
(Oktaさんに怒られないかなぁ…)


※ちょっと宣伝

当社は Oktaのパートナー です!
Okta CICの導入支援、関連アプリ開発サービスをしておりますので、 本記事で興味が出た方はぜひお問い合わせください!


注釈

本記事では下記の文言の統一をしています。

  • ログイン管理 : アクセス管理、アイデンティティ管理、IDaaS、認可サービス
  • Actions : Triggers, Templete Actions, Custom Actions, Forms, Flows の総称
  • Custom Actions: Triggersで指定した Node.js で記載する処理部分

この記事について

Okta発の提供するログイン管理、 Okta CIC (Okta Customer Identity Cloud、 別称Auth0)の 機能の紹介記事 です。

本記事は、Okta CICの機能、Forms を使ったアプリ作成の紹介記事です。

注意

本記事では、構成などは載せてますが具体的なソースコードは載せていません。 Okta CIC Forms を使ってこんなことが出来るんだなぁと知ってもらうための記事です。

この記事は以下の人を対象にしています。

  • Okta CICって ログイン管理以外になにか出来るの? っという人
  • Okta CICのFormsの使い方がわからない人
  • 暇だからなんか作ってみたい人

まずは作ったものの紹介

今回、ドラクエ3もリメイクされたので Okta CIC Forms 機能を使った性格診断アプリを作ってみました。

いくつかの質問に答えて回答内容によって性格診断できる、良くあるアレです。

ログイン画面

質問画面

結果画面

※性格がいくじなしなので現状アプリは試しに作っただけで公開してません。公開してほしい人がいたら考えるかも。

どのように作ったか

かなりシンプルな作りですが、下記のようなイメージです。
あまりにもシンプルすぎて、概要と言っていることが同じですね。

上記見ていただいてわかる通り、 処理は全てFlowsで作りました。
ホーム画面がありますが、ただの受け皿で今回は何も処理をしていません!

実際のコード

実際のソースコードといっても、ノーコード開発の為に画面を作るのにコードはありません!*1

実際にどのように作成したのかを簡単に説明します。

3つの機能

Okta CIC Forms は下記の3つの機能使います。

  • Step
  • Router
  • Flow

これは全て画面UIを使ったノーコードで画面を作成します。

作成する画面、遷移は下記図のような画面で作成します。

フロー図のような遷移、関連性などの抽象的な理解がしやすくて良い感じですね!

以下に各機能の説明をします。

Step: 画面を作る

まず Step についてです。
Step は Forms で表示させる画面です。

今回は、質問画面と、結果画面を作成するために利用しました。

Router: 選択の分岐を作る

次に、Router です。
Router は、処理の分岐ができます。

今回は、質問画面の回答内容を元に、画面の分岐について利用しました。
他にも Okta CIC で持っている情報を使って分岐をすることなども行います。
例えば、ログイン回数が一定数以上の場合に画面を表示するなどの処理が書けます。

Flow: データの登録や、細かい処理

他に、サーバ側処理で使用するFlowsというのもあります。
今回は使用していないのですが、簡単に記載すると下記記載のサーバ処理のようなものが出来ます。

  • バリデーションを設定できる
  • APIの処理が出来る
  • Okta CIC や その他のサードパティとの連携が出来る

基本はプログレッシブプロファイリングなどで使われるような、プロファイリング画面後のデータ登録処理で使われます。 プログレッシブプロファイリングなどではデータ収集が目的なので、常は必須の機能と言えるかもしれません。

※プログレッシブプロファイリングって何?という人は下記もご覧くださいませ。

techblog.forgevision.com

今回はFlowの説明は細かくしません。
他のもっと知識があって説明がうまい人がどっかのブログに使い方を書くだろうと思い、Flowの説明は はしょりました…

ホント試してほしい Okta CIC Forms 機能

本記事はこれで終了です。

ロマン重視で実用性が無さそうな使い方で恐縮です。。。
しかし、Okta CIC の拡張性、自由さが少しでも伝わってくれたんじゃないかなぁと思ってます。

他の記事でも書きましたが、Okta CIC はただのログイン管理にあらず、新たな価値を見出せるものだと思っています。

今回の Forms の内容などは、もう従来のログイン管理とは関係ありません。
それでいて、マーケティングデータ収集など多くの連携を埋めるようなものでもあると思います。

Okta CIC は無料でトライアルも可能ですので、ぜひぜひ試してみてください!

※最後にまた宣伝

また、 Okta CICにてお困りごとがありましたら、ぜひぜひ当社にお問い合わせくださいませ!

下記にも、Oktaについての記事を書いております。
興味がある方はぜひご覧ください!

Okta について

techblog.forgevision.com

techblog.forgevision.com

Actions、 プログレッシブプロファイリング関連

techblog.forgevision.com

techblog.forgevision.com

techblog.forgevision.com

*1:※Forms はノーコードですが、連携するためにActions 経由で呼び出します。Actions では数行の設定コードを書きます。