Polymer 2 with external login
I followed the Polymer 2 tutorials and created several test applications with an index.html that loads the application shell component which then lazy-loads all child components as necessary.
Now in my real application I have an SPA and a Rest backend and I need the user to first login with an external Token Service Provider (TSP) to access most of the backends interface. The backend knows the TSP and whenever a REST call is made that needs an authenticated user, the backend would by default redirect the client to the login page of the TSP (if it is not already logged in). The login page would then redirect back to my app.
The problem is that my current Polymer application shell already loads too much stuff and needs quite some time to load just then to find out that the user is not yet logged in and needs to be redirected to the TSP.
What is the general approach to handle this external login scenario? Should I have a reduced start page that does nothing else than redirect to the login page? How would I then load the actual app when the user gets redirected back from the login? How does all that get together with service worker and that stuff?
Update
some more infos about the environment:
Client side: Polymer 2 with the oidc-client.js (OpenID Connect (OIDC) and OAuth2 protocol support for browser-based JavaScript applications)
Server side: ASP.NET Core 2.0 with static file serving for Polymer and a REST interface for accessing a database. For example running on port 5000.
Token Service Provider: my customized service, built on IdentityServer4 (OpenID Connect and OAuth 2.0 framework for ASP.NET Core). For example running on port 5001.
The oidc-client is the component in the Polymer app that can detect whether the user is logged in. If not it redirects to the IdentityServer for the login mask and after successful login the user is redirected to the Polymer app which could then load all accessible contents/components for the given user.
After several tests I think I've found a solution:
the idea is simply to load the app in two stages.
Stage 1: index.html which contains nothing except oidc-client.js for the external authentication and the meta information, favicon and home screen icon stuff that's contained in the default Polymer index.html. Maybe a small wait animation but no visual elements, web component stuff, no Polymer! This should load as fast as possible and only check the authentication status. If the user is not authenticated it gets redirected to the external login page. If it is already authenticated, it gets redirected to stage 2.
Stage 2: start.html which was formerly the Polymer default index.html. I put out the favicon and home screen stuff because that is now in stage 1. This file loads the web components application shell. If a REST call in the app results in 401 (Unauthorized) it has to be checked whether the user is not authenticated or does simply not have permissions. In the former case the user gets redirected to stage 1. For this to work the actual app also needs the oidc-client.js!
链接地址: http://www.djcxy.com/p/5338.html上一篇: Polymer v2.0：如何编写可重用的mixin代码
下一篇: 聚合物2与外部登录