DEV Community: qian

how to add Google login remind popup to web application

qian — Thu, 21 Nov 2024 03:58:02 +0000

import google script

<script src="https://accounts.google.com/gsi/client" async></script>

https://developers.google.com/identity/gsi/web/guides/client-library?hl=zh-cn

add dom

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-your_own_param_1_to_login="any_value"
     data-your_own_param_2_to_login="any_value">
</div>

https://developers.google.com/identity/gsi/web/guides/display-google-one-tap?hl=zh-cn

how the code looks like

how the web page looks like

Beautifying the HTMLImageElement not-loaded/errored status display, react component

qian — Mon, 05 Aug 2024 21:53:28 +0000

background

Browser's native image not loaded status doesn't look good, I'd like not to use it.
I am using react.

ideas

Determine if the image is loaded successfully by onLoaded event.
If loaded successfully show the HTMLImageElement, if not show the custom error component while HTMLImageElement is hidden (visibility: hidden).

how it looks like

fail

fail with alt on it

success

tips

When load failed, the HTMLImageElement can't be set to display: none, the HTMLImageElement needs to be in the document tree. Also the HTMLImageElement should to be invisible and looks like not placed in the web page, so use the grid display to implement this.
every time the image is changed, will reload again, so need to set loaded status to false first.

reference



import { cn } from "@/lib/utils";
import { Image } from "lucide-react";
import { useEffect, useState } from "react";
interface ImageProps {
  src: string;
  iconSize?: number;
  className?: string;
  alt?: string;
  showAlt?: boolean;
}

const BeautyImage = ({
  src,
  iconSize = 16,
  className = "",
  alt = "",
  showAlt = false,
}: ImageProps) => {
  // load successfully or not
  const [imageLoaded, setImageLoaded] = useState(false);

  /**
   * onLoad event
   */
  const onImageLoad = () => {
    setImageLoaded(true);
  };

  /**
   * everytime the src changes, set load status to fail
   */
  useEffect(() => {
    setImageLoaded(false);
  }, [src]);

  return (
    <div
      className={cn(
        "flex flex-col justify-center items-center text-xs text-ttertiary",
        className
      )}
    >
      <div
        className={cn(
          "grid",
          imageLoaded
            ? "grid-rows-[1fr] opacity-100"
            : "grid-rows-[0fr] opacity-0"
        )}
      >
        <div className="overflow-hidden">
          <img className="rounded-full" src={src} onLoad={onImageLoad} />
        </div>
      </div>
      {/* custom error component */}
      {!imageLoaded && (
        <div className="flex flex-col items-center justify-center">
          <Image size={iconSize} />
          {showAlt && alt && <p>{alt}</p>}
        </div>
      )}
    </div>
  );
};

zod i18n internationalization

qian — Fri, 02 Aug 2024 00:08:59 +0000

background

using zod for validation, and need to internationalize the application.

requirements

zod zod-i18n-map

create a zod instance with i18n

i18.ts

import { z } from "zod";
import { makeZodI18nMap } from "zod-i18n-map";

// these two namespaces need to add to the i18n init config's ns.
z.setErrorMap(makeZodI18nMap({ ns: ["zod", "custom"] }));
export { z };

customize errors in zod i18n

the 'custom' namespace is for custom error messages.
custom.json

{
  "password": "at least six characters required",
  "confirm": "passwords don't match"
}

how to configure custom error messages in zod schema

using refine method, the first params is to check if the input is valid.
passing the i18n key to params.i18n

const formSchema = z.object({
  password: z
    .string()
    .refine((value) => /^[a-zA-Z0-9#?!@$%^&*-]{6,255}/.test(value), {
      params: { i18n: "password" },
    }),
});

// below won't work because when run regex() it throws error already.
z.string()
  .regex(/^[a-zA-Z0-9#?!@$%^&*-]{6,255}/)
  .refine(false, {
    params: { i18n: "password" },
  });

reference

zod refine: https://zod.dev/?id=refine
zod-i18n-map: https://github.com/aiji42/zod-i18n

react internationalization i18n

qian — Fri, 02 Aug 2024 00:08:07 +0000

background

support multiple languages, need a language switcher in application.
language changes not associate with routes.

requirements

i18next react-i18next i18next-browser-languagedetector i18next-http-backend

code

i18.ts

i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    ns: [
      "translation",
      "header",
      "note",
      "settings",
      "zod",
      "custom",
      "introduce",
      "message",
    ],
    defaultNS: "translation",
    fallbackLng: "en",
    debug: false,
    detection: {
      caches: ["localStorage"],
    },
  });
export default i18n;

main.ts

import "./i18";

locale files

Put json file in the /public/locales/, if you add one json to each language, you need to add its filename to 'ns' in config, like above i18.ts.
[images]

using example

basic useTranslation

import { useTranslation } from "react-i18next";

const { t } = useTranslation();

