使用Angular，Ionic 4和Spring Boot构建移动应用

朋友不允许朋友写用户身份验证。 厌倦了管理自己的用户？ 立即尝试Okta的API和Java SDK。在几分钟之内即可对任何应用程序中的用户进行身份验证，管理和保护。

我是Ionic的忠实粉丝。几年前，我基于AngularJS开始使用它。作为开发人员，我真的很喜欢它，因为我了解Angular。我发现成为Ionic的一名富有成效的开发人员无需学习更多知识。

什么是离子？我很高兴你问！ Ionic是一个开源项目，可让您使用网络技术来构建移动应用程序。

从技术上讲，这被称为“混合”应用程序，因为它未使用本机SDK。混合移动应用程序的分发方式与本机应用程序一样：它们可以安装在移动设备上，并在应用程序商店中列出。作为最终用户，您很有可能无法分辨混合移动应用程序与本地移动应用程序之间的区别。

不仅如此，Ionic还支持PWA！这意味着您可以将打包的同一应用程序部署到Web上并运送到应用程序商店。最大可发现性FTW！

如果您了解我，就会知道我也是Java，Spring Boot和JHipster的忠实拥护者。如果您不知道JHipster是什么，对不起。这是我的错。我一直在尽力传播这个词，但是您却以某种方式错过了它。这是有史以来最好的事情！如果您从AppFuse那里了解我，或者您熟悉Ruby on Rails，那就到了10点。JHipster是一个应用程序生成器和平台，用于使用JavaScript前端构建Java应用程序。

Spring Boot是当前支持的唯一后端框架，目前正在开发.NET和Node.js实现。在前端，都支持Angular，React，Vue，React Native和Ionic。

在这个简短的教程中，我将向您展示如何将Ionic用于JHipster v4和Spring Boot和JHipster 6。

要完成本教程，您需要安装Java 8 +，Node.js 10+和Docker。您还需要创建Okta开发者帐户。

使用JHipster创建Spring Boot + Angular应用

您可以通过Homebrew （ brew install jhipster ）或npm brew install jhipster 。

npm i -g generator-jhipster@6.1.2

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

这是简单的方法：

mkdir app && cd appecho "application { config { baseName oauth2, authenticationType oauth2, \buildTool gradle, testFrameworks [protractor] }}" >> app.jhjhipster import-jdl app.jh

困难的方法是运行jhipster并回答许多问题。运行此选项时有太多选择，您可能会质疑自己的理智。最后，我记得读过JHipster允许26K +组合！
如果您使用的是快速互联网且笔记本电脑性能较差，则项目生成过程将需要几分钟才能完成。完成后，您应该会看到类似以下的输出。

带有Keycloak和Spring Security的OIDC

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

Spring Security使Keycloak和Okta集成变得非常简单，这很愚蠢。 Keycloak和Okta被称为“身份提供者”，如果您有一个兼容OIDC的类似解决方案，我相信它将与Spring Security和JHipster一起使用。

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

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

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

与启动应用程序./gradlew （或./mvnw ，如果你选择的Maven），你应该能够登录使用“管理/ 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 logs7 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 Developer帐户，现在是时候了！

为什么用Okta代替Keycloak？

Keycloak在开发中表现出色，Okta具有免费的多因素身份验证，电子邮件支持以及出色的生产性能。开发人员帐户可免费为您提供1000个每月活跃用户！您可以在developer.okta.com/pricing上查看其他免费功能和透明价格。

登录到您的Okta Developer帐户。

在顶部菜单中，单击“ 应用程序”
点击添加应用
选择网站，然后单击下一步。
输入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文件中配置它们，但永远不要将机密存储在源代码管理中。

为Ionic创建本机应用

您还需要为Ionic创建本机应用程序。这是因为将IHonic for JHipster配置为使用PKCE （代码交换证明密钥）。 JHipster中当前的Spring Security OIDC支持仍然需要客户端密码。 PKCE没有。
返回Okta开发人员控制台，并按照以下步骤操作：

在顶部菜单中，单击“ 应用程序”
点击添加应用
选择本机，然后单击下一步
输入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上，导航到Users > Groups 。创建ROLE_ADMIN和ROLE_USER组并将您的帐户添加到其中。

导航到“ API” >“ 授权服务器” ，单击“ 授权服务器”选项卡，然后编辑默认选项卡。点击索赔标签，然后添加索赔 。将其命名为“组”或“角色”，并将其包含在ID令牌中。将值类型设置为“ Groups”，并将过滤器设置为.*的正则表达式。点击创建。

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

输入用于注册帐户的凭据，然后应将您重定向回JHipster应用。

为照相馆生成实体

