access restriction for login user only

[badsaarow]

I need a help for integration this RichFileManager to my application.
My application is working under Node js.
So I ported nodejs connector, and it works now.
Next step I wanted is authentication. Currently I'm using JWT authentication for my application.

My idea is below.

1. (MyApp) login -> issue jwt and save it to brower's local storage
2. (RichFileManger JS) launch -> read jwt from local storage and call connector with jwt header
3. (Connector) receive call -> authenticate from jwt header, if not return 401

Would you give a guide for this?
Can it be handled by configuration file? If not, where can I change from code?
Thanks for reading.

[psolom]

1. client-side: To pass JWT token from to the connector you have to specify it in the requestParams in your json cinfiguration file. See details.

2. server-side: I'm not a maintainer of NodeJs connector, but in PHP connector I implemened fm_authenticate method that is called on each request. If this method returns false then an error is thrown. If NodeJs doen't provide such feature you can implement it yourself and share the solution with others by creating a PR.

[badsaarow]

Thanks for your quick answer.
I'm not understand clearly. Could you make me more clarify?

1. client-side : requestParams can be send jwt value. But this value should be changed dynamically after login. Can I get a example usage for this paramter?

2. server-side: Ok. I'll follow as PHP's fm_authenticate.

[psolom]

Hmm... I see. Dynamic configuration option may be a problem. All options are loaded from the json config file and stay persistent until browser reload. I can suggest to provide a public method to update values for requestParams parameter. You will be able to call this metod in the following way:

$('.fm-container').data('richFilemanager').setRequestParams({
    "MIXED": {
        "jwt_token": "eyJhbGciOiJIU..."
    }
});

Would this work for you?

[badsaarow]

Is setRequestParams() a built-in function on filemanager.js, or is it need to make?
When I tried to "$('.fm-container').data('richFilemanager').setRequestParams(...)", met below error message.
"Uncaught TypeError: $(...).data(...).setRequestParams is not a function"

Thanks for your help.

[psolom]

It was a suggestion, as I mentioned. This should be implemented.
And my question, is this will work for you if I implement it in this way?

[badsaarow]

If you implemented it in that way, it will for for me. Thank you.
Would you clarifying my below understanding is correct?

1. (MyApp) login -> issue jwt and save it to brower's local storage
2. (RichFileManger) index.html -> read jwt from local storage and call setRequestParams.
3. (RichFileManger JS) -> call connector with jwt token
4. (Connector) receive call -> authenticate from requestParams if not return 401.

[psolom]

1. Yes. Your implementation.
2. (see below)
3. Generally yes, but to be more precise: call connector with specified request params
4. Yes. Your implementation in the NodeJs connector

read jwt from local storage and call setRequestParams.

RichFileManger won't read jwt from local storage itself. It also won't call setRequestParams itself. I suggested that I implement setRequestParams method and you call it manually from your application once jwt token has been changed. Of course you have to track jwt tokens in this case. If this seems problematic I can suggest an extended solution.

RichFileManger provides callback functions feature. You have to define them in thefilemanager.init.js file. I can implement beforeConnectorRequest and afterConnectorRequest callback functions, for example. You will be able to implement your own logic inside these functions: read jwt from local storage, update request params, etc. I think this will be much more flexible solution.

[psolom]

Let me know if you think this will work for you.

[badsaarow]

This will surely work for me.
Now I can understand clearly what I have to do after this feature.
I hope this feature to implementing.
Thank you.

[psolom]

Implemented. See description and usage examples in the wiki. Looking forward your feedback.

[badsaarow]

Thank you.
I'll test it.

[badsaarow]

@servocoder
As my trial, I can't check beforeSetRequestParams is called.
Even if I add your code snippet to index.html, filmanager.js still using Plugin's default option (filemanager.js:20)
If I use wrong way, please let me know.

Code I modified is at below.
`

		<!-- Start RichFilemanager plugin -->
		<script type="application/javascript">
            $(function() {
				console.log('start rich file manager');
				$('.fm-container').richFilemanager({
					baseUrl: '.',
					callbacks: {
						beforeCreateImageUrl: function (resourceObject, url) {
							return url += 'modified=ImageUrl';
						},
						beforeCreatePreviewUrl: function (resourceObject, url) {
							return url += '&modified=previewUrl';
						},
						beforeSelectItem: function (resourceObject, url) {
							return url += '&modified=selectItem';
						},
						afterSelectItem: function (resourceObject, url) {
							// example on how to set url into target input and close bootstrap modal window
							// assumes that filemanager is opened via iframe, which is at the same domain as parent
							// https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
							$('#target-input', parent.document).val(url);
							$('#modal', parent.document).find('.close').click();
						},
						beforeSetRequestParams: function (requestMethod, requestParams) {
							console.log('beforeSetRequestParams');
							// add "jwt" parameter with "your_token" value to all POST requests
							//if (requestMethod === 'POST') {
								requestParams.jwt = 'your_token';
							//}
							return requestParams;
						},
						beforeSendRequest: function (requestMethod, requestParams) {
							console.log('beforeSendRequest');
							// prevent all POST requests that lack "jwt" request parameter
							if (requestMethod === 'POST' && requestParams.jwt === undefined) {
								return false;
							}
							return true;
						}
					}
				});
            });
		</script>
	</div>
</div>
</body>

</html>

`

[psolom]

Be more attentive to my previuos replies, please.
You have to put callback functions to the config/filemanager.init.js file.
Another option is to remove the following line from index.html file:

<script type="text/javascript" src="config/filemanager.init.js"></script>

In this case your implementation with plugin's options defined in the index.html will work.

The workflow desription:

First the RFM plugin initialized in the config/filemanager.init.js file.
This way is much more convinient for some cases.

Then interpreter does down to the RFM plugin initialization, defined in the index.html, but it will be ignored since RFM is already initialized. That's why you had no luck with callbacks implementations.

I'm about to add this note to the wiki.

[psolom]

Highlighted it in the wiki:

https://github.com/servocoder/RichFilemanager/wiki/Configuration-options#plugin-initialization-file

[badsaarow]

Thanks for your explanation.
It was not so easy to understand structure of it.

I tested your new feature by prototype code, and it works well.
With this, I'll proceed to integrate with mine.

[psolom]

I know, sorry for that. You are not the first one who is confused of that.
This is the payback for backward compatibility. I will think on how to simplify the workflow in the next major version.

[hathemi]

@badsaarow have you figure out a solution for your issue, or have you make a PR, ?