<button className="btn border truncate" onClick={handleSignIn}>
  {t("sign-in")}
</button>;

translation.json

{
  "sign-in": "sign in"
}

plurals

t("item", { count: info.count });

{
  "item_one": "item",
  "item_other": "items"
}

multiple namespaces useTranslation

if pass an array to useTranslation, the first namespace as the default, we can use it without pass namespace. The other namespaces, when getting data from these namespace, need to pass the namespace.

const { t } = useTranslation(["note", "message"]);

// default namespace
t("empty-description");
// other namesapces
t("save title successfully", { ns: "message" });

note.json

{
  "empty-description": "No notes exists, go write your first note!"
}

message.json

{
  "save title successfully": "save title successfully"
}

Trans Component

<Trans i18nKey={"success.description"} seconds={seconds}>
  we will get you in after {{ seconds }}s, or click here dive in right now
</Trans>

{
  "success": {
    "description": "we will get you in after {{seconds}}s, or click button go home right now"
  }
}

get/set current language

get current language depends on the cache config in i18.ts
I use localStorage in this article

// get current language
const currentLng = localStorage.getItem("i18nextLng");

// set current language
const { i18n } = useTranslation();
i18n.changeLanguage(item);

reference

react-i18next: https://react.i18next.com/latest/using-with-hooks
i18n init cache options: https://www.i18next.com/overview/plugins-and-utils#backends
plurals: https://www.i18next.com/translation-function/plurals

Integrate Google OAuth2 authentication into the django-rest-framework

qian — Thu, 01 Aug 2024 20:51:43 +0000

backgrounds

front-end and back-end separation, django-rest-framework as the back-end, react as the front-end. This article also applies to other front-end frameworks.
Application has its own account model and token generation, then need to integrate with google oauth2 authentication.

Ideas for implementation

// these two created in back-end
// short as access_url
google_auth_access_url = "https://localhost:8000/google/access/";
// short as callback_url
google_auth_callback_url = "https://localhost:8000/google/callback/";

// these two created in front-end
// short as google_success_page
google_auth_success_page = "https://localhost:5173/google-success";
// short as google_fail_url
google_auth_fail_page = "https://localhost:5173/google-fail";

Open the access_url that written in the back-end in browser.window.open("http://localhost:8000/google/access");
In back-end, when accessing the access_url, will generate google authentication url and redirect to google oauth2 server, Also need to pass callback_url to google oauth2 server, the callback_url is for handling the response from google oauth2 server.
In callback_url, redirect to the google_success_page created in the frontend if credentials were successfully retrieved, otherwise redirect to the google_fail_url also created in the frontend.
In google_success_page, the token passed by query_params will be revalidated, and if the token is invalid, redirected to google_auth_fail_page.

Code for reference

`pip install google-auth-oauthlib`

https://pypi.org/project/google-auth-oauthlib/#description

To make it clearer, I have pasted the imports and common variables used below.

import google_auth_oauthlib.flow
from django.shortcuts import redirect
from django.conf import settings
from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework import status, serializers
import requests
import os
import jwt
from datetime import datetime
from account.views import login_token_logic
from account.serializers import UserSerializer
from account.models import User
from rest_framework.exceptions import ValidationError
from django.http import HttpResponseRedirect
from urllib.parse import urlencode

os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"
CLIENT_SECRETS_FILE = "client_secret.json"

SCOPES = [
    "openid",
    "https://www.googleapis.com/auth/userinfo.profile",
    "https://www.googleapis.com/auth/userinfo.email",
    "https://www.googleapis.com/auth/drive.metadata.readonly",
]
GOOGLE_USER_INFO_URL = "https://www.googleapis.com/oauth2/v3/userinfo"
domain = settings.BASE_BACKEND_URL
API_URI = "account/google/callback"
callback_uri = f"{domain}{API_URI}"

Implementing access view that redirects to Google oauth2 server.

This access_view is for access_url 'http://localhost:8000/google/access'.
when you click 'sign in with google' in the frontend application, open access_url in the browser, then it will redirect to the google authentication url created in the access_view.

@api_view(["get"])
def access_view(request):
    try:
        flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
            CLIENT_SECRETS_FILE,
            scopes=SCOPES,
        )
        flow.redirect_uri = callback_uri
        authorization_url, state = flow.authorization_url(
            access_type="offline",
            include_granted_scopes="true",
            prompt="consent",
        )
        request.session["state"] = state

        return redirect(authorization_url)
    except Exception as e:
        return Response(status=status.HTTP_400_BAD_REQUEST)

Implementing the callback view, handling the google oauth2 server response.

There are a few key steps in the callback view:

check query parameters

class InputSerializer(serializers.Serializer):
    code = serializers.CharField(required=False)
    error = serializers.CharField(required=False)
    state = serializers.CharField(required=False)

