feat: add github social login

packages/admin/package.json

@@ -45,9 +45,11 @@
     "@babel/preset-react": "^7.12.5",
     "@reach/router": "^1.3.4",
     "@rematch/core": "^1.4.0",
+    "@svgr/webpack": "^5.5.0",
     "babel-loader": "^8.2.1",
     "classnames": "^2.2.6",
     "css-loader": "^5.0.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.0",
     "marked": "^1.2.3",
     "md5": "^2.3.0",

packages/admin/src/pages/profile/index.js

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
+import cls from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import Header from '../../components/Header';
 import { updateProfile } from '../../services/user';
 
+import { ReactComponent as GithubIcon } from '../../components/icon/github.svg';
+
 export default function() {
   const [isPasswordUpdating, setPasswordUpdating] = useState(false);
   const [isProfileUpdating, setProfileUpdating] = useState(false);
@@ -41,6 +44,13 @@ export default function() {
     setPasswordUpdating(false);
   }
 
+
+  let baseUrl = 'http://localhost:3000/'; globalThis.serverURL;
+  if(!baseUrl) {
+    const match = location.pathname.match(/(.*?\/)ui/);
+    baseUrl = match ? match[1] : '/';
+  }
+
   return (
     <>
       <Header />
@@ -96,6 +106,25 @@ export default function() {
                 </form>
               </section>
               <br/>
+              <section id="socical-account">
+                <h3>账号绑定</h3>
+                <div className="account-list">
+                  <div className={cls('account-item github', {bind: user.github})}>
+                    <a 
+                      href={user.gitub ? `https://github.com/${user.github}` : `${baseUrl}oauth?type=github`}
+                      target="_blank"
+                    >
+                      <GithubIcon />
+                    </a>
+                    <div className="account-unbind">
+                      <svg className="vicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+                        <path d="M568.569 512l170.267-170.267c15.556-15.556 15.556-41.012 0-56.569s-41.012-15.556-56.569 0L512 455.431 341.733 285.165c-15.556-15.556-41.012-15.556-56.569 0s-15.556 41.012 0 56.569L455.431 512 285.165 682.267c-15.556 15.556-15.556 41.012 0 56.569 15.556 15.556 41.012 15.556 56.569 0L512 568.569l170.267 170.267c15.556 15.556 41.012 15.556 56.569 0 15.556-15.556 15.556-41.012 0-56.569L568.569 512z"></path>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </section>
+              <br/>
               <section id="change-password">
                 <h3>密码修改</h3>
                 <form method="post" onSubmit={onPasswordUpdate}>

packages/admin/src/style/custom.css

@@ -4,4 +4,32 @@ html, body {
 
 div[tabindex="-1"] {
   height: 100%;
+}
+
+.account-item {
+  display: inline-block;
+  position: relative;
+}
+
+.account-item .account-unbind svg {
+  background: #FFF;
+  border: 1px solid #999;
+  border-radius: 50%;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  display: none;
+  cursor: pointer;
+}
+.account-item:hover .account-unbind svg {
+  display: block;
+}
+
+
+.account-item.github path {
+  fill: grey;
+}
+.account-item.github:hover path,
+.account-item.github.bind path {
+  fill: #1B1F23;
 }

packages/admin/src/utils/request.js

@@ -21,7 +21,7 @@ export default async function request(url, opts = {}) {
     opts.headers.Authorization = `Bearer ${token}`;
   }
 
-  let baseUrl = globalThis.serverURL;
+  let baseUrl = 'https://imnerd.vercel.app/'; //globalThis.serverURL;
   if(!baseUrl) {
     const match = location.pathname.match(/(.*?\/)ui/);
     baseUrl = match ? match[1] : '/';

packages/admin/webpack.config.js

@@ -21,6 +21,10 @@ module.exports = {
           'css-loader'
         ]
       },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack', 'file-loader'],
+      },
       {
         test: /\.(png|jpe?g|gif)$/i,
         use: [

packages/server/src/config/middleware.js

@@ -29,6 +29,10 @@ module.exports = [
         if(/favicon.ico$/.test(ctx.url)) {
           return;
         }
+        if (think.isPrevent(err)) {
+          return false;
+        }
+
         console.error(err);
       }
     }

packages/server/src/controller/oauth.js

@@ -0,0 +1,7 @@
+module.exports = class extends think.Controller {
+  async githubAction() {
+    const instance = this.service('auth/github', this);
+    const socialInfo = await instance.getUserInfo();
+    return this.success(socialInfo);
+  }
+};

packages/server/src/extend/controller.js

@@ -0,0 +1,10 @@
+module.exports = {
+  success(...args) {
+    this.ctx.success(...args);
+    return think.prevent();
+  },
+  fail(...args) {
+    this.ctx.fail(...args);
+    return think.prevent();
+  }
+};

packages/server/src/extend/think.js

@@ -0,0 +1,9 @@
+const preventMessage = 'PREVENT_NEXT_PROCESS';
+module.exports = {
+  prevent() {
+    throw new Error(preventMessage);
+  },
+  isPrevent(err) {
+    return think.isError(err) && err.message === preventMessage;
+  }
+};

packages/server/src/logic/oauth.js

@@ -0,0 +1,4 @@
+const Base = require('./base');
+
+module.exports = class extends Base {
+}

packages/server/src/service/auth/base.js

@@ -0,0 +1,27 @@
+const { parse } = require('url');
+
+module.exports = class extends think.Service {
+  constructor(app) {
+    super(app);
+    this.app = app;
+  }
+
+  getCompleteUrl(url = '') {
+    if (url.slice(0, 4) === 'http') {
+      try {
+        const { host } = parse(url);
+        if (this.app.host.toLowerCase() !== host.toLowerCase()) {
+          throw new Error(403);
+        }
+        return url;
+      } catch (e) {
+        // ignore error
+      }
+    }
+    const protocol = this.app.header('x-forwarded-proto') || 'http';
+    if (!/^\//.test(url)) {
+      url = '/' + url;
+    }
+    return protocol + '://' + this.app.ctx.host + url;
+  }
+}

packages/server/src/service/auth/github.js

@@ -0,0 +1,74 @@
+const qs = require('querystring');
+const request = require('request-promise-native');
+const Base = require('./base');
+
+const OAUTH_URL = 'https://github.com/login/oauth/authorize';
+const ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';
+const USER_INFO_URL = 'https://api.github.com/user';
+const {GITHUB_ID, GITHUB_SECRET} = process.env;
+module.exports = class extends Base {
+  getAuthUrl(opts) {
+    const params = {
+      client_id: GITHUB_ID,
+      redirect_uri: opts.rdUrl,
+      scope: 'user'
+    };
+    return OAUTH_URL + '?' + qs.stringify(params);
+  }
+
+  async getAccessToken(opts) {
+    const params = {
+      client_id: GITHUB_ID,
+      client_secret: GITHUB_SECRET,
+      code: opts.code
+    };
+
+    const body = await request.post({
+      url: ACCESS_TOKEN_URL,
+      headers: {'Accept': 'application/json'},
+      form: params,
+      json: true
+    });
+    return body;
+  }
+
+  async getUserInfoByToken(opts) {
+    const userInfo = await request.get({
+      url: USER_INFO_URL,
+      headers: {
+        'User-Agent': '@waline',
+        'Authorization': 'token ' + opts.access_token
+      },
+      json: true
+    });
+
+    return {
+      id: userInfo.login,
+      name: userInfo.name,
+      desc: userInfo.bio,
+      avatar: userInfo.avatar_url
+    };
+  }
+
+  async redirect() {
+    const {app} = this;
+    const {type, rdurl} = app.get();
+    const rdUrlAfterLogin = this.getCompleteUrl(rdurl);
+
+    const params = { rdurl: rdUrlAfterLogin, type };
+    const signinUrl = this.getCompleteUrl('/oauth') + '?' + qs.stringify(params);
+    const AUTH_URL = this.getAuthUrl({rdUrl: signinUrl});
+    app.redirect(AUTH_URL);
+    return app.success();
+  }
+
+  async getUserInfo() {
+    const {code} = this.app.get();
+    if (!code) {
+      return this.redirect();
+    }
+
+    const accessTokenInfo = await this.getAccessToken({code});
+    return this.getUserInfoByToken(accessTokenInfo);
+  }
+};