PowerOn/service-teams-browser-bot
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use exact selectors for hybrid auth flow (Teams inline modal + MS login portal)

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ValueOn AG 2026-02-16 14:59:24 +01:00
parent 1720735035
commit f7dec141fc
1 changed files with 170 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

285
src/bot/authProcedure.ts
View file

@ -3,21 +3,21 @@ import { Logger } from 'winston';
/** /**
* AuthProcedure - Handles Microsoft account authentication in the browser. * AuthProcedure - Handles Microsoft account authentication in the browser.
* *
* The login flow when clicking "Sign in" on the Teams pre-join page is a HYBRID: * The HYBRID login flow (when clicking "Sign in" on Teams pre-join page):
* *
* 1. Teams shows an INLINE MODAL on the light-meetings page (no URL change): * 1. Teams shows an INLINE MODAL on the light-meetings page (no URL change)
* - Email input: input#emailOrPhonerm (type="text", data-testid="emailInput") * - Email input: input#emailOrPhonerm [data-testid="emailInput"]
* - Next button: button[data-testid="authLoginDialogNextButton"] (starts disabled!) * - Next button: button[data-testid="authLoginDialogNextButton"] (enabled after email entered)
* *
* 2. After clicking Next, Teams REDIRECTS to login.microsoftonline.com: * 2. After clicking Next, Teams REDIRECTS to login.microsoftonline.com
* - Password input: input#i0118 (name="passwd", type="password") * - Password input: input#i0118 [name="passwd", type="password"]
* - Sign in button: input#idSIButton9 (type="submit", value="Sign in") * - Sign in button: input#idSIButton9 [type="submit", value="Sign in"]
* *
* 3. "Stay signed in?" prompt on login.microsoftonline.com: * 3. "Stay signed in?" prompt on login.microsoftonline.com
* - Yes button: input#idSIButton9 (value="Yes") * - Yes button: input#idSIButton9
* *
* 4. Redirect chain back to teams.microsoft.com/v2/ with "Join now" button. * 4. Redirect chain → teams.microsoft.com/v2/ with "Join now" button
*/ */
const _LOGIN_URL = 'https://login.microsoftonline.com'; const _LOGIN_URL = 'https://login.microsoftonline.com';
@ -31,6 +31,13 @@ export class AuthProcedure {
this._logger = logger; this._logger = logger;
} }
/**
* Authenticate with Microsoft using email + password.
*
* @param skipNavigation - When true, handles the hybrid inline modal flow
* (email on Teams page, then redirect to MS login for password).
* @returns true if authentication was successful, false otherwise
*/
async authenticateWithMicrosoft(email: string, password: string, skipNavigation = false): Promise<boolean> { async authenticateWithMicrosoft(email: string, password: string, skipNavigation = false): Promise<boolean> {
try { try {
this._logger.info(`Authenticating as ${email}...`); this._logger.info(`Authenticating as ${email}...`);
@ -42,41 +49,50 @@ export class AuthProcedure {
timeout: 30000, timeout: 30000,
}); });
} else { } else {
this._logger.info('Inline auth flow: waiting for Teams login modal...'); this._logger.info('Hybrid auth flow: waiting for Teams inline email modal...');
} }
// Step 1: Wait for email input // Step 1: Enter email
// In the hybrid flow, this is the Teams inline modal (input#emailOrPhonerm).
// In the direct flow, this is the MS login portal (input[name="loginfmt"]).
const emailInput = await this._waitForEmailInput(skipNavigation); const emailInput = await this._waitForEmailInput(skipNavigation);
if (!emailInput) { if (!emailInput) {
return false; return false;
} }
// Step 2: Enter email
await emailInput.fill(email); await emailInput.fill(email);
this._logger.info('Email entered'); this._logger.info('Email entered');
// Step 3: Click Next // Step 2: Click Next
// In the hybrid flow: button[data-testid="authLoginDialogNextButton"]
// The button is disabled until email is entered, so we wait for it to be enabled.
// In the direct flow: input[type="submit"] on the MS login page.
await this._clickNextButton(skipNavigation); await this._clickNextButton(skipNavigation);
// Step 4: Wait for password input (on login.microsoftonline.com after redirect) // Step 3: Wait for password input
// After clicking Next in the Teams modal, it REDIRECTS to login.microsoftonline.com.
// The password field is on the MS login portal: input#i0118 [name="passwd"]
// We need a longer timeout because the redirect takes time.
const passwordInput = await this._waitForPasswordInput(); const passwordInput = await this._waitForPasswordInput();
if (!passwordInput) { if (!passwordInput) {
return false; return false;
} }
// Step 5: Enter password and click Sign in // Step 4: Enter password and click Sign in
await passwordInput.fill(password); await passwordInput.fill(password);
this._logger.info('Password entered'); this._logger.info('Password entered');
await this._clickSignInButton(); await this._clickSignInButton();
await this._page.waitForTimeout(3000); await this._page.waitForTimeout(3000);
// Step 6: Check for MFA // Step 5: Check for MFA
if (await this._detectMfa()) { const mfaDetected = await this._detectMfa();
if (mfaDetected) {
this._logger.error('MFA prompt detected - cannot authenticate automatically.'); this._logger.error('MFA prompt detected - cannot authenticate automatically.');
return false; return false;
} }
// Step 7: Check for password error // Step 6: Check for password error
const pwdError = await this._page.$('#passwordError'); const pwdError = await this._page.$('#passwordError');
if (pwdError) { if (pwdError) {
const errorText = await pwdError.textContent(); const errorText = await pwdError.textContent();
@ -84,7 +100,7 @@ export class AuthProcedure {
return false; return false;
} }
// Step 8: Handle "Stay signed in?" prompt // Step 7: Handle "Stay signed in?" prompt
await this._handleStaySignedIn(); await this._handleStaySignedIn();
this._logger.info(`Successfully authenticated as ${email}`); this._logger.info(`Successfully authenticated as ${email}`);
@ -94,7 +110,7 @@ export class AuthProcedure {
const errorMessage = String(error); const errorMessage = String(error);
if (errorMessage.includes('Execution context was destroyed') || if (errorMessage.includes('Execution context was destroyed') ||
errorMessage.includes('execution context')) { errorMessage.includes('execution context')) {
this._logger.info('Page navigated during auth (context destroyed) - treating as success'); this._logger.info('Page navigated during auth (execution context destroyed) - treating as success');
return true; return true;
} }
this._logger.error(`Authentication failed: ${error}`); this._logger.error(`Authentication failed: ${error}`);
@ -102,109 +118,136 @@ export class AuthProcedure {
} }
} }
private async _waitForEmailInput(isInlineModal: boolean) { /**
* Wait for the email input field.
*
* Hybrid flow: Teams inline modal has input#emailOrPhonerm [data-testid="emailInput"]
* Direct flow: MS login portal has input[name="loginfmt"]
*/
private async _waitForEmailInput(isInlineFlow: boolean) {
this._logger.info('Waiting for email input field...'); this._logger.info('Waiting for email input field...');
if (isInlineModal) { // Primary selectors — exact IDs/attributes from the real HTML
try { const selectors = isInlineFlow
const element = await this._page.waitForSelector( ? [
'input[data-testid="emailInput"], input#emailOrPhonerm', 'input#emailOrPhonerm', // Teams inline modal (exact ID)
{ timeout: 20000, state: 'visible' } 'input[data-testid="emailInput"]', // Teams inline modal (data-testid)
); 'input[placeholder="Enter your email"]', // Teams inline modal (placeholder)
if (element) { ]
this._logger.info('Found Teams inline modal email input (data-testid="emailInput")'); : [
return element; 'input[name="loginfmt"]', // MS login portal
} 'input[type="email"]', // MS login portal fallback
} catch { ];
this._logger.warn('Teams inline modal email input not found');
await this._logPageState('inline modal email input not found'); const combinedSelector = selectors.join(', ');
}
}
try { try {
const element = await this._page.waitForSelector( const element = await this._page.waitForSelector(combinedSelector, {
'input[name="loginfmt"], input[type="email"]', timeout: 30000,
{ timeout: 15000, state: 'visible' } state: 'visible',
});
const matchedInfo = await element?.evaluate(el =>
`${el.tagName}[id=${el.id}, type=${el.getAttribute('type')}, placeholder=${el.getAttribute('placeholder')}]`
); );
if (element) { this._logger.info(`Found email input: ${matchedInfo}`);
this._logger.info('Found MS login portal email input'); return element;
return element;
}
} catch { } catch {
await this._logPageState('email input not found (all selectors failed)'); await this._logPageState('email input not found');
this._logger.error('Could not find email input field');
return null;
} }
this._logger.error('Could not find email input field');
return null;
} }
/**
* Click the "Next" button after entering email.
*
* Hybrid flow: button[data-testid="authLoginDialogNextButton"] — initially disabled,
* becomes enabled after email is typed. We wait for it to be enabled.
* Direct flow: input[type="submit"] on the MS login portal.
*/
private async _clickNextButton(isInlineFlow: boolean): Promise<void> {
if (isInlineFlow) {
// Teams inline modal: wait for the Next button to become enabled
const nextSelector = 'button[data-testid="authLoginDialogNextButton"]';
this._logger.info('Waiting for Teams Next button to become enabled...');
try {
await this._page.waitForSelector(`${nextSelector}:not([disabled])`, {
timeout: 10000,
state: 'visible',
});
await this._page.click(nextSelector);
this._logger.info('Clicked Teams Next button');
// After clicking Next, Teams redirects to login.microsoftonline.com
// Wait for the redirect to begin
await this._page.waitForTimeout(3000);
} catch {
this._logger.warn('Teams Next button not found or not enabled, pressing Enter');
await this._page.keyboard.press('Enter');
await this._page.waitForTimeout(3000);
}
} else {
// MS login portal: click submit button
const selectors = [
'input[type="submit"]',
'button[type="submit"]',
];
for (const selector of selectors) {
try {
const button = await this._page.$(selector);
if (button && await button.isVisible()) {
await button.click();
this._logger.info(`Clicked Next: ${selector}`);
await this._page.waitForTimeout(2000);
return;
}
} catch {
// Continue
}
}
this._logger.warn('No Next button found, pressing Enter');
await this._page.keyboard.press('Enter');
await this._page.waitForTimeout(2000);
}
}
/**
* Wait for the password input field on login.microsoftonline.com.
*
* After entering email in the Teams inline modal and clicking Next,
* Teams redirects to login.microsoftonline.com where the password field is:
* input#i0118 [name="passwd", type="password"]
*
* Timeout is generous (30s) because the redirect can take time.
*/
private async _waitForPasswordInput() { private async _waitForPasswordInput() {
this._logger.info('Waiting for password input field...'); this._logger.info('Waiting for password input field (may involve redirect to login.microsoftonline.com)...');
try { try {
const element = await this._page.waitForSelector( const element = await this._page.waitForSelector(
'input[name="passwd"], input#i0118, input[type="password"]', 'input#i0118, input[name="passwd"], input[type="password"]',
{ timeout: 20000, state: 'visible' } { timeout: 30000, state: 'visible' }
); );
const url = this._page.url(); const url = this._page.url();
this._logger.info(`Found password input on URL: ${url.substring(0, 80)}`); this._logger.info(`Found password input on URL: ${url.substring(0, 80)}`);
return element; return element;
} catch { } catch {
await this._logPageState('password input not found'); await this._logPageState('password input not found');
this._logger.error('Could not find password input field');
return null;
} }
this._logger.error('Could not find password input field');
return null;
}
private async _clickNextButton(isInlineModal: boolean): Promise<void> {
if (isInlineModal) {
const teamsNextSelector = 'button[data-testid="authLoginDialogNextButton"]';
try {
await this._page.waitForSelector(
`${teamsNextSelector}:not([disabled])`,
{ timeout: 10000, state: 'visible' }
);
await this._page.click(teamsNextSelector);
this._logger.info('Clicked Teams inline modal Next button');
await this._page.waitForTimeout(3000);
return;
} catch {
this._logger.warn('Teams inline modal Next button not found/enabled, trying fallbacks...');
}
}
const selectors = [
'input[type="submit"]',
'button[type="submit"]',
'button:has-text("Next")',
'button:has-text("Weiter")',
];
for (const selector of selectors) {
try {
const button = await this._page.$(selector);
if (button && await button.isVisible()) {
await button.click();
this._logger.info(`Clicked Next: ${selector}`);
await this._page.waitForTimeout(2000);
return;
}
} catch {
// Continue
}
}
this._logger.warn('No Next button found, pressing Enter');
await this._page.keyboard.press('Enter');
await this._page.waitForTimeout(2000);
} }
/**
* Click the "Sign in" button on login.microsoftonline.com.
*
* The button is: input#idSIButton9 [type="submit", value="Sign in"]
*/
private async _clickSignInButton(): Promise<void> { private async _clickSignInButton(): Promise<void> {
const selectors = [ const selectors = [
'input#idSIButton9', 'input#idSIButton9', // MS login portal (exact ID)
'input[type="submit"]', 'input[type="submit"][value="Sign in"]', // MS login portal (value)
'button[type="submit"]', 'input[type="submit"][value="Anmelden"]', // MS login portal (German)
'button:has-text("Sign in")', 'input[type="submit"]', // Generic fallback
'button:has-text("Anmelden")', 'button[type="submit"]', // Alternative
]; ];
for (const selector of selectors) { for (const selector of selectors) {
@ -219,11 +262,13 @@ export class AuthProcedure {
// Continue // Continue
} }
} }
this._logger.warn('No Sign in button found, pressing Enter'); this._logger.warn('No Sign in button found, pressing Enter');
await this._page.keyboard.press('Enter'); await this._page.keyboard.press('Enter');
} }
/**
* Detect MFA prompts (authenticator app, SMS, phone call).
*/
private async _detectMfa(): Promise<boolean> { private async _detectMfa(): Promise<boolean> {
const mfaSelectors = [ const mfaSelectors = [
'#idDiv_SAOTCAS_Description', '#idDiv_SAOTCAS_Description',
@ -233,11 +278,15 @@ export class AuthProcedure {
'text=Approve sign in request', 'text=Approve sign in request',
'text=Enter code', 'text=Enter code',
'text=Verify your identity', 'text=Verify your identity',
'text=Approve sign-in request',
]; ];
for (const selector of mfaSelectors) { for (const selector of mfaSelectors) {
try { try {
if (await this._page.$(selector)) return true; const element = await this._page.$(selector);
if (element) {
return true;
}
} catch { } catch {
// Continue // Continue
} }
@ -245,9 +294,13 @@ export class AuthProcedure {
return false; return false;
} }
/**
* Handle the "Stay signed in?" prompt.
* Button: input#idSIButton9 [value="Yes"]
*/
private async _handleStaySignedIn(): Promise<void> { private async _handleStaySignedIn(): Promise<void> {
try { try {
const selectors = [ const staySignedInSelectors = [
'input#idSIButton9', 'input#idSIButton9',
'button#idSIButton9', 'button#idSIButton9',
'input[value="Yes"]', 'input[value="Yes"]',
@ -256,7 +309,7 @@ export class AuthProcedure {
'button:has-text("Ja")', 'button:has-text("Ja")',
]; ];
for (const selector of selectors) { for (const selector of staySignedInSelectors) {
try { try {
const button = await this._page.$(selector); const button = await this._page.$(selector);
if (button) { if (button) {
@ -275,19 +328,21 @@ export class AuthProcedure {
} }
} }
/**
* Log current page state for debugging.
*/
private async _logPageState(context: string): Promise<void> { private async _logPageState(context: string): Promise<void> {
try { try {
const url = this._page.url(); const url = this._page.url();
const title = await this._page.title(); const title = await this._page.title();
const inputs = await this._page.evaluate(() => { const inputs = await this._page.evaluate(() => {
const allInputs = document.querySelectorAll('input'); const allInputs = document.querySelectorAll('input');
return Array.from(allInputs).map(i => { return Array.from(allInputs).map(i =>
const tid = i.getAttribute('data-testid') || ''; `${i.tagName}[id=${i.id}, type=${i.type}, name=${i.name}, placeholder=${i.placeholder}]`
return `[type=${i.type},name=${i.name},id=${i.id},ph=${i.placeholder},tid=${tid}]`; ).join(', ');
}).join(', ');
}); });
this._logger.warn(`Page state (${context}): URL=${url.substring(0, 100)}, Title=${title}`); this._logger.warn(`Page state (${context}): URL=${url.substring(0, 100)}, Title=${title}`);
this._logger.warn(`Inputs: ${inputs.substring(0, 400)}`); this._logger.warn(`Inputs on page: ${inputs.substring(0, 500)}`);
} catch (err) { } catch (err) {
this._logger.warn(`Could not log page state: ${err}`); this._logger.warn(`Could not log page state: ${err}`);
} }