reactjs - 3 足 OAuth 与 React 和 Redux

Question

在 React 中使用 Redux 进行 OAuth2 身份验证的可接受方法是什么？

我当前的设置涉及使用 Redux-Auth-Wrapper 包装 react 路由器组件，如果用户未经过身份验证，则分派(dispatch)一个操作，向 OAuth 提供商(本例中为 google)发出必要的外部 URL GET 请求。

OAuth2 需要随您的请求发送回调 URL，因此我设置了一个 React-router url 端点/组件，当 onComponentDidMount 触发时，它会分派(dispatch)操作来解析来自 OAuth 提供程序的返回哈希值，存储该数据存储在 redux 存储中，并将用户重定向到他们最初请求的页面，该页面存储在 OAuth 请求的 state 参数中。

这一切看起来都很老套。管理生产和开发环境之间的 OAuth2 回调 URL 也很困难。有人有一个灵活的 OAuth2 工作流程吗？

附注我需要向客户端获取身份验证 token ，以便可以使用它来发出客户端 API 请求，并使用该 token 来检查用户是否有权访问这些资源。

Answer 1

以下函数将从 Google 获取 token 和过期数据并将其存储在本地存储中。可以修改它以简单地将数据作为对象返回。

function oAuth2TokenGet() {
  // TODO: First try to get the token from sessionStorage here

  // Build the oauth request url
  const responseType = 'token';
  const clientId = 'YOUR-GOOGLE-CLIENT-ID';
  const redirectUri = 'YOUR-REDIRECT-URL';
  const scope = 'email profile';
  const prompt = 'select_account';
  const url = `https://accounts.google.com/o/oauth2/v2/auth?response_type=${responseType}&client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&prompt=${prompt}`;

  // Open a new window
  const win = window.open(url, 'name', 'height=600,width=450');
  if (win) win.focus();

  const pollTimer = window.setInterval(() => {
    try {
      if (!!win && win.location.href.indexOf(redirectUri) !== -1) {
        window.clearInterval(pollTimer);

        // Get the URL hash with your token in it
        const hash = win.location.hash;
        win.close();

        // Parse the string hash and convert to object of keys and values
        const result = hash.substring(1)
          .split('&')
          .map(i => i.split('='))
          .reduce((prev, curr) => ({
            ...prev,
            [curr[0]]: curr[1],
          }), {});

        // Calculate when the token expires and store in the result object
        result.expires_at = Date.now() + parseInt(hash.expires_in, 10);

        //  TODO: Persist result in sessionStorage here
      }
    } catch (err) {
      // do something or nothing if window still not redirected after login
    }
  }, 100);
}