How to open login UI component inside a popup

asked on August 14, 2023

I am trying to use lf-login UI component to start oauth authentication to laserfiche cloud by going through the link below

https://developer.laserfiche.com/client_reference/lf-ui-components/docs/14.x/index.html#/lf-login

I want to open the laserfiche sign in page inside a popup in my angular SPA project. When I add this component inside a popup and click sign in, it opens the signin page in the whole browser. I tried to open the page inside an iframe as a content of the popup, but the iframe is getting blocked. I get this error: "Refused to frame 'https://accounts.laserfiche.com/' because an ancestor violates the following Content Security Policy directive". Is there a way I can show the laserfiche sign in page inside a popup?

I also see redirect_behavior attribute that we can assign to lf-login component. One possible value is "Popup" which is yet to be implemented. Is this the feature that will open the login ui inside a popup? If that’s the case, when can we expect it to be available?

0 0

SELECTED ANSWER

replied on August 18, 2023

Hi! We are really happy to see people starting to use these components.

Authentication via OAuth/ACS within an iframe is not allowed for security reasons. However, you can still show the Laserfiche sign in page on a browser popup.

We have added an example of this scenario to our Angular sample application on GitHub. There is a dropdown that now allows you to switch between `Sign In with redirect` and `Sign In with popup`.

You can reference the PR on GitHub for reference on how we added this functionality. We added notes in the PR description to show why we implemented it this way and a few things to keep in mind.

We do not currently have an ETA on when the popup functionality will be implemented natively in the login component.

2 0

replied on August 21, 2023

Thanks Alexandria for the sample. This is very helpful.

I see it is currently opening a new browser window popup. I am wondering if we can open a Dialog/Modal popup in SPA instead and show the sign in page inside?

0 0

replied on August 21, 2023

Hi Uttam,

For security reasons, the ACS/OAuth sign in page has to use the top level of the browser (and cannot be in an iframe). This means if you open just a modal on top of the SPA, you will see the behavior you are describing in the initial post: it will redirect the entire browser window.

Even when we do implement the popup natively for lf-login it will still be launched in a new popup window because of the restrictions on that login page.

You can write the login.html page within your SPA so you can use Angular, we have done that before with Angular routing, but you would still have to launch a browser popup window to https://myapp.com/my-spa/login

1 0

replied on August 22, 2023

Thanks for the clarification Alexandria.

0 0

Question

Question

How to open login UI component inside a popup

Answer

Replies

Sign in to reply to this post.