用Angular和JHipster构建安全的Ionic应用程序

吴欣
564 阅读10分钟

Ionic是一个用网络技术构建移动应用的框架，其外观和行为与原生应用相似。 因为它们是用网络技术（HTML、JavaScript和CSS）构建的，所以你也可以将你的Ionic应用部署为单页应用。 或者，更好的是，作为渐进式网络应用（PWA），可以离线工作。

Ionic支持三大网络框架。一旦你写好了你的应用程序，你可以用Capacitor把它部署到模拟器或设备上。 Capacitor（右图为蓝色层）为你的应用程序提供运行时间，以便与本地操作系统进行通信，反之亦然。

Ionic的主要竞争对手是用Swift或Objective-C（用于iOS）和Java或Kotlin（用于Android）构建的本地应用程序。 Ionic还与React Native竞争，后者使用网络技术并将其转换为本地组件。

先决条件

目录

JHipster到底是什么？

本教程将告诉你如何使用Ionic、Angular和Capacitor来建立一个与Spring Boot后端对话的移动应用。多亏了JHipster，这一切都不需要花几分钟时间。

JHipster是一个应用程序生成器，可以根据你选择的选项创建一个Angular前端和一个Spring Boot后端。作为一个开发者，它能够通过蓝图来定制它所生成的东西。蓝图功能为一个应用程序带来了许多额外的选择。Kotlin、Spring Native、Micronaut、Quarkus、.NET Core、NestJS和Svelte。

下面是你将在本教程中创建的应用程序及其认证流程的图示。

JHipster Ionic OAuth 2.0 flow

✨ 介绍一下JHipster Ionic蓝图!

在过去的几年里，JHipster项目一直支持使用generator-jhipster-ionic 模块来生成Ionic应用。作为这个模块的主要维护者，我很自豪地宣布，它已经被重新写成了一个蓝图，而且现在更容易理解了。 以前的模块依赖于Ionic CLI、基本的Angularstarter、Ionic JHipster starter和自定义代码来粘合在一起。 现在，所有的源代码都包含在一个项目中。

Marcelo Shima主动要求进行转换，经过几个月的时间，我很自豪地说，JHipster Ionic蓝图现在已经可以使用了!

Ionic for@JHipsterv8现已发布!这个版本有很多值得喜爱的地方。

💙现在可以作为蓝图🧪
从Protractor迁移到Cypress⭐️
@Auth0support🅰️
升级到Angular 13和Ionic 6✨

t.co/WQ6ZTsTkPP#… #jhipster #angular

springboot

- Matt Raible (@mraible)May 10, 2022

下面是如何使用它。

在你的JHipster应用旁边创建一个ionic-app 目录。

- backend
- ionic-app

使用你的终端导航到ionic-app 。安装Ionic for JHipster并使用jhipster-ionic 创建一个新的应用程序。

npm install -g generator-jhipster-ionic
jhipster-ionic

你会被提示你的JHipster应用程序的位置，你的Ionic应用程序的名称，然后你就可以开始运行了

JHipster Ionic prompts

你也可以通过使用捆绑的JHipster来同时创建一个JHipster应用程序和一个Ionic应用程序。

mkdir bug-tracker && cd bug-tracker
jhipster-ionic jdl bug-tracker.jh
cd ../ionic4j

这个过程将遵循同样的惯例，即生成的后端和前端应用程序并排放在你的硬盘上。

然后你可以使用易于记忆的命令从你的Ionic应用程序中运行这两个应用程序。

npm run backend:start
# open a new terminal window
npm start

Ionic serve command with backend running

JHipster Ionic蓝图目前只支持Angular。 现在它是一个蓝图，增加对Vue和React的支持会更容易。 如果你有兴趣帮忙，请告诉我！Okta是JHipster项目的白金赞助商，喜欢为功能开发分配错误赏金。

用Ionic和Angular构建一个移动应用程序

为了看看Ionic + JHipster的运行情况，让我们从我为Auth0博客创建的Full Stack Java + React应用开始。 我把这个应用更新到JHipster的最新版本（v7.8.1），并用JHipster Ionic创建了一个Ionic应用，所以一切都能保证正常运行。 这个Flickr克隆允许你上传照片，给它们加标签，并把它们组织到相册里。 首先，克隆这个例子。

git clone https://github.com/oktadev/okta-jhipster-ionic-example.git \
  jhipster-ionic --depth 1
