javascript
使用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非常相似。 簡而言之：
有關更詳盡的說明，請參見我的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博客上。
朋友不允許朋友寫用戶身份驗證。 厭倦了管理自己的用戶？ 立即嘗試Okta的API和Java SDK。 在幾分鐘之內即可對任何應用程序中的用戶進行身份驗證，管理和保護。
翻譯自: https://www.javacodegeeks.com/2019/09/build-mobile-apps-angular-ionic-4-spring-boot.html
總結
以上是生活随笔為你收集整理的使用Angular，Ionic 4和Spring Boot构建移动应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为Mate60处理器再“进
- 下一篇： 只读副本和Spring Data第4部分