Opened 22 months ago

Last modified 22 months ago

#33846 closed Bug

Google OAuth2.0 SDK(Google Identity Services) doesn't work on Django 4.0 — at Initial Version

Reported by: Clark Owned by: nobody
Component: Template system Version: 4.0
Severity: Normal Keywords: Google, OAuth, login, Google Identity Services, template
Cc: Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

TL;DR
Django 4.x and Google OAuth2.0 SDK(new way) conflict for some reasons.
Anyone who is using Google OAuth2.0 SDK with Django 4x?


The problem

Google OAuth2.0 SDK(Google Identity Services) doesn't work on Django 4.0.x and 4.1.x but works on Django <= 3.2.x



Test Environments

Python 3.9.13
Python 3.10.4
&
Django 3.2.14
Django 4.0.6
Django 4.0b1



How to setup the test env

$ git clone https://github.com/smallbee3/django-oauth-template.git

$ cd django-oauth-template
$ pip install -r requirements.txt

# Need to fill in "client_id"
$ vi mysite/frontend/templates/implicitflow_new_1_gis_only.html
$ vi mysite/frontend/templates/implicitflow_new_2_gapi_async_await.html
$ vi mysite/frontend/templates/implicitflow_new_3_gapi_callback.html

# Need to fill in "apiKey" & "clientId"
$ vi mysite/frontend/templates/implicitflow_old_1_gapi_client_library.html
$ vi mysite/frontend/templates/implicitflow_old_2_js_client_library.html
...

implicitflow_new_1_gis_only.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      var access_token;

      function initClient() {
        console.log('Hello initClient!');
        client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_CLIENT_ID',
          ...
        });
      }

You need to replace "YOUR_CLIENT_ID" with your Google Client ID

( * To get your Google Client ID from Google, please refer to below links
​https://youtu.be/xH6hAW3EqLk
​https://www.balbooa.com/gridbox-documentation/how-to-get-google-client-id-and-client-secret )

( * To get your Google API Key from Google, please refer to below links
​https://youtu.be/feM25lZkLkA )



How to reproduce

$ cd django-oauth-template
$ cd mysite
$ python manage.py runserver

And then, open browser ​http://localhost:8000/new1



TEST Results

There are many different ways to implement Google OAuth2.0 SDK. So I tried every way as below.

Google Identity Services > Implicit flow examples > The new way >
(​https://developers.google.com/identity/oauth2/web/guides/migration-to-gis#the_new_way)
1) GIS only : ​http://localhost:8000/new1 - django3.x (O), django4.x (X)

(Django 3.2.14)
https://user-images.githubusercontent.com/35122143/178999080-3e04a618-321a-4cc5-97fb-fea47e8c18e8.png

(Django 4.0.6)
https://user-images.githubusercontent.com/35122143/178999091-9ffa9ee3-ed13-46f2-8996-d976c13dd03c.png

2) GAPI async/await : ​http://localhost:8000/new2 - django3.x (O), django4.x (X)
3) GAPI callback : ​http://localhost:8000/new3 - django3.x (O), django4.x (X)

Google Identity Services > Implicit flow examples > The old way >
(​https://developers.google.com/identity/oauth2/web/guides/migration-to-gis#the_old_way)
4) GAPI Client Library : ​http://localhost:8000/old1 - django3.x (O), django4.x (O)
5) JS Client Library : ​http://localhost:8000/old2 - django3.x (O), django4.x (O)

Google Identity Services > Authorization code flow examples > The new way >
(​https://developers.google.com/identity/oauth2/web/guides/migration-to-gis#the_new_way_2)
6) Server-side Web Apps : ​http://localhost:8000/new4 - django3.x (O), django4.x (X)


As you can see the results above, Google Identity Services codes are not working on django 4.x.
But, strangely, the old version of Google SDK which doesn't use callback is working well on both Django 3.x and 4.x.

Thus, In my humble opinion, the major reason seems that the callback function inside of Google SDK which is rendered by Django code isn't called.

mysite/frontend/templates/implicitflow_new_1_gis_only.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      ...
      function initClient() {
          ...
          callback: (tokenResponse) => {
            console.log('Hello callback!');
            access_token = tokenResponse.access_token;
            console.log('access_token: ', access_token);
          },
        });
      }
     ...


On a side note, I served this Google SDK code with "webpack-dev-server"(​https://github.com/webpack/webpack-dev-server) without using Django rendering, and it works fine.
That's why I suspect that the updated Django rendering code in v4.0 is the cause of the problem.

Plus, I compared the request and response from Google Auth Server between Django 3.x and 4.x. and there was no difference.
So, I think Google Auth Server has no problem with regard to this issue but Google Client library(​https://accounts.google.com/gsi/client) served by Django does have an issue.

Change History (0)

Note: See TracTickets for help on using tickets.
Back to Top