Azure – Pauls Blog https://sterl.org Thu, 01 Feb 2024 10:00:22 +0000 de hourly 1 https://wordpress.org/?v=6.8.3 Setup Spring Boot Azure OAuth2 with CORS https://sterl.org/2024/02/setup-spring-boot-azure-oauth2-with-cors/ https://sterl.org/2024/02/setup-spring-boot-azure-oauth2-with-cors/#respond Thu, 01 Feb 2024 09:03:03 +0000 https://sterl.org/?p=993 What is needed
  1. Setup an Azure AAD Application
  2. Add the web URIs which are allowed to use the OAuth2 login
  3. Add a client secret for your application
  4. Add API Permission to read the profile
  5. Add needed Azure dependencies
  6. Setup Spring OAuth config
  7. Adjust the CORS settings in Spring to ensure token refreshes
  8. Configure spring security

Setup an Azure AAD Application

First we need an Azure AAD application which gives us the access to our AD users. The important part are the client id and the tenant id here:

Add the web URIs which are allowed to use the OAuth2 login

In the next step we have to allow „applications“ based on their „DNS“ name to access and login through this AAD. Ensure to remember the yellow part, which is later needed in the configutation.

The URLs are basically the one you whitelist for a login. If you setup the „test“ AAD application you may want also add sometimes the localhost for testing. Ensure to remove it again later on.

Add a client secret for your application

Next we have to create a secret for our application, we only require later the value of it. Please make sure you provide a new one after the expiration period.

You can have multiple secrets for multiple apps here.

Setup Spring OAuth config

In this configuration we have to enter all the collected data azure-dev as name is here the suffix provided in the authentication section of the Azure AAD application. You can choose what ever name you like.

spring:
  security:
    oauth2:
      client:
        provider:
          azure:
            issuer-uri: https://login.microsoftonline.com/<Directory (tenant) ID>/v2.0
            user-name-attribute: name
        registration:
          azure-dev:
            provider: azure
            client-id: <Application (client) ID>
            client-secret: <the secret value you created for your app>
            client-authentication-method: client_secret_post
            scope:
              - openid
              - email
              - profile

Spring Security

  @Bean
  SecurityFilterChain filterChain(HttpSecurity http, OptionalYourUserService userService) throws Exception {
    // @formatter:off
    http
      .authorizeHttpRequests(authorizeHttpRequests ->
        authorizeHttpRequests
          // public URLs
          .requestMatchers(antMatcher("/actuator/health/readiness")).permitAll()
          // secure actuator
          .requestMatchers(antMatcher("/actuator/**")).hasRole(UserGroup.ADMIN)
          // app urls
          .requestMatchers("/api/**").authenticated()
          // default; recommended to use .authenticated()
          .anyRequest().permitAll()
      ).headers(headers -> headers.frameOptions(FrameOptionsConfig::sameOrigin))
      .oauth2Login( oauth2 -> oauth2
          .userInfoEndpoint(userInfo -> userInfo
            .oidcUserService(oidcUserService(userService)))
      )
      .headers(headers -> headers.frameOptions(FrameOptionsConfig::sameOrigin));
    // @formatter:on
    return http.build();
  }

  private OAuth2UserService<OidcUserRequest, OidcUser> oidcUserService(
    OptionalYourUserService userService) {
    return userRequest -> {
      var oidcUser = new OidcUserService().loadUser(userRequest); // Delegate to the default
                                                                  // implementation
      
      // add any custom user service integration here, if required.

      return oidcUser;
    };
  }

Add CORS Config

To avoid any CORS error / strict-origin-when-cross-origin in your application we have to whitelist the OAuth2 provider for any redirect, in this example login.microsoft:

  @Bean
  protected CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("https://login.microsoftonline.com/**"));
    configuration.addAllowedHeader("*");
    configuration.addAllowedMethod("*");
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
  }

Links

  • https://learn.microsoft.com/en-us/azure/developer/java/spring-framework/spring-boot-starter-for-azure-active-directory-developer-guide
]]> https://sterl.org/2024/02/setup-spring-boot-azure-oauth2-with-cors/feed/ 0 Azure Bicep CLI and functions cheet sheet https://sterl.org/2023/03/azure-bicep-cli-functions-cheet-sheet/ https://sterl.org/2023/03/azure-bicep-cli-functions-cheet-sheet/#respond Fri, 31 Mar 2023 15:06:05 +0000 https://sterl.org/?p=890 Overall Azure bicep is the best repalcement for AWS CDK currently available (2023) and the recommended way to express infrastructure-as-code in the aure universe.

