|
1 | 1 | ## Configuring for Implicit Flow |
2 | 2 |
|
3 | | -This section shows how to implement login leveraging implicit flow. This is the OAuth2/OIDC flow best suitable for |
4 | | -Single Page Application. It sends the user to the Identity Provider's login page. After logging in, the SPA gets tokens. |
5 | | -This also allows for single sign on as well as single sign off. |
| 3 | +This section shows how to implement login leveraging implicit flow. This is the OAuth2/OIDC flow which was originally intended for Single Page Application. |
6 | 4 |
|
7 | | -To configure the library, the following sample uses the new configuration API introduced with Version 2.1. |
8 | | -Hence, the original API is still supported. |
| 5 | +Meanwhile using **Code Flow** instead is a **best practice** and with OAuth 2.1 implicit flow will be **deprecated***. |
9 | 6 |
|
10 | 7 | ```TypeScript |
11 | 8 | import { AuthConfig } from 'angular-oauth2-oidc'; |
@@ -107,87 +104,3 @@ The following snippet contains the template for the login page: |
107 | 104 | </div> |
108 | 105 | ``` |
109 | 106 |
|
110 | | -## Refreshing when using Implicit Flow (not Code Flow!) |
111 | | - |
112 | | -To refresh your tokens when using implicit flow you can use a silent refresh. This is a well-known solution that compensates the fact that implicit flow does not allow for issuing a refresh token. It uses a hidden iframe to get another token from the auth server. When the user is there still logged in (by using a cookie) it will respond without user interaction and provide new tokens. |
113 | | - |
114 | | -To use this approach, setup a redirect uri for the silent refresh. |
115 | | - |
116 | | -For this, you can set the property silentRefreshRedirectUri in the config object: |
117 | | - |
118 | | -```TypeScript |
119 | | -// This api will come in the next version |
120 | | - |
121 | | -import { AuthConfig } from 'angular-oauth2-oidc'; |
122 | | - |
123 | | -export const authConfig: AuthConfig = { |
124 | | - |
125 | | - // Url of the Identity Provider |
126 | | - issuer: 'https://steyer-identity-server.azurewebsites.net/identity', |
127 | | - |
128 | | - // URL of the SPA to redirect the user to after login |
129 | | - redirectUri: window.location.origin + '/index.html', |
130 | | - |
131 | | - // URL of the SPA to redirect the user after silent refresh |
132 | | - silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html', |
133 | | - |
134 | | - // The SPA's id. The SPA is registerd with this id at the auth-server |
135 | | - clientId: 'spa-demo', |
136 | | - |
137 | | - // set the scope for the permissions the client should request |
138 | | - // The first three are defined by OIDC. The 4th is a usecase-specific one |
139 | | - scope: 'openid profile email voucher', |
140 | | -} |
141 | | -``` |
142 | | - |
143 | | -As an alternative, you can set the same property directly with the OAuthService: |
144 | | - |
145 | | -```TypeScript |
146 | | -this.oauthService.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html"; |
147 | | -``` |
148 | | - |
149 | | -Please keep in mind that this uri has to be configured at the auth-server too. |
150 | | - |
151 | | -This file is loaded into the hidden iframe after getting new tokens. Its only task is to send the received tokens to the main application: |
152 | | - |
153 | | -```HTML |
154 | | -<html> |
155 | | -<body> |
156 | | - <script> |
157 | | - window.parent.postMessage(location.hash || ('#' + location.search), location.origin); |
158 | | - </script> |
159 | | -</body> |
160 | | -</html> |
161 | | -``` |
162 | | - |
163 | | -Please make sure that this file is copied to your output directory by your build task. When using the CLI you can define it as an asset for this. For this, you have to add the following line to the file ``.angular-cli.json``: |
164 | | - |
165 | | -```JSON |
166 | | -"assets": [ |
167 | | - [...], |
168 | | - "silent-refresh.html" |
169 | | -], |
170 | | -``` |
171 | | - |
172 | | -To perform a silent refresh, just call the following method: |
173 | | - |
174 | | -```TypeScript |
175 | | -this |
176 | | - .oauthService |
177 | | - .silentRefresh() |
178 | | - .then(info => console.debug('refresh ok', info)) |
179 | | - .catch(err => console.error('refresh error', err)); |
180 | | -``` |
181 | | - |
182 | | -When there is an error in the iframe that prevents the communication with the main application, silentRefresh will give you a timeout. To configure the timespan for this, you can set the property ``silentRefreshTimeout`` (msec). The default value is 20.000 (20 seconds). |
183 | | - |
184 | | -### Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow) |
185 | | - |
186 | | - |
187 | | -To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService: |
188 | | - |
189 | | -```TypeScript |
190 | | -this.oauthService.setupAutomaticSilentRefresh(); |
191 | | -``` |
192 | | - |
193 | | -By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property ``timeoutFactor`` to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third. |
0 commit comments