From a43c21604ae1b488694991ab3effbb29a5e9ac24 Mon Sep 17 00:00:00 2001 From: Rene Vergara Date: Thu, 18 Aug 2022 18:31:51 -0500 Subject: [PATCH] Update Xero registration for full API integration --- src/app/settings/settings.component.html | 8 ++- src/app/settings/settings.component.ts | 2 +- src/app/xero.service.ts | 30 +++----- src/app/xeroreg/xeroreg.component.css | 3 + src/app/xeroreg/xeroreg.component.html | 7 +- src/app/xeroreg/xeroreg.component.ts | 91 +++++++++++++++++------- 6 files changed, 91 insertions(+), 50 deletions(-) diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 8fd1dc0..c4be643 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -57,9 +57,11 @@ - - Link to Xero - +
+ + Link to Xero + +
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index 37c365f..5b64b7c 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -64,7 +64,7 @@ export class SettingsComponent implements OnInit { xeroService.getXeroConfig(); this.clientIdUpdate.subscribe(clientId => { this.clientId = clientId; - this.xeroLink = `https://login.xero.com/identity/connect/authorize?response_type=code&client_id=${this.clientId}&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Ftest&scope=accounting.transactions offline_access&state=1234` + this.xeroLink = `https://login.xero.com/identity/connect/authorize?response_type=code&client_id=${this.clientId}&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Ftest&scope=accounting.transactions offline_access&state=${this.owner.address.substring(0, 6)}` }); } diff --git a/src/app/xero.service.ts b/src/app/xero.service.ts index 0da9818..d5ed579 100644 --- a/src/app/xero.service.ts +++ b/src/app/xero.service.ts @@ -12,7 +12,7 @@ var Buffer = require('buffer/').Buffer; export class XeroService { beUrl = ConfigData.Be_URL; clientId: string = ''; - clientSecret: string = ''; + //clientSecret: string = ''; xeroToken: any = { accessToken: '', refreshToken: '', @@ -21,10 +21,10 @@ export class XeroService { tokenType: '' }; private _clientIdUpdated: BehaviorSubject = new BehaviorSubject(this.clientId); - private _clientSecretUpdated: BehaviorSubject = new BehaviorSubject(this.clientSecret); + //private _clientSecretUpdated: BehaviorSubject = new BehaviorSubject(this.clientSecret); private _tokenUpdated: BehaviorSubject = new BehaviorSubject(this.xeroToken); public readonly clientIdUpdate: Observable = this._clientIdUpdated.asObservable(); - public readonly clientSecretUpdate: Observable = this._clientSecretUpdated.asObservable(); + //public readonly clientSecretUpdate: Observable = this._clientSecretUpdated.asObservable(); public readonly tokenUpdate: Observable = this._tokenUpdated.asObservable(); private reqHeaders: HttpHeaders; @@ -42,9 +42,9 @@ export class XeroService { obs.subscribe(xeroDataResponse => { if (xeroDataResponse.status == 200) { this.clientId = xeroDataResponse.body!.xeroConfig.clientId; - this.clientSecret = xeroDataResponse.body!.xeroConfig.clientSecret; + //this.clientSecret = xeroDataResponse.body!.xeroConfig.clientSecret; this._clientIdUpdated.next(Object.assign({}, this).clientId); - this._clientSecretUpdated.next(Object.assign({}, this).clientSecret); + //this._clientSecretUpdated.next(Object.assign({}, this).clientSecret); } else { console.log('No config in DB!'); } @@ -53,21 +53,9 @@ export class XeroService { return obs; } - getXeroAccessToken(code: string){ - this.getXeroConfig().subscribe(xeroDataResponse => { - console.log('XAT: '+this.clientId); - var xeroAuth = 'Basic ' + Buffer.from(`${this.clientId}:${this.clientSecret}`).toString('base64'); - var xeroHeaders = new HttpHeaders().set('Authorization', xeroAuth).append('Content-Type', 'application/x-www-form-urlencoded'); - let obs = this.http.post('https://identity.xero.com/connect/token', `grant_type=authorization_code&code=${code}&redirect_uri=http://localhost:4200/test` , {headers: xeroHeaders, observe: 'response'}) - obs.subscribe(tokenData => { - if (tokenData.status == 200) { - console.log(tokenData.body!); - this.xeroToken = tokenData.body!; - this._tokenUpdated.next(Object.assign({}, this).xeroToken); - } else { - console.log('Error: '+tokenData.status); - } - }); - }); + getXeroAccessToken(code: string, address: string){ + const params = new HttpParams().append('code', code).append('address', address); + let obs = this.http.get(this.beUrl + 'api/xerotoken' , {headers: this.reqHeaders, params: params, observe: 'response'}) + return obs; } } diff --git a/src/app/xeroreg/xeroreg.component.css b/src/app/xeroreg/xeroreg.component.css index e69de29..0b79f36 100644 --- a/src/app/xeroreg/xeroreg.component.css +++ b/src/app/xeroreg/xeroreg.component.css @@ -0,0 +1,3 @@ +.text { + font-family: 'Spartan', sans-serif; +} diff --git a/src/app/xeroreg/xeroreg.component.html b/src/app/xeroreg/xeroreg.component.html index 941f267..7d9878c 100644 --- a/src/app/xeroreg/xeroreg.component.html +++ b/src/app/xeroreg/xeroreg.component.html @@ -1 +1,6 @@ -

test works!

+
+

Connecting to Xero...

+
+
+

Connected to Xero!

+
diff --git a/src/app/xeroreg/xeroreg.component.ts b/src/app/xeroreg/xeroreg.component.ts index b87c0f8..f82b246 100644 --- a/src/app/xeroreg/xeroreg.component.ts +++ b/src/app/xeroreg/xeroreg.component.ts @@ -1,13 +1,21 @@ import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; +import { Router, ActivatedRoute } from '@angular/router'; import { UserService } from '../user.service'; +import { XeroService } from '../xero.service'; import { Owner } from '../owner.model'; import { Observable } from 'rxjs'; -import { XeroService } from '../xero.service'; var Buffer = require('buffer/').Buffer; +function sleep(ms:number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +async function redirect(r: Router) { + await sleep(2000); + r.navigate(['/shop']); +} + @Component({ selector: 'app-xeroreg', templateUrl: './xeroreg.component.html', @@ -16,38 +24,73 @@ var Buffer = require('buffer/').Buffer; export class XeroRegComponent implements OnInit { + public owner:Owner = { + address: '', + name: '', + currency: '', + tax: false, + taxValue:0, + vat: false, + vatValue: 0, + first: '', + last: '', + email: '', + street: '', + city: '', + state: '', + postal: '', + phone: '', + paid: false, + website: '', + country: '', + zats: false, + invoices: false, + expiration: new Date(Date.now()).toISOString(), + payconf: false, + viewkey: '' + }; + public ownerUpdate:Observable; + public flag: boolean = false; + - clientId: string = ''; - clientSecret: string = ''; - xeroToken: any; - clientIdUpdate: Observable; - clientSecretUpdate: Observable; - tokenUpdate: Observable; constructor( public xeroService: XeroService, + public userService: UserService, + private router: Router, private activatedRoute: ActivatedRoute ) { - this.tokenUpdate = xeroService.tokenUpdate; - this.clientIdUpdate = xeroService.clientIdUpdate; - xeroService.getXeroConfig(); - this.clientIdUpdate.subscribe(clientId => { - this.clientId = clientId; - }); - this.clientSecretUpdate = xeroService.clientSecretUpdate; - this.clientSecretUpdate.subscribe(clientSecret => { - this.clientSecret = clientSecret; + this.ownerUpdate = userService.ownerUpdate; + this.ownerUpdate.subscribe((owner) => { + this.owner = owner; }); + this.userService.findUser(); } ngOnInit(): void { - this.activatedRoute.queryParams.subscribe((params) => { - console.log(params); - this.xeroService.getXeroAccessToken(params.code) - this.tokenUpdate.subscribe(token => { - console.log(token); - this.xeroToken = token; + } + + ngAfterViewInit(): void { + this.ownerUpdate.subscribe((owner) => { + this.owner = owner; + this.activatedRoute.queryParams.subscribe((params) => { + console.log(params); + if (params.state === this.owner.address.substring(0,6)) { + this.xeroService.getXeroAccessToken(params.code, this.owner.address).subscribe(tokenData => { + if (tokenData.status == 200) { + console.log(tokenData.body!); + this.flag = true; + redirect(this.router); + } else { + console.log('Error: '+tokenData.status); + this.flag = false; + } + }); + } else { + console.log('Error: State mismatch'); + } }); + }); }