Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Ender.Kaina

Creating a login for website

Recommended Posts

Posted · Original PosterOP

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)

image.thumb.png.72d58260e338bf9455078edc17cf0ba8.png

Link to post
Share on other sites

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).

Link to post
Share on other sites
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.


Hand, n. A singular instrument worn at the end of the human arm and commonly thrust into somebody’s pocket.

Link to post
Share on other sites

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 

Link to post
Share on other sites

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);
            }
        }
    }
}

 

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×