diff --git a/express/code/libs/features/google-login.js b/express/code/libs/features/google-login.js new file mode 100644 index 000000000..604129314 --- /dev/null +++ b/express/code/libs/features/google-login.js @@ -0,0 +1,56 @@ +const GOOGLE_SCRIPT = 'https://accounts.google.com/gsi/client'; +const GOOGLE_ID = '530526366930-l874a90ipfkn26naa71r010u8epp39jt.apps.googleusercontent.com'; +const PLACEHOLDER = 'feds-googleLogin'; +const WRAPPER = 'feds-profile'; + +const onToken = async (getMetadata, getConfig, data) => { + const acceptedTouList = getMetadata('google-login-accepted-tou-list')?.trim(); + let destination; + try { + destination = new URL(getMetadata('google-login-redirect'))?.href || await getConfig()?.googleLoginURLCallback?.() ; + } catch { + window.lana?.log('[local] error parsing google-login-redirect', getMetadata('google-login-redirect'), { tags: 'google-login', severity: 'error' }); + } + + await window.adobeIMS.socialHeadlessSignIn({ + provider_id: 'google', + idp_token: data?.credential, + client_id: window.adobeid?.client_id, + scope: window.adobeid?.scope, + accepted_tou_list: acceptedTouList || '', + }).then(() => { + if (window.DISABLE_PAGE_RELOAD === true) return; + // Existing account + if (destination) { + window.location.assign(destination); + } else { + window.location.reload(); + } + }).catch(() => { + // New account + window.adobeIMS.signInWithSocialProvider('google', { redirect_uri: destination || window.location.href }); + }); +}; + +export default async function initGoogleLogin(loadIms, getMetadata, loadScript, getConfig) { + try { + await loadIms(); + } catch { + return; + } + if (window.adobeIMS?.isSignedInUser()) return; + + await loadScript(GOOGLE_SCRIPT); + const placeholder = document.createElement('div'); + placeholder.id = PLACEHOLDER; + document.querySelector(`.${WRAPPER}`)?.append(placeholder); + + window.google?.accounts?.id?.initialize({ + client_id: GOOGLE_ID, + callback: (data) => onToken(getMetadata, getConfig, data), + prompt_parent_id: PLACEHOLDER, + cancel_on_tap_outside: false, + auto_select: getMetadata('google-yolo-zero-tap')?.toLowerCase() === 'on', + }); + window.google?.accounts?.id?.prompt(); +} diff --git a/express/code/scripts/express-delayed.js b/express/code/scripts/express-delayed.js index cda9a8dd4..35d4eb1bf 100644 --- a/express/code/scripts/express-delayed.js +++ b/express/code/scripts/express-delayed.js @@ -3,6 +3,8 @@ import BlockMediator from './block-mediator.min.js'; let createTag; let getMetadata; let getConfig; let loadStyle; +let loadIms; let loadScript; + export function getDestination() { const pepDestinationMeta = getMetadata('pep-destination'); return pepDestinationMeta || BlockMediator.get('primaryCtaUrl') @@ -63,20 +65,32 @@ async function addJapaneseSectionHeaderSizing() { } } +async function loadGoogleLogin() { + const googleLogin = getMetadata('google-login')?.toLowerCase(); + if (window.adobeIMS?.isSignedInUser() || !['mobile', 'desktop', 'on'].includes(googleLogin)) return; + const desktopViewport = window.matchMedia('(min-width: 900px)').matches; + if (googleLogin === 'mobile' && desktopViewport) return; + if (googleLogin === 'desktop' && !desktopViewport) return; + const { default: initGoogleLogin } = await import('../libs/features/google-login.js'); + initGoogleLogin(loadIms, getMetadata, loadScript, getConfig); +}; + /** * Executes everything that happens a lot later, without impacting the user experience. */ export default async function loadDelayed() { try { await Promise.all([import(`${getLibs()}/utils/utils.js`)]).then(([utils]) => { - ({ createTag, getMetadata, getConfig, loadStyle } = utils); + ({ createTag, getMetadata, getConfig, loadStyle, loadScript, loadIms } = utils); }); addJapaneseSectionHeaderSizing(); turnContentLinksIntoButtons(); preloadSUSILight(); + loadGoogleLogin(); return null; } catch (error) { window.lana?.log(`Express-Delayed Error: ${error?.message || error?.detail || error}`, { tags: 'express-delayed', severity: 'error' }); return null; } } + diff --git a/express/code/scripts/scripts.js b/express/code/scripts/scripts.js index 133c4a0d8..0db301db4 100644 --- a/express/code/scripts/scripts.js +++ b/express/code/scripts/scripts.js @@ -363,10 +363,6 @@ async function loadPage() { const adobeHomeRedirect = createTag('meta', { name: 'adobe-home-redirect', content: 'on' }); document.head.append(adobeHomeRedirect); - const googleLoginRedirect = createTag('meta', { name: 'google-login', content: 'desktop' }); - document.head.append(googleLoginRedirect); - // end TODO remove metadata after we go live - const config = setConfig({ ...CONFIG, miloLibs }); if (getMetadata('template-search-page') === 'Y') { @@ -419,6 +415,9 @@ async function loadPage() { await loadArea(); + // Set after loadArea so milo's delayed doesn't pick it up — express-delayed owns google login + document.head.append(createTag('meta', { name: 'google-login', content: 'desktop' })); + const { fixIcons } = await import('./utils.js'); document.querySelectorAll('.section>.text').forEach((block) => fixIcons(block));