Konyでユーザー権限によって表示を変えるWebアプリを作ってみた

#目次
1. はじめに
2. 実装方法
3. まとめ

##はじめに
ログインユーザーの権限によって、表示する画面を変化させたり機能を制御したい場合に、
KonyのIdentity Serviceのメソッドを使って返却値を取得することができます。

##実装方法
早速、実装方法についてご紹介します。
今回は、管理者かメンバーかによって、表示する画面を変えるアプリを作成したいと思います。

###Identity Serviceにアカウントを作成
今回は、管理者とメンバーで表示する画面を変えるアプリを作成するので、
Kony FabricのIdentity Serviceを開き、アカウントを作成します。
![スクリーンショット 2020-09-11 17.37.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2dfdef97-26dc-2553-c7fe-c6c6a00cb458.png)
今回権限を分けたいので、アカウント作成の際に「Select Group(s)」で管理者の場合は、「Admin」を選択します。
管理者以外の場合は、「Select Group(s)」デフォルトの「Members」のまま設定してください。
![admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/27099bf1-e777-593c-f3eb-9721e3e66a7c.png)


###Kony Visualizerでの設定
Kony VisualizerのビジュアルコンソールでIdentity Serviceを呼び出すことができますが、
デフォルトでは、Identity Service成功時の返却値は空になっています。
[参考](URL "https://basecamp.temenos.com/s/question/0D52K00003uRSAMSA4/how-to-get-identity-service-response-on-kony-visualizer-because-by-the-default-the-response-we-are-getting-on-identity-success-callback-is-empty")



そのため、返却値を取得したい場合はKonyの独自のAPIを利用しますので、
今回はAPIを使って以下の手順で実装を行います。



①Identity Serviceの呼び出し
②返却値取得
③取得した値によって表示を変更


###①Identity Serviceの呼び出し
Identity Serviceを呼ぶためのAPIは`identitySvc.login()`を使ってログインを行います。

```login.js

   AUTH_SERVICE_NAME : "PCLogin",
  /**
   * Login実行
   */
  onClick : function(){
    var self = this;
    kony.print("Login Start");
    var loginId = this.view.txtId.text;
    var pass = this.view.txtPass.text;
    
    var client = kony.sdk.getCurrentInstance();
    var identitySvc = client.getIdentityService(self.AUTH_SERVICE_NAME);
    var options = {};
    options.userid = loginId;
    options.password = pass; // Optional values for login
    options.include_profile = false;
    var loginOptions={};
    loginOptions.isSSOEnabled = false;
    loginOptions.continueOnRefreshError = false; //Throws error if previous IdentitySession has expired
    loginOptions.persistLoginResponse = false;
    loginOptions.isOfflineEnabled = false;
    identitySvc.login(
      options, 
      self.successLogin.bind(this),
      function(error) {
        kony.print("Login Failure: " + JSON.stringify(error));
      }); 
  },


```

Identity Serviceを呼び、ログイン成功・失敗を判断するためのAPIですので、返却値は取得しません。
次に、ログイン成功時にユーザーの情報を取得するためのAPIを追加します。

###②返却値取得
ユーザーの情報（権限、ID等）を取得するためには、`getUserAttributes`のAPIを利用します。
このAPI以外にも`getSecurityAttributes`や`getAccountId()` がありますが、
`getUserAttributes`で大体のユーザー情報は取得することが可能です。

その他の情報を取得したい場合は、以下のリファレンスを参考にしてみてください。
https://docs.kony.com/konylibrary/integration/MiddlewareAPI/com/konylabs/middleware/api/processor/IdentityHandler.html

下記にユーザー情報取得のためのソースを記載します。

```success.js
  successLogin : function(){
    var self = this;
    kony.print("***debug*** SUCCESS LOGIN");
    var client = kony.sdk.getCurrentInstance();
    var identitySvc = client.getIdentityService(self.AUTH_SERVICE_NAME);
    var forceFromServer = false;
    identitySvc.getUserAttributes(
      function(res) {
        kony.print("***debug*** SUCCESS GET USER ATTRIBUTES:"+JSON.stringify(res));        
        kony.store.setItem("role", res.groups[0]);
        var ntf = new kony.mvc.Navigation("frmMain");
        ntf.navigate();
      },
      function(err) {
        kony.print("***debug*** Failed to fetch profile:"+JSON.stringify(err));    
      }
    );   
  }
```
`getUserAttributes`を呼ぶことによって、返却値がこのように取得できます。

```result.json
{
	"user_id": "sample@gmail.com",
	"phone": "",
	"_provider_profile": "{\"userId\":\"sample@gmail.com\",\"email\":\"sample@gmail.com\",\"firstName\":\"test\",\"lastName\":\"test\",\"profileAttributes\":{\"firstname\":\"test\",\"userid\":\"sample@gmail.com\",\"email\":\"sample@gmail.com\",\"lastname\":\"test\"}}",
	"groups": [
		"Members"
	],
	"opstatus": 0
}
```

今回は、管理者かそうでないかを判断したいので、
ここでは、resultの中のgroupsを指定し、一度`kony.store.setItem`メソッドを利用してログイン情報を保持します。
ログイン画面での処理はここまでです。


###③取得した値によって表示を変更
次にログイン後のメイン画面での処理を記載します。
`kony.store.getItem();`でfrmLoginで保存したユーザー情報を取得します。

取得した情報をもとに、
管理者かそれ以外で、文字を変化させる処理を記載します。
ここではわかりやすいように、管理者の場合は「私は管理者です」
それ以外の場合は、「私はメンバーです」と表示させるようにしました。

```frmMain.js
  preShow : function(){
    var user = kony.store.getItem("role");
    if(user == "Admins"){
    this.view.lblUser.text = "私は管理者です";  
    }else{
    this.view.lblUser.text = "私はメンバーです"; 
    }
  }
```

実際の実装した結果をみてみましょう！

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/UrU0aihx2v">pic.twitter.com/UrU0aihx2v</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1304326733533855745?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一回目にメンバーでログインすると、メンバーですと表示され、
二回目に管理者でログインすると、文字が変わったことがわかりますね！


##まとめ
今回のように権限によって、表示する画面を変えたり機能を制限したりなど
アプリの利用シーンとしてよく見かける機能なので、
是非今回紹介した内容を活用してみてくださいね！

##参考
- [Identity ServiceのAPI一覧](URL "https://docs.kony.com/konylibrary/konyfabric/kony_fabric_user_guide/Content/KonyStudio/Invoking_Identity_Service_Viz.htm")
- [basecampの回答](URL "https://basecamp.temenos.com/s/question/0D52K00003uRSAMSA4/how-to-get-identity-service-response-on-kony-visualizer-because-by-the-default-the-response-we-are-getting-on-identity-success-callback-is-empty
")
- [Identity Serviceで利用可能なイベントハンドラ](URL "https://docs.kony.com/konylibrary/integration/MiddlewareAPI/com/konylabs/middleware/api/processor/IdentityHandler.html#getAccountId--")