javascript - ReactJS - 使用 iframe 静默更新 token

Question

我的 SPA 有一个工作组件，用于获取访问 token ，该 token 将被加密并通过 props 传递给其他组件。就是这样:

import React, { Component } from 'react';
//import { Redirect } from 'react-router-dom';
import axios from 'axios';
import Credentials from './spotify-auth.js'
import './Spotify.css'


class SpotifyAuth extends Component {  
  constructor (props) {
    super(props);
    this.state = {
      isAuthenticatedWithSpotify: false,
    };
    this.state.handleRedirect = this.handleRedirect.bind(this);
  };

  generateRandomString(length) {
    let text = '';
    const possible =
      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (let i = 0; i < length; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
    } 

  getHashParams() {
    const hashParams = {};
    const r = /([^&;=]+)=?([^&;]*)/g;
    const q = window.location.hash.substring(1);
    let e = r.exec(q);
    while (e) {
      hashParams[e[1]] = decodeURIComponent(e[2]);
      e = r.exec(q);
    }
    return hashParams;
  }

  componentDidMount() {
    //if (this.props.isAuthenticated) {
    const params = this.getHashParams();

    const access_token = params.access_token;
    const state = params.state;
    const storedState = localStorage.getItem(Credentials.stateKey);
    localStorage.setItem('spotifyAuthToken', access_token);
    localStorage.getItem('spotifyAuthToken');

    if (window.localStorage.getItem('authToken')) {
      this.setState({ isAuthenticatedWithSpotify: true });
    };
    if (access_token && (state == null || state !== storedState)) {
      alert('Click "ok" to finish authentication with Spotify');
    } else {
      localStorage.removeItem(Credentials.stateKey);
    }
    // DO STUFF WITH ACCEES TOKEN HERE
    this.props.onConnectWithSpotify(access_token); 
  };

  handleRedirect(event) {
    event.preventDefault()
    this.props.createMessage('You linked your Spotify account!', 'success');
    // get client features at authenticating
    const params = this.getHashParams();
    const access_token = params.access_token;
    console.log(access_token);

    const state = this.generateRandomString(16);
    localStorage.setItem(Credentials.stateKey, state);

    let url = 'https://accounts.spotify.com/authorize';
    url += '?response_type=token';
    url += '&client_id=' + encodeURIComponent(Credentials.client_id);
    url += '&scope=' + encodeURIComponent(Credentials.scope);
    url += '&redirect_uri=' + encodeURIComponent(Credentials.redirect_uri);
    url += '&state=' + encodeURIComponent(state);
    window.location = url; 
  };

  render() {
      return (
        <div className="button_container">
        <h1 className="title is-3"><font color="#C86428">{"Welcome"}</font></h1>
            <div className="Line" /><br/>
              <button className="sp_button" onClick={(event) => this.handleRedirect(event)}>
                <strong>LINK YOUR SPOTIFY ACCOUNT</strong>
              </button>
        </div>
      )
  }
}
export default SpotifyAuth;

<小时/>

此 token 凭据持续 60 分钟。

我了解到 SPA 的标准选项是使用 iframe 静默更新 token ，而根本不使用刷新 token 。

<小时/>

如何在像上面这样的 React 组件中启动 iframe 并每小时默默地获取一个新的访问 token ？我到处寻找这个，但没有找到任何东西。

Answer 1

您可以执行以下操作:

1. 创建一些观察程序函数，用于检查访问 token 的过期时间。如果 token 即将过期，则需要更新它。
2. 渲染 iframe 标记，src 应该与您用于重定向到身份验证服务器的 URL 相同，有一点不同:将返回 URL 更改为静态文件，我们称之为 redirect.html 。服务器应该从存储的 cookie 中了解调用此 URL 的用户，因此它应该只是将您重定向到 redirect.html文件，现在带有新的访问 token 。
3. 在此redirect.html编写一个简短的脚本，从 URL 中取出 token 并用本地存储中已有的 token 覆盖它。
4. 销毁 iframe。

就这样了，token更新了。保持观察者继续运行并在每次即将到期时更新(例如在到期前 5 分钟进行)。

React 中 AccessToken 组件的示例实现，大部分代码实际上都可以工作，但是您需要用您的东西替换常量。另外，一些函数如 extractTokenFromUrl缺少，但这应该很容易制作:

import React, { Component } from 'react'

export class SilentTokenRenew extends Component {
  constructor(props) {
    super(props)

    this.state = { renewing: false }
    this.currentAttempt = 0
    this.maxNumberOfAttempts = 20
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.state.renewing !== nextState.renewing
  }