cd jhipster-ionic/backend

启动该应用程序。

npm run ci:e2e:prepare # starts Keycloak and PostgreSQL in Docker
./mvnw

然后，在你最喜欢的浏览器中导航到http://localhost:8080 。用admin/admin 凭证登录，当一切正常时，你会感到高兴。

打开一个新的终端窗口，进入jhipster-ionic/ionic-app 目录。安装其依赖性并运行npm start 来测试Ionic客户端。

npm install
npm start

请继续阅读，了解JHipster是如何实现这一切的。 或者，跳过前面的内容，使用Capacitor在iOS上运行你的Ionic应用。

如何整合Ionic和Spring Boot

JHipster让创建Spring Boot API变得很容易，Spring Security会保护它。 JHipster Ionic蓝图会生成一个Ionic客户端，与你的Spring Boot API对话，并理解其认证机制。我使用以下步骤创建了jhipster-ionic 项目。

安装JHipster Ionic蓝图。

npm i -g generator-jhipster-ionic@8.0.0

创建一个父目录来存放所有东西。

# take is a shortcut for mdkir && cd
take jhipster-ionic

克隆一个现有的JHipster Flickr例子。

git clone https://github.com/oktadev/auth0-full-stack-java-example.git backend --depth 1

创建一个新的目录来存放你的Ionic项目，然后在其中运行jhipster-ionic 。

take ionic-app
jhipster-ionic

提供你的后端JHipster应用程序的路径并将你的应用程序命名为flickr2 。

JHipster Ionic with Flickr2 app

就这样！蓝图将生成一个Ionic客户端，包括用于编辑实体的屏幕、单元测试和Cypress的端到端测试。

相当聪明，你不觉得吗？

运行你的Spring Boot API

你需要先启动你的后端，这样你的Ionic应用就可以与它的API对话。 首先，在Docker容器中启动Keycloak和PostgreSQL。

cd backend
npm run ci:e2e:prepare # starts Keycloak and PostgreSQL in Docker

接下来，更新backend/src/main/resources/config/application-prod.yml ，以允许来自http://localhost:8100 的CORS。

jhipster:
  ...
  cors:
    allowed-origins: 'http://localhost:8100'
    allowed-methods: '*'
    allowed-headers: '*'
    exposed-headers: 'Authorization,Link,X-Total-Count,X-${jhipster.clientApp.name}-alert,X-${jhipster.clientApp.name}-error,X-${jhipster.clientApp.name}-params'
    allow-credentials: true
    max-age: 1800

然后，使用./mvnw -Pprod 启动后端应用程序。你应该能够在http://localhost:8080 （与admin/admin ）登录，并使用实体>照片添加新的照片。 添加一些照片，以便你有一些数据可以使用。

Flickr2 photos

运行你的Ionic应用程序

打开另一个终端并导航到ionic-app 文件夹。使用npm start 启动你的Ionic客户端。在你的默认浏览器中，该应用程序将在http://localhost:8100 打开。

Ionic welcome

你应该能够用Keycloak登录并看到你的应用程序中所有列出的实体。

Ionic entities

在JHipster应用程序的教程中，有一节指导你删除可以计算的照片字段。 具体来说，高度、宽度、拍摄日期和上传日期。 这些值是在照片上传时计算的，所以没有理由在添加照片时显示它们。

要在你的Ionic应用程序中添加同样的功能，请修改src/app/pages/entities/photo/photo-update.html ，并将这些字段用<div *ngIf="!isNew"> 。

<div *ngIf="!isNew">
  <ion-item>
    <ion-label position="floating">Height</ion-label>
    <ion-input type="number" name="height" formControlName="height"></ion-input>
  </ion-item>
  ...
  <ion-item>
    <ion-label>Uploaded</ion-label>
    <ion-datetime displayFormat="MM/DD/YYYY HH:mm" formControlName="uploaded" id="field_uploaded"></ion-datetime>
  </ion-item>
</div>

当你保存这个文件时，Ionic CLI会自动编译并在你的浏览器中重新加载应用程序。 你可以通过停止你的应用程序（用Ctrl+C）并使用Cypress运行所有的端到端测试，来证明一切都按预期进行。

npm run e2e

使用Capacitor在iOS上运行你的Ionic应用

使用以下命令生成一个本地iOS项目。

npx ionic build
npx ionic capacitor add ios

