Angular2 HTTP

43 |

Random Quote

44 |

45 |

46 | 47 |

48 | 49 |

50 |

Secret Quote

51 |

52 |

53 | 54 |

55 | ` 56 | }) 57 | 58 | export class App { 59 | title: string; 60 | data: string; 61 | quote: string; 62 | username: string; 63 | password: string; 64 | randomQuote: string; 65 | secretQuote: string; 66 | 67 | constructor(public http: Http) { 68 | 69 | } 70 | 71 | logError(err) { 72 | console.error('There was an error: ' + err); 73 | } 74 | 75 | saveJwt(jwt) { 76 | if(jwt) { 77 | localStorage.setItem('id_token', jwt) 78 | } 79 | } 80 | 81 | getRandomQuote() { 82 | this.http.get('http://localhost:3001/api/random-quote') 83 | .subscribe( 84 | data => this.randomQuote = data.text(), 85 | err => this.logError(err.text()), 86 | () => console.log('Random Quote Complete') 87 | ); 88 | } 89 | 90 | authenticate(username, password) { 91 | 92 | let creds = JSON.stringify({ username: username.value, password: password.value }); 93 | 94 | let headers = new Headers(); 95 | headers.append('Content-Type', 'application/json'); 96 | 97 | this.http.post('http://localhost:3001/sessions/create', creds, { 98 | headers: headers 99 | }) 100 | .subscribe( 101 | data => { 102 | this.saveJwt(data.json().id_token); 103 | username.value = null; 104 | password.value = null; 105 | }, 106 | err => this.logError(err.json().message), 107 | () => console.log('Authentication Complete') 108 | ); 109 | } 110 | 111 | getSecretQuote() { 112 | 113 | let jwt = localStorage.getItem('id_token'); 114 | let authHeader = new Headers(); 115 | if(jwt) { 116 | authHeader.append('Authorization', 'Bearer ' + jwt); 117 | } 118 | 119 | this.http.get('http://localhost:3001/api/protected/random-quote', { 120 | headers: authHeader 121 | }) 122 | .subscribe( 123 | data => this.secretQuote = data.text(), 124 | err => this.logError(err.text()), 125 | () => console.log('Secret Quote Complete') 126 | ); 127 | 128 | } 129 | 130 | } 131 | 132 | bootstrap(App, [HTTP_PROVIDERS]); 133 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Angular 2 Http 2 | ## Based on [ng2-play.ts](https://github.com/pkozlowski-opensource/ng2-play) 3 | 4 | This is the code for [Auth0's tutorial on Angular 2 Http](). The tutorial covers how to make `GET` and `POST` requests, and how to set some options such as modified headers. 5 | 6 | ## Intallation 7 | 8 | ```bash 9 | git submodule update --init 10 | cd server 11 | npm install 12 | node server.js 13 | ``` 14 | 15 | ## Running the App 16 | ``` 17 | cd .. 18 | npm install 19 | gulp play 20 | ``` 21 | 22 | The app will be served at `localhost:9000`. 23 | 24 | Some examples: 25 | 26 | ```js 27 | // app.ts 28 | 29 | getRandomQuote() { 30 | this.http.get('http://localhost:3001/api/random-quote') 31 | .subscribe( 32 | data => this.randomQuote = data.text(), 33 | err => this.logError(err.text()), 34 | () => console.log('Random Quote Complete') 35 | ); 36 | } 37 | 38 | authenticate(username, password) { 39 | 40 | let creds = JSON.stringify({ username: username.value, password: password.value }); 41 | 42 | let headers = new Headers(); 43 | headers.append('Content-Type', 'application/json'); 44 | 45 | this.http.post('http://localhost:3001/sessions/create', creds, { 46 | headers: headers 47 | }) 48 | .subscribe( 49 | data => { 50 | this.saveJwt(data.json().id_token); 51 | username.value = null; 52 | password.value = null; 53 | }, 54 | err => this.logError(err.json().message), 55 | () => console.log('Authentication Complete') 56 | ); 57 | } 58 | 59 | getSecretQuote() { 60 | 61 | let jwt = localStorage.getItem('id_token'); 62 | let authHeader = new Headers(); 63 | if(jwt) { 64 | authHeader.append('Authorization', 'Bearer ' + jwt); 65 | } 66 | 67 | this.http.get('http://localhost:3001/api/protected/random-quote', { 68 | headers: authHeader 69 | }) 70 | .subscribe( 71 | data => this.secretQuote = data.text(), 72 | err => this.logError(err.text()), 73 | () => console.log('Secret Quote Complete') 74 | ); 75 | 76 | } 77 | ``` 78 | 79 | ## What is Auth0? 80 | 81 | Auth0 helps you to: 82 | 83 | * Add authentication with [multiple authentication sources](https://docs.auth0.com/identityproviders), either social like **Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others**, or enterprise identity systems like **Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider**. 84 | * Add authentication through more traditional **[username/password databases](https://docs.auth0.com/mysql-connection-tutorial)**. 85 | * Add support for **[linking different user accounts](https://docs.auth0.com/link-accounts)** with the same user. 86 | * Support for generating signed [Json Web Tokens](https://docs.auth0.com/jwt) to call your APIs and **flow the user identity** securely. 87 | * Analytics of how, when and where users are logging in. 88 | * Pull data from other sources and add it to the user profile, through [JavaScript rules](https://docs.auth0.com/rules). 89 | 90 | ## Create a Free Auth0 Account 91 | 92 | 1. Go to [Auth0](https://auth0.com) and click Sign Up. 93 | 2. Use Google, GitHub or Microsoft Account to login. 94 | 95 | ## Issue Reporting 96 | 97 | If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues. 98 | 99 | ## Author 100 | 101 | [Auth0](auth0.com) 102 | 103 | ## License 104 | 105 | This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info. 106 | --------------------------------------------------------------------------------

Angular 2 HTTP

Login

Random Quote

{{ randomQuote }}

Secret Quote

{{ secretQuote }}