  componentDidMount() {
    this.timeInterval = setInterval(this.handleCheckToken, 20000)
  }

  componentWillUnmount() {
    clearInterval(this.timeInterval)
  }

  willTokenExpire = () => {
    const token = YOUR_ACCESS_TOKEN_OBJECT // { accessToken, expirationTime }
    const threshold = 300 // 300s = 5 minute threshold for token expiration

    const hasToken = token && token.accessToken
    const now = (Date.now() / 1000) + threshold

    return !hasToken || (now > token.accessToken.expirationTime)
  }

  handleCheckToken = () => {
    if (this.willTokenExpire()) {
      this.setState({ renewing: true })
      clearInterval(this.timeInterval)
    }
  }

  silentRenew = () => {
    return new Promise((resolve, reject) => {
      const checkRedirect = () => {
        // This can be e
        const redirectUrl = localStorage[YOUR_REDIRECT_URL_FROM_THE_REDIRECT_HTML_FILE] // /redirect.html#access_token=......
        if (!redirectUrl) {
          this.currentAttempt += 1
          if (this.currentAttempt > this.maxNumberOfAttempts) {
            reject({
              message: 'Silent renew failed after maximum number of attempts.',
              short: 'max_number_of_attempts_reached',
            })
            return
          }
          setTimeout(() => checkRedirect(), 500)
          return
        }

        // Clean up your localStorage for the next silent renewal
        localStorage.removeItem(YOUR_REDIRECT_URL_FROM_THE_REDIRECT_HTML_FILE)

        // Put some more error handlers here

        // Silent renew worked as expected, lets update the access token
        const session = extractTokenFromUrl(redirectUrl) // write some function to get out the access token from the URL
        // Following your code you provided, here is the time to set
        // the extracted access token back to your localStorage under a key Credentials.stateKey
        localStorage.setItem(Credentials.stateKey, JSON.stringify(session))
        resolve(session)
      }

      checkRedirect()
    })
  }

  handleOnLoad = () => {
    this.silentRenew()
      .then(() => {
        this.setState({ renewing: false })
        this.currentAttempt = 0
        this.timeInterval = setInterval(this.handleCheckToken, 60000)
        // Access token renewed silently.
      })
      .catch(error => {
        this.setState({ renewing: false })
        // handle the errors
      })
  }

  renderIframe = () => {
    const url = new URL(YOUR_AUTHORIZE_URL_TO_TH_AUTH_SERVER)
    url.searchParams.set('redirect_uri', 'http://localhost:3000/redirect.html') // the redirect.html file location
    url.searchParams.set('prompt', 'none')

    return (
      <iframe
        style={{ width: 0, height: 0, position: 'absolute', left: 0, top: 0, display: 'none', visibility: 'hidden' }}
        width={0}
        height={0}
        title="silent-token-renew"
        src={url.href}
        onLoad={this.handleOnLoad}
      />
    )
  }

  render() {
    const { renewing } = this.state

    return renewing ? this.renderIframe() : null
  }
}

redirect.html 前面的示例代码文件:

<!DOCTYPE html>
<html>

<head>
    <title>OAuth - Redirect</title>
</head>

<body>
<p>Renewing...</p>
<script>
  // Get name of window which was set by the parent to be the unique request key
  // or if no parameter was specified, we have a silent renew from iframe
  const requestKey = YOUR_REDIRECT_URL_FROM_THE_REDIRECT_HTML_FILE;
  // Update corresponding entry with the redirected url which should contain either access token or failure reason in the query parameter / hash
  window.localStorage.setItem(requestKey, window.location.href);
  window.close();
</script>
</body>

</html>