Google Yolo and Spring Boot 2.0 Authentication

Back in 2016, Google announced the “Open Yolo” project: You Only Login Once. It originally seemed to be an Android library but during Google’s last Dev Summit in October 2017, Google released “One-tap Sign-ups On Websites and API Integrations” which brings Google Yolo to your website via JavaScript goodness. There’s a very easy guide that will have you up and running in no time here:

We used React to quickly setup a prototype of how the flow works, and you should hopefully end up with something that looks like this after following the guide above:


And, once you login, you’ll end up being issued a token, which would look something like the following:

eyJhbGciOiJSUz [ … ] 52BVk4nS9ReGWOe8A

The Google guide then proceeds to use the above token in a function they call


In this article we’ll explore what happens (or at least one way of what happens) once you are given that token. We’re looking at it from the point of view of the back-end, and we assume that as a backend engineer you have no control or say over how this Google Yolo token is generated, you just receive this token in your REST API requests and need to figure out how to integrate the Yolo token so that only those clients who present a valid Google Yolo token are allowed access to the REST API. To make it a bit more interesting, let’s define the following rules:

  • Any user with a valid Google Yolo token will be allowed to query the REST API

– however –

  • Any some authorized users with a valid Google Yolo token will be allowed to access sensitive parts of the API

In this case, the backend is written using the just released Spring Boot 2.0 framework – specifically using the MVC framework. For the sake of brevity we assume the REST API endpoints, controllers, and so on are already up and running and now we need to integrate the Google Yolo authorization scheme outlined above.

Our scenario is slightly different from a full blown OAUTH2 implementation, so it’s best to outline the workflow:

Our conceptual Google YOLO + Spring Boot authentication workflow

We already outlined how the frontend would achieve steps 1 & 2, so we turn our attention to the remaining steps. In step 3, the frontend needs to request some resources from our API. Without a valid token, the REST API will return an HTTP 403 FORBIDDEN.

(Sidenote: I realize there are lots of other ways to do this – like using a database, or a service like Firebase… it all depends on your architectural needs)

In this case, the backend API requires its own token (which is shared with the rest of the infrastructure) – so we somehow need to translate the Google YOLO token to a token which our infrastructure will understand. So, in step 3 the frontend the frontend sends a POST request to the url /googleToken. The job of this endpoint is to validate the Google YOLO token (step 4 – which is outlined in Google’s guide we linked to above). and if valid, create and return it’s own valid token. We’ve decided to go with JSON Web Tokens [JWTs] in this project. There’s plenty of good resources out there outlining JWT awesomeness (in particular by Auth0), but in a nutshell what drew us to JWT is:

  • We don’t ever need to know a user’s password – we just need to know a client ID
  • JWT is JSON based – so lots of support
  • JWTs can be cryptographically signed and verified as an anti-tamper measure
  • JWTs have in built expiry
  • JWT have built in “claims”, a.k.a. user permissions / roles

Since JWTs basically encode user identity, permissions, and expiry into one JSON blob, JWT makes it incredibly easy for your application to be stateless.

Step 4 is all about being able to issue API JWTs to users who present a valid Google YOLO token. Below is how /googleToken could be coded as a Spring @RestController, named SecurityController:

Most of the code is fairly standard Spring code – however pay special note to lines 70-74 which as the comments explain, are a trivial implementation of the authorization part of our code. If the user’s email (extracted from the secure Google YOLO token) matches an authorized user, we add an extra “claim” to JWT (called “ACTUATOR” in our case). As we’ll see later, claims are analogous to Spring Security Authorities.

In the above code snippet, we see reference to “TokenCreator”, which handles the creation of our API JWT token – step 5 in our workflow. Below is an example of the implementation of TokenCreator, which is a Spring Service responsible for building, signing and issuing the API JWTs. We use auth0 JWT library [com.auth0.jwt.JWT] to actually do the heavy lifting of signing and creating the JWT

Note how:

  • Line 31: we can specify when a JWT will expire (and so not be valid anymore)
  • Line 36: we specify an “issuer” which we can then check later to validate the JWT
  • lines 44-46: we add all the claims the user will have into the token.

At this point we can issue JWT to our frontend, but now we need to use Spring Security so that we can authenticate and authorize those users with valid API JWTs. First, we configure Spring Security

Below is an example of a Spring Boot Security configuration to accomplish this.

Note the following:

  • We use multiple Spring Security configurations, ordered using the @Order annotation.
  • Line 14: The first WebSecurityConfigurerAdapter allows all requests to /googleToken since this is the endpoint clients will use to get their tokens issued in the first place
  • Lines 35-36: The second WebSecurityConfigurerAdapter ensures that all requests to the sensitive part of our API (urls beginning with /actuator) have the ACTUATOR authority while the other URLs are permitted to all users which have a valid API JWT

In order to verify that a user has a valid API JWT, in the above snippet (line 32) we added a new Spring Security filter called “JWTFilter” which is in charge of extracting the JWT from the HTTP Authenticate header, validating the JWT signature, and translating JWT claims to Spring Security Authorities.

