From f0a377d3c3efdad18eb9ea51fe7fd863ad2a6615 Mon Sep 17 00:00:00 2001 From: indiepopart Date: Thu, 10 Dec 2020 18:16:54 -0300 Subject: [PATCH 1/3] updates to java-websockets for screencast --- ...19-10-09-java-spring-websocket-tutorial.md | 54 ++++++++++--------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md b/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md index eae29b40ce..3815ccf2c1 100644 --- a/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md +++ b/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md @@ -80,7 +80,7 @@ Let's get started with the application skeleton. Create a Spring Boot applicatio ```shell curl https://start.spring.io/starter.zip -d dependencies=websocket,okta \ --d bootVersion=2.1.8.RELEASE \ +-d bootVersion=2.4.0.RELEASE \ -d language=java \ -d type=maven-project \ -d groupId=com.okta.developer \ @@ -140,7 +140,7 @@ In the configuration above, the `/looping` connection endpoint initiates a WebSo **NOTE:** [Spring Security](https://docs.spring.io/spring-security/site/docs/5.1.6.RELEASE/reference/htmlsingle/#websocket-authentication) requires authentication performed in the web application to hand off the principal to the WebSocket during the connection. For this example, we will use a different approach and configure Okta authentication to obtain an access token the client will send to the server during the WebSockets handshake. This allows you to have unique sessions in the same browser. If we only used server-side authentication, your browser tabs would share the same session. -First, configure WebSocket security and request authentication for any message. To do this, create a `WebSocketSecurityConfig` class to extend `AbstractSecurityWebSocketMessageBrokerConfigurer`. Override the `configureInbound()` method to require authentication for all requests, and disable the same-origin policy by overriding `sameOriginDisabled()`. +First, configure WebSocket security and request authentication for any message. To do this, create a `WebSocketSecurityConfig` class to extend `AbstractSecurityWebSocketMessageBrokerConfigurer`. Override the `configureInbound()` method to require authentication for all requests, and disable the same-origin policy by overriding `sameOriginDisabled()`. ```java import org.springframework.context.annotation.Configuration; @@ -292,7 +292,7 @@ Then create an `index.html` page in `src/main/resources/static`: Looping - + @@ -352,7 +352,7 @@ Then create an `index.html` page in `src/main/resources/static`: First, create a `src/main/resources/static/js` folder in your project for the JavaScript files. -Add `Tone.js` to `src/main/resources/static/js`. **Tone.js** is a JavaScript framework to create interactive music in the browser; it will be used to play, stop and restart the music loops. [Download Tone.js from GitHub](https://github.com/Tonejs/Tone.js#installation). +Add `Tone.js` to `src/main/resources/static/js`. **Tone.js** is a JavaScript framework to create interactive music in the browser; it will be used to play, stop and restart the music loops. [Download Tone.js](https://raw.githubusercontent.com/Tonejs/tonejs.github.io/master/build/Tone.js). Add `NexusUI` also to `src/main/resources/static/js`.**NexusUI** is a framework for building web audio instruments, such as dials and sliders, in the browser. In this example, we will create simple circular buttons, each one to play a different loop. [Download NexusUI from GitHub](https://nexus-js.github.io/ui/api/#intro). @@ -360,36 +360,40 @@ Add an `auth.js` script to handle client authentication with the [Okta Authentic ```javascript var authClient = new OktaAuth({ - url: 'https://{yourOktaDomain}', + url: 'https://localhost:8080', issuer: 'https://{yourOktaDomain}/oauth2/default', clientId: '{yourClientID}', redirectUri: 'http://localhost:8080' }); -var accessToken = authClient.tokenManager.get('accessToken') - .then(accessToken => { - // If access token exists, output it to the console - if (accessToken) { - console.log(`access_token ${accessToken.accessToken}!`); - // If ID Token isn't found, try to parse it from the current URL - } else if (location.hash) { - authClient.token.parseFromUrl().then(function success(res){ - var accessToken = res[0]; - var idToken = res[1]; + +if (authClient.token.isLoginRedirect()) { + // Parse token from redirect url + authClient.token.parseFromUrl() + .then(data => { + const { idToken } = data.tokens; + const { accessToken } = data.tokens; authClient.tokenManager.add('accessToken', accessToken); authClient.tokenManager.add('idToken', idToken); window.location.hash=''; - }); - } - else { - // You're not logged in, you need a sessionToken - authClient.token.getWithRedirect({ - responseType: ['token','id_token'] - }); - } - }); + }); +} else { + // Attempt to retrieve ID Token from Token Manager + authClient.tokenManager.get('accessToken') + .then(accessToken => { + console.log(accessToken); + if (accessToken) { + console.log(accessToken.value); + } else { + // You're not logged in, you need a sessionToken + authClient.token.getWithRedirect({ + responseType: ['token','id_token'] + }); + } + }) +} ``` Create a `src/main/resources/static/js/app.js` file with the SocksJS client functionality. The connect() function will retrieve the access token from the token manager and set it in a custom header sent for the CONNECT STOMP command. The client inbound channel interceptor on the server will process this header. Once connected, the client subscribes to the `/topic/loops` channel, and for this example, incoming messages contain a button toggle event. @@ -493,7 +497,7 @@ Open two different browser sessions at `http://localhost:8080`, with developer t {% img blog/java-spring-websockets/okta-login.png alt:"Loop Me" width:"800" %}{: .center-image } -You can log in with the same account in both browser sessions or use different accounts. After you log in, the UI will load the loop buttons. In each browser, click the "Connect" button on the top to initiate the WebSocket handshake with the server and subscribe to the "loops" topic. +You can log in with the same account in both browser sessions or use different accounts. After you log in, the UI will load the loop buttons. In each browser, click the "Connect" button on the top to initiate the WebSocket handshake with the server and subscribe to the "loops" topic. {% img blog/java-spring-websockets/loopme.png alt:"Loop Me" width:"800" %}{: .center-image } From c1d953363edda6261312d4cd840bbfafab063dae Mon Sep 17 00:00:00 2001 From: indiepopart Date: Thu, 17 Dec 2020 16:49:04 -0300 Subject: [PATCH 2/3] add changelog to websocket post --- _source/_posts/2019-10-09-java-spring-websocket-tutorial.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md b/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md index 3815ccf2c1..4a28d49b19 100644 --- a/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md +++ b/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md @@ -552,3 +552,7 @@ To continue learning about WebSocket-related technologies and Spring Framework's * [10 Excellent Ways to Secure Your Spring Boot Application](/blog/2018/07/30/10-ways-to-secure-spring-boot) For more informative tutorials, please [follow @oktadev on Twitter](https://twitter.com/oktadev) and [subscribe to our YouTube channel](https://youtube.com/c/oktadev). + +**Changelog:** + +* Dic 17, 2020: Update spring-boot version in curl line, to 2.4.0. Update Okta javascript SDK static link in index.html, to version to 4.0.0. Update Tone.js library link. Update the javascript authentication code in auth.js, for new Okta SDK version. From e2b26bef01a3879b4e6419868fb2f93bc3e47f3f Mon Sep 17 00:00:00 2001 From: indiepopart Date: Thu, 31 Dec 2020 01:39:20 -0300 Subject: [PATCH 3/3] update changelog links --- _source/_posts/2019-10-09-java-spring-websocket-tutorial.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md b/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md index 4a28d49b19..8621e42871 100644 --- a/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md +++ b/_source/_posts/2019-10-09-java-spring-websocket-tutorial.md @@ -553,6 +553,7 @@ To continue learning about WebSocket-related technologies and Spring Framework's For more informative tutorials, please [follow @oktadev on Twitter](https://twitter.com/oktadev) and [subscribe to our YouTube channel](https://youtube.com/c/oktadev). + **Changelog:** -* Dic 17, 2020: Update spring-boot version in curl line, to 2.4.0. Update Okta javascript SDK static link in index.html, to version to 4.0.0. Update Tone.js library link. Update the javascript authentication code in auth.js, for new Okta SDK version. +* Dec 31, 2020: Updated Spring Boot to version 2.4.0. Updated Okta Auth JS to version 4.0.0. Update Tone.js library link. See the code changes in the [example app on GitHub](https://github.com/oktadeveloper/okta-java-websockets-example/pull/2). Changes to this post can be viewed in [oktadeveloper/okta-blog#495](https://github.com/oktadeveloper/okta-blog/pull/495).