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,21 +169,21 @@ cd ionic-auth
169 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 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 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 189
 ```typescript
@@ -254,7 +254,7 @@ export class MyApp {
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 260
 XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request
@@ -263,7 +263,7 @@ the requested resource. Origin 'http://localhost:8100 is therefore not allowed a
263 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 268
 At this point, you should see a login screen when you run `ionic serve`.
269 269
 
@@ -329,7 +329,7 @@ git add .
329 329
 git commit -m "Add Stormpath"
330 330
 ```
331 331
 
332
-## Build a Beer UI
332
+## Build a Good Beers UI
333 333
 
334 334
 Run `ionic generate page beer` to create a component and a template to display the list of good beers. 
335 335
 
@@ -593,10 +593,10 @@ See Ionic’s [deploying documentation](https://ionicframework.com/docs/v2/setup
593 593
 
594 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 600
 </div>
601 601
 
602 602
 ### Android
@@ -633,9 +633,7 @@ Skin: Skin with dynamic hardware controls
633 633
 After performing these steps, I was able to run `ionic emulate android` and see my app running in the AVD.
634 634
 
635 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 638
 To learn more about Ionic, Angular, or Stormpath, please see the following resources:
641 639