Creating a login for website

[Ender.Kaina]

I am looking for a way to create the login screen like what google does for logging into other websites, where the address bar is locked. (I am assuming it is somewhere in the HTML code)

[SnowyMus]

The lock symbol indicates a secure connection to the server and has nothing to do with the HTML content (unless content on a secure page is retrieved insecurely).

[WereCatf]

6 minutes ago, Kavawuvi said:

The lock symbol indicates a secure connection to the server and has nothing to do with the HTML content (unless content on a secure page is retrieved insecurely).

OP's talking about the modal window, where the URL-bar is noninteractive.

[C2dan88]

That window is created using javascript function window.open() for creating  a popup window.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

[KNG_HOLDY]

if you are not only locking at the dialog but you also want to create a login server

you may want to google oauth or keycloak 

[LAwLz]

I am not entirely sure what you're asking about.

1) Are you asking about how to create the entire login page? Because that's a big question which involves databases and the likes.

2) If you're just asking "how do I make it so that a link opens a popup window which has an unchangeable URL bar" then the answer becomes much more simple.

 

I believe the answer to the second question is that it uses some parameters for the window.open method.

You can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

 

The features you want to use are:

resizable=yes (allows the user to resize the window)

toolbar=no (this will disable the navigation toolbar such as the back button and reload button)

status=no (this disables the status bar, which some older browsers had at the bottom to indicate how much of a site had loaded)

location=no (this disables the URL bar, which I believe is what you asked for in the original post)

menubar=no (this disables the menu bar)

scrollbars=yes (this allows the user to scroll in case the window is too small)

 

 

 

Here is the code for how eBay does it, but please remember that you can NOT just copy paste this and think it will work on your site:

function openGGLLoginPopup(initUrl) {

    parent.document.scl_form.scl_provider.value = 'ggl';

    if (window.SIGNIN_GGL_WINDOW !== undefined && window.SIGNIN_GGL_WINDOW.closed === false) {
        window.SIGNIN_GGL_WINDOW.focus();
    } else {
        const userAgent = navigator.userAgent || navigator.vendor || window.opera;

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) ) {
            if (initUrl !== undefined
                    && initUrl !== '') {
                window.SIGNIN_GGL_WINDOW = window.open(initUrl, '_blank');
            }
        } else {
            const screenX = typeof window.screenX !== 'undefined' ? window.screenX : window.screenLeft;
            const screenY = typeof window.screenY !== 'undefined' ? window.screenY : window.screenTop;
            const outerWidth = typeof window.outerWidth !== 'undefined' ? window.outerWidth : document.body.clientWidth;
            const outerHeight = typeof window.outerHeight !== 'undefined' ?
            window.outerHeight : (document.body.clientHeight);

            const width = 475;
            const height = 500;

            const left = parseInt(screenX + ((outerWidth - width) / 2), 10);
            const top = parseInt(screenY + ((outerHeight - height) / 2), 10) - 82;
            // babel transform inside script tag in marko.js file does not work
            // eslint-disable-next-line prefer-template
            const features = 'width=' + width + ', height=' + height + ',left=' + left + ',top=' + top +
            ',resizable=yes,toolbar=no,status=no,location=no,menubar=no,scrollbars=yes';
            
            if (initUrl !== undefined && initUrl !== '') {
                window.SIGNIN_GGL_WINDOW = window.open(initUrl, 'gglPopup', features);
            }
        }
    }
}

 

[Uday Yadav]

If you using js for your backend, try FirebaseauthUI, its the by far the best pre-made authentication system.

Advantages:

1. Completely open source (backend code available on github)

2. no worries on security sides, firebase is excellent for user system

 

Firebase provides a ton of services regarding authentication, check them out