Base solution for your next web application
Open Closed

No user id when embedded in an iframe #10827

User avatar
0
daws created
  • What is your product version? 10.3
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? ?Net Core
  • What is ABP Framework version? 6.3.1

Hi,

I want to embed my angular aspnetzero application in an iframe on a customer website. To be able for them to access the data, I match my angular routes with tenant and language parameters. Example here

If you open the console, you see the tenancy and language (parsed from the url) and the user id (a public user is automatically created and logged in to store user preferences).

However, when I embed this page in an iframe on a website which is on a different URL, I can't get the user id with SessionService or abp.session.userId. Without a user id, my code will keep trying to login a new public user and reload the page in an infinite loop.

How can I get the user id when the page is embedded in an iframe ?

Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    musa.demir created

    Hi @daws

    It is because of the tracking protection mechanisms implemented by the major browsers and browser engines. You can not use cookie in the iframe. I can offer two solution for you.

    1. Mark related cookies as SameSite=None and Secure
    2. Use localstorage

    Here is where auth code is https://github.com/aspnetboilerplate/aspnetboilerplate/blob/dev/src/Abp.Web.Resources/Abp/Framework/scripts/abp.js#L175-L199. You should override it.

    You can create new javascript in your project. Then add it to the angular.json's script sectionhttps://github.com/aspnetzero/aspnet-zero-core/blob/59d8a2e46e84f4a67b4ce369cf604847863bc107/angular/angular.json#L96.

    abp.auth.setToken = function (authToken, expireDate) {
    localStorage.setItem(abp.auth.tokenCookieName, authToken);
};

abp.auth.getToken = function() {
    return localStorage.getItem(abp.auth.tokenCookieName);
};

abp.auth.clearToken = function() {
    localStorage.removeItem(abp.auth.tokenCookieName);
};
// do the same for refresh token
  • User Avatar
    0
    daws created

    Ok thank you. Your 2nd solution works...except for the language.

    How can I also set the language in the session ?

    So in the frontend I'm replacing this code :

            abp.utils.setCookieValue(
            'Abp.Localization.CultureName',
            language.name,
            new Date(new Date().getTime() + 5 * 365 * 86400000), // 5 year
            abp.appPath
        );

    by this :

    localStorage.setItem('Abp.Localization.CultureName', language);

    But then, I can't find where the language is retrieved. I tried to change request headers in AppPreBootstrap but it didn't work.

    Shall I change the backend culture provider ? If yes how so ?

  • User Avatar
    0
    musa.demir created

    Hi @daws

    What about replacing abp.utils.setCookieValue and abp.utils.getCookieValue ?

  • User Avatar
    0
    daws created

    Seems to work fine. Thank you very much !

Assignee
No one
Labels
None yet