Salient Soft

I was using this to add CORS headers dynamically based on application.properties.

However initially Spring stubbornly refused to add the headers.

My initial (incorrect) code was as follows:-

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
 
    @Autowired
    private ConfigProperties config;
   
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        config.getCorsOriginsAllowed().forEach(origin -> registry.addMapping(origin).allowedOrigins(origin));
    }
}

The error was that I had used origin both as the registry mapping key and the resulting allowed origin.

The correct code should have used a URL path as the mapping key. The correct replacement line was as follows:-

        config.getCorsOriginsAllowed().forEach(origin -> registry.addMapping("/**").allowedOrigins(origin));

This fixed version mapped every URL path to the given set of origins, using “/**” as above.

This fixed the problem.

This post here by Baeldung and this Spring guide post detail the various ways to add CORS headers, both in a fixed static way using annotations, and in dynamic ways such as the above.

Comments Off on Spring Boot not adding CORS headers in response when using WebMvcConfigurer

STS tries to warn you when editing application.properties, if any properties do not match your configuration classes.

Unfortunately it sometimes gets out of step and does not give correct warnings.

I had a few intermittent instances of this which were cleared by refreshing/rebuilding/reloading.

However one persistent one was that whilst Spring Boot was happy with the map[key] syntax for specifying a property for a map entry, the IDE continued to give a warning on this.

In the end I could not resolve this, but using the map.key syntax instead was fine and the IDE was happy with this and did not give warnings.

The only real need for the [] syntax would be to support keys with special characters in like “.”, but in my case this was not an issue and I would normally avoid this anyway if at all possible.

Comments Off on Spring Tools Suite shows inconsistent warnings re applications.properties entries.

I was using @Configuration on a configuration class in order to load its properties from application.properties.

This is detailed in this post here.

As per the post, Spring Boot supports lists and maps in the way you would expect, and handles nested objects including Collections such as maps and lists.

It can therefore handle a complete object graph of configuration properties in a clean manner, and also happily supports generics too.

Map keys can be specified either using the “.key” syntax, or the bracketed [key] syntax (which is also used with numeric values to create lists).

The problem I hit was that a map property group, used to create mock response objects keyed on a token string, was being completely ignored even though correctly specified in application.properties.

There were no errors or messages about this the log, even when debug logging was turned on – Spring appeared to be just ignoring the properties completely.

After some significant head banging the problem was trivial.

I was using Lombok to eliminate boiler plate, and both the map class and its descendants  had Lombok @AllArgsContructors and static factory methods for my own object creation.

However this meant that they did not have a no args constructor as I had not specified one. I did not need one, but Spring Boot absolutely relies on this to work!

Once I created the required constructor via @NoArgsConstructor, everything worked fine.

Hats off to Spring for this excellent way to manage config as a nice object graph, but it would be useful to have some kind of warning when a target class does not have a no args constructor!

Comments Off on Spring Boot @Configuration class ignoring some application.properties entries

Although I was deploying an Angular app for this, it is a Yoti requirement that some interaction with Yoti is done via a backend.

As I wanted to deploy under cPanel with Zen for demo purposes, my only backend option was php.

I therefore planned a simple php backend web service that could be called from the Angular app to do the required Yoti backend functionality.

To develop and test this locally I installed a local WAMP server – details of this may be found on this post here.

Having installed Wamp64 and got working ok, I was able to run microapp demos locally with Angular deployments, and to run a simple ‘hello world’ php backend, by renaming index.html to .php and inserting the php code.

Next I needed to install composer and set up a composer.json to handle dependency loading as Yoti needs this.

Composer is a commonly used dependency management tool for PHP and full details and the download for it may be found here.

I had some issues getting Composer to co-operate with Wamp64, regarding the PHP version. In particular it gave errors on the PHP version when loading the Yoti SDK, which I initially assumed were due to not having a recent enough version of php for the latest Yoti SDK. However, in the end, this was not the case – it was purely a local Composer/Wamp64 integration issue.

This post here offers help on this. I ended up adding the correct PHP version to the system path, which kept Composer happy and in my case, unlike other posters in the previous post, did not upset Wamp64.

I was ultimately able to use php 5.6.40 with the latest 2.4 Yoti SDK with no problems – this was helpful as this was the version currently in use on the target Zen cPanel hosting.

I then installed the latest eclipse for PHP, as I did not want to upgrade my webstorm to PHPStorm just for a simple PHP requirement.

It was however useful having the eclipse ability to provide a decent PHP editor in its IDE.

When creating a workspace and project, I was offered Composer integration by eclipse, which initially seemed attractive.

However, this proved somewhat complex to get into, given I had no intention of building my own Composer packages. The only reason I wanted it was to allow loading of the Yoti SDK via Composer, as this would be called from my simple php backend.

I therefore dumped this and used a basic PHP project in eclipse. I manually created the composer.json file per Yoti’s instructions, and a simple manual “composer install” command from the command line in the project directory caused the SDK to be downloaded and correctly placed under the vendor subfolder, which also needed deploying along with the api code.

Having fixed all the issues along the way which are documented in my wamp server installation post above, I was able to fully integrate with Yoti both locally and from Zen cPanel hosting. My simple initial test PHP backend was taken from the Yoti samples, and successfully displayed the user’s date of birth, obtained from the live Yoti integration, after its Yoti button was clicked and the QR code scanned via the mobile Yoti app.

Comments Off on Integrating the Yoti backend via PHP under cPanel

This was done in order to test demo software targetted for Zen’s cPanel hosting environment.

In particular, I had a need for a simple PHP back end service which would be called from an Angular microapp, to integrate with Yoti’s identity platform.

The basic WAMP server was downloaded and installed from here. This proceeded straightforwardly and allowed a simple php script to be called from a browser.

Next, I needed to enable TLS 1.2 to allow integration with Yoti, as this can only be done via SSL (however a localhost SSL is acceptable).

This blog here had all the basic details and was followed and implemented.

However, when creating the certificate using the above blog you get an error stating there was an error in reading the openssl conf file
This stack overflow post had a fix for the problem. I added a system environment variable per the answers as follows:-

name: OPENSSL_CONF
value: E:\OpenSSL-Win64\bin\openssl.cfg

i.e. pointing to the cfg file under wherever you install (noting that the file type is cfg under windows)
This then works permanently every time you use openssl, and saves having to type the same value as a -config switch every time.
Note that the blog has the Directory value as a direct value, not a tag in angle brackets.
However there is also a <Directory… > tag with sub elements
Further down in the blog is a post with a further example by David Green (who is the blog author) on May 17, 2019 at 3:57 pm
In his example in this post, he has clearly edited the <Directory> tag rather than adding as a separate variable, so I did the same.

Following the above my simple php example was able to connect to Yoti and displayed the QR code.
When scanned by the mobile app, it also verified the profile correctly and attempted the redirect back with the one-time token.
However, the Yoti PHP code, when trying to connect to Yoti, threw the following error:-

[23-Oct-2019 12:53:37 UTC] PHP Fatal error: Uncaught exception ‘Yoti\Exception\RequestException’ with message ‘SSL certificate problem: unable to get local issuer certificate’ in E:\wamp64\www\microapps\age-verification-api\vendor\yoti\yoti-php-sdk\src\Yoti\Http\Curl\RequestHandler.php:73

The crux of the issue was that the php curl function, which Yoti was using to contact its web service, was not ssl enabled properly hence the failure.
This blog helped re the issue re adding the required certificate and enabling mod_ssl and php+opensl.

One more hurdle though – there are 2 php.ini files that need editing – one in the version of php I was using (5.6.40 in this case), and another symlink one pointed to from a php.ini symlink under E:\wamp64\bin\apache\apache2.4.39\bin. You can use dir/a to see where such a symlink points – in this case it was another ini file in the relevant php directory – E:/wamp64/bin/php/php5.6.40/phpForApache.ini. This fixed this problem. This post here explains the issue about the double ini files.

This then allowed Yoti to work successfully – its api was able to curl back to the Yoti site via ssl as required, and an age verification was able to successfully return a date of birth.

Comments Off on Installing a WAMP server under Windows 7

I received 500 errors from both Mantis and 2intandem, giving this kind of error:-
The server requested authentication method unknown to the client [mysql_old_password]

In the case of 2intandem it was just a straight 500 unable to connect to database error, so the error was not so clear. However once I had fixed mantis, I suspected the issue was the same and indeed it was.

This post here indicated that this was due to a change in the password salt length/old/legacy salt issue, and that simply changing the password would resolve the issue.

This fixed the issue for both – just a password change. Even changing to the same password fixed the issue. In one case I actually changed the password so therefore also had to update the password in the relevant config.php file.

One issue on doing this was that I spent some time finding out where to change DB users/passwords in CPanel, thinking it was in PHPMyAdmin screen per some posts on this.
However it is not done there but under the MySQLDatabases icon in CPanel – this allows user maintenance including password changing etc.

This resolved the issues for both Mantis and the 2intandem hosted web site.

Comments Off on 500 error when connecting to database from Mantis and 2intandem

I did an npm-update of  my microapp-fabric-prototype and my microapp-dataview app.

This resulted in the upgrade of

"@angular-devkit/build-angular": "~0.8.2"

to:

"@angular-devkit/build-angular": "^0.13.4",

in package.json. This caused my microapp POC to fail.

When the host Microapp Fabric application receives a menu action from a menu item click, it dynamically creates an angular element in its microapp container; the element contains the target microapp.

This should result in the initialisation of the angular runtime environment for the custom angular element, including initialisation of the IOC/DI environment for the target angular element app. This includes creation of all the required components/services and calling of their various constructors.

Unfortunately, with the later version above, instead of initialising the app-config-service in the angular element, it tried to re-initialise the app-config-service for the host app a second time which caused the whole app to fail.

The precise reason for the issue is not known. Both apps have some services (such as app-config-service) which have the same name, and sometimes when debugging it can cause confusion when trying to navigate the source maps in the debugger.

However, as all the services and components for each app (the main app and any angular-elements) are correctly encapsulated, there is never a confusion between them, even though the script environment is common and not shadowed. (In this demo, we are using a shadow dom for the W3C custom elements/angular elements, but the javascript is not shadowed. This is correct, and allows angular to have a runtime environment which persists across the main app and all the angular elements, and manages them all correctly).

As I have found before, care needs to be taken when upgrading versions – this is quite often not straightforward and needs care to check out dependencies that cause failures. Care will be needed I suspect when upgrading from Angular 6.1.7 to Angular 7!

No Comments »

I am  using multiple themes and theme selection, using custom themes

For interest I am loading the theme css as a static asset, in index.html:-

<head>
<meta charset=”utf-8″>
<title>Microapp Fabric Prototype</title>
<base href=”/”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link id=”theme-css” rel=”stylesheet” type=”text/css” href=”assets/resources/themes/salient/theme.css”>
</head>

Then I am dynamically changing the href to switch themes:-

export class ThemeSwitcher {
/*
* Select the target theme
* this may be an external theme or an internal packaged one
* If the path contains a ‘/’ the theme is assumed to be an external theme source
*/
changeTheme(theme: string) {
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById(‘theme-css’);
themeLink.href = theme.indexOf(‘/’) >= 0 ? theme : ‘assets/resources/themes/’ + theme + ‘/theme.css’;
}
}

A theme SCSS under the assets folder will be automatically compiled and included inline in the package only when a specific theme is referred to in the “style” section of angular.json. When dynamically switching multiple themes as above, the themes are kept as static assets and are not inlined in the package and so are removed from the “style” section. When this is done, the theme scss files for all the themes are not compiled to css automatically when an ng build or ng serve is done. This post here details how to manually install and build the scss using node-sass. It goes into other details which I haven’t needed as I am using static assets, so only node-sass is needed. If in the actual theme directory, the following commands will install  node-sass and compile the scss for the theme and also create the source map:-

npm install node-sass

node-sass theme.scss theme.css ––source-map .

This can also be added to the scripts section of package.json to make an npm command:

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “cd src/assets/resources/themes/legacy-blue && node-sass theme.scss theme.css ––source-map .”
},

This can be run by simply using npm run scss

Note as above that npm supports the cd command in the scripts section, both for linux and windows (as detailed here). The default directory is the root of the project, and this is consistent even if you run the npm command e.g. from a subdirectory. I did not manage to find a way to automate this via an ng build or ng serve command, so these would have to be run in conjunction with npm run scss (with the latter running first).

No Comments »