ralscha/blog

Source code for my blog

Source code for my blog: https://golb.hplar.ch/

blog's Issues

CORS preflight issue

Heys, thanks for taking the time to make the tutorial it is exactly something which I hope to implement in my ionic 3 project, I seem to have ran into a CORS issue however when I try to make any request from the app when testing it in the chrome browser with "ionic serve --lab", in the console I get the following:

OPTIONS http://localhost:8080/login 401 ()
Failed to load http://localhost:8080/login: Response for preflight has invalid HTTP status code 401.

Having had a read around it seems like a CORS issue with the configuration in Spring Boot, I have tried various ways with adding a CORS filter to the backend server but haven't had any success with this. Any thoughts?

Check if file is uploaded

Hello,

Regarding this post:

https://golb.hplar.ch/2017/02/Uploading-pictures-from-Ionic-2-to-Spring-Boot.html

How do we check if the file is in the server?
In the end of the blog you said:

When everything works, you should find the uploaded files in the root of the server application.

So we should find it if we do https://localhost:8080?

hotcodepush app on Ionic 4 fails to load the updates

Post placing the updated build in the remote url and relaunching of app, blanks out

Dear Sir, can I download your client code?

ola~ May i ask how can test your upload project in my iphone?

[Ionic-4] - no longer working for me

Hi,
Rather than an issue, it's more some help I need... I applied all these great optimizations to my PWS, but now I'm trying to upgrade ionic the the v4-beta.0 but it seems that all the tooling changed, hence the scripts in the "config" section of the package.json seem to be no longer executed at build time.

I'm not really familiar with this, I hope you will find the way how to have this working with Ionic 4 !
Thanks in advance !

this.chart.destroy not a function

Hey Ralph, thanks for the good work here.

Have been able to reproduce and add (most) charts from the echarts example page on Ionic Tab app using your source code and from scratch

When updating to Echarts 3.6.0 I get the following runtime error when trying to view charts on an Ionic Sidemenu app:
Uncaught (in promise): TypeError: this.chart.destroy is not a function TypeError: this.chart.destroy is not a function at EChartsComponent.ngOnDestroy .

I'm not sure if this is an Echarts change since their update.

Thanks - not really an issue, more of a heads up.
Cheers

The code in blog -> jwt (Spring) doesn't work

Hi !

Thanks you for sharing on web spring, ionic, ... with your blog !

I have a problem with https://golb.hplar.ch/p/JWT-Authentication-with-Ionic-2-and-Spring-Boot
and I have downloaded the zip on github, created a new projet with folder jwt, opened in editor and compiled with JDK 1.8.0_131

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::  (v2.0.0.BUILD-SNAPSHOT)