将你的自定义方案(dev.localhost.ionic)添加到ios/App/App/Info.plist 。这个方案是在src/environments/environment.ts 中配置的；如果你喜欢，你可以很容易地将它改成其他东西。

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>com.getcapacitor.capacitor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>capacitor</string>
      <string>dev.localhost.ionic</string>
    </array>
  </dict>
</array>

修改JHipster应用程序的CORS设置（在backend/src/main/resources/config/application-prod.yml ），以允许capacitor://localhost 作为原点。

jhipster:
  ...
  cors:
    allowed-origins: 'http://localhost:8100,capacitor://localhost'

重新启动你的后端应用程序。 将你的Ionic应用程序部署到iOS模拟器并运行它。

npx cap run ios

确认你可以登录并为你的成功感到高兴!

Flickr2 running on iOS

在Android上运行你的Ionic应用

用Capacitor生成一个Android项目。

npx ionic capacitor add android

启用明文流量并在android/app/src/main/AndroidManifest.xml 中添加dev.localhost.ionic 作为方案。

<activity ... android:usesCleartextTraffic="true">
  <!-- You'll need to add this intent filter so redirects work -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="dev.localhost.ionic" />
    <!--data android:scheme="com.okta.dev-133337" /-->
  </intent-filter>

  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity>

修改JHipster应用程序的CORS设置，允许http://localhost 作为原点。

jhipster:
  ...
  cors:
    allowed-origins: 'http://localhost:8100,capacitor://localhost,http://localhost'

重新启动你的后端应用程序，并使用Capacitor CLI在Android上运行你的Ionic应用程序。

npx cap run android
如果你在运行此命令时遇到错误，请确保使用Java 11。

你需要运行几个命令，让模拟器与JHipster和Keycloak通信。

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

你应该能够登录和编辑实体，就像你在浏览器和iOS上一样

Flickr2 running on Android

为什么在移动应用程序中使用OpenID连接？

在移动应用程序中存储API密钥和秘密是不安全的。 OAuth 2.0解决了这个问题，它不在移动应用程序中运送任何秘密，而是让用户参与到获取访问令牌的过程中。 这些访问令牌对每个用户都是唯一的，而且每次用户登录时都会更新。PKCE扩展提供了一个解决方案，即使没有预先提供秘密，也可以在移动应用程序上安全地进行OAuth流程。

如果你需要从一个移动应用程序访问一个API，希望它支持OAuth和PKCE！值得庆幸的是，PKCE的大部分艰苦工作是由像AppAuth这样的SDK处理的，所以你不必自己编写所有的代码。 如果你正在使用像Okta这样的API，那么Okta的SDK会自动进行PKCE，所以你不必担心。 JHipster Ionic蓝图使用Ionic AppAuth。

前面的章节向你展示了如何使用Keycloak作为你的身份提供者。如果你要部署到生产，你可能不想管理你的用户和认证系统。这就是Okta和Auth0可以提供帮助的地方!

将您的身份提供者转换为Okta

如果你没有Okta开发者账户，你可以注册一个，或者在安装Okta CLI后运行okta register 。

如果你想改变你的JHipster应用来使用Okta，Okta CLI让这一切变得简单，okta apps create jhipster 。这个命令创建了一个.okta.env 文件，你可以用它来覆盖Keycloak的默认设置。

source .okta.env
./mvnw -Pprod

有了Keycloak，你不需要为Ionic建立一个单独的OIDC应用。 有了Okta，你就需要了。 请看JHipster的文档，了解如何在Okta上为Ionic创建一个本地应用。

在你改变了Ionic应用的客户端ID后，使用npm start 。你会被提示使用你的Okta凭证登录，http://localhost:8100 。

将您的身份提供者切换到Auth0

要把你的身份提供者切换到Auth0，你首先需要一个Auth0账户。然后，创建一个.auth0.env 文件，并查看JHipster的Auth0文档了解如何填充它。

接下来，在Auth0上为Ionic配置一个本地应用程序。 一旦你完成了用新的客户ID和受众更新你的Ionic应用程序，你应该能够使用以下命令运行你的后端和新的前端客户端。

source .auth0.env
npm run backend:start
# open a new terminal
npm start

要在你的移动模拟器上看到它的运行，请使用以下命令。

npm run build

# iOS
npx cap run ios

# Android
npx cap run android
avatar
文章
阅读
粉丝