Bicep CLI

All command require azure CLI and PowerShell 7.x.x

Select subscription by name / set context

$context = Get-AzSubscription -SubscriptionName '<name of the subscription>'
Set-AzContext $context

Set default 

Set-AzDefault -ResourceGroupName <resource-group-name>

Run bicep deployment

New-AzResourceGroupDeployment -TemplateFile main.bicep

Read resource group

Get-AzResourceGroupDeployment -ResourceGroupName <resource-group-name> | Format-Table

List resource groups

Get-AzResourceGroup

Bicep functions

Random unique name uniqueString

param fooUniceName string = 'fooo${uniqueString('constant-seed-value')}'

Create resource group with bicep

targetScope = 'subscription'
param location string = deployment().location

resource rg 'Microsoft.Resources/resourceGroups@2022-09-01' = {
    name: 'myName'
    location: location
}
az deployment create --location westeurope  --template-file .\main.bicep

Links

]]> https://sterl.org/2023/03/azure-bicep-cli-functions-cheet-sheet/feed/ 0 Azure Node Functions Apps and OpenAPI Swagger https://sterl.org/2023/03/azure-node-functions-apps-and-openapi-swagger/ https://sterl.org/2023/03/azure-node-functions-apps-and-openapi-swagger/#respond Sun, 12 Mar 2023 09:15:26 +0000 https://sterl.org/?p=875 Sometimes we face the problem that we want to host a very simple web-service including a swagger-ui / OpenApi-UI. The question now is, what is the simplest solution, which works everywhere, even in a azure function app?

Where are of course some libs etc. which on the other hand require us to run the web-server. If we look into the doc using the simple unpkg HTML files looks like to be the simplest solution.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="SwaggerUI"
  />
  <title>SwaggerUI</title>
  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
  window.onload = () => {
    window.ui = SwaggerUIBundle({
      url: 'https://petstore3.swagger.io/api/v3/openapi.json',
      dom_id: '#swagger-ui',
    });
  };
</script>
</body>
</html>

What needs to be done

  • Get the HTML OpenAPI HTML file
  • Provide an OpenAPI YML or JSON
  • Create an endpoint which should host the doc

This solution works also for a spring web app or a AWS function. We will go ahead and look into a Node JavaScript example to see how it may look like:

Which means we have to create a new azure function endpoint where we want to host the OpenApi-UI:

function.json

We can set the function to „anonymous“ if we like and only get is required:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

openApi.html

The only adjustment to the original HTML file is the source of the yml or json file. You could also adjust the JS and CSS url:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="My SwaggerUI" />
  <title>SwaggerUI</title>
  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
  window.onload = () => {
    window.ui = SwaggerUIBundle({
      url: './doc?file=openApi.yml',
      dom_id: '#swagger-ui',
    });
  };
</script>
</body>
</html>

openApi.yml

Just as an example here. Note here the URL which has a funny value of _server.url_, we will replace this value later.

openapi: 3.0.2
info:
  title: My OpenAPI
  version: v1
servers:
  - url: "_server.url_"
paths:
  /foo:
    get:
      summary: Som cool function
      responses:
        '200':
          description: Retrieved entities
          content:
            application/json:
              schema:
                type: string

index.js

"use strict";
const fs = require('fs');
const util = require('util');
const readFileAsync = util.promisify(fs.readFile);

module.exports = async function (context, req) {
    switch(req.query.file) {
        case 'openApi.yml':
            // get the url and remove the doc suffix, azure specific
            const url = req.headers.referer.replace('/doc', '');
            let yml = await readFileAsync('doc/openApi.yml', 'UTF-8');
            yml = yml.replace('_server.url_', url);
            context.res = {
                body: yml,
                headers: {
                    "Content-Type": "application/yml; charset=utf-8"
                }
            };
            break;
        default:
            context.res = {
                body: await readFileAsync('doc/openApi.html', 'UTF-8'),
                headers: {
                    "Cache-Control": "max-age=600", // optional cache header
                    "Content-Type": "text/html; charset=utf-8"
                }
            };
            break;
    }
}

The switch case is where to ensure we load only files we want to publish, as so you have to extend the case block if you want to host the JS files too. Of course they have to be added to your directory.

Links

]]> https://sterl.org/2023/03/azure-node-functions-apps-and-openapi-swagger/feed/ 0