모바일의 MS 팀 내 인증 탭

모바일의 MS 팀 내 인증 탭

나는 마이크로소프트의 문제를 계속 안고 있다.Teams.인증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)
  })
})}

. TeamsAuthEnd.표시하다

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

}

또한 앱 중 하나를 위해 더 자세히 알아보고 있습니다. 팀 내에 로드하는 경우와 독립 실행형 웹 페이지에 로드하는 경우가 있을 수 있습니다.예를 들어, 이 문서에는 다음과 같이 기술되어 있습니다.

기본 동작은 현재 websiteUrl을 사용하여 브라우저 창에서 탭을 실행하는 것입니다.단, [...]를 클릭하여 모바일클라이언트에 로드할 수 있습니다.탭 옆에 있는 overflow 메뉴를 선택하고 Open을 선택합니다.이 메뉴에서는 contentUrl을 사용하여 Teams 모바일클라이언트 내에 탭을 로드합니다.

또, 클라이언트 타입(휴대폰과 태블릿)에 따라서도 다를 수 있다고 생각합니다.예를 들어 Android 태블릿과 Android 폰에서 동일한 앱(ContentUrl은 설정되어 있지만 websiteUrl은 설정되어 있지 않음)을 테스트했습니다.이 블로그에 따르면 (Bob German은 Microsoft의 제품으로 팀과 긴밀히 협력하고 있습니다)

이는 팀 데스크톱 및 웹 클라이언트에게 모두 도움이 되지만 모바일 클라이언트는 현재 팀 팝업을 지원하지 않습니다.모바일 클라이언트에서는 탭은 일반 웹 페이지일 뿐이므로 MSAL 콜은 직접 실행할 수 있습니다.이 예에서는 MSAL을 직접 호출하는 두 번째 버전의 탭을 제공하여 이 문제를 처리합니다.

app.js 컴포넌트에서 어떻게 동작하는지 확인할 수 있습니다.먼저 리다이렉트를 확인한 후 IFrame에 있는지 확인합니다.IFrame에 있는 경우 Tab.js를 렌더링하고, 그렇지 않은 경우 Web.js를 렌더링하지만 그렇지 않은 경우 Web.js는 렌더링하지 않습니다.

아직 알아보고 있지만, 그 사이에 도움이 될 수도 있을 것 같아요.

제 경험으로는 어떤 로그인 방법을 지원하느냐에 따라 다릅니다.IP 페이지로 리다이렉트 할 필요가 있는 SSO도 사용할 예정이라면 모바일클라이언트 및 데스크톱에2개의 다른 플로우가 사용됩니다.문제는 팀 탭 구현이 iFrame으로 렌더링되는 점에서 다르다는 것입니다.모바일 클라이언트는 네이티브 뷰를 사용하고 데스크톱 웹 앱과 네이티브 클라이언트는 iFrame을 사용하여 Tab의 콘텐츠를 렌더링합니다.iFrame에서 로그인 페이지를 표시하는 것은 매우 안전하지 않으므로 IMO는 피해야 합니다.따라서 네이티브 모바일 앱(탭 -> 로그인 페이지 -> 탭)에서 리다이렉트 플로우를 실행하고 데스크톱(표준 브라우저에서는 웹 클라이언트, 네이티브 클라이언트 및 분리된 탭 뷰)에서 팝업 플로우를 실행해야 합니다.

답장 고마워요 여러분!로그인 팝업 또는 리다이렉트를 피하기 위해 백엔드에서 MS 서비스를 사용하는 사용자에게 권한을 부여할 수 있습니다.

언급URL : https://stackoverflow.com/questions/67074927/authentication-in-ms-teams-tab-on-mobile