|
|
|
|
169
|
ionic serve
|
169
|
ionic serve
|
170
|
```
|
170
|
```
|
171
|
|
171
|
|
172
|
-This will open your default browser on (http://localhost:8100). You can use Chrome’s device toolbar to see what the application will look like on most mobile devices.
|
|
|
173
|
-
|
|
|
174
|
-Stormpath allows you to easily integrate authentication into an Ionic 2 application. It also provides [integration for a number of backend frameworks](https://docs.stormpath.com/), making it easy to verify the JWT you get when logging in.
|
|
|
|
|
172
|
+This will open your default browser on [http://localhost:8100](http://localhost:8100). You can click through the tabbed interface to see the default structure of the app.
|
175
|
|
173
|
|
176
|
Thanks to the [recent release of Stormpath's Client API](https://stormpath.com/blog/client-api-authentication-mobile-frontend), you can now authenticate directly without needing to hit your server with a Stormpath SDK integration installed. This article shows you how to do just that in an Ionic application.
|
174
|
Thanks to the [recent release of Stormpath's Client API](https://stormpath.com/blog/client-api-authentication-mobile-frontend), you can now authenticate directly without needing to hit your server with a Stormpath SDK integration installed. This article shows you how to do just that in an Ionic application.
|
177
|
|
175
|
|
178
|
-Install the [Angular components for Stormpath](https://github.com/stormpath/stormpath-sdk-angular) using npm.
|
|
|
|
|
176
|
+Install the [Angular components for Stormpath](https://github.com/stormpath/stormpath-sdk-angular):
|
179
|
|
177
|
|
180
|
```
|
178
|
```
|
181
|
yarn add angular-stormpath
|
179
|
yarn add angular-stormpath
|
182
|
```
|
180
|
```
|
183
|
|
181
|
|
184
|
-Modify `app.module.ts` to import the appropriate Stormpath classes from `angular-stormpath`. Create a function to configure the `endpointPrefix` to point to the DNS label for your Client API instance. You can find and configure your DNS label by logging into https://api.stormpath.com and navigating to Applications > My Application > Policies > Client API > DNS Label. Since mine is “raible”, I’ll be using `raible.apps.stormpath.io` for this example.
|
|
|
|
|
182
|
+Modify `app.module.ts` to import the appropriate Stormpath classes from `angular-stormpath`. Create a function to configure the `endpointPrefix` to point to the DNS label for your Client API instance.
|
|
|
183
|
+
|
|
|
184
|
+**NOTE:** You can find and configure your DNS label by logging into https://api.stormpath.com and navigating to Applications > My Application > Policies > Client API > DNS Label. Since mine is “raible”, I’ll be using `raible.apps.stormpath.io` for this example.
|
185
|
|
185
|
|
186
|
-Make sure to specify Stormpath's pre-built Ionic pages in `entryComponents`.
|
|
|
|
|
186
|
+Make sure to define `stormpathConfig`, override the provider, import `StormpathModule` / `StormpathIonicModule`, and append Stormpath's pre-built Ionic pages to `entryComponents`.
|
187
|
|
187
|
|
188
|
|
188
|
|
189
|
```typescript
|
189
|
```typescript
|
|
|
|
|
254
|
}
|
254
|
}
|
255
|
```
|
255
|
```
|
256
|
|
256
|
|
257
|
-After making these changes, you can run `ionic serve`, but you’ll likely see something similar to the following error in your browser’s console.
|
|
|
|
|
257
|
+If you run `ionic serve`, you’ll likely see something similar to the following error in your browser’s console.
|
258
|
|
258
|
|
259
|
```
|
259
|
```
|
260
|
XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request
|
260
|
XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request
|
|
|
|
|
263
|
The response had HTTP status code 403.
|
263
|
The response had HTTP status code 403.
|
264
|
```
|
264
|
```
|
265
|
|
265
|
|
266
|
-To fix this, you’ll need to login to https://api.stormpath.com, and navigate to Applications > My Application, and modify the **Authorized Origin URIs** to include `http://localhost:8100`.
|
|
|
|
|
266
|
+To fix this, you’ll need to login to https://api.stormpath.com, navigate to Applications > My Application, and modify the **Authorized Origin URIs** to include `http://localhost:8100`.
|
267
|
|
267
|
|
268
|
At this point, you should see a login screen when you run `ionic serve`.
|
268
|
At this point, you should see a login screen when you run `ionic serve`.
|
269
|
|
269
|
|
|
|
|
|
329
|
git commit -m "Add Stormpath"
|
329
|
git commit -m "Add Stormpath"
|
330
|
```
|
330
|
```
|
331
|
|
331
|
|
332
|
-## Build a Beer UI
|
|
|
|
|
332
|
+## Build a Good Beers UI
|
333
|
|
333
|
|
334
|
Run `ionic generate page beer` to create a component and a template to display the list of good beers.
|
334
|
Run `ionic generate page beer` to create a component and a template to display the list of good beers.
|
335
|
|
335
|
|
|
|
|
|
593
|
|
593
|
|
594
|
Once you’re configured your phone, computer, and Apple ID to work, you should be able to open the app and see screens like the ones I captured on my iPhone 6s Plus.
|
594
|
Once you’re configured your phone, computer, and Apple ID to work, you should be able to open the app and see screens like the ones I captured on my iPhone 6s Plus.
|
595
|
|
595
|
|
596
|
-<div style="text-align: center">
|
|
|
597
|
-<img src="./static/iphone-login.png" width="250">
|
|
|
598
|
-<img src="./static/iphone-register.png" width="250" style="margin-left: 20px">
|
|
|
599
|
-<img src="./static/iphone-forgot-password.png" width="250" style="margin-left: 20px">
|
|
|
|
|
596
|
+<p align="center">
|
|
|
597
|
+<img src="./static/iphone-login.png" width="250">
|
|
|
598
|
+<img src="./static/iphone-register.png" width="250">
|
|
|
599
|
+<img src="./static/iphone-forgot-password.png" width="250">
|
600
|
</div>
|
600
|
</div>
|
601
|
|
601
|
|
602
|
### Android
|
602
|
### Android
|
|
|
|
|
633
|
After performing these steps, I was able to run `ionic emulate android` and see my app running in the AVD.
|
633
|
After performing these steps, I was able to run `ionic emulate android` and see my app running in the AVD.
|
634
|
|
634
|
|
635
|
## Learn More
|
635
|
## Learn More
|
636
|
-I hope you’ve enjoyed this tour of Ionic, Angular, and Stormpath. I like how Ionic takes your web development skills up a notch and allows you to create mobile applications that look and behave natively. They look great and have swift performance.
|
|
|
637
|
-
|
|
|
638
|
-I’d love to learn how to add [Touch ID](https://ionicframework.com/docs/v2/native/touchid/) or [1Password support](https://github.com/AgileBits/onepassword-app-extension) to an Ionic app with Stormpath authentication. One of the biggest pain points as a user is having to enter in usernames and passwords on a mobile application. While Stormpath’s use of OAuth 2’s access and refresh tokens helps alleviate the problem, I do like the convenience of leveraging my phone and app’s capabilities.
|
|
|
|
|
636
|
+I hope you’ve enjoyed this tour of Ionic, Angular, and Stormpath. I like how Ionic takes your web development skills up a notch and allows you to create mobile applications that look and behave natively.
|
639
|
|
637
|
|
640
|
To learn more about Ionic, Angular, or Stormpath, please see the following resources:
|
638
|
To learn more about Ionic, Angular, or Stormpath, please see the following resources:
|
641
|
|
639
|
|