对于所有了解我的人,你们都知道我有多喜欢Java、Spring Boot、JHipster和Ionic。
JHipster是有史以来最棒的东西它是一个流行的、完全开源的应用程序生成器和平台,您可以在其中使用JavaScript前端快速构建Java应用程序。
Ionic也是一个完整的开源框架,您可以在其中使用Web技术构建跨平台应用程序(混合应用程序)。混合移动应用程序类似于原生移动应用程序,可以在应用程序商店中列出并安装在您的移动设备上。Ionic支持PWA,这意味着您可以将相同的Web应用程序发送到应用程序商店。
你可能还喜欢:Ionic Framework: Getting StartedSpring 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+组合!如果你上网速度很快,并且有一台糟糕的笔记本电脑,项目生成过程将需要几分钟才能完成。当它完成时,您应该看到如下所示的输出。
具有密钥罩和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”,并将过滤设置为
.*
。单击创建。
导航到
http://localhost:8080
,单击“登录”,您将被重定向至Okta进行登录。
输入您用来注册帐户的凭据,您应该会被重定向回您的JHipster应用程序。
为照片库生成实体
让我们稍微增强一下这个示例,并创建一个您可以将图片上传到的图片库。有点像Flickr,但更原始。
JHipster有一个JDL(JHipster Domain Language,JHipster Domain Language)特性,允许您对应用程序中的数据进行建模,并从中生成实体。您可以使用它的JDL Studio功能可以在线完成此操作,并在完成后将其保存在本地。
我为此应用程序创建了一个数据模型,该应用程序具有
Album
,Photo
,和Tag
实体,并在它们之间建立关系。下面是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菜单下都存在(并正常工作)。
您可能会注意到,实体列表屏幕预先加载了数据。这是由以下人员完成的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应用程序的位置。提示覆盖时键入a
mobile/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
。完成后,您的索赔应如下所示。
运行以下命令以启动您的Ionic应用程序。
cd mobile ionic serve
您将看到一个带有登录按钮的屏幕。点击它,您将被重定向到Okta进行身份验证。
现在您已经可以登录工作了,您可以使用实体生成器为您的数据模型生成离子页面了。运行以下命令(在您的
~/mobile
目录)为您的实体生成屏幕。yo jhipster-ionic:entity album
当系统提示从现有实体生成此实体时,键入Y。输入
../app
作为现有应用程序的路径。当系统提示重新生成图元并覆盖文件时,键入Y。当系统询问冲突文件时,请输入a。返回到正在运行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,您可以download it from Apple。
您需要在常规选项卡中配置代码签名,然后您应该可以在模拟器中运行您的应用程序。
登录您的Ionic应用程序,点击Entities并查看照片列表。
在JHipster应用程序中添加照片,地址为
http://localhost:8080
。
要在您的Ionic应用程序中查看这张新专辑,请用鼠标向下拉以模拟手机上的拉刷新手势。看那里-它起作用了!
在这个屏幕上有一些手势你应该知道。单击行将把你带到一个视图屏幕,在那里你可以看到照片的详细信息。您还可以向左滑动以显示编辑和删除按钮。
在Android上运行您的Ionic应用程序
在Android上部署应用程序与iOS非常相似。简而言之:
- 确保您使用的是Java8
- 奔跑
ionic cordova prepare android
- 打开
platforms/android
在Android Studio中,如果出现提示,请升级Gradle- 设置
launchMode
到singleTask
在AndroidManifest.xml
- 使用Android Studio启动您的应用程序
- 在应用程序启动时,运行
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上写了其他一些帖子。如果你有时间的话,可以去看看。
- Tutorial: User Login and Registration in Ionic 4
- Java Microservices with Spring Cloud Config and JHipster
- Angular 8 + Spring Boot 2.2: Build a CRUD App Today!
- Better, Faster, Lighter Java with Java 12 and JHipster 6
- Build a Mobile App with React Native and Spring Boot
给@oktadev如果你喜欢这个教程,可以在Twitter上关注一下。如果您有任何问题,请留言或将您的问题发布到Stack Overflow带着
jhipster
标签。Build Mobile Apps with Angular, Ionic 4, and Spring Boot最初于2019年6月24日发布在Okta开发者博客上。