Exploring OAuth 2.0: Enabling Google Authentication in a Pure Browser-Based Web App (2)

Continue on last week work, I keep working on the step3:

Step 3: Handle the OAuth 2.0 server response
According to Google document the OAuth 2.0 server sends a response to the redirect_uri specified in your access token request.

• If the user approves the request, the response contains an access token:

https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

• If the user does not approve the request, the response contains an error message:

https://oauth2.example.com/callback#error=access_denied

Because I set redirect_uri: "http://localhost:5173", and my project will automatically jump to the my most recent chat, now I can only put my parse into my createBrowserRouter component. And I'm still searching other better way.

Step 4. Calling Google APIs
After getting access_token, I can use it get the information I need by calling to the same API for the authenticated user using the access_token query string parameter:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token
After doing all of these, I can got the basic information of the user now.

Here is the step3 and step4 code:

      // Because google will redirect_uri to "/" with accessToken
      const requestedURI = location.pathname;
      // Accessing anchor values
      const anchor = location.hash.substring(1); // Exclude the '#' character
      console.log("Requested URI:", requestedURI);
      console.log("Anchor:", anchor);
      const match = anchor.match(/access_token=([^&]*)/);
      const accessToken = match ? match[1] : null;
      console.log("accessToken:", accessToken);
      const xhr = new XMLHttpRequest();
      xhr.open(
        "GET",
        "https://www.googleapis.com/drive/v3/about?fields=user&" + "access_token=" + accessToken
      );
      xhr.onreadystatechange = function () {
        console.log(xhr.response);
      };
      xhr.send(null);Ï

My professor reviewed my PR and gave me some feedback: "The JS you run in a CloudFlare Worker Function is a lot like running node.js."
This means that my initial direction was wrong; I shouldn't have approached it as a pure browser-based web app. Afterward, I looked into Cloudflare Worker Functions.

Cloudflare Workers uses the V8 JavaScript engine, which is the same engine used by Node.js. This means that many of the JavaScript language features and APIs available in Node.js are also available in Cloudflare Workers.

Both Cloudflare Workers and Node.js provide a runtime environment for executing JavaScript code on the server-side. They support similar JavaScript syntax and provide access to common APIs, such as the fetch API for making HTTP requests.

However, there are some differences between Cloudflare Workers and Node.js. Cloudflare Workers have a more limited environment compared to Node.js, as they are designed to be lightweight and run at the edge of the network. This means that certain Node.js-specific features and APIs may not be available in Cloudflare Workers.

It's important to consult the Cloudflare Workers documentation and API reference to understand the specific capabilities and limitations of the Cloudflare Workers runtime environment.

This time I'll do the Oauth according to service-side web application.