#StackBounty: #angular #oauth-2.0 #addeventlistener #linkedin-api How to catch events from linkedin login page buttons in pop-up in mai…

Bounty: 50

I am trying to build linkedin login feature in my angular 9 application. I used angularx-social-login npm package for google and facebook login but it can’t be used for linkedin.

So I am using linkedin api to for the login.

Code:-

authWindow: any;

linkedInLogin() {
    this.createOauthWindow();
}
    
createOauthWindow(width = 500, height = 600) {

    const clientId = 'my_client_id';
    const redirectUri = window.location.origin;
    const responseType = 'code';
    const scope = 'r_liteprofile';

    const url = `https://www.linkedin.com/oauth/v2/authorization?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=${responseType}`;

    const left = (screen.width / 2) - (width / 2);
    const top = (screen.height / 2) - (height / 2);
    const options = `directories=no, titlebar=no, toolbar=no, location=no, status=no, menubar=no, scrollbars=no, resizable=no,
         copyhistory=no, width=${width},height=${height},left=${left},top=${top}`;

    this.authWindow = window.open(url, '_blank', options);

    if (window.addEventListener) {
        window.addEventListener('message', this.handleMessage, false);            
    } else {
        (window as any).attachEvent('onmessage', this.handleMessage, false);
    }
}
    
handleMessage(event) {        
    if (event.origin !== window.location.origin) {
        this.authWindow.close();
    }
    const message = event as MessageEvent;
    const result = JSON.parse(message.data);
    // code to get access token
}    

My issue is that if I click on Cancel or Sign In on the login page in the popup, all process happens in pop-up and it redirects to my site url in the pop-up.

I want to catch the events on my main window in handleMessage function if a user clicks on Cancel in pop-up or signin in pop-up to do further process and close the popup.

Please help, I am stuck on this from last 2 days. Thanks


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.