Angular - typescript -如何关闭窗口打开从应用程序在谷歌oauth2请求

f5emj3cl  于 2023-01-14  发布在  TypeScript
关注(0)|答案(2)|浏览(103)

我正在处理谷歌oauth2请求代码。我需要点击一个按钮应用程序,并打开一个新窗口来启动谷歌oauth2流。我有一个重定向的URI设置为参数。我写这个函数,但我有这个错误到setInterval函数:

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

这是一个函数:

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();
        }
      })
    }

我的重点是在网址改变时关闭newWin。我还必须阅读文档,因为有时我会在dom中打印错误,如服务器的401错误。有可能解决这个问题吗?

fivyi3re

fivyi3re1#

可以在setInterval中添加try/catch

setInterval(()=> {
     try {
        if(newWin.location.href.includes('my-app') {
         newWin.close();
        }
      } catch (e) {
        // somthing
      }
 })
jk9hmnmh

jk9hmnmh2#

嗨Andy 88我希望我还不算太晚
由于Google已将其身份验证模式从Google-Identity更改为One-Touch,因此我的处境与您类似。我使用后端端点/auth/redirected/:google作为重定向URL来检索刷新令牌、访问令牌id令牌...并且需要将访问令牌发送到客户端。到目前为止一切顺利。当访问令牌在我的弹出窗口接收时,我没有拿出数据。当我想从弹出窗口中获取数据时,出现以下错误:Blocked a frame with origin from accessing a cross-origin frame angular。这显然有其安全性原因。
然后我想出了一条出路,这条路正在起作用。我希望这不是最坏的办法,如果是的话,让我知道一个更好的办法。
从我的后端发送一个res.redirect('https://hereismyURL/login?status=200&token='+JSON.stringify(access_token));
当弹出窗口被重定向到此链接时,我正在查找参数并将其保存到本地存储。同时,我的等待页面在本地存储变量上有一个setinterval,如果该变量被设置为I window.close弹出窗口,则读取令牌并设置为所需的内容(如果验证有效-〉继续,如果无效-〉进行错误处理)
我希望这能帮上忙。

相关问题