如何使用Ionic 4 for JHipster 6构建移动应用

简体中文 English

在“Hipster”甚至还没有成为一件事之前，开发人员就已经在使用JHipster来设计移动应用了

对于所有了解我的人，你们都知道我有多喜欢Java、Spring Boot、JHipster和Ionic。

JHipster是有史以来最棒的东西它是一个流行的、完全开源的应用程序生成器和平台，您可以在其中使用JavaScript前端快速构建Java应用程序。

Ionic也是一个完整的开源框架，您可以在其中使用Web技术构建跨平台应用程序(混合应用程序)。混合移动应用程序类似于原生移动应用程序，可以在应用程序商店中列出并安装在您的移动设备上。Ionic支持PWA，这意味着您可以将相同的Web应用程序发送到应用程序商店。

你可能还喜欢:Ionic Framework: Getting Started

Spring Boot是目前唯一支持的后端框架，目前正在开发.NET和Node.js实现。在前端，ANGLING、REACTION、VUE、REPACT Native和Ionic均受支持。

在本简短教程中，我将向您展示如何使用Ionic for JHipster带有Spring Boot和JHipster 6的V4。

要完成本教程，您需要安装Java8+、Node.js10+和Docker。您还需要创建一个Okta developer account。

用JHipster创建Spring Boot+角度应用

您可以通过以下方式安装JHipsterHomebrew（brew install jhipster)或与NPM合作。

npm i -g generator-jhipster@6.1.2


一旦安装了JHipster，您就有两个选择。有一种快速生成应用程序的方法(我推荐)，还有一种选择所有选项的繁琐方法。我不在乎您使用哪种身份验证，但您必须选择OAuth 2.0/OIDC身份验证才能成功完成本教程。

以下是最简单的方法：

mkdir app && cd app

echo "application { config { baseName oauth2, authenticationType oauth2, \
  buildTool gradle, testFrameworks [protractor] }}" >> app.jh

jhipster import-jdl app.jh


最难的是你要跑jhipster并回答一些问题。当您运行此选项时，有如此多的选择，您可能会质疑自己的理智。在最后一次统计时，我记得读到过JHipster允许26K+组合！

如果你上网速度很快，并且有一台糟糕的笔记本电脑，项目生成过程将需要几分钟才能完成。当它完成时，您应该看到如下所示的输出。

Create JHipster App

具有密钥罩和Spring安全的OIDC

JHipster有几个身份验证选项：JWT、OAuth 2.0/OIDC和UAA。使用JWT(缺省设置)，您可以将访问令牌存储在客户端(本地存储中)；这是可行的，但不是最安全的。UAA涉及使用您自己的OAuth 2.0授权服务器(由Spring Security提供支持)，而OAuth 2.0/OIDC允许您使用Keyshaak或Okta。

Spring Security让Keyloak和Okta的集成变得如此简单，简直太傻了。Keycloak和Okta被称为“身份提供者”，如果您有一个与OIDC兼容的类似解决方案，我相信它将与Spring Security和JHipster一起工作。

默认设置Keycloak很好，因为您可以在没有互联网连接的情况下使用它。

要登录到您刚刚创建的JHipster应用程序，您需要启动并运行Keycloak。当您使用OIDC创建一个JHipster项目进行身份验证时，它会创建一个具有默认用户和角色的Docker容器定义。使用以下命令启动Keyloak。

docker-compose -f src/main/docker/keycloak.yml up -d


使用以下命令启动您的应用程序./gradlew(或./mvnw如果您选择了Maven)，您应该能够使用“admin/admin”作为您的凭据进行登录。

打开另一个终端，证明所有端到端测试均通过：

npm run e2e


如果您的环境设置正确，您将看到如下所示的输出：

> oauth-2@0.0.0 e2e /Users/mraible/app
> protractor src/test/javascript/protractor.conf.js

[16:02:18] W/configParser - pattern ./e2e/entities/**/*.spec.ts did not match any files.
[16:02:18] I/launcher - Running 1 instances of WebDriver
[16:02:18] I/direct - Using ChromeDriver directly...


  account
    ✓ should fail to login with bad password
    ✓ should login successfully with admin account (1754ms)

  administration
    ✓ should load metrics
    ✓ should load health
    ✓ should load configuration
    ✓ should load audits
    ✓ should load logs


  7 passing (15s)

[16:02:36] I/launcher - 0 instance(s) of WebDriver still running
[16:02:36] I/launcher - chrome #01 passed
Execution time: 19 s.


OIDC与OKTA和Spring Security

要切换到Okta，您首先需要创建一个OIDC应用程序。如果您没有Okta开发者帐户，now is the time！

为什么是奥克塔而不是钥匙斗篷？

Keycloak在开发中表现出色，Okta具有免费的多因素身份验证、电子邮件支持和卓越的生产性能。开发者账户免费为您带来1000个月活跃用户！您可以在以下地址查看其他免费功能和我们的透明定价developer.okta.com/pricing。

