Javascript 移动设备上“MS团队”选项卡中的身份验证

我遇到了移动设备上microsoftTeams.authentication.authenticate（）的问题。通过调用该函数，一个新的选项卡将在我的浏览器窗口中打开，而不是在团队内部（在桌面设备上，它将作为弹出窗口打开，并且一切正常）。因此，应用程序在浏览器环境中打开，身份验证过程中断。授权成功后，是否有可能让我回到团队？我很困惑。任何帮助都会很好！谢谢大家!

async teamsLogin () {
  return new Promise((resolve, reject) => {
    microsoftTeams.initialize(() => {
      microsoftTeams.authentication.authenticate({
        url: process.env.VUE_APP_ORIGIN + '/auth/teams-auth',
        width: 600,
        height: 535,
        successCallback: res => this.afterLoginProcess(res.accessToken, res.expiresIn),
        failureCallback: e => {
          console.log('failure callback', e)
          reject(e)
        }
      })
    })
})

。 TeamsAuth.vue

mounted () {
  microsoftTeams.initialize(() => {
    microsoftTeams.getContext(function (context: any) {
      const state = _guid()
      localStorage.setItem('simple.state', state)
      localStorage.removeItem('simple.error')
      // Go to the Azure AD authorization endpoint
      const queryParams = {
        client_id: process.env.VUE_APP_CLIENT_ID,
        response_type: 'token',
        response_mode: 'fragment',
        scope: `api://${process.env.VUE_APP_WEB_API_CLIENT_ID}/access_as_user`,
        redirect_uri: process.env.VUE_APP_ORIGIN + '/auth/teams-auth-end',
        nonce: _guid(),
        state: state,
        login_hint: context.loginHint
      }

    const authorizeEndpoint = `https://login.microsoftonline.com/${context.tid}/oauth2/v2.0/authorize?${toQueryString(queryParams)}`
    window.location.assign(authorizeEndpoint)
  })
})}

  mounted () {
microsoftTeams.initialize(() => {
  const hashParams = window.location.hash.split('#/')[1]
    .split('&')
    .map(p => p.split('='))
    .reduce((acc, [k, v]) => {
      acc[k.replace('/', '')] = v
      return acc
    }, {} as any)

  if (hashParams.error) {
    microsoftTeams.authentication.notifyFailure(hashParams.error)
  } else if (hashParams.access_token) {
    const expectedState = localStorage.getItem('simple.state')
    if (expectedState !== hashParams.state) {
      microsoftTeams.authentication.notifyFailure('StateDoesNotMatch')
    } else {
      // Success: return token information to the tab
      microsoftTeams.authentication.notifySuccess({
        idToken: hashParams.id_token,
        accessToken: hashParams.access_token,
        tokenType: hashParams.token_type,
        expiresIn: hashParams.expires_in
      } as any)
    }
  } else {
    // Unexpected condition: hash does not contain error or access_token parameter
    microsoftTeams.authentication.notifyFailure({
      reason: 'UnexpectedFailure',
      str: window.location.hash,
      data: hashParams
    } as any as string)
  }
  window.close()
})

。 TeamsAuthEnd.vue

mounted () {
  microsoftTeams.initialize(() => {
    microsoftTeams.getContext(function (context: any) {
      const state = _guid()
      localStorage.setItem('simple.state', state)
      localStorage.removeItem('simple.error')
      // Go to the Azure AD authorization endpoint
      const queryParams = {
        client_id: process.env.VUE_APP_CLIENT_ID,
        response_type: 'token',
        response_mode: 'fragment',
        scope: `api://${process.env.VUE_APP_WEB_API_CLIENT_ID}/access_as_user`,
        redirect_uri: process.env.VUE_APP_ORIGIN + '/auth/teams-auth-end',
        nonce: _guid(),
        state: state,
        login_hint: context.loginHint
      }

    const authorizeEndpoint = `https://login.microsoftonline.com/${context.tid}/oauth2/v2.0/authorize?${toQueryString(queryParams)}`
    window.location.assign(authorizeEndpoint)
  })
})}

  mounted () {
microsoftTeams.initialize(() => {
  const hashParams = window.location.hash.split('#/')[1]
    .split('&')
    .map(p => p.split('='))
    .reduce((acc, [k, v]) => {
      acc[k.replace('/', '')] = v
      return acc
    }, {} as any)

  if (hashParams.error) {
    microsoftTeams.authentication.notifyFailure(hashParams.error)
  } else if (hashParams.access_token) {
    const expectedState = localStorage.getItem('simple.state')
    if (expectedState !== hashParams.state) {
      microsoftTeams.authentication.notifyFailure('StateDoesNotMatch')
    } else {
      // Success: return token information to the tab
      microsoftTeams.authentication.notifySuccess({
        idToken: hashParams.id_token,
        accessToken: hashParams.access_token,
        tokenType: hashParams.token_type,
        expiresIn: hashParams.expires_in
      } as any)
    }
  } else {
    // Unexpected condition: hash does not contain error or access_token parameter
    microsoftTeams.authentication.notifyFailure({
      reason: 'UnexpectedFailure',
      str: window.location.hash,
      data: hashParams
    } as any as string)
  }
  window.close()
})

---

}

我还在我的一个应用程序中对此进行更多的研究，我认为甚至可能会有这样的情况：它在团队内部加载，有时在独立网页中加载。例如，其中说：

当前默认行为是使用您的网站URL在浏览器窗口中启动选项卡。但是，可以通过单击。。。选项卡旁边的overflow菜单并选择Open，这将使用您的contentUrl在Teams mobile客户端中加载选项卡

我认为这也可能因客户端类型（手机和平板电脑）的不同而有所不同。例如，我在安卓平板电脑上测试过同一个应用程序（设置了ContentUrl，但未设置websiteUrl），该程序显示良好，在安卓手机上测试过，但不可用）。根据（Bob German来自微软，与团队密切合作）：

这对于团队桌面客户端和web客户端来说都很好，但是移动客户端目前不支持团队弹出窗口。在移动客户端中，标签只是一个普通的网页；因此，可以直接进行MSAL调用。该示例通过提供直接调用MSAL的选项卡的第二个版本来处理此问题

您可以在组件中看到这是如何工作的；它首先检查重定向，然后查看它是否在IFrame中。如果在IFrame中，则呈现Tab.js，该选项卡使用Teams弹出窗口；如果不是，它将呈现Web.js，而Web.js不会

---

我自己仍在研究这个问题，但在此期间可能会对您有所帮助。

根据我的经验，这取决于您支持哪种登录方法。如果您还计划在需要重定向到IPs页面的地方使用某些SSO，那么最终将为移动客户端和桌面使用两种不同的流。问题在于团队选项卡实现在iFrame中呈现的方式不同。移动客户端使用本机视图，而桌面web app和本机客户端使用iFrame呈现选项卡的内容。在iFrame中显示您的登录页面不是很安全，在我看来，这应该避免。

---

这就是为什么您应该在本机移动应用程序（选项卡->登录页->选项卡）上执行重定向流，并在桌面上执行弹出流（标准浏览器中的web客户端、本机客户端和分离的选项卡视图）。

非常感谢各位的回复！我们可能会授权用户在后端使用MS services，以避免出现任何登录弹出窗口或重定向：）

Hi@Viktor Romanyuk，我们正在进行此项工作，不久将共享更新。