Skip to content

Instantly share code, notes, and snippets.

@balvinder294
Last active March 22, 2023 10:19
Show Gist options
  • Save balvinder294/882548c0a74e54dcaa3cdeae2cbf17d8 to your computer and use it in GitHub Desktop.
Save balvinder294/882548c0a74e54dcaa3cdeae2cbf17d8 to your computer and use it in GitHub Desktop.
Popup window for Oauth Login
// authorization code and tokens
authorizationCode: string;
oAuthToken: string;
oAuthVerifier: string;
// popup related
private windowHandle: Window; // reference to the window object we will create
private intervalId: any = null; // For setting interval time between we check for authorization code or token
private loopCount = 600; // the count until which the check will be done, or after window be closed automatically.
private intervalLength = 100; // the gap in which the check will be done for code.
doAuthorization(url: string, socialMediaProvider: string, isRegisterAction: boolean) {
/* isRegisterAction flag i am using to check if the process is for registration or Login */
/* socialMediaProvider is for name of social media , it is optional*/
let loopCount = this.loopCount;
/* Create the window object by passing url and optional window title */
this.windowHandle = this.createOauthWindow(authorizationUrl, 'OAuth login');
/* Now start the timer for which the window will stay, and after time over window will be closed */
this.intervalId = window.setInterval(() => {
if (loopCount-- < 0) {
window.clearInterval(this.intervalId);
this.windowHandle.close();
} else {
let href: string; // For referencing window url
try {
href = this.windowHandle.location.href; // set window location to href string
} catch (e) {
// console.log('Error:', e); // Handle any errors here
}
if (href != null) {
// Method for getting query parameters from query string
const getQueryString = function(field: any, url: string) {
const windowLocationUrl = url ? url : href;
const reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
const string = reg.exec(windowLocationUrl);
return string ? string[1] : null;
};
/* As i was getting code and oauth-token i added for same, you can replace with your expected variables */
if (href.match('code')) {
// for google , fb, github, linkedin
window.clearInterval(this.intervalId);
this.authorizationCode = getQueryString('code', href);
this.windowHandle.close();
if (isRegisterAction) {
/* call signup method */
} else {
/* call login method */
}
} else if (href.match('oauth_token')) {
// for twitter
window.clearInterval(this.intervalId);
this.oAuthToken = getQueryString('oauth_token', href);
this.oAuthVerifier = getQueryString('oauth_verifier', href);
this.windowHandle.close();
if (isRegisterAction) {
/* call signup */
} else {
/* call login */
}
}
}
}
}, this.intervalLength);
}
createOauthWindow(url: string, name = 'Authorization', width = 500, height = 600, left = 0, top = 0) {
if (url == null) {
return null;
}
const options = `width=${width},height=${height},left=${left},top=${top}`;
return window.open(url, name, options);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment