3

I have an LWC component that needs to log in via an OAuth flow before it can be used. If unauthenticated the component first redirects to an external Login page after the user clocks a button.

<template>
    <lightning-button onclick={login} slot="actions" variant="brand"></lightning-button>  
</template>

In Lightning, this perfectly works. As the same component also needs to work in Classic I wrapped it in a Visualforce page

<apex:page standardController="Case">
    <apex:includeLightning />
    <div id="lightning" />
    
    <script>
        $Lightning.use("na:MyApp", () => {
            $Lightning.createComponent("ns:login", {
            recordId : "{!Case.Id}",
            environment : "classic"
            }, "lightning");
        });
    </script>
</apex:page>

and added some logic to the the JS login function to react differently in the two cases.

Option 1: Load in top

async login() {
    const redirectURL = await login({recordId: this.recordId});

    (this.environment === "lightning")
        ? window.location.href.replace(redirectURL)
        : window.top.location.href.replace(redirectURL);
}

The problem now is the top page is not replaced with the redirectUrl and the Browser is showing Same-Origin errors. I guess because the Visualforce page is embedded into the Page Layout using an IFrame.

Option 2: Load in iframe When I don't try to load the redirectURL in the top window it perfectly loads inside the iframe:

async login() {
    const redirectURL = await login({recordId: this.recordId});
    window.location.href.replace(redirectURL);
}

but shows

Refused to display 'https://login.externalservice.com/login' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Note: This question might overlap with Lightning experience embedded page redirect but the addition of LWC makes it different enough for not being a duplicate.

1
  • 1
    Have you tried sending an event to the visualforce and handle the navigation in the page, its also possible to send a event handler from visualforce to the component. Not sure if that would solve any problem this specific problem. An example here.
    – Raul
    Commented Sep 3, 2020 at 15:38

0

You must log in to answer this question.

Browse other questions tagged .