登录到您的Okta Developer account。

  • 在顶部菜单中，单击应用程序
  • 单击添加应用程序
  • 选择Web并单击下一步
  • 输入JHipster FTW!对于名称(此值无关紧要，请随意更改)
  • 将登录重定向URI更改为http://localhost:8080/login/oauth2/code/oidc
  • 单击完成，然后单击编辑并添加http://localhost:8080作为注销重定向URI
  • 单击保存

这些是您需要为JHipster完成的步骤。使用如下命令启动JHipster应用程序：

SPRING_SECURITY_OAUTH2_CLIENT_PROVIDER_OIDC_ISSUER_URI=https://{yourOktaDomain}/oauth2/default \
  SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_ID=$clientId \
  SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_SECRET=$clientSecret ./gradlew


上面的命令可能很难输入，所以我建议您复制/粘贴或将值设置为环境变量。您也可以在Spring Boot的properties/yaml文件中配置它们，但是您应该never store secrets in source control。

为Ionic创建本机应用程序

您还需要为Ionic创建一个Native应用程序。原因是Ionic for JHipster配置为使用PKCE(代码交换的证明密钥)。JHipster中当前的Spring Security OIDC支持仍然需要客户端机密。PKCE没有。

返回Okta开发者控制台，按照如下步骤操作：

  • 在顶部菜单中，单击应用程序
  • 单击添加应用程序
  • 选择Native(本地)并单击Next(下一步
  • 输入Ionic FTW!为了这个名字
  • 添加登录重定向URI：http://localhost:8100/implicit/callback和dev.localhost.ionic:/callback
  • 单击完成，然后单击编辑和添加注销重定向URI：http://localhost:8100/implicit/logout和dev.localhost.ionic:/logout
  • 单击保存

您需要本地应用程序中的客户端ID，因此请保持您的浏览器选项卡处于打开状态，或者将其复制/粘贴到某个位置。

创建组并将其作为声明添加到ID令牌

为了登录到您的JHipster应用程序，您需要调整您的Okta授权服务器以包括groups认领。

在OKTA上，导航到“用户”>“组”。创建ROLE_ADMIN和ROLE_USER组，并将您的帐户添加到其中。

导航到API>Authorization Servers，单击Authorization Servers选项卡并编辑默认服务器。单击索赔选项卡，然后添加索赔。将其命名为“Groups”或“Roles”，并将其包含在ID令牌中。将值类型设置为“Groups”，并将过滤设置为.*。单击创建。

Add Claim

导航到http://localhost:8080，单击“登录”，您将被重定向至Okta进行登录。

Sign In with Okta

输入您用来注册帐户的凭据，您应该会被重定向回您的JHipster应用程序。

JHipster Oktafied!

为照片库生成实体

让我们稍微增强一下这个示例，并创建一个您可以将图片上传到的图片库。有点像Flickr，但更原始。

JHipster有一个JDL(JHipster Domain Language，JHipster Domain Language)特性，允许您对应用程序中的数据进行建模，并从中生成实体。您可以使用它的JDL Studio功能可以在线完成此操作，并在完成后将其保存在本地。

我为此应用程序创建了一个数据模型，该应用程序具有Album,Photo，和Tag实体，并在它们之间建立关系。下面是JDL Studio中的屏幕截图。

JDL Studio

CCCopy下面的JDL并将其保存在photos.jdl文件放在项目的根目录中。

entity Album {
  title String required,
  description TextBlob,
  created Instant
}

entity Photo {
  title String required,
  description TextBlob,
  image ImageBlob required,
  taken Instant
}

entity Tag {
  name String required minlength(2)
}

relationship ManyToOne {
  Album{user(login)} to User,
  Photo{album(title)} to Album
}

relationship ManyToMany {
  Photo{tag(name)} to Tag{photo}
}

paginate Album with pagination
paginate Photo, Tag with infinite-scroll


您可以使用以下命令生成实体和CRUD代码(Java用于Spring Boot；TypeScript和HTML用于ANGING)：

jhipster import-jdl photos.jdl


出现提示时，键入a以更新现有文件。

此过程将创建LiquibaseChangeLog文件(用于创建数据库表)、实体、存储库、Spring MVC控制器，以及创建、读取、更新和删除数据对象所需的所有角代码。它甚至会生成Jest单元测试和量角器端到端测试！

该过程完成后，重新启动您的应用程序，并确认您的所有实体在Entities菜单下都存在(并正常工作)。

Photos List

您可能会注意到，实体列表屏幕预先加载了数据。这是由以下人员完成的faker.js。要将其关闭，请编辑src/main/resources/config/application-dev.yml，搜索liquibase，并将其contexts值为dev。我在此示例的代码中进行了此更改，并运行./gradlew clean要清除数据库，请执行以下操作。

liquibase:
  # Add 'faker' if you want the sample data to be loaded automatically
  contexts: dev


开发一款带离子和角度的移动应用

Ionic for JHipster入门与JHipster类似。您只需安装Ionic CLI、Yeoman和模块本身，然后运行命令即可创建应用程序。

npm i -g generator-jhipster-ionic@4.0.0 ionic@5.1.0 yo
yo jhipster-ionic


如果你有你的app申请地址：~/app，则应从您的主目录运行此命令(~)。Ionic for JHipster将提示您输入后端应用程序的位置。使用mobile用于您的应用程序名称和app关于JHipster应用程序的位置。

提示覆盖时键入amobile/src/app/app.component.ts。

打开mobile/src/app/auth/auth.service.ts在编辑器中，搜索data.clientId，并将其替换为您在Okta上的Native应用程序中的客户端ID。

// 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
  };
  ...
}


