瀏覽代碼

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
 
154
 
155
 ## Ionic App
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
 From a terminal window, create a new application using the following command:
159
 From a terminal window, create a new application using the following command:
160
 
160
 
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.
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
 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. 
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
 Install the [Angular components for Stormpath](https://github.com/stormpath/stormpath-sdk-angular) using npm.
178
 Install the [Angular components for Stormpath](https://github.com/stormpath/stormpath-sdk-angular) using npm.
179
 
179
 
181
 yarn add angular-stormpath
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
 ```typescript
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
 export function stormpathConfig(): StormpathConfiguration {
195
 export function stormpathConfig(): StormpathConfiguration {
190
   let spConfig: StormpathConfiguration = new StormpathConfiguration();
196
   let spConfig: StormpathConfiguration = new StormpathConfiguration();
250
 
256
 
251
 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
 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
 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
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
 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, and navigate to Applications > My Application, and modify the **Authorized Origin URIs** to include `http://localhost:8100`. 
261
 
267
 
280
 </ion-header>
286
 </ion-header>
281
 
287
 
282
 <ion-content padding>
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
   <p *ngIf="(user$ | async)">
290
   <p *ngIf="(user$ | async)">
293
     You are logged in as: <b>{{ ( user$ | async ).fullName }}</b>
291
     You are logged in as: <b>{{ ( user$ | async ).fullName }}</b>
294
   </p>
292
   </p>
395
 
393
 
396
 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.
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
 ### Android
398
 ### Android
401
 
399
 

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

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