✨ support google oauth

wurstcase · Jan 18, 2020 · 36e97df · 36e97df
1 parent de00a2d
commit 36e97df
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -13,6 +13,10 @@ interface WebClipperConfig {
   serverHost: string;
   resourceHost: string;
   loadRemoteConfig: boolean;
+  googleOauth: {
+    clientId: string;
+    callback: string;
+  };
 }
 
 export interface RemoteConfig {
@@ -21,6 +25,10 @@ export interface RemoteConfig {
 }
 
 let config: WebClipperConfig = {
+  googleOauth: {
+    clientId: '269705697424-vlu486hs2paqj71p9defgvkbrpo9amcq.apps.googleusercontent.com',
+    callback: 'https://api.clipper.website/api/user/oauth/github',
+  },
   icon: 'icon.png',
   iconDark: 'icon-dark.png',
   yuqueClientId: 'D1AwzCeDPLFWGfcGv7ze',
@@ -40,6 +48,11 @@ let config: WebClipperConfig = {
 
 if (process.env.NODE_ENV === 'development') {
   config = Object.assign({}, config, {
+    googleOauth: {
+      clientId: '269705697424-l6h6e3pkcsjs3lggjdlivs7vaarr8gp0.apps.googleusercontent.com',
+      callback: 'https://api.test.clipper.website/api/user/oauth/google',
+      // callback: 'http://localhost:3000/api/user/oauth/google', // Local test
+    },
     loadRemoteConfig: true,
     icon: 'icon-dev.png',
     yuqueClientId: 'fylbi7lzfNjhkfyi0hJp',

diff --git a/src/pages/preference/powerpack/index.tsx b/src/pages/preference/powerpack/index.tsx
@@ -37,6 +37,15 @@ const Powerpack: React.FC = () => {
     state: Container.get(IConfigService).id,
   })}`;
 
+  const googleOauthUrl = `https://accounts.google.com/o/oauth2/v2/auth?${stringify({
+    client_id: config.googleOauth.clientId,
+    redirect_uri: config.googleOauth.callback,
+    include_granted_scopes: true,
+    response_type: 'code',
+    scope: 'email profile',
+    state: Container.get(IConfigService).id,
+  })}`;
+
   const powerpackService = Container.get(IPowerpackService);
 
   const { userInfo, accessToken, loading } = useObserver(() => {
@@ -132,13 +141,22 @@ const Powerpack: React.FC = () => {
               defaultMessage="Free trial for 7 days !"
             />
           </h3>
-          <Button href={githubOauthUrl} target="_blank">
-            <IconFont type="github" />
-            <FormattedMessage
-              id="preference.powerpack.login.github"
-              defaultMessage="Login with Github"
-            />
-          </Button>
+          <div>
+            <Button href={githubOauthUrl} target="_blank">
+              <IconFont type="github" />
+              <FormattedMessage
+                id="preference.powerpack.login.github"
+                defaultMessage="Login with Github"
+              />
+            </Button>
+            <Button href={googleOauthUrl} target="_blank" style={{ marginLeft: 10 }}>
+              <IconFont type="google" />
+              <FormattedMessage
+                id="preference.powerpack.login.google"
+                defaultMessage="Login with Google"
+              />
+            </Button>
+          </div>
         </div>
       </div>
       <h3>