mdhLabs Blog Style Sheet Examples

This document contains examples of all of the style sheet elements most likely to be required in a Blogger based blog focused on software development. Such content includes frequent references to concatenated class and method names that can become tiresome to read when embedded in normal prose. Such content may also include examples of commands that must be typed EXACTLY as shown which can generate confusion in proportional or serif fonts that make some puncuation characters harder to read. Finally, software related content also frequently includes longer source code listings that benefit from unique formatting so the viewer can see the entire example as one unit and skip over it or view it without confusion about wrapped lines, etc.

All Header Formats Adjacent

Here are all header elements shown together for size comparison purposes.

This is an H1 Header

This is an H2 Header

This is an H3 Header

This is an H4 Header

Using the <code> Tag

This paragraph references the Java classes ClientRegistryRepository and InMemoryClientRegistryRepository to see how text formatted via the <code> HTML tag can make non-prose strings easier to separate for the reader from text that should be parsed like normal sentence content.

Using the <code class='command'> Tag

This paragraph references example commands a user might need to type such as mvn package or java -jar .target/dependsgui.jar to illustrate how specific command examples can be formatted to visually jump out of prose paragraphs for easier readiability.

Using the <code class='filename'> Tag

This paragraph references example filenames that might be referenced in an example to highlight them as an object rather than a normal prose word. References might be made to the pom.xml file or application.properties file on disk. to illustrate how specific command examples can be formatted to visually jump out of prose paragraphs for easier readiability.

Here are the various link state styles - hover on them to get hover color:

www.google.com Visited
never.visited.com Not Visited

Using the prosequote Class with <blockquote>

Prose text can be formatted using formatted using <blockquote class='prosequote'> to yield this on-screen formatting

The unanimous Declaration of the thirteen united States of America, When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

Formatting Glossary Listings

Glossaries of terms can be formatted using <table class='glossary'> and <td class='glossary'> to achieve this visual layout on the screen.

BLUE	indicates classes used to implement OAuth2 functions in traditional servlets using ServletContext and HttpRequest / HttpResponse
GREEN	indicates classes used to implement OAuth2 functions in Reactive based components using WebExchageServer context
RED	indicates classes which have been deprecated for use as of Spring Security 5.7 and should NOT be used in any scenarios for maximum future-proof capabilities

Formatting Caution Notes

Caution notes with a bright yellow caution icon can be generated using a similar <table class='caution'> and <td class='cautionicon'> and <td class='cautiontext'> as shown here

to achieve this visual layout on the screen.

Extreme care must be exercised when creating these commands and copying / pasting strings. Extra spaces before or after parameter names or values will trigger errors in the Authorization server. EVERY CHARACTER COUNTS.

Other icon images such as stop signs can be saved and made available and used as shown below.

If you search the web looking for help and find references to classes in GREEN when your application is NOT Reactive, STOP IMMEDIATELY. If you find references to classs in BLUE when you are writing a Reactive application, STOP IMMEDIATELY. Mixing BLUE and GREEN classes will create compilation problems if you're lucky or bizarre start-up errors if you get past compile stage. Know your scenario and stick to the proper set of classes designed for your model (ServletContext or Reactive).

H3 Header - Formatting Gray Heading Tables

The grayheadertable and grayheader class styles can be used to create tables with this visual format:

Scenario	Required Classes
Legacy ServletContext	SecurityFilterChain @EnableWebSecurity @EnableGlobalMethodSecurity AccessDeniedHandler OAuthAuthenticationFailureHandler BearerTokenAuthentication
Reactive WebExchangeServer	SecurityWebFilterChain @EnableWebFluxSecurity @EnableReactiveMethodSecurity ServerAccessDeniedHandler BearerTokenAuthentication

Formatting Source Code Listings

Source code examples can be formatted using formatted using <blockquote class='codequote'> then using <pre> within the <blockquote> to yield this on-screen formatting

@GetMapping("/public/privacypolicy")
public String privacypolicyPage(Model model) {

thisLog.info("executing privacypolicyPage()");
model.addAttribute("filename","c:/docs/policy/PrivacyPolicy.docx");
model.addAttribute("version","2022-04-30-version5");
return "public/privacypolicy.html";
}

Formatting Ordered Lists via <ol>

A numbered bulleted list will be rendered as shown below using the styles in this CSS stylesheet:

We are using the same client-id, client-secret and token-uri from the example in the prior section.
This is an internal administered client so a password can be shared directly with the deployment administrator so this client can use authorization-grant-type=password instead of authorization-code
Because the client will not use authorization-code, the authorization-uri parameter isn't used and does not have to be provided.
Because the client will not use authorization-code, the redirect-uri parameter isn't used and does not have to be provided.
Keycloak was configured to return the user name as preferred_username so this provider will be configured for user-name-attribute=preferred_username to match.

Copying Source Text to the Clipboard

Source code examples contained within an element with a named id can be copied to the clipboard with a short JavaScript.

copyToClipboard(elementid) {

const range = document.createRange();
range.selectNode(document.getElementById(elmentid));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}

With that script available as a JavaScript include, a button can be placed next to a block of code needing this clipboard capability that calls the above script and passes the name of the HTML element housing the desired code. Here's what the above formatted text looks like in the source HTML:


