This blog post demonstrates how to set up a Vue.js SPA application to authenticate and authorize using OpenID Connect Code flow with PKCE. The Vue OIDC Client sample application is used to implement the client-side authentication logic and validation logic and the Apereo CAS server is used to act as an OpenID Connect identity provider.

Our starting position is as follows:

• CAS 6.3.x
• Java 11
• CAS WAR Overlay
• Vue OIDC Client

Configuration

Once you have the correct modules in the WAR overlay for OpenID Connect, you will need to make sure the client application is registered with CAS as a relying party:

{
  "@class": "org.apereo.cas.services.OidcRegisteredService",
  "clientId": "client",
  "serviceId": "^http://localhost:8080.*",
  "name": "OIDC",
  "id": 1,
  "scopes" : [ "java.util.HashSet", [ "profile", "openid" ] ]
}

Our client application will be running on http://localhost:8080, and the identity provider will be at https://sso.example.org/cas/oidc. Given the SPA nature of the client, we need to make sure CORS requests are allowed by the client to reach out to the identity provider’s OIDC endpoints for discovery, token exchange, and profile retrieval. For simplicity and testing purposes only, the following settings should enable the proper CORS filter for CAS that allow all origins:

cas.http-web-request.cors.enabled=true
cas.http-web-request.cors.allow-origins[0]=*

Client Application

The Vue OIDC Client is already configured to talk to an OIDC identity provider. We just have to adjust the configuration located in the sample/auth.js to have the application point to our CAS server:

var mainOidc = createOidcAuth(
  'main',
  SignInType.Popup,
  appRootUrl,
  {
    authority: 'https://sso.example.org/cas/oidc/',
    client_id: 'client',
    response_type: 'code',
    scope: 'openid profile email api'
  },
  console,
  LogLevel.Debug
)

Next, navigate to the sample directory and run:

# brew install yarn
yarn serve

Note that if the CAS server is running behind self-signed certificates for TLS, you can disable strict-SSL checking for demo and testing purposes before building and serving the client application:

yarn config set "strict-ssl" false

Refer to the official Yarn website for additional details.

Testing

Once you bring up the client application, the home page allows you login using an About (Protected) link at http://localhost:8080/about:

Once you have successfully logged in and exchanged tokens with CAS, you should be greeted with the following page:

Need Help?

If you have questions about the contents and the topic of this blog post, or if you need additional guidance and support, feel free to send us a note and ask about consulting and support services.

So…

I hope this review was of some help to you and I am sure that both this post as well as the functionality it attempts to explain can be improved in any number of ways. Please feel free to engage and contribute as best as you can.

Happy Coding,

Misagh Moayyed