{"id":98077,"date":"2019-09-16T08:10:17","date_gmt":"2019-09-16T05:10:17","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=98077"},"modified":"2019-09-19T08:56:31","modified_gmt":"2019-09-19T05:56:31","slug":"build-mobile-apps-angular-ionic-4-spring-boot","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2019\/09\/build-mobile-apps-angular-ionic-4-spring-boot.html","title":{"rendered":"Build Mobile Apps with Angular, Ionic 4, and Spring Boot"},"content":{"rendered":"

Friends don\u2019t let friends write user auth. Tired of managing your own users?<\/strong> Try Okta\u2019s API and Java SDKs today. Authenticate, manage, and secure users in any application within minutes.<\/a><\/span><\/p>\n

I\u2019m a big fan of Ionic. I started using it several years ago when it was based on AngularJS. As a developer, I really liked it because I knew Angular. I found didn\u2019t have to learn much more to be a productive developer with Ionic.<\/p>\n

What is Ionic? I\u2019m glad you asked! Ionic is an open source project that allows you to build mobile apps using web tech.<\/p>\n

Technically, this is called a “hybrid” app because it\u2019s not using native SDKs. Hybrid mobile apps are distributed just like native apps: they can be installed on mobile devices, and they\u2019re listed in app stores. As an end user, there\u2019s a good chance you can\u2019t tell the difference between a hybrid mobile app and a native mobile app.<\/p>\n

Not only that, but Ionic supports PWAs! This means you can deploy the same app to the web that you package up and ship to an app store. Maximum discoverability FTW!<\/p>\n

If you know me, you\u2019ll know I\u2019m a big fan of Java, Spring Boot, and JHipster as well. If you don\u2019t know what JHipster is, I\u2019m sorry. That\u2019s my fault. I\u2019ve been doing my best to spread the word, but you somehow missed it. It\u2019s the best thing ever! If you know me from AppFuse, or you\u2019re familiar with Ruby on Rails, it\u2019s that times 10. JHipster is an application generator, and platform, for building Java apps with JavaScript frontends.<\/p>\n

Spring Boot is the only backend framework currently supported, with .NET and Node.js implementations currently in development. On the frontend, Angular, React, Vue, React Native, and Ionic are all supported.<\/p>\n

In this brief tutorial, I\u2019ll show you to use Ionic for JHipster<\/a> v4 with Spring Boot and JHipster 6.<\/p>\n

To complete this tutorial, you\u2019ll need to have Java 8+, Node.js 10+, and Docker installed. You\u2019ll also need to create an Okta developer account<\/a>.<\/p>\n

Create a Spring Boot + Angular App with JHipster<\/h2>\n

You can install JHipster via Homebrew<\/a> (brew install jhipster<\/code>) or with npm.<\/p>\n

npm i -g generator-jhipster@6.1.2<\/pre>\n
Once you have JHipster installed, you have two choices. There\u2019s the quick way to generate an app (which I recommend), and there\u2019s the tedious way of picking all your options. I don\u2019t care which one you use, but you must<\/strong> select OAuth 2.0 \/ OIDC<\/strong> authentication to complete this tutorial successfully.<\/p>\n
Here\u2019s the easy way:<\/p>\n
mkdir app && cd app\n\necho \"application { config { baseName oauth2, authenticationType oauth2, \\\n  buildTool gradle, testFrameworks [protractor] }}\" >> app.jh\n\njhipster import-jdl app.jh<\/pre>\n
The hard way is you run jhipster<\/code> and answer a number of questions. There are so many choices when you run this option that you might question your sanity. At last count, I remember reading that JHipster allows 26K+ combinations!
The project generation process will take a couple of minutes to complete if you\u2019re on fast internet and have a bad-ass laptop. When it\u2019s finished, you should see output like the following.<\/p>\n
\n
\"\"<\/figure>\n<\/div>\n
OIDC with Keycloak and Spring Security<\/h3>\n
JHipster has several authentication options: JWT, OAuth 2.0 \/ OIDC, and UAA. With JWT (the default), you store the access token on the client (in local storage). This works but isn\u2019t the most secure. UAA involves using your own OAuth 2.0 authorization server (powered by Spring Security), and OAuth 2.0 \/ OIDC allows you to use Keycloak or Okta.<\/p>\n
Spring Security makes Keycloak and Okta integration so incredibly easy it\u2019s silly. Keycloak and Okta are called “identity providers” and if you have a similar solution that is OIDC-compliant, I\u2019m confident it\u2019ll work with Spring Security and JHipster.<\/p>\n
Having Keycloak set by default is nice because you can use it without having an internet connection.<\/p>\n
To log into the JHipster app you just created, you\u2019ll need to have Keycloak up and running. When you create a JHipster project with OIDC for authentication, it creates a Docker container definition that has the default users and roles. Start Keycloak using the following command.<\/p>\n
docker-compose -f src\/main\/docker\/keycloak.yml up -d<\/pre>\n
Start your application with .\/gradlew<\/code> (or .\/mvnw<\/code> if you chose Maven) and you should be able to log in using “admin\/admin” for your credentials.<\/p>\n
Open another terminal and prove all the end-to-end tests pass:<\/p>\n
npm run e2e<\/pre>\n
If your environment is setup correctly, you\u2019ll see output like the following:<\/p>\n
> oauth-2@0.0.0 e2e \/Users\/mraible\/app\n> protractor src\/test\/javascript\/protractor.conf.js\n\n[16:02:18] W\/configParser - pattern .\/e2e\/entities\/**\/*.spec.ts did not match any files.\n[16:02:18] I\/launcher - Running 1 instances of WebDriver\n[16:02:18] I\/direct - Using ChromeDriver directly...\n\n\n  account\n    ? should fail to login with bad password\n    ? should login successfully with admin account (1754ms)\n\n  administration\n    ? should load metrics\n    ? should load health\n    ? should load configuration\n    ? should load audits\n    ? should load logs\n\n\n  7 passing (15s)\n\n[16:02:36] I\/launcher - 0 instance(s) of WebDriver still running\n[16:02:36] I\/launcher - chrome #01 passed\nExecution time: 19 s.\n<\/pre>\n
OIDC with Okta and Spring Security<\/h2>\n
To switch to Okta, you\u2019ll first need to create an OIDC app. If you don\u2019t have an Okta Developer account, now is the time<\/a>!<\/p>\n
\n
Why Okta instead of Keycloak?<\/strong><\/p>\n
Keycloak works great in development, and Okta has free multi-factor authentication, email support, and excellent performance for production. A developer account gets you 1000 monthly active users for free! You can see other free features and our transparent pricing at developer.okta.com\/pricing<\/a>.<\/p>\n<\/blockquote>\n
Log in to your Okta Developer account.<\/p>\n