Angular - Typescript - How to close window open from app during google oauth2 request

user_10691389 0
Viewed 54

I'm working on google oauth2 request code. I need to click on one button application and open a new window to start google oauth2 flow. I have a redirect uri setted as parameter. I write this function but I have this error into setInterval function:

Blocked a frame with origin from accessing a cross-origin frame

this is the function:

        oauth2SignIn() {
      // Google's OAuth 2.0 endpoint for requesting an access token
      const oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

      // Create element to open OAuth 2.0 endpoint in new window.
      let form = document.createElement('form');
      form.setAttribute('method', 'GET'); // Send as a GET request.
      form.setAttribute('target', 'previewWindow');
      form.setAttribute('id', 'googleFormAuth');
      form.setAttribute('action', oauth2Endpoint);

      // Parameters to pass to OAuth 2.0 endpoint.
      const params = {
        client_id: environment.GAPI_CLIENT_ID,
        redirect_uri: 'https://my-app/services/api/api/google/calendar/callback',
        scope: 'https://www.googleapis.com/auth/calendar.readonly',
        state: 'try_sample_request',
        response_type: 'code',
        access_type: 'offline',
        prompt: 'consent',
      };

      // Add form parameters as hidden input values.
      for (let p in params) {
        let input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', p);
        input.setAttribute('value', params[p]);
        form.appendChild(input);
      }

      // Add form to page and submit it to open the OAuth 2.0 endpoint.
      document.documentElement.appendChild(form);
      let newWin = window.open('', 'previewWindow', 'popup');
      form.submit();

      setInterval(()=> {
        if(newWin.location.href.includes('my-app') {
         newWin.close();
        }
      })
    }

My focus is to close the newWin when url changed. I have also to read the document because sometimes I have an error printed in the dom, like 401 error by the server. Is it possible to solve this problem?

angular typescript google-oauth javascript
1 Answers

Hi Andy88 I hope I am not too late,

since google has changed its authentication-mode to one-touch from Google-Identity, I was in a similar position like you. I am using as redirection URL my backend-endpoint /auth/redirected/:google to retrieve the refresh token, access token, id token ... and needed to send the access token to the client. So far so good. When the access token received at my popup I did not got out the data. As I wanted to grab the data from the popup I got the following error: Blocked a frame with origin from accessing a cross-origin frame angular. This obviously has its security reason.

Then I figured a way out, which is working. I hope it is not the worst way, if so, just let me know a better way.

From my backend I am sending an res.redirect('https://hereismyURL/login?status=200&token='+JSON.stringify(access_token));

When the popup gets redirected to this link I am looking for the params and save this to local storage. While this my waiting page has a setinterval on the localstorage variable and if the variable is set I window.close the popup, read the token and to what is needed (if authentication works -> proceed, if not -> make error handling)

I hope this helps..

user_125807240
Related