2017-10-16 19:42:11.656  INFO 14146 --- [           main] main.java.ch.rasc.jwt.Application        : Starting Application on iMac-de-Stephane-Bressani.local with PID 14146 (/Users/stephanebressani/IdeaProjects/essai_ralscha_blog/target/classes started by stephanebressani in /Users/stephanebressani/IdeaProjects/essai_ralscha_blog)
2017-10-16 19:42:11.664  INFO 14146 --- [           main] main.java.ch.rasc.jwt.Application        : No active profile set, falling back to default profiles: default
2017-10-16 19:42:11.773  INFO 14146 --- [           main] ConfigServletWebServerApplicationContext : Refreshing org.springframework.boot.web.servlet.context.AnnotationConfigServletWebServerApplicationContext@4562e04d: startup date [Mon Oct 16 19:42:11 PDT 2017]; root of context hierarchy
2017-10-16 19:42:15.076  INFO 14146 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2017-10-16 19:42:15.106  INFO 14146 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2017-10-16 19:42:15.108  INFO 14146 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet Engine: Apache Tomcat/8.5.23
2017-10-16 19:42:15.353  INFO 14146 --- [ost-startStop-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2017-10-16 19:42:15.354  INFO 14146 --- [ost-startStop-1] o.s.web.context.ContextLoader            : Root WebApplicationContext: initialization completed in 3587 ms
2017-10-16 19:42:15.691  INFO 14146 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'characterEncodingFilter' to: [/*]
2017-10-16 19:42:15.692  INFO 14146 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'hiddenHttpMethodFilter' to: [/*]
2017-10-16 19:42:15.692  INFO 14146 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'httpPutFormContentFilter' to: [/*]
2017-10-16 19:42:15.692  INFO 14146 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'requestContextFilter' to: [/*]
2017-10-16 19:42:15.693  INFO 14146 --- [ost-startStop-1] .s.DelegatingFilterProxyRegistrationBean : Mapping filter: 'springSecurityFilterChain' to: [/*]
2017-10-16 19:42:15.694  INFO 14146 --- [ost-startStop-1] o.s.b.w.servlet.ServletRegistrationBean  : Mapping servlet: 'dispatcherServlet' to [/]
2017-10-16 19:42:15.926  INFO 14146 --- [           main] b.a.s.AuthenticationManagerConfiguration : 

Using default security password: 64e9d193-95d4-4944-a70c-febf29000cfd

2017-10-16 19:42:15.944  WARN 14146 --- [           main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'authController' defined in file [/Users/stephanebressani/IdeaProjects/essai_ralscha_blog/target/classes/main/java/ch/rasc/jwt/AuthController.class]: Unsatisfied dependency expressed through constructor parameter 3; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'org.springframework.security.authentication.AuthenticationManager' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}
2017-10-16 19:42:15.949  INFO 14146 --- [           main] o.apache.catalina.core.StandardService   : Stopping service [Tomcat]
2017-10-16 19:42:15.987  INFO 14146 --- [           main] utoConfigurationReportLoggingInitializer : 

Error starting ApplicationContext. To display the auto-configuration report re-run your application with 'debug' enabled.
2017-10-16 19:42:16.244 ERROR 14146 --- [           main] o.s.b.d.LoggingFailureAnalysisReporter   : 

***************************
APPLICATION FAILED TO START
***************************

Description:

Parameter 3 of constructor in main.java.ch.rasc.jwt.AuthController required a bean of type 'org.springframework.security.authentication.AuthenticationManager' that could not be found.


Action:

Consider defining a bean of type 'org.springframework.security.authentication.AuthenticationManager' in your configuration.


Process finished with exit code 1

JWT Authentification: check username

Hello,

I have a question about your JWT Authentification example.

In the server side, when you recieve a JWT, you extract the username from this token then you check if this username exists in the database.
This means that any valid token will be accepted, no matter who the sender is.
So, a user with a valid token can have access to any secure endpoint, even those which are restricted to some users only.

However, this can be handeled by some client side checking or controller checking. But isn't it better to implement this in the JWTFilter ? And is this considered as a security threat ?

Thank you

Forgot Password Functionality

Great Tutorial JWT Auth with Ionic. How would you integrate a "Forgot password" Functionality? I find it hard to figure it out. Maybe you have a great Idea or can implement it.

Btw. isn't it good practice to ask the user to repeat his password when he signs up?

Thanks! 👍

sw-push, can you tell me messagingSenderId and gcm_sender_id are the same?

1, gcm_sender_id in sw.js
2. messagingSenderId in index.js

both are store the save value?

Throws error

blog/sse-client/src/main/java/ch/rasc/sseclient/Spring5WebClient.java

Line 18 in d6107d7

ParameterizedTypeReference<ServerSentEvent<String>> typeRef = new ParameterizedTypeReference<>() {

sw-push not works

   void sendPushMessage(IcndbJoke joke) throws InterruptedException, ExecutionException {
    Map<String, String> data = new HashMap<>();
    data.put("id", String.valueOf(joke.getValue().getId()));
    data.put("joke", joke.getValue().getJoke());
    data.put("seq", String.valueOf(this.seq++));
    data.put("ts", String.valueOf(System.currentTimeMillis()));

    System.out.println("Sending chuck joke...");
    this.fcmClient.send(data);
}

These line errors: Cannot access getId() and cannot Access getJoke(), can you please help to check?

   data.put("id", String.valueOf(joke.getValue().getId()));
    data.put("joke", joke.getValue().getJoke());

[ionic] ts error: FileEntry not found

Hi,
I'm trying to apply your example to my ionic project which I need to send a video file to a server by using a REST api accepting form-data. After following steps from this article: https://golb.hplar.ch/2017/02/Uploading-pictures-from-Ionic-2-to-Spring-Boot.html
Now I'm facing a problem with the ts error that couldn't understand

 this.file.resolveLocalFilesystemUrl(imageFileUri)
      .then(entry => (<FileEntry>entry).file(file => this.readFile(file)))
      .catch(err => console.log(err));

Do you have any suggestion on how to resolve this? Thanks a lot.

The example does not work

Hello,

reading and uploading image does not work?

sw-push , Error creating bean with name 'registryController'...

when I run the app I get this message, do you have any idea?

cannot show the info in HTML file when click number dot in the Echarts

Hi ralscha, I have read your blog "Integrate Echarts into an Ionic3 app", it is nice and easy to understand. good work.
I tried to use ECharts 3.X to draw chart in my app built with Ionic V3.3. When I click the number dot in my chart, the related data will show in a field in HTML file. In the click event, I could get the data and copy it to a variable, but could not show value of the variable in HTML file. The screenshot of code is:
html

ts

result

but when I write this.text='hello world' in ngOnInit() method, it will show "hello world" without any problem.
Did you ever met with this scene？

POST http://localhost:8080/clienterror net::ERR_CONNECTION_REFUSED

iam getting this error while running geotracker app ? what can be the issue ? why is it saying connection refused ?
HttpErrorResponse
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://localhost:8080/clienterror: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://localhost:8080/clienterror"

this error i received on both emulator and on a android device

Crop image before upload it

Hi, I'm using your tutorial to understand better how the camera component works, but I've stuck here and don't know how to implement crop component within your tutorial. Could you give me some example? I mess up when I need to convert the file, don't know how to call the crop method inside the "getPicture().then(..."

Runtime error -> jwt (Spring)

After solving an "no available storage method found" error by installing

ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic/storage

and modifying your imports (IonicStorageModule.forRoot()) in app.module.ts to

  imports: [
           BrowserModule,
           HttpModule,
           IonicModule.forRoot(MyApp),
           IonicStorageModule.forRoot(),
           CustomFormsModule
       ],

"ionic serve" started without any error.

But after every login oder signup execution, I get a runtime error and "finally()"
is reported as a non-existant function ?!

There's no error or warning in Atom or Visual Studio Code.

TypeError: this.authProvider.login(...).finally is not a function
    at LoginPage.webpackJsonp.385.LoginPage.login (http://192.168.0.101:8100/build/main.js:148:21)
    at Object.eval [as handleEvent] (ng:///AppModule/LoginPage.ngfactory.js:69:31)
    at handleEvent (http://192.168.0.101:8100/build/vendor.js:12696:138)
    at callWithDebugContext (http://192.168.0.101:8100/build/vendor.js:14160:42)
    at Object.debugHandleEvent [as handleEvent] (http://192.168.0.101:8100/build/vendor.js:13748:12)
    at dispatchEvent (http://192.168.0.101:8100/build/vendor.js:9289:21)
    at http://192.168.0.101:8100/build/vendor.js:11457:20
    at SafeSubscriber.schedulerFn [as _next] (http://192.168.0.101:8100/build/vendor.js:4321:36)
    at SafeSubscriber.__tryOrUnsub (http://192.168.0.101:8100/build/vendor.js:33379:16)
    at SafeSubscriber.next (http://192.168.0.101:8100/build/vendor.js:33326:22)

What did I miss, where's my mistake?

Getting error in polyfills.js line 3 - calls to REST services are showing status as canceled

I tries with both Ionic 4.1 and Cordova 8 as well as ionic 3.9.2 and Cordova 7.1.0
All the REST calls are showing status as cancelled in polyfills.js line 3. Please help

/secret and /authenticate routes returning 403

So currently having api issues with the /secret and /authenticate routes where I get a Access Denied 403 response on both possibly indicating the JWT might not be passed in the header as I have inspected the requests in Chrome and can't seem to find the JWT anywhere in the headers. For the /secret route issue I simply log in and get the 403 response, as for the /authenticate I simply restart the application after prior logging in and get the 403 response when this is called.

/secret details:

/authenticate details:

It's probably something specific that I'm missing, or perhaps a dependency version issue since it seems like a front end problem.

readAsArrayBuffer Not Supported

reader.readAsArrayBuffer(file);
give cordova file error code 7

console.log(reader.result ) is {}

Hello, I'm trying to apply your example to my ionic project,

I console the reader.result, but it is {}. I don't the reason.

Runtime Error after building the app in Ionic 4

Hi,
I get this error after following the tutorial. I use Ionic Cli 4.1.2

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at ChangeFilter.notFirstAndEmpty (vendor.js:181841)
at NgxEchartsDirective.ngOnChanges (vendor.js:181948)
at checkAndUpdateDirectiveInline (vendor.js:13831)
at checkAndUpdateNodeInline (vendor.js:15359)
at checkAndUpdateNode (vendor.js:15302)
at debugCheckAndUpdateNode (vendor.js:16195)
at debugCheckDirectivesFn (vendor.js:16136)
at Object.eval [as updateDirectives] (ng:///AppModule/Chart1Page.ngfactory.js:39)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:16121)
at checkAndUpdateView (vendor.js:15268)
at ChangeFilter.notFirstAndEmpty (vendor.js:181841)
at NgxEchartsDirective.ngOnChanges (vendor.js:181948)
at checkAndUpdateDirectiveInline (vendor.js:13831)
at checkAndUpdateNodeInline (vendor.js:15359)
at checkAndUpdateNode (vendor.js:15302)
at debugCheckAndUpdateNode (vendor.js:16195)
at debugCheckDirectivesFn (vendor.js:16136)
at Object.eval [as updateDirectives] (ng:///AppModule/Chart1Page.ngfactory.js:39)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:16121)
at checkAndUpdateView (vendor.js:15268)
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:6175)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
defaultErrorLogger @ vendor.js:2873

uploaded Image not rendered directly on screen

Hello
thank for example, but there is strange issue:
the image uploaded successfully on server side, but not rendered directly on screen
unless i click one of tacking image buttons again.
thanks