Exercise3 Identity Serviceを使ってノンコーディングでログイン画面を作成してみよう！


# 目次
1. はじめに
2. 作成手順
    3. Kony Fabricでの設定
    4. Kony Visualizerでの設定
3. まとめ


# はじめに
[こちらの記事](https://qiita.com/Kony_Team/items/89e149b0e9972fc6c183)でIdentity Serviceの機能について説明していますが、今回は設定したIdentity Serviceをアプリ側から呼ぶ方法を説明したいと思います！

ノンコーディングで設定可能なので、是非活用してみてください:v_tone1:

# 作成手順
## Kony Fabricでの設定
まず、[こちらの記事](https://qiita.com/Kony_Team/items/89e149b0e9972fc6c183)でご紹介している通りに、
Kony FabricでIdentity Serviceの作成を行います。

`Create New`を選択し、Identity Service名とIdentity Serviceのタイプを選びます。今回は、Konyでログイン機能を実装するので、User Repositoryを選択します。

:::note
User Repositoryとは？
ユーザー名、パスワード等を登録するだけで簡易的な認証サービスを作成できる機能です。AdminsとMembersは、User Repositoryで利用できるデフォルトのグループです。デフォルトでは、すべてのユーザーは Members グループに関連付けられます。
:::

<img width="1601" alt="スクリーンショット 2020-05-19 9.59.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/def0bdce-9192-773a-10fb-3bb69def5426.png">

作成できたら、ADD USERボタンをクリックしてログイン許可するアカウントを追加します。  
![スクリーンショット 0005-03-13 17.48.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2b1ec410-87b7-f439-4a36-561114a0a470.png)

必須項目のEmail/Username、First Name、Last Name、Passwordを入力し、
ADD USERボタンをクリックすればユーザー登録は完了です！
![スクリーンショット 0005-03-13 17.49.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1c5c545d-4cdb-bb94-9b12-b47369cb05d3.png)

<img width="1610" alt="スクリーンショット 2020-05-19 11.04.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/79629cb0-8fb4-c97b-420d-4174ed26b5dc.png">

IdentityServiceの設定ができたので、アプリ側から呼び出せるようにPublishします。
ここまでで、Kony Fabricの説明は終わりです。

## Kony Visualizerでの設定
次にKony Visualizerで画面の作成とIdentity Serviceの接続を行います。
まずは、Publishしたアプリとの接続をしてください。

<img width="327" alt="スクリーンショット 2020-05-19 11.15.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/12ae1e8a-9935-de7a-7494-dd05b31bef72.png">

詳しい接続方法については、前回の記事を見直しましょう！  
▶︎[Fabricの概要説明とAPIの作成方法 / VisualizerとFabricを接続する方法](https://qiita.com/Kony_Team/items/540996aa24fc17fd7b2f#2-visualizer%E3%81%A8fabric%E3%82%92%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)

次に画面の作成を行います。
今回は、ログイン画面と成功時の遷移先画面を作成しました。
form構造  
<img width="219" alt="スクリーンショット 2020-05-19 11.09.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/17a37138-b8e2-306c-4206-edeaf9f36db3.png">
ログイン画面  
<img width="744" alt="スクリーンショット 2020-05-19 10.59.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/9b6a42e7-17af-5737-626c-0da192a7b8fc.png">
成功時画面
<img width="794" alt="スクリーンショット 2020-05-19 11.56.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/b8097cef-4aaa-66b7-2aa5-4ae274a02f82.png">

ログイン成功時、失敗時の動作を追加したいので、`btnLogin`にアクションの設定を行います。　　

Konyでは、ノンコーディングでIdentity Serviceを使ってログイン認証をすることができます。

### Identity Service呼出のアクション
アクション設定画面で、`Network APIs`の`Invoke Identity Service`を選択
<img width="178" alt="スクリーンショット 2020-05-19 10.17.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/6f984a01-02dc-965f-c568-a05e103e0ed6.png">

`Select Service`で作成したIdentity Serviceが一覧で出てくるため利用するものを選択します。

**:sweat:作成したIdentity Serviceが表示されない場合は？**
Kony Fabricで作成したアプリがPublishされていない or　Kony Visualizerでアプリとの接続ができていない可能性がありますので、それぞれ設定されているか確認してみてください。
参考：https://qiita.com/Kony_Team/items/540996aa24fc17fd7b2f

今回は、`PCLogin`という名前で作成したため、`PCLogin$login`を選択します。
ログイン・ログアウトどちらもノンコーディングで自動的に作成されるので、エンジニア経験がない人でも簡単にログイン機能に実装ができます！
<img width="919" alt="スクリーンショット 2020-05-19 11.17.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/4783427e-5819-3d49-6023-3f3384e34ef0.png">

Kony Fabricで設定したID,Passとアプリ側で入力した情報とを照合するため、
`Invoke Identity Service`内でマッピングを行います。
この時、ドラッグ&ドロップではなく、接続したいデータをそれぞれ一度だけクリックして接続を行ってください。
<img width="967" alt="スクリーンショット 2020-05-19 11.23.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/41da65eb-4509-71fc-99a0-6d408deef75e.png">↓<img width="880" alt="スクリーンショット 2020-05-19 11.28.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/8316bffe-7970-23c0-d82b-754595547704.png">
マッピングが完了しました！
これで、アプリ側で入力された情報とIdentity Serviceで登録した情報との照合が可能になりました。

ログイン後に`frmMain`画面でログアウトができるように、
ログアウトのアクションも同様に設定します。
<img width="732" alt="スクリーンショット 2020-05-19 11.46.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/c896d22a-c1d3-c780-bc5a-8252b646ba5e.png">


最後に、
`Invoke Identity Service`を呼び出すと自動的にログイン成功時と失敗時の分岐が表示されるため、
それぞれで行いたい動作を設定してください。

今回は、以下のような動作を行いたいので、
**成功時は`frmMain`に遷移**
**失敗時はアラート表示**
アクション画面で↓のように設定をします。
<img width="472" alt="スクリーンショット 2020-05-19 11.19.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/6a78b082-3b83-effb-9b3d-e0f8c6af6c65.png">
それぞれの設定方法を説明します。

### 画面遷移のアクション
画面遷移のアクションは、`Navigate to Form`を選択して、
遷移先のフォーム名を選択してください。（以下参照）
<img width="179" alt="スクリーンショット 2020-05-19 11.34.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/a5378eb0-79a7-90c1-588c-494360dae06c.png">
↓
<img width="206" alt="スクリーンショット 2020-05-19 11.35.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/238199f3-2159-4b1c-02ff-5a13acb4ddaa.png">

### アラートのアクション
アラート表示のアクションは、`Show　Alert`を選択して、
アラートタイプ・タイトル・メッセージなどを入力してください。

[補足]アラートタイプは確認アラート・エラーアラート・インフォメーションアラートの3通り作成できるので、エラーメッセージ以外にも使っていただけます。

今回は、ログインエラー時のポップアップを表示するので、アラートタイプは`Error`を選択し以下のように設定しました。
<img width="190" alt="スクリーンショット 2020-05-19 11.36.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/7d782b9f-90d8-cca0-da9d-0179591ed0b7.png">
↓<img width="965" alt="スクリーンショット 2020-05-19 11.37.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/f8ece24d-df34-7709-7fc0-daf591ad8e39.png">

これで一通りの設定は完了です！

アプリのBuildをして動作確認を行いましょう！

ログインパスが間違っている場合に、エラー画面が表示されて成功時にメイン画面へ遷移。
メイン画面でログアウトボタンを選択すると、ログイン画面に戻ることができていますね！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/nTmXWKSn29">pic.twitter.com/nTmXWKSn29</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1262577157185781760?ref_src=twsrc%5Etfw">May 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 応用編

認証APIの応用編として、以下のリンクも参考として掲載します。
時間のある時にチャレンジしてみてくださいね！

https://qiita.com/Kony_Team/items/0b423c73110e1a996d14

https://qiita.com/Kony_Team/items/e5c06c432e3da8399e56

# 次の記事
次も演習問題が3問続きます！どんどん進めていきましょう:relaxed:

https://qiita.com/Kony_Team/items/7f16c91695a8e384c956

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

# 最後に一言
ノンコーディングでログイン画面を簡単に設定できることは、
Konyならではのメリットだと思いますので是非活用してみてくださいね！

より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！