input_serializer = InputSerializer(data=request.query_params)
input_serializer.is_valid(raise_exception=True)
validated_data = input_serializer.validated_data
code = validated_data.get("code")
error = validated_data.get("error")
state = validated_data.get("state")
if error is not None:
    return Response({"message": error}, status=status.HTTP_400_BAD_REQUEST)
if code is None or state is None:
    return Response(
        {"message": "Missing code or state"}, status=status.HTTP_400_BAD_REQUEST
    )
state = request.session.get("state")
if not state:
    return Response(
        {"message": "not valid request"}, status=status.HTTP_400_BAD_REQUEST
    )

fetch token and get credentials

authorization_response is the full uri that oauth2 response, including the query parameters

def credentials_to_dict(credentials):
    return {
        "token": credentials.token,
        "refresh_token": credentials.refresh_token,
        "id_token": credentials.id_token,
        "token_uri": credentials.token_uri,
        "client_id": credentials.client_id,
        "client_secret": credentials.client_secret,
        "scopes": credentials.scopes,
    }
flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
    CLIENT_SECRETS_FILE, scopes=SCOPES, state=state
)
flow.redirect_uri = callback_uri
authorization_response = request.build_absolute_uri(request.get_full_path())
flow.fetch_token(authorization_response=authorization_response)
credentials = flow.credentials
credentials_dict = credentials_to_dict(credentials)

decode id_token to get expired time and query google account infos

def get_user_info(token):
    response = requests.get(GOOGLE_USER_INFO_URL, params={"access_token": token})

    if not response.ok:
        raise Exception("Failed to obtain user info from Google")

    return response.json()


def decode_id_token(id_token):
    decoded_tokem = jwt.decode(jwt=id_token, options={"verify_signature": False})
    return decoded_tokem
user_info = get_user_info(credentials.token)
user_email = user_info["email"]
id_token_decoded = decode_id_token(credentials.id_token)
exp = id_token_decoded["exp"]

Integrate Google Account with the application's own account model, you should modify this according to your own login logic.

Find out if this Google account already exists in my account model, if not, create one. Then do the login logic, generate token.

now = int(datetime.now().timestamp())

user = User.objects.filter(email=user_email).first()
if user is None:
    # create user
    create_user_data = {
        "email": user_email,
        "image": user_info["picture"],
        "type": "google",
        "password": "",
    }
    create_serializer = UserSerializer(data=create_user_data)
    if create_serializer.is_valid():
        user = create_serializer.save()
    else:
        return Response(
            {
                "message": "create user from google failed",
                **create_serializer.errors,
            },
            status=status.HTTP_400_BAD_REQUEST,
        )
    """
    login logic
    """
token = login_token_logic(user, valid_seconds=exp - now)

redirect to frontend page.

I create two pages in the frontend, one for successful Google sign-in, the other for failure.
success: 'http://localhost:5173/google-success/?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
failure: 'http://localhost:5173/google-fail/?message=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

The success page will revalidate the token, if the token is not valid, will navigate to the failure page.

Again, this step is entirely up to your design.

GOOGLE_OAUTH2_REDIRECT_SUCCESS_URL = "http://localhost:5173/google-success/"
GOOGLE_OAUTH2_REDIRECT_FAIL_URL = "http://localhost:5173/google-fail/"
    query_params = urlencode(
        {
            "token": token,
        }
    )
    url = f"{settings.GOOGLE_OAUTH2_REDIRECT_SUCCESS_URL}?{query_params}"
    return HttpResponseRedirect(url)
except Exception as e:
    query_params = urlencode({"message": str(e)})
    url = f"{settings.GOOGLE_OAUTH2_REDIRECT_FAIL_URL}?{query_params}"
    return HttpResponseRedirect(url)

tips

problem: (insecure_transport) OAuth 2 MUST utilize https. solution: os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

DEV Community: qian

how to add Google login remind popup to web application

how the code looks like

how the web page looks like

Beautifying the HTMLImageElement not-loaded/errored status display, react component

background

ideas

how it looks like

fail

fail with alt on it

success

tips

reference

zod i18n internationalization

background

requirements

create a zod instance with i18n

customize errors in zod i18n

how to configure custom error messages in zod schema

reference

react internationalization i18n

background

requirements

code

locale files

using example

basic useTranslation

plurals

multiple namespaces useTranslation

Trans Component

get/set current language

reference

Integrate Google OAuth2 authentication into the django-rest-framework

backgrounds

Ideas for implementation

links

Code for reference

pip install google-auth-oauthlib

To make it clearer, I have pasted the imports and common variables used below.

Implementing access view that redirects to Google oauth2 server.

Implementing the callback view, handling the google oauth2 server response.

check query parameters

fetch token and get credentials

decode id_token to get expired time and query google account infos

Integrate Google Account with the application's own account model, you should modify this according to your own login logic.

redirect to frontend page.

tips

`pip install google-auth-oauthlib`