javascript - 移动设备上的 MS Teams 选项卡中的身份验证

Question

我在移动设备上遇到了 microsoftTeams.authentication.authenticate() 的问题。通过调用该函数，在我的浏览器窗口中打开一个新选项卡，而不是在 Teams 本身中(在桌面设备上，它作为弹出窗口打开，一切正常)。因此，应用程序在浏览器环境中打开，并且身份验证过程被破坏。授权成功后是否有可能让我重新加入 Teams？我很困惑。任何帮助都会很棒!谢谢!

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

.
TeamsAuthEnd.vue

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

}

Answer 1

我还在为我的一个应用程序进行更多研究，我认为甚至可能存在将其加载到 Teams 中以及将其加载到独立网页中的情况。例如，在 this doc它说:

The default behavior is currently to use your websiteUrl to launch your tab in a browser window. However, they can be loaded on a mobile client by clicking the ... overflow menu next to the tab and choosing Open, which will use your contentUrl to load the tab inside the Teams mobile client.

而且我认为这也可能因客户端类型(手机与平板电脑)而有所不同。例如，我在 Android 平板电脑上测试了相同的应用程序(设置了 ContentUrl，但未设置 websiteUrl)，它显示正常，但在 Android 手机上，它不可用)。根据 this blog (Bob German 来自 Microsoft，与 Teams 密切合作):

This is all well and good for the Teams desktop and web clients, but the mobile clients currently don’t support the Teams pop-up. In the mobile clients, the tab is just a regular web page; hence the MSAL calls can be done directly. The sample handles this by providing a second version of the tab that calls MSAL directly.

You can see how this works in the app.js component; it first checks for a redirect and then to see if it’s in an IFrame or not. If it is in an IFrame, it renders Tab.js, which uses the Teams popup; if not, it renders Web.js, which does not.

我自己还在研究这个，但也许它可以同时帮助你。