Code Monkey home page Code Monkey logo

generator-jhipster-ionic-pwa's Introduction

Ionic for JHipster

NPM version Build Status Dependency Status

A JHipster Module that generates an Ionic Client

Introduction

This is a JHipster module. You can use it to generate an Ionic app that talks to a JHipster backend. It uses the Ionic JHipster Starter as a base template, then applies functionality (e.g. entity generation) on top of it.

To learn more about this module, see Use Ionic for JHipster to Create Mobile Apps with OIDC Authentication.

Prerequisites

As this is a JHipster module, we expect you to have an existing JHipster app and Ionic already installed.

Or simply:

npm i -g generator-jhipster ionic

Installation

To install this module:

npm install -g generator-jhipster-ionic yo

To update this module:

npm update -g generator-jhipster-ionic

Usage

Create a JHipster app using yo jhipster, or a backend-only with yo jhipster:server. Choose JWT or OAuth 2.0 as the authentication type.

In a directory alongside your JHipster app, run this module. This will create an Ionic app for you and install the necessary JHipster files for it to communicate with the backend.

yo jhipster-ionic

Okta for Authentication

Choosing OAuth 2.0 / OIDC for authentication will allow you to use Keycloak or Okta for identity. In theory, you should be able to use any OIDC-compliant identity provider, and these are the only ones we've tested against. JHipster ships with Keycloak configured and ready to go by default. You simply have to start it in your JHipster backend.

docker-compose -f src/main/docker/keycloak up

See JHipster's security docs to see how to configure JHipster for Okta.

In addition to having a OIDC app for your JHipster backend, you'll need to create a Native app too.

Create a Native Application in Okta

Log in to your Okta Developer account (or sign up if you don't have an account).

From the Applications page, choose Add Application. On the Create New Application page, select Native. Give your app a memorable name, and configure it as follows:

  • Login redirect URIs:
    • http://localhost:8100/implicit/callback
    • dev.localhost.ionic:/callback
  • Logout redirect URIs:
    • http://localhost:8100/implicit/logout
    • dev.localhost.ionic:/logout

NOTE: dev.localhost.ionic is the default scheme, but you can also use something more traditional like com.okta.dev-737523 (where dev-737523.okta.com is your Okta Org URL). If you change it, be sure to update the URL_SCHEME in package.json and the redirect URIs in src/app/auth/auth.service.ts.

"cordova-plugin-customurlscheme": {
    "URL_SCHEME": "com.okta.dev-737523"
},

Open src/app/auth/auth.service.ts in an editor, search for data.clientId and replace it with the client ID from your Native app.

// try to get the oauth settings from the server
this.requestor.xhr({method: 'GET', url: AUTH_CONFIG_URI}).then(async (data: any) => {
  this.authConfig = {
    identity_client: '{yourClientId}',
    identity_server: data.issuer,
    redirect_url: redirectUri,
    end_session_redirect_url: logoutRedirectUri,
    scopes,
    usePkce: true
  };
  ...
}

Add Claims to Access Token

In order to authentication successfully with your Ionic app, you have to do a bit more configuration in Okta. Since the Ionic client will only send an access token to JHipster, you need to 1) add a groups claim to the access token and 2) add a couple more claims so the user's name will be available in JHipster.

Navigate to API > Authorization Servers, click the Authorization Servers tab and edit the default one. Click the Claims tab and Add Claim. Name it "groups" and include it in the Access Token. Set the value type to "Groups" and set the filter to be a Regex of .*. Click Create.

Add another claim, name it given_name, include it in the access token, use Expression in the value type, and set the value to user.firstName. Optionally, include it in the profile scope. Perform the same actions to create a family_name claim and use expression user.lastName.

iOS

Generate a native project with the following command:

ionic cordova prepare ios

Open your project in Xcode, configure code signing, and run your app.

open platforms/ios/MyApp.xcworkspace

Android

Generate a native project with the following command:

ionic cordova prepare android

Set the launchMode to singleTask so the URL does not trigger a new instance of the app in platforms/android/app/src/main/AndroidManifest.xml:

<activity
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
      android:name="com.mydomain.app.MainActivity"
      android:label="@string/title_activity_main"
      android:launchMode="singleTask"
      android:theme="@style/AppTheme.NoActionBarLaunch">

Open your project in Android Studio and run your app.

studio platforms/android

You'll need to run a couple commands to allow the emulator to communicate with your API and Keycloak.

adb reverse tcp:8080 tcp:8080
adb reverse tcp:9080 tcp:9080

Entity Generator

To generate entities, run yo jhipster-ionic:entity <name>.

Testing

You can run unit tests with:

npm test

See the testing section of the Ionic JHipster Starter for more information.

Contributing

Please read our guidelines before submitting an issue. If your issue is a bug, please use the bug template pre populated here. For feature requests and queries you can use this template.

License

Apache-2.0 © Okta, Inc

generator-jhipster-ionic-pwa's People

Contributors

inesrgomes avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.