feat(login): support google login (#1465)

* feat(flat-web): google login

* feat(desktop): google login

* chore: remove unused code

* chore: remove spell check since it already exist in lint

* Update desktop/renderer-app/src/pages/LoginPage/googleLogin.ts

Co-authored-by: Black-Hole <[email protected]>

* chore: compact code

Co-authored-by: Black-Hole <[email protected]>

Author: hyrious

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm check-spelling
 pnpm lint

config/America/.env.development

@@ -3,6 +3,7 @@ AGORA_APP_ID=931b86d6781e49a2a255db4ce6e8e804
 GITHUB_CLIENT_ID=0ac608815326aead5db7
 WECHAT_APP_ID=wx1133c2153a45e9b8
 AGORA_OAUTH_CLIENT_ID=flat-dev
+GOOGLE_OAUTH_CLIENT_ID=273996094508-p97og69ojac5ja0khn1rvmi3tb7vgfgm.apps.googleusercontent.com
 
 CLOUD_STORAGE_OSS_ALIBABA_ACCESS_KEY=LTAI5t9Gb6tzQzzLmB6cTVf7
 CLOUD_STORAGE_OSS_ALIBABA_BUCKET=flat-storage

config/America/.env.production

@@ -3,6 +3,7 @@ AGORA_APP_ID=931b86d6781e49a2a255db4ce6e8e804
 GITHUB_CLIENT_ID=da83d7e14217594fba46
 WECHAT_APP_ID=wx96d522d69d384cce
 AGORA_OAUTH_CLIENT_ID=flat
+GOOGLE_OAUTH_CLIENT_ID=273996094508-2rpraucen77a1o5dul5ftrua5k3og157.apps.googleusercontent.com
 
 CLOUD_STORAGE_OSS_ALIBABA_ACCESS_KEY=LTAI5t9Gb6tzQzzLmB6cTVf7
 CLOUD_STORAGE_OSS_ALIBABA_BUCKET=flat-storage

config/China/.env.development

@@ -3,6 +3,7 @@ AGORA_APP_ID=931b86d6781e49a2a255db4ce6e8e804
 GITHUB_CLIENT_ID=9821657775fbc74773f1
 WECHAT_APP_ID=wx1133c2153a45e9b8
 AGORA_OAUTH_CLIENT_ID=flat-dev
+GOOGLE_OAUTH_CLIENT_ID=273996094508-p97og69ojac5ja0khn1rvmi3tb7vgfgm.apps.googleusercontent.com
 
 CLOUD_STORAGE_OSS_ALIBABA_ACCESS_KEY=LTAI5t9Gb6tzQzzLmB6cTVf7
 CLOUD_STORAGE_OSS_ALIBABA_BUCKET=flat-storage

config/China/.env.production

@@ -3,6 +3,7 @@ AGORA_APP_ID=931b86d6781e49a2a255db4ce6e8e804
 GITHUB_CLIENT_ID=71a29285a437998bdfe0
 WECHAT_APP_ID=wx96d522d69d384cce
 AGORA_OAUTH_CLIENT_ID=flat
+GOOGLE_OAUTH_CLIENT_ID=273996094508-2rpraucen77a1o5dul5ftrua5k3og157.apps.googleusercontent.com
 
 CLOUD_STORAGE_OSS_ALIBABA_ACCESS_KEY=LTAI5t9Gb6tzQzzLmB6cTVf7
 CLOUD_STORAGE_OSS_ALIBABA_BUCKET=flat-storage

desktop/renderer-app/src/api-middleware/flatServer/constants.ts

@@ -8,6 +8,7 @@ export const FLAT_SERVER_VERSIONS = {
 
 export const FLAT_SERVER_LOGIN = {
     GITHUB_CALLBACK: `${FLAT_SERVER_VERSIONS.V1}/login/github/callback`,
+    GOOGLE_CALLBACK: `${FLAT_SERVER_VERSIONS.V1}/login/google/callback`,
     WECHAT_CALLBACK: `${FLAT_SERVER_VERSIONS.V1}/login/weChat/web/callback`,
 } as const;
 

desktop/renderer-app/src/constants/process.ts

@@ -24,6 +24,10 @@ export const GITHUB = Object.freeze({
     CLIENT_ID: process.env.GITHUB_CLIENT_ID,
 });
 
+export const GOOGLE = Object.freeze({
+    CLIENT_ID: process.env.GOOGLE_OAUTH_CLIENT_ID,
+});
+
 export const FLAT_SERVER_DOMAIN = process.env.FLAT_SERVER_DOMAIN;
 export const FLAT_WEB_DOMAIN = process.env.FLAT_WEB_DOMAIN;
 

desktop/renderer-app/src/pages/HomePage/index.tsx

@@ -76,10 +76,10 @@ export const HomePage = observer<HomePageProps>(function HomePage() {
 
             try {
                 await loginCheck();
-                globalStore.lastLoginCheck = Date.now();
+                globalStore.updateLastLoginCheck(Date.now());
                 return true;
             } catch (e) {
-                globalStore.lastLoginCheck = null;
+                globalStore.updateLastLoginCheck(null);
                 console.error(e);
                 errorTips(e as Error);
             }

desktop/renderer-app/src/pages/LoginPage/googleLogin.ts

@@ -0,0 +1,53 @@
+import { setAuthUUID, loginProcess } from "../../api-middleware/flatServer";
+import { v4 as uuidv4 } from "uuid";
+import { LoginExecutor } from "./utils";
+import { shell } from "electron";
+import { errorTips } from "../../components/Tips/ErrorTips";
+import { FLAT_SERVER_LOGIN } from "../../api-middleware/flatServer/constants";
+import { GOOGLE } from "../../constants/process";
+
+// @TODO: migrate to new google login api before 2023. @hyrious 
+//        https://developers.google.com/identity/gsi/web
+export const googleLogin: LoginExecutor = onSuccess => {
+    let timer = NaN;
+    const authUUID = uuidv4();
+    const scopes = ["openid", "https://www.googleapis.com/auth/userinfo.profile"];
+
+    function getGoogleURL(authUUID: string): string {
+        const redirectURL = encodeURIComponent(FLAT_SERVER_LOGIN.GOOGLE_CALLBACK);
+        const scope = encodeURIComponent(scopes.join(" "));
+        return `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&access_type=online&scope=${scope}&client_id=${GOOGLE.CLIENT_ID}&redirect_uri=${redirectURL}&state=${authUUID}`;
+    }
+
+    void (async () => {
+        try {
+            await setAuthUUID(authUUID);
+        } catch (err) {
+            errorTips(err);
+            return;
+        }
+
+        void shell.openExternal(getGoogleURL(authUUID));
+
+        const googleLoginProcessRequest = async (): Promise<void> => {
+            try {
+                const data = await loginProcess(authUUID);
+
+                if (!data.name) {
+                    timer = window.setTimeout(googleLoginProcessRequest, 2000);
+                    return;
+                }
+
+                onSuccess(data);
+            } catch (err) {
+                errorTips(err);
+            }
+        };
+
+        void googleLoginProcessRequest();
+    })();
+
+    return () => {
+        window.clearTimeout(timer);
+    };
+};

desktop/renderer-app/src/pages/LoginPage/index.tsx

@@ -2,25 +2,26 @@ import "./index.less";
 
 import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { constants } from "flat-types";
+import { useTranslation } from "react-i18next";
 import { observer } from "mobx-react-lite";
-import { ipcAsyncByMainWindow, ipcSyncByApp } from "../../utils/ipc";
+import { message } from "antd";
 import { LoginPanel, LoginButton, LoginButtonProviderType } from "flat-components";
-import { LoginDisposer } from "./utils";
 import { githubLogin } from "./githubLogin";
+import WeChatLogin from "./WeChatLogin";
+import { googleLogin } from "./googleLogin";
+import { ipcAsyncByMainWindow, ipcSyncByApp } from "../../utils/ipc";
+import { LoginDisposer } from "./utils";
 import { RouteNameType, usePushHistory } from "../../utils/routes";
 import { GlobalStoreContext } from "../../components/StoreProvider";
 import { AppUpgradeModal, AppUpgradeModalProps } from "../../components/AppUpgradeModal";
 import { runtime } from "../../utils/runtime";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
-import { useTranslation } from "react-i18next";
 import {
     PRIVACY_URL_EN,
     PRIVACY_URL_CN,
     SERVICE_URL_EN,
     SERVICE_URL_CN,
 } from "../../constants/process";
-import { message } from "antd";
-import WeChatLogin from "./WeChatLogin";
 
 export const LoginPage = observer(function LoginPage() {
     const { i18n } = useTranslation();
@@ -81,6 +82,13 @@ export const LoginPage = observer(function LoginPage() {
                         });
                         return;
                     }
+                    case "google": {
+                        loginDisposer.current = googleLogin(async authData => {
+                            globalStore.updateUserInfo(authData);
+                            pushHistory(RouteNameType.HomePage);
+                        });
+                        return;
+                    }
                     case "wechat": {
                         setWeChatLogin(true);
                         return;
@@ -105,11 +113,19 @@ export const LoginPage = observer(function LoginPage() {
     function renderButtonList(): React.ReactNode {
         return (
             <>
-                <LoginButton
-                    provider="wechat"
-                    text={i18n.t("login-wechat")}
-                    onLogin={handleLogin}
-                />
+                {process.env.FLAT_REGION === "America" ? (
+                    <LoginButton
+                        provider="google"
+                        text={i18n.t("login-google")}
+                        onLogin={handleLogin}
+                    />
+                ) : (
+                    <LoginButton
+                        provider="wechat"
+                        text={i18n.t("login-wechat")}
+                        onLogin={handleLogin}
+                    />
+                )}
                 <LoginButton
                     provider="github"
                     text={i18n.t("login-github")}