Add github oauth.

web/src/App.js

@@ -32,6 +32,7 @@ import AccountPage from "./account/AccountPage";
 import LoginPage from "./account/LoginPage";
 import HomePage from "./basic/HomePage";
 import CustomGithubCorner from "./CustomGithubCorner";
+import CallbackBox from "./common/AuthBox";
 
 const { Header, Footer } = Layout;
 
@@ -155,9 +156,9 @@ class App extends Component {
   renderAccount() {
     let res = [];
 
-    if (this.state.account !== null && this.state.account !== undefined) {
-      res.push(this.renderRightDropdown());
-    } else {
+    if (this.state.account === undefined) {
+      return null;
+    } else if (this.state.account === null) {
       res.push(
         <Menu.Item key="100" style={{float: 'right', marginRight: '20px'}}>
           <Link to="/register">
@@ -172,6 +173,8 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
+    } else {
+      res.push(this.renderRightDropdown());
     }
 
     return res;
@@ -271,6 +274,7 @@ class App extends Component {
         </Header>
         <Switch>
           <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<LoginPage onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
+          <Route exact path="/callback/:providerType/:providerName/:addition" component={CallbackBox}/>
           <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
           <Route exact path="/account" render={(props) => this.renderLoginIfNotLoggedIn(<AccountPage account={this.state.account} {...props} />)}/>
           <Route exact path="/organizations" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationListPage account={this.state.account} {...props} />)}/>

web/src/backend/AccountBackend.js

@@ -50,3 +50,11 @@ export function logout() {
     credentials: "include",
   }).then(res => res.json());
 }
+
+export function githubLogin(providerName, code, state, redirectUrl, addition) {
+  console.log(redirectUrl)
+  return fetch(`${Setting.ServerUrl}/api/auth/github?provider=${providerName}&code=${code}&state=${state}&redirect_url=${redirectUrl}&addition=${addition}`, {
+    method: 'GET',
+    credentials: 'include',
+  }).then(res => res.json());
+}

web/src/common/Auth.js

@@ -42,13 +42,14 @@ export function getAuthLogo(provider) {
 }
 
 export function getAuthUrl(provider, method) {
+  const redirectUri = `${Setting.ClientUrl}/callback/${provider.type}/${provider.name}/${method}`;
   if (provider.type === "google") {
-    return `${GoogleAuthUri}?client_id=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/google/${method}&scope=${GoogleAuthScope}&response_type=code&state=${AuthState}`;
+    return `${GoogleAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GoogleAuthScope}&response_type=code&state=${AuthState}`;
   } else if (provider.type === "github") {
-    return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/github/${method}&scope=${GithubAuthScope}&response_type=code&state=${AuthState}`;
+    return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GithubAuthScope}&response_type=code&state=${AuthState}`;
   } else if (provider.type === "qq") {
-    return `${QqAuthUri}?client_id=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/qq/${method}&scope=${QqAuthScope}&response_type=code&state=${AuthState}`;
+    return `${QqAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${QqAuthScope}&response_type=code&state=${AuthState}`;
   } else if (provider.type === "wechat") {
-    return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/wechat/${method}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
+    return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${redirectUri}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
   }
 }

web/src/common/AuthBox.js

@@ -0,0 +1,71 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {withRouter} from "react-router-dom";
+import * as Setting from "../Setting";
+import * as AccountBackend from "../backend/AccountBackend";
+
+class CallbackBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      providerType: props.match.params.providerType,
+      providerName: props.match.params.providerName,
+      addition: props.match.params.addition,
+      state: "",
+      code: "",
+      isAuthenticated: false,
+      isSignedUp: false,
+      email: ""
+    };
+    const params = new URLSearchParams(this.props.location.search);
+    this.state.code = params.get("code");
+    this.state.state = params.get("state");
+  }
+
+  getAuthenticatedInfo() {
+    let redirectUrl;
+    redirectUrl = `${Setting.ClientUrl}/callback/${this.state.providerType}/${this.state.providerName}/${this.state.addition}`;
+    switch (this.state.providerType) {
+      case "github":
+        AccountBackend.githubLogin(this.state.providerName, this.state.code, this.state.state, redirectUrl, this.state.addition)
+          .then((res) => {
+            if (res.status === "ok") {
+              window.location.href = '/';
+            }else {
+              Setting.showMessage("error", res?.msg);
+            }
+          });
+        break;
+    }
+  }
+
+  componentDidMount() {
+    this.getAuthenticatedInfo();
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>
+          Logging in ...
+        </h3>
+      </div>
+    )
+  }
+}
+
+export default withRouter(CallbackBox);