Update Xero registration for full API integration
This commit is contained in:
parent
2eef36c33d
commit
a43c21604a
6 changed files with 91 additions and 50 deletions
|
@ -57,9 +57,11 @@
|
|||
</mat-dialog-actions>
|
||||
</mat-tab>
|
||||
<mat-tab label="Advanced">
|
||||
<a mat-raised-button color="primary" href="{{this.xeroLink}}">
|
||||
Link to Xero
|
||||
</a>
|
||||
<div align="center">
|
||||
<a mat-raised-button color="primary" href="{{this.xeroLink}}">
|
||||
Link to Xero
|
||||
</a>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
|
|
@ -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)}`
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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<string> = new BehaviorSubject(this.clientId);
|
||||
private _clientSecretUpdated: BehaviorSubject<string> = new BehaviorSubject(this.clientSecret);
|
||||
//private _clientSecretUpdated: BehaviorSubject<string> = new BehaviorSubject(this.clientSecret);
|
||||
private _tokenUpdated: BehaviorSubject<any> = new BehaviorSubject(this.xeroToken);
|
||||
public readonly clientIdUpdate: Observable<string> = this._clientIdUpdated.asObservable();
|
||||
public readonly clientSecretUpdate: Observable<string> = this._clientSecretUpdated.asObservable();
|
||||
//public readonly clientSecretUpdate: Observable<string> = this._clientSecretUpdated.asObservable();
|
||||
public readonly tokenUpdate: Observable<any> = 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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
.text {
|
||||
font-family: 'Spartan', sans-serif;
|
||||
}
|
|
@ -1 +1,6 @@
|
|||
<p>test works!</p>
|
||||
<div *ngIf="!flag" align="center" class="text">
|
||||
<h1>Connecting to Xero...</h1>
|
||||
</div>
|
||||
<div *ngIf="flag" align="center" class="text">
|
||||
<h1>Connected to Xero!</h1>
|
||||
</div>
|
||||
|
|
|
@ -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<Owner>;
|
||||
public flag: boolean = false;
|
||||
|
||||
|
||||
clientId: string = '';
|
||||
clientSecret: string = '';
|
||||
xeroToken: any;
|
||||
clientIdUpdate: Observable<string>;
|
||||
clientSecretUpdate: Observable<string>;
|
||||
tokenUpdate: Observable<any>;
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue