用Angular和JHipster构建安全的Ionic应用程序[ Auth0 Docs 在几分钟内实施认证](https

[

Auth0 Docs

在几分钟内实施认证](auth0.com/docs)
Auth0 Marketplace
发现并启用您需要的集成，以解决身份问题

探索Auth0市场

重要信息

原文发表于developer.okta.com。

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

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

SwiftUI logo

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

Ionic博客最近有一篇文章，对Ionic和React Native的性能进行了比较。TL;DR: 这两个选项都可以给你一个高性能的应用程序，并具有真正的本地外观和感觉。

先决条件。

JHipster到底是什么？

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

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

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

Authentication Flow

✨ 介绍一下JHipster Ionic蓝图!

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

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

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

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

✨ t.co/WQ6ZTsTkPP#… #Jhipster #angular #springboot

- Matt Raible (@mraible)5月10日, 2022

下面是如何使用它。

创建一个 ionic-app目录，与你的JHipster应用程序一起。

- backend
- ionic-app

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

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

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

Jhipster Ionic

你也可以通过使用捆绑的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

JHipster Ionic蓝图目前只支持Angular
现在它是一个蓝图，增加对Vue和React的支持将变得更加容易。如果你有兴趣帮忙，请告诉我!Okta是JHipster项目的白金赞助商，喜欢为功能开发分配[bug赏](auth0.com/(https://gi…

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

为了看看Ionic + JHipster的运行情况，让我们从我为Auth0博客创建的全栈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 。

flickr2

这就是了!该蓝图将生成一个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以允许CORS从 http://localhost:8100.

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)并使用实体>照片添加新的照片。添加几张照片，这样你就有一些数据可以使用。

Photos

运行你的Ionic应用程序

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

Ionic Welcome

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

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 Simulator

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

用Capacitor生成一个Android项目。

npx ionic capacitor add android

启用明文流量，并将 dev.localhost.ionic作为一个方案，在 android/app/src/main/AndroidManifest.xml:

<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在安卓上运行你的Ionic应用程序。

npx cap run android

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

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

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

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

Flickr2 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

了解更多关于Ionic、Spring Boot和JHipster的信息

我希望你喜欢学习Ionic和JHipster的新Ionic蓝图。在我看来，你可以为你的JHipster快速建立一个移动客户端的原型，这是非常棒的。更棒的是，你可以使用一个领先的移动应用框架来完成它。

你可以在GitHub的@oktadev/okta-jhipster-ionic-example资源库中找到这个例子的源代码。

如果你喜欢这篇文章，你可能也会喜欢其他这些文章。

如果你有任何问题，请在下面留言。你可以在Twitter上关注@oktadev，并订阅我们的YouTube频道，了解更多前沿内容。我们也在LinkedIn和Facebook上。

博客

开发人员

身份与安全

业务

领导力

企业文化

工程设计

宣言
公司介绍

关于我们

客户

安全问题

工作机会

合作伙伴

新闻

状况

法律声明

隐私政策

术语
产品

单点登录

密码检测

监护人

M2M

通用登录

无密码
更多

诚信网

大使计划

特邀作者计划

Auth0社区

资源

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

Auth0 Docs