I've stuck with a problem of microsoftTeams.authentication.authenticate() on mobile devices. By calling the function, a new tab is opened in my browser window and not within Teams itself (on desktop devices it is opened as a popup and all works fine). Thus, the app is opened in the browser environment and auth process is broken. Is there any possibility to get me back into Teams after authorization has succeeded? I'm pretty confused. Any help would be great! Thank you!
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()
})
}