|
|
|
|
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
|
|