使用Keyloak时，此更改不是必需的。

将声明添加到访问令牌

为了使用您的Ionic应用程序成功设置身份验证，您必须在Okta中进行更多配置。由于Ionic客户端只会向JHipster发送访问令牌，因此您需要1)添加groups声明访问令牌，以及2)再添加几个声明，以便用户名在JHipster中可用。

导航到API>Authorization Servers，单击Authorization Servers选项卡，然后编辑默认服务器。单击索赔选项卡，然后添加索赔。将其命名为“Groups”并将其包括在访问令牌中。将值类型设置为“Groups”，并将过滤设置为.*。单击创建。

添加另一个索赔，命名given_name，将其包含在访问令牌中，请使用Expression在“值”类型中，将该值设置为user.firstName。(可选)将其包含在profile范围。执行相同的操作以创建family_name声明并使用表达式user.lastName。

完成后，您的索赔应如下所示。

Default Authorization Server Claims

运行以下命令以启动您的Ionic应用程序。

cd mobile
ionic serve


您将看到一个带有登录按钮的屏幕。点击它，您将被重定向到Okta进行身份验证。

Ionic Home

现在您已经可以登录工作了，您可以使用实体生成器为您的数据模型生成离子页面了。运行以下命令(在您的~/mobile目录)为您的实体生成屏幕。

yo jhipster-ionic:entity album


当系统提示从现有实体生成此实体时，键入Y。输入../app作为现有应用程序的路径。当系统提示重新生成图元并覆盖文件时，键入Y。当系统询问冲突文件时，请输入a。

返回到正在运行Ionic应用程序的浏览器(如果停止，也可以重新启动它)。单击底部的实体，然后单击专辑。单击下角的蓝色+图标，然后添加新专辑。

New Album

单击右上角的复选标记以保存您的相册。您将看到一条成功消息，并在下一个屏幕上列出。

刷新您的JHipster应用程序的专辑列表，您也会在那里看到它！

JHipster Albums

使用以下命令和上面相同的答案为其他实体生成代码。

yo jhipster-ionic:entity photo
yo jhipster-ionic:entity tag


在iOS上运行您的Ionic应用程序

要为Ionic应用程序生成IOS项目，请运行以下命令：

ionic cordova prepare ios


当系统提示您安装ios平台上，键入Y。该过程完成后，在Xcode中打开您的项目：

open platforms/ios/MyApp.xcworkspace


如果您没有安装Xcode，您可以download it from Apple。

您需要在常规选项卡中配置代码签名，然后您应该可以在模拟器中运行您的应用程序。

登录您的Ionic应用程序，点击Entities并查看照片列表。

Ionic on Simulator

在JHipster应用程序中添加照片，地址为http://localhost:8080。

Add Photo in JHipster App

要在您的Ionic应用程序中查看这张新专辑，请用鼠标向下拉以模拟手机上的拉刷新手势。看那里-它起作用了！

在这个屏幕上有一些手势你应该知道。单击行将把你带到一个视图屏幕，在那里你可以看到照片的详细信息。您还可以向左滑动以显示编辑和删除按钮。

在Android上运行您的Ionic应用程序

在Android上部署应用程序与iOS非常相似。简而言之：

  1. 确保您使用的是Java8
  2. 奔跑ionic cordova prepare android
  3. 打开platforms/android在Android Studio中，如果出现提示，请升级Gradle
  4. 设置launchMode到singleTask在AndroidManifest.xml
  5. 使用Android Studio启动您的应用程序
  6. 在应用程序启动时，运行adb reverse tcp:8080 tcp:8080这样模拟器就可以与JHipster对话

有关更详细的说明，请参阅我的Ionic 4 tutorial’s Android section。

进一步阅读

Secure Your Mobile App With OIDC and Ionic for JHipster

Ionic Framework: Getting Started

了解有关Ionic 4和JHipster 6的更多信息

Ionic是利用您的Web开发技能来构建移动应用程序的一种很好的方式。您可以在浏览器中完成大部分开发工作，并在准备好测试设备时将其部署到设备上。您也可以只将您的应用程序部署为PWA，而不是同时将其部署到应用程序商店。

JHipster也支持PWAS，但我认为Ionic应用程序看比如原生应用程序，这是一个很好的效果。关于JHipster和Ionic，我可以介绍更多，但这应该足以让您入门。

您可以在上找到本文中开发的应用程序的源代码GitHub。

我还在Ionic、JHipster和Angular上写了其他一些帖子。如果你有时间的话，可以去看看。

给@oktadev如果你喜欢这个教程，可以在Twitter上关注一下。如果您有任何问题，请留言或将您的问题发布到Stack Overflow带着jhipster标签。

Build Mobile Apps with Angular, Ionic 4, and Spring Boot最初于2019年6月24日发布在Okta开发者博客上。