Skip to content

Commit b749907

Browse files
hardt-rmthardt-rmt
authored
Changed the styling on the Angular sample app and updated React app README
1 parent a9ad370 commit b749907

16 files changed

+152
-172
lines changed

‎angular-sample-spa/README.md

+5-83
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# IBM Cloud AppID React Sample App
1+
# IBM Cloud App ID Angular Sample App
22

3-
The IBM Cloud App ID SDK can be used with React to create a secure single-page application. You will need an IBM Cloud App ID instance with a single-page application created. Use the client ID and discovery endpoint from your application credentials to initialize the App ID instance.
3+
The IBM Cloud App ID SDK can be used with Angular to create a secure single-page application. You will need an IBM Cloud App ID instance with a single-page application created. Use the client ID and discovery endpoint from your application credentials to initialize the App ID instance.
44

55
## Prerequisites
66
* Node.js version 8 or later
@@ -14,9 +14,9 @@ The IBM Cloud App ID SDK can be used with React to create a secure single-page a
1414
```
1515
git clone https://github.com/ibm-cloud-security/appid-sample-code-snippets.git
1616
```
17-
2. Navigate to application workspace folder.
17+
2. Navigate to the workspace folder of the application.
1818
```
19-
cd angular-sample-app
19+
cd angular-sample-spa
2020
```
2121
3. Install dependencies for the application.
2222
```
@@ -26,84 +26,6 @@ npm install
2626
```
2727
ng serve
2828
```
29-
30-
The app will automatically reload if you change any of the source files.
31-
32-
## Detailed instructions on Creating you application
33-
34-
35-
1. Install the Angular CLI
36-
```
37-
npm install -g @angular/cli
38-
```
39-
2. Create a workspace and initial application and go to the workspace folder
40-
```
41-
ng new angular-sample-spa
42-
cd angular-sample-spa
43-
```
44-
3. Install the IBM Cloud AppID SDK dependency using npm
45-
```
46-
npm install ibmcloud-appid-js
47-
```
48-
49-
4. In the src directory, go to the app folder and import App ID in the `app.component.ts` file, with the following code:
50-
```
51-
import AppID from 'ibmcloud-appid-js';
52-
```
53-
5. In the AppComponent class initialize the states of the variables to be used in the application
54-
```
55-
userName = '';
56-
errorMessage = '';
57-
buttonStyle = 'show';
58-
messageStyle = 'hide';
59-
errorStyle = 'hide'
60-
```
61-
6. Create a loginAction function which when triggered will start the authentication flow and use tokens to get the user's information. 
62-
```
63-
async onLoginClick() {
64-
    const appID = new AppID();
65-
    try {
66-
      await appID.init({
67-
        clientId: '<CLIENT_ID>',
68-
        discoveryEndpoint: '<WELLKNOWN_ENDPOINT>
69-
      });
70-
      const tokens = await appID.signin();
71-
const decodeIDTokens = tokens.idTokenPayload;
72-
this.userName = decodeIDTokens.name;
73-
this.buttonStyle = 'hide';
74-
this.messageStyle = 'show';
75-
this.errorStyle = 'hide';    
76-
    } catch (e) {
77-
this.errorStyle = 'show';
78-
this.errorMessage = e.message;
79-
    }
80-
}
81-
```
82-
7. In the `app.component.html` file, clear all the content in it and add the HTML and CSS code for the application.
83-
```
84-
<style>
85-
  .hide {
86-
    display: none;
87-
  }
88-
  .show {
89-
    display: block;
90-
  }
91-
</style>
92-
93-
<button
94-
  [ngClass]="buttonStyle"
95-
  style="background-color: #4178BE; width: 270px;
96-
  height: 40px;color: #FFFFFF;font-size: 14px;border: none; margin-left: 10px;"
97-
  id="login"
98-
  (click)="onLoginClick()">Login with IBM Cloud App ID