<pre>
copyToClipboard(elementid) {

const range = document.createRange();
range.selectNode(document.getElementById(elmentid));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
</pre>

H3 Header - Scroll Windows for Long Source Listings

For complex expositions, including the source of an entire module may help readers have ready access to the entire example rather than linking to a repository on Github for full details. However, any listing longer than 10-15 lines can detract from the readability and flow of the prose explaining the code, defeating any benefit gained from citing the code in its entirety. One method of compromising is to include extra attributes when defining a <div> element for the source code. This tag <div style="overflow:scroll; height:200px;"> creates a division with a fixed height of 200 pixels and will enable vertical and horizontal scroll bars if any text IN the division doesn't fit.

o.s.security.web.FilterChainProxy        : /home at position 1 of 15 in additional filter chain; firing Filter: 'WebAsyncManagerIntegrationFilter'
o.s.security.web.FilterChainProxy        : /home at position 2 of 15 in additional filter chain; firing Filter: 'SecurityContextPersistenceFilter'
o.s.security.web.FilterChainProxy        : /home at position 3 of 15 in additional filter chain; firing Filter: 'HeaderWriterFilter'
o.s.security.web.FilterChainProxy        : /home at position 4 of 15 in additional filter chain; firing Filter: 'CsrfFilter'
o.s.security.web.FilterChainProxy        : /home at position 5 of 15 in additional filter chain; firing Filter: 'LogoutFilter'
o.s.security.web.FilterChainProxy        : /home at position 6 of 15 in additional filter chain; firing Filter: 'UsernamePasswordAuthenticationFilter'
o.s.security.web.FilterChainProxy        : /home at position 7 of 15 in additional filter chain; firing Filter: 'DefaultLoginPageGeneratingFilter'
o.s.security.web.FilterChainProxy        : /home at position 8 of 15 in additional filter chain; firing Filter: 'DefaultLogoutPageGeneratingFilter'
o.s.security.web.FilterChainProxy        : /home at position 9 of 15 in additional filter chain; firing Filter: 'BasicAuthenticationFilter'
o.s.security.web.FilterChainProxy        : /home at position 10 of 15 in additional filter chain; firing Filter: 'RequestCacheAwareFilter'
o.s.security.web.FilterChainProxy        : /home at position 11 of 15 in additional filter chain; firing Filter: 'SecurityContextHolderAwareRequestFilter'
o.s.security.web.FilterChainProxy        : /home at position 12 of 15 in additional filter chain; firing Filter: 'AnonymousAuthenticationFilter'
o.s.security.web.FilterChainProxy        : /home at position 13 of 15 in additional filter chain; firing Filter: 'SessionManagementFilter'
o.s.security.web.FilterChainProxy        : /home at position 14 of 15 in additional filter chain; firing Filter: 'ExceptionTranslationFilter'
o.s.security.web.FilterChainProxy        : /home at position 15 of 15 in additional filter chain; firing Filter: 'FilterSecurityInterceptor'

H3 Header - Syntax Prettyfying Source Code

Numerous libraries exist that extend CSS elements tied to the <div> element to mimic the color-coded syntax formatting shown in many IDE editors. Using PrismJS, the example below


<pre>
(your source example goes here...
</pre>

results in this displayed view of code:

@GetMapping("/access/oauthproviders")
public String getLoginPage(Model model) {
    Iterable clientRegistrations = null;
    ResolvableType type = ResolvableType.forInstance(clientRegistrationRepository)
      .as(Iterable.class);
    if (type != ResolvableType.NONE &&
      ClientRegistration.class.isAssignableFrom(type.resolveGenerics()[0])) {
        clientRegistrations = (Iterable) clientRegistrationRepository;
    }

    // for debugging only...
//  clientRegistrations.forEach(registration ->
//    thisLog.info("clientRegistration - " + registration.toString() + " authorizationUri=" +
//    registration.getProviderDetails().getAuthorizationUri() + " tokenUri=" + registration.getProviderDetails().getTokenUri() ) );

    // this block loops thru registrations discovered from application.properties and
    // creates a (clientname, fullauthurl) map entry where
    // fullauthurl = auth-uri?client-id=xxxxx&response_type=code&redirect-uri=XXXXXXX
    clientRegistrations.forEach(registration -> {
      String sessionvalue = com.mdhlabs.oauthsecurity.mdhlabsSecurityUtilities.randomState(12);
      String sessionparmname = com.mdhlabs.oauthsecurity.mdhlabsJwtFilter.provider2session.get(registration.getRegistrationId());
      String fullauthurl = registration.getProviderDetails().getAuthorizationUri() +
         "?client_id=" + registration.getClientId() +
         "&redirect_uri=" + registration.getRedirectUri() +
         "&scope=openid email profile" +
         "&response_type=code" +
         "&" + sessionparmname + "=" + sessionvalue;
      oauth2AuthenticationUrls.put(registration.getClientName(),fullauthurl);
      thisLog.info("Mapped " + registration.getClientName() + " ---> " + fullauthurl);
      });
    model.addAttribute("urls", oauth2AuthenticationUrls);

    return "access/oauthproviders.html";
}

mdhLabs Test2

Wednesday, August 10, 2022

Simple Test Post

OAuth2 Integration - Overview