瀏覽代碼

Images in table

Matt Raible 7 年之前
父節點
當前提交
5d09f14879
共有 2 個文件被更改,包括 20 次插入22 次删除
  1. 18
    20
      TUTORIAL.md
  2. 2
    2
      client/src/app/app.module.ts

+ 18
- 20
TUTORIAL.md 查看文件

@@ -154,7 +154,7 @@ Access the API using `http localhost:8080/good-beers --auth <user>:<password>`.
154 154
 
155 155
 ## Ionic App
156 156
 
157
-Install Ionic and Cordova using npm: `yarn global add cordova ionic`
157
+Install Ionic and Cordova: `yarn global add cordova ionic`
158 158
 
159 159
 From a terminal window, create a new application using the following command:
160 160
 
@@ -169,11 +169,11 @@ 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.
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 173
 
174 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. 
175 175
 
176
-Thanks to the [recent release of our Client API](https://stormpath.com/blog/client-api-authentication-mobile-frontend), you can now authenticate directly against our API without needing to hit your server with our integration installed. This article shows you how to do just that in an Ionic application.
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.
177 177
 
178 178
 Install the [Angular components for Stormpath](https://github.com/stormpath/stormpath-sdk-angular) using npm.
179 179
 
@@ -181,10 +181,16 @@ Install the [Angular components for Stormpath](https://github.com/stormpath/stor
181 181
 yarn add angular-stormpath
182 182
 ```
183 183
 
184
-Modify `app.module.ts` to import `StormpathConfiguration` and `StormpathModule`. Then create a function to configure the `endpointPrefix` to point to the DNS label for your [Client API](https://docs.stormpath.com/client-api/product-guide/latest/) 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.
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.
185
+
186
+Make sure to specify Stormpath's pre-built Ionic pages in `entryComponents`.
187
+
185 188
 
186 189
 ```typescript
187
-import { StormpathModule, StormpathConfiguration } from 'angular-stormpath';
190
+import {
191
+  StormpathConfiguration, StormpathModule, StormpathIonicModule,
192
+  LoginPage, RegisterPage, ForgotPasswordPage
193
+} from 'angular-stormpath';
188 194
 ...
189 195
 export function stormpathConfig(): StormpathConfiguration {
190 196
   let spConfig: StormpathConfiguration = new StormpathConfiguration();
@@ -250,12 +256,12 @@ export class MyApp {
250 256
 
251 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.
252 258
 
253
-<pre style=”color: red”>
259
+```
254 260
 XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request
255
- doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on 
256
- the requested resource. Origin 'http://localhost:8100 is therefore not allowed access. 
257
- The response had HTTP status code 403.
258
-</pre>
261
+doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on 
262
+the requested resource. Origin 'http://localhost:8100 is therefore not allowed access. 
263
+The response had HTTP status code 403.
264
+```
259 265
 
260 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`. 
261 267
 
@@ -280,15 +286,7 @@ In `src/pages/home.html`, add a logout link to the header and a paragraph in the
280 286
 </ion-header>
281 287
 
282 288
 <ion-content padding>
283
-  <h2>Welcome to Ionic!</h2>
284
-  <p>
285
-    This starter project comes with simple tabs-based layout for apps
286
-    that are going to primarily use a Tabbed UI.
287
-  </p>
288
-  <p>
289
-    Take a look at the <code>src/pages/</code> directory to add or change tabs,
290
-    update any existing page or create new pages.
291
-  </p>
289
+  ...
292 290
   <p *ngIf="(user$ | async)">
293 291
     You are logged in as: <b>{{ ( user$ | async ).fullName }}</b>
294 292
   </p>
@@ -395,7 +393,7 @@ See Ionic’s [deploying documentation](https://ionicframework.com/docs/v2/setup
395 393
 
396 394
 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.
397 395
 
398
-|<img src="./static/iphone-login.png" width="200">|<img src="./static/iphone-register.png" width="200">|<img src="./static/iphone-forgot-password.png" width="200">)|
396
+|![](./static/iphone-login.png)|![](./static/iphone-register.png)|![](./static/iphone-forgot-password.png)|
399 397
 
400 398
 ### Android
401 399
 

+ 2
- 2
client/src/app/app.module.ts 查看文件

@@ -6,8 +6,8 @@ import { ContactPage } from '../pages/contact/contact';
6 6
 import { HomePage } from '../pages/home/home';
7 7
 import { TabsPage } from '../pages/tabs/tabs';
8 8
 import {
9
-  StormpathConfiguration, StormpathModule, StormpathIonicModule, LoginPage,
10
-  RegisterPage, ForgotPasswordPage
9
+  StormpathConfiguration, StormpathModule, StormpathIonicModule,
10
+  LoginPage, RegisterPage, ForgotPasswordPage
11 11
 } from 'angular-stormpath';
12 12
 import { BeerPage } from '../pages/beer/beer';
13 13
 import { BeerService } from '../providers/beer-service';