'login for website within website integration

so I have a requirement where I need to handle a case wherein when you log in to one website, we need to be allowed to log in to another website

Let me explain Say there is a parent website and a child website, both these websites have the user details of who is going to be logged in.

    //PARENT WEBSITE
    <!DOCTYPE html>
    <html>
    <body>
    <iframe src="https://childwebsiteurl?param=parentwebsitetoken" title="this is child website">
    </iframe>
    </body>
    </html>

So I want a solution basically where when I log in to the parent website, I should be logged in to the child website also.

Right now I have one solution in mind: When the user logs in to the parent website, I will get a token and that token I will then past it to the child website(here we are assuming that the backend of both child and parent website has means to verify the token, n both has the user information) and that way I can log in to child website and child website is shown in the iframe of the parent website.

My only concern is, is there a standard way to do this, or is what I have proposed is it proper?

Thanks in advance.

javascripthtmlreactjsangularjsauthentication


Solution 1:[1]

You need Single Sign On solution (there are many such solutions), or JWT token..

Both of these solutions would log you on any website (parent/child/other) where you have SSO integration or JWT integration.

For Angular websites JWT token is more appropriate.

Solution 2:[2]

I imagine that you can approach that by simply storing your session token in localStorage once logged in parent website.

Since localStorage is unique and not cannot be shared across different origins, you might want to implement cross-domain-local-storage: (https://github.com/zendesk/cross-storage). This should be done if parent website and child website don't share the same domain, or even if the child is a subdomain of the parent.

Once you got that implementation, in client-side of child website you can just read your localStorage at mount-time and check if there is a valid token there, if so, just log the user in.

All of this assuming that both system just require a valid token in order to grant permissions to the client, if you just pass the token generated on the first website, you don't need to pass user's login info to login in the child website, because the token is already generated for that user.

You could as well post non-sensitive data to your cross-storage to improve customization, such as the user's name.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ron
Solution 2

Related Questions