Okta OktaSignIn Widget获取refresh token及使用方法咨询

1. 是否可以通过OktaSignIn获取refresh token？ #

可以，只要配置正确就能正常获取refresh token。

2. 如何在OktaSignIn中使用refresh token完成令牌刷新？ #

前置配置 #

• 进入Okta管理后台，找到当前使用的对应clientId的OIDC应用，在「General」标签的「Grant type」配置项中，勾选「Refresh Token」权限
• 进入你代码中使用的/oauth2/default默认授权服务器的访问策略配置，确认策略允许使用refresh token

代码调整 #

你现有的配置已经添加了offline_access scope（获取refresh token的必填项），只需要补充调整配置即可：

let oktaSignIn = new OktaSignIn({
      baseUrl: 'https://dev-xyz.okta.com',
      logo: '../img/hello.png',
      clientId: '0oa11nSOMETEXTudr5d7',  
      // 嵌入式非跳转登录模式可省略redirectUri，跳转回调模式才需要配置
      redirectUri: 'http://localhost:5000/login/callback', 
      // 新增token自动刷新配置
      tokenManager: {
        autoRenew: true, // 开启token过期前自动刷新
        expireEarlySeconds: 30 // 提前30秒刷新token，避免请求时token刚好过期
      },
      authParams: {
          issuer: 'https://dev-xyz.okta.com/oauth2/default',
          // 新增refresh_token到responseType
          responseType: ['id_token', 'token', 'refresh_token'],
          scopes: ['openid', 'offline_access'],
          // 生产环境建议开启PKCE授权码流，安全性更高
          // pkce: true
      }
  });

  oktaSignIn.renderEl({
      el: '#widget-container'
  }, function success(res) {
      if (res.status === 'SUCCESS') {
        // 将所有返回的token存入widget内置的tokenManager，自动刷新依赖该存储
        Object.values(res.tokens).forEach(token => {
          oktaSignIn.tokenManager.add(token.type, token);
        });

        // 后续取access token直接从tokenManager获取，自动刷新后会返回最新有效token
        const accessToken = oktaSignIn.tokenManager.get('accessToken').accessToken;
        // 此处调用你自己的业务API即可
      }
  })

手动刷新方案 #

如果关闭了自动刷新，需要主动触发刷新时调用renew方法即可，内部会自动调用refresh token接口换取新令牌：

oktaSignIn.tokenManager.renew('accessToken')
  .then(newAccessToken => {
    // 刷新成功，拿到新的access token使用
  })
  .catch(err => {
    // 刷新失败，一般是refresh token也已过期，引导用户重新登录即可
    oktaSignIn.showSignInToGetTokens({el: '#widget-container'});
  })

内容的提问来源于stack exchange，提问作者user3792705