Browse Source

Old school HTML for centering and spacing images

Matt Raible 7 years ago
parent
commit
e14dc84ae3
1 changed files with 14 additions and 16 deletions
  1. 14
    16
      TUTORIAL.md

+ 14
- 16
TUTORIAL.md View File

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">&nbsp;&nbsp;
598
+<img src="./static/iphone-register.png" width="250">&nbsp;&nbsp;
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