( TIP: this was a bit counter-intuitive to me, but even if you are not using Basic Authentication in your app, you have to include your new filter (JWTFilter in our case) after BasicAuthenticationFilter.class as shown in line 32 above.

Also, even though line 36 says “permitAll”, the requests still need to pass through the filter, which can return an error if the JWT token is invalid as we’ll see below)

The implementation of the Spring Security Filter which we called JWTFilter follows. Again we use the auth0 JWT library to do the heavy lifting of validating our token and extracting the claims:

Note the following:

  • Lines 34-37: we build a JWT verifier using the same issuer we used before, to verify and decode all incoming JWT
  • Line 38: we extract the “API_ALLOWED” claim and if false, we send an HTTP 403 FORBIDDEN (lines 70-72)
  • Line 41: we extract the “subject” – a.k.a. the user ID (which originally came from Google YOLO)
  • Lines 43-46: we extract the claims from the JWT and convert them into Spring SimpleGrantedAuthority
  • Lines 48-50: these Authorities are then passed into a UsernamePasswordAuthenticationToken which is subsequently used to update the Spring Security context via

    in line 52

  • Lines 67-68: only if the JWT is verified does the filter allow the request to complete

That pretty much handles our entire workflow, while allowing us to explore:

  • how to map one token (Google Yolo) to another (API JWT)
  • the relationship between JWT “claims” and Spring Security “Authorities”
  • Using Spring Security to validate and authorize users based on JWT

How to create a “heatmap” graph network visualization

What we’re after

@CyberSiftIO we’ve been going through an exercise of adding “confidence levels” to our visualizations. In other words, how confident is the CyberSift engine that an alert really is an anomaly/outlier? The above screenshot shows one of the ways we visualize the output from this exercise. Each blue node is an internal PC/Server, while the other nodes are detected anomalies – ranging from green (low confidence) to red (high confidence). This heatmap-style visualization immediately allows an analyst to focus on those anomalies that really matter. Without the different colors, there may be too many alerts to investigate, but with the heatmap colors and analyst immediately figures out that best start looking at the deep orange alert on the top right corner. In this post we’ll outline how we built the below visualization.

WhatsApp Image 2017-10-16 at 16.54.21.jpeg

The toolset

Here’s the libraries we used:

  • ReactJS as our base framework (optional – in reality any JS framework could be used, we just like how easy and structured ReactJS makes everything)
  • CytoscapeJS as our graph network visualization library
  • D3.js for some helper functions


The coding

We’ll assume you have a basic ReactJS app up and running (if not… use create-react-app). The first order of the day is to format our data in a way that CytoscapeJS expects it. In this particular case, this means building an array of objects. Assuming our array of objects is going to be called cystoscape_elementswe first loop through the internal nodes (light blue ones) and push a data object onto this array:

The most important thing to note in the above is that we add an “extra” object attribute named “backgroundColor” and set to “internal“, which we’ll later use for styling these nodes with the appropriate light blue color.

Next, we need to append our external nodes to the cytoscape_elements object. However unlike in our above code, these nodes need to be given a different color depending on their “confidence rating”. Let’s assume that the confidence rating can range from 0 (low outlier score) to 1 (high outlier score). We need to convert this range into a color palette. Fortunately, D3.js allows you to do exactly that, in a simple way:

In the above code, we defined a linear scale with a domain (possible number values) between 0 and 1. In the last line, we map the domain to a custom color range. The first RGB value is the start color which maps to the numerical value of “0”, the middle is the “pivot” value, and the last is the end color which maps to a numerical value of “1”.

Once we have this color scale, we can push external nodes to our array using a similar strategy as above:

Note how  as before, we define a new object attribute called “confidence”, and we subsequently populate this attribute with our previously defined color scale to convert the numerical confidence to an actual RGB color. We’ll use this attribute later to style the node.

Next, we add the “edges” in the graph connecting the nodes together in a pretty straightforward fashion:

Note the use of javascript type coercion (from int to string) as our id, and note the javascript scope of allowing the inner forEach function to increment the id_counter variable.

Last, we put it all together:

In the above code, note the lines:

  • Line 12: CytoscapeJS uses a system of “selectors” which allow you to style different elements of the graph network. In this case, we’re interested in nodes.
  • Line 16: We set the background-color CSS attribute to the value of our “confidence” attribute in the data object (if present) using the notation below (NB: this would be my entire takeaway from this article…)
  • Line 32: We again use selectors to style the internal nodes with a light blue. Recall that internal nodes had a data attribute of “backgroundColor” set to “src“, and we leverage this in the selector:
'node[backgroundColor = "src"]'

The above code in plain English says: select those nodes whose “backgroundColor is set to “src


Wrap Up

As you can see, the most important points in this article relate to how to effectively use CytoscapeJS custom data attributes along with CytoscapeJS selectors. Together, they allow you to create very striking visualizations that really communicate a point efficiently to your target audience.