What is the simplest way to restrict access to a static website using social auth

问题

I have a static website composed of html/css/javascript files. The website is automatically generated and updated frequently.

Instead of authorizing access to the website with a username/password (basic auth), I would like to have users authenticate using Google Sign-in/openID Connect, and then control access via a whitelist of gmail addresses.

What is the simplest way to set this up?

回答1:

I ended up using oauth2_proxy which is exactly what I was looking for.

I configured to do the following:

oauth2_proxy listens on 0.0.0.0:443
When a user connects, the Google sign-in flow is initiated
After sign-in, it validates the user's email address against a whitelist
After successful validation, oauth2_proxy proxies the request to an upstream nginx server listening on 127.0.0.1:8080

回答2:

Another way to add authentication or gated content to any static site:
1) First load a static container page (header, footer) and implement user Authentication js code using Auth0, firebase, okta etc.

2) When user successfully logs in then make an ajax api call passing that auth access_token to retrieve the sensitive content.

3) Load/append that sensitive content in the site using js.

Of Course, there has to be one server/serverless function which would listen to that ajax api call, authenticate it and sends the content back to the browser.

This is called client side authentication.

More on this: https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/

回答3:

Best way would be to use Firebase Auth! Check it out at https://firebase.google.com/docs/auth/

You could check if the user is authenticated or not in this way.

<script type="text/javascript">

        function initApp() {
          // Listening for auth state changes.
          // [START authstatelistener]
          firebase.auth().onAuthStateChanged(function (user) {
            if (user) {
              //User is signed in.
                  if (!emailVerified) {
              //Additional check for email verification
              }
            } else {
              // User is signed out.
            }
          });
          // [END authstatelistener]
        }
        window.onload = function () {
          initApp();
        };
      </script>

来源：https://stackoverflow.com/questions/50809299/what-is-the-simplest-way-to-restrict-access-to-a-static-website-using-social-aut

标签

authorization

access-control

social-authentication