99-
</button>
100-
<p [ngClass]="messageStyle" style="margin-left: 10px;" id="welcomeNameID">Hi {{userName}}! You are now authenticated </p>
101-
<div [ngClass]="errorStyle" id="error" style="margin-left: 10px; color: red;">{{errorMessage}}</div>
102-
```
103-
8. Save all the files and in your terminal, run the following command to access your app from http://localhost:4200.
104-
```
105-
ng serve
106-
```
107-
9. Make sure you register your redirect_uri (in this case http://localhost:3000/*) with App ID to ensure that only authorized clients are allowed to participate in the authorization workflow. This can be done on the App ID dashboard under the Manage Authentication tab in the Authentication Settings. Click [here](https://cloud.ibm.com/docs/services/appid?topic=appid-managing-idp#add-redirect-uri) for more details.
29+
5. Make sure you register your redirect_uri (in this case http://localhost:4200/*) with App ID to ensure that only authorized clients are allowed to participate in the authorization workflow. This can be done on the App ID dashboard under the Manage Authentication tab in the Authentication Settings. Click [here](https://cloud.ibm.com/docs/services/appid?topic=appid-managing-idp#add-redirect-uri) for more details.
10830

10931
Well done! You successfully integrated IBM Cloud App ID's SDK for SPA into an Angular application.

‎angular-sample-spa/src/app/app.component.html

+2-18
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,2 @@
1-
<style>
2-
.hide {
3-
display: none;
4-
}
5-
.show {
6-
display: block;
7-
}
8-
</style>
9-
10-
<button
11-
[ngClass]="buttonStyle"
12-
style="background-color: #4178BE; width: 270px;
13-
height: 40px;color: #FFFFFF;font-size: 14px;border: none; margin-left: 10px;"
14-
id="login"
15-
(click)="onLoginClick()">Login with IBM Cloud App ID
16-
</button>
17-
<p [ngClass]="messageStyle" style="margin-left: 10px;" id="welcomeNameID">Hi {{userName}}! You are now authenticated </p>
18-
<div [ngClass]="errorStyle" id="error" style="margin-left: 10px; color: red;">{{errorMessage}}</div>
1+
<app-welcome (changeState)="onChangeState($event)"></app-welcome>
2+
<app-home [displayState]="displayStateStatus" [userName]="userNameStatus"></app-home>

‎angular-sample-spa/src/app/app.component.ts

+5-24
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,14 @@
11
import { Component } from '@angular/core';
2-
import AppID from 'ibmcloud-appid-js';
3-
42
@Component({
53
selector: 'app-root',
64
templateUrl: './app.component.html',
75
styleUrls: ['./app.component.css']
86
})
97
export class AppComponent {
10-
userName = '';
11-
errorMessage = '';
12-
buttonStyle = 'show';
13-
messageStyle = 'hide';
14-
errorStyle = 'hide';
15-
async onLoginClick() {
16-
const appID = new AppID();
17-
try {
18-
await appID.init({
19-
clientId: '<SPA_CLIENT_ID>',
20-
discoveryEndpoint: '<WELL_KNOWN_ENDPOINT>'
21-
});
22-
const tokens = await appID.signin();
23-
const decodeIDTokens = tokens.idTokenPayload;
24-
this.userName = decodeIDTokens.name;
25-
this.buttonStyle = 'hide';
26-
this.messageStyle = 'show';
27-
this.errorStyle = 'hide';
28-
} catch (e) {
29-
this.errorStyle = 'show';
30-
this.errorMessage = e.message;
8+
displayStateStatus = 'hide';
9+
userNameStatus = '';
10+
onChangeState(value) {
11+
this.displayStateStatus = 'show';
12+
this.userNameStatus = value.userName;
3113
}
32-
}
3314
}

‎angular-sample-spa/src/app/app.module.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33

44
import { AppComponent } from './app.component';
5+
import { HomeComponent } from './home/home.component';
6+
import { WelcomeComponent } from './welcome/welcome.component';
57

68
@NgModule({
79
declarations: [
8-
AppComponent
10+
AppComponent,
11+
HomeComponent,
12+
WelcomeComponent
913
],
1014
imports: [
1115
BrowserModule

‎angular-sample-spa/src/app/home/home.component.css

Whitespace-only changes.

‎angular-sample-spa/src/app/home/home.component.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div [ngClass]="displayState">
2+
<div class="welcome-display">
3+
<img alt="App ID Logo" class="logo-icon" src="../../assets/app_id_icon.svg">
4+
<p>{{userName}}</p>
5+
<p>You've made your first authentication.</p>
6+
</div>
7+
</div>
8+

‎angular-sample-spa/src/app/home/home.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { HomeComponent } from './home.component';
4+
5+
describe('HomeComponent', () => {
6+
let component: HomeComponent;
7+
let fixture: ComponentFixture<HomeComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ HomeComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(HomeComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎angular-sample-spa/src/app/home/home.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, Input} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-home',
5+
templateUrl: './home.component.html',
6+
styleUrls: ['./home.component.css']
7+
})
8+
export class HomeComponent {
9+
@Input() displayState: string;
10+
@Input() userName: string;
11+
}
12+

‎angular-sample-spa/src/app/welcome/welcome.component.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
3+

‎angular-sample-spa/src/app/welcome/welcome.component.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div id="welcome" [ngClass]="style">
2+
<div class="welcome-display">
3+
<div>
4+
<img alt="App ID Logo" class="logo-icon" src="../../assets/app_id_icon.svg">
5+
<p>
6+
Welcome to the<br>
7+
IBM Cloud App ID SPA SDK<br>
8+
Sample App
9+
</p>
10+
</div>
11+
<button id="login" [ngClass]='buttonDisplay' (click)="onLoginClick()">Login</button>
12+
<div [ngClass]="errorStyle" id="error">{{errorMessage}}</div>
13+
</div>
14+
</div>

‎angular-sample-spa/src/app/welcome/welcome.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { WelcomeComponent } from './welcome.component';
4+
5+
describe('WelcomeComponent', () => {
6+
let component: WelcomeComponent;
7+
let fixture: ComponentFixture<WelcomeComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ WelcomeComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(WelcomeComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎angular-sample-spa/src/app/welcome/welcome.component.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
2+
import AppID from 'ibmcloud-appid-js';
3+
@Component({
4+
selector: 'app-welcome',
5+
templateUrl: './welcome.component.html',
6+
styleUrls: ['./welcome.component.css']
7+
})
8+
export class WelcomeComponent implements OnInit {
9+
style = 'show';
10+
buttonDisplay = 'show';
11+
errorStyle = 'hide';
12+
errorMessage = '';
13+
appid = new AppID();
14+
@Output() changeState = new EventEmitter();
15+
async ngOnInit() {
16+
try {
17+
await this.appid.init({
18+
clientId: '<CLIENT_ID>',
19+
discoveryEndpoint: '<WELL_KNOWN_ENDPOINT>'
20+
});
21+
} catch (e) {
22+
this.errorMessage = e.message;
23+
this.errorStyle = 'show';
24+
}
25+
}
26+
async onLoginClick() {
27+
try {
28+
this.buttonDisplay = 'hide';
29+
const tokens = await this.appid.signin();
30+
const decodeIDTokens = tokens.idTokenPayload;
31+
const userName = 'Hi ' + decodeIDTokens.name + ', Congratulations!';
32+
this.style = 'hide';
33+
this.changeState.emit({userName});
34+
} catch (e) {
35+
this.errorMessage = e.message;
36+
this.errorStyle = 'show';
37+
this.buttonDisplay = 'show';
38+
}
39+
}
40+
}

‎angular-sample-spa/src/assets/images/app_id_icon.svg ‎angular-sample-spa/src/assets/app_id_icon.svg

File renamed without changes.

‎angular-sample-spa/src/assets/images/hint_icon.svg

-42
This file was deleted.

‎angular-sample-spa/src/styles.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
body {margin: 0;padding: 0;max-width: 100%;overflow-x: hidden;}
2+
.hide {display: none;}
3+
.show {display: block;}
4+
.welcome-display {display: block;font-family: 'IBMPlexSans-Light', sans-serif;font-size: 1.5vw;text-align: center;margin: 10% auto 0;}
5+
.logo-icon {width: 70px;height: 70px;}
6+
#login {font-family: 'IBMPlexSans-Medium', sans-serif;font-size: 14px;color: #FFFFFF;text-align: center;background-color: #4178BE;border: none;cursor: pointer;width: 158px;height: 40px;margin: 20px auto 0;}
7+
#error {padding-top: 20px;font-size: 14px;color: red;}

‎react-sample-app/README.md

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# IBM Cloud AppID React Sample App
1+
# IBM Cloud App ID React Sample App
22

33
The IBM Cloud App ID SDK can be used with React to create a secure single-page application. You will need an IBM Cloud App ID instance with a single-page application created. Use the client ID and discovery endpoint from your application credentials to initialize the App ID instance.
44

@@ -22,14 +22,11 @@ cd react-sample-app
2222
```
2323
npm install
2424
```
25-
2625
4. Start the development server. Navigate to http://localhost:3000 to access your application.
2726
```
2827
npm start
2928
```
3029

31-
The app will automatically reload if you change any of the source files.
32-
3330
## Detailed instructions on Creating your app
3431

3532
1. Set up a frontend build pipeline using create-react-app. Then move into the project directory.

0 commit comments

Comments
 (0)