让我们对该示例进行一些增强，并创建一个可以上传图片的图片库。有点像Flickr，但waaayyyy比较原始。

JHipster具有JDL（JHipster域语言）功能，可让您在应用程序中对数据建模并从中生成实体。您可以使用其JDL Studio功能在线完成此操作，并在完成后将其保存在本地。

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

复制下面的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用于Angular）：

jhipster import-jdl photos.jdl

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

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

该过程完成后，重新启动您的应用程序，并在“ 实体”菜单下确认所有实体都存在（并且可以工作）。

您可能会注意到，实体列表屏幕已预加载了数据。这是由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 automaticallycontexts: dev

使用Ionic和Angular开发移动应用

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程序位于~/app ，则应从主目录（ ~ ）运行此命令。 Ionic for JHipster将提示您输入后端应用程序的位置。使用mobile作为应用程序的名称，并使用app作为JHipster应用程序的位置。

当提示您覆盖mobile/src/app/app.component.ts时，键入a 。

在编辑器中打开mobile/src/app/auth/auth.service.ts ，搜索data.clientId并将其替换为Okta上本机应用程序中的客户端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};...
}

使用Keycloak时，不需要进行此更改。

向访问令牌添加声明

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

导航到“ API” >“ 授权服务器” ，单击“ 授权服务器”选项卡，然后编辑默认选项卡。点击索赔标签，然后添加索赔 。将其命名为“组”，并将其包括在访问令牌中。将值类型设置为“ Groups”，并将过滤器设置为.*的正则表达式。点击创建。

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

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

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

cd mobile
ionic serve

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

现在您已经可以登录，可以使用实体生成器为数据模型生成Ionic页面。运行以下命令（在~/mobile目录中）为您的实体生成屏幕。

yo jhipster-ionic:entity album

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

返回运行Ionic应用程序的浏览器（如果已停止，请重新启动它）。点击底部的实体，然后点击相册。点击右下角的蓝色+图标，然后添加一个新相册。

单击右上角的✔️保存您的相册。您会看到一条成功消息，并在下一个屏幕上列出。

刷新您的JHipster应用程序的相册列表，您也会在这里看到它！

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

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，则可以从Apple下载。

您需要在“ 常规”选项卡中配置代码签名，然后才能在Simulator中运行您的应用程序。

登录到您的Ionic应用程序，点击“ 实体”并查看照片列表。

在http://localhost:8080的JHipster应用程序中添加照片。

要在您的Ionic应用程序中查看此新专辑，请用鼠标向下拖动以模拟手机上的拉动刷新手势。看起来不错–有效！

在此屏幕上，您应该了解一些手势。单击该行将带您到查看屏幕，您可以在其中查看照片的详细信息。您也可以向左滑动以显示编辑和删除按钮。

在Android上运行您的Ionic应用

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

确保您使用的是Java 8
运行ionic cordova prepare android
在Android Studio中打开platforms/android ，如果出现提示，请升级Gradle
在AndroidManifest.xml launchMode singleTask设置为singleTask
使用Android Studio启动您的应用
在您的应用程序启动时，运行adb reverse tcp:8080 tcp:8080以便仿真器可以与JHipster对话

有关更详尽的说明，请参见我的Ionic 4教程的Android部分。

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

Ionic是利用您的Web开发技能构建移动应用程序的好方法。您可以在浏览器中进行大部分开发，并在准备进行测试时将其部署到设备中。您也可以仅将应用程序部署为PWA，而不能同时将其部署到应用程序商店。

JHipster也支持PWA，但我认为Ionic应用程序看起来像本机应用程序，效果很好。关于JHipster和Ionic，我可以讲的更多，但这应该足以使您入门。

您可以在GitHub上的@ oktadeveloper / okta-ionic4-jhipster-example上找到本文中开发的应用程序的源代码。

我还写了其他一些有关Ionic，JHipster和Angular的文章。如果有时间请检查一下。

教程：Ionic 4中的用户登录和注册
带有Spring Cloud Config和JHipster的Java微服务
Angular 8 + Spring Boot 2.2：立即构建一个CRUD应用程序！
带有Java 12和JHipster 6的更好，更快，更轻量的Java
使用React Native和Spring Boot构建一个移动应用

如果您喜欢本教程，请在Twitter上关注@oktadev 。您可能还想订阅我们的YouTube频道。如果您有任何疑问，请发表评论或使用jhipster标签将您的问题发布到Stack Overflow 。

“使用Angular，Ionic 4和Spring Boot构建移动应用程序”最初于2019年6月24日发布在Okta Developer博客上。

翻译自: https://www.javacodegeeks.com/2019/09/build-mobile-apps-angular-ionic-4-spring-boot.html