Add frontend /login/oauth

object/application.go

@@ -49,6 +49,21 @@ func GetApplications(owner string) []*Application {
 	return applications
 }
 
+func extendApplication(application *Application) {
+	providers := GetProviders(application.Owner)
+	m := map[string]*Provider{}
+	for _, provider := range providers {
+		provider.ClientSecret = ""
+		provider.ProviderUrl = ""
+		m[provider.Name] = provider
+	}
+
+	application.ProviderObjs = []*Provider{}
+	for _, providerName := range application.Providers {
+		application.ProviderObjs = append(application.ProviderObjs, m[providerName])
+	}
+}
+
 func getApplication(owner string, name string) *Application {
 	application := Application{Owner: owner, Name: name}
 	existed, err := adapter.engine.Get(&application)
@@ -57,18 +72,7 @@ func getApplication(owner string, name string) *Application {
 	}
 
 	if existed {
-		providers := GetProviders(owner)
+		extendApplication(&application)
-		m := map[string]*Provider{}
-		for _, provider := range providers {
-			provider.ClientSecret = ""
-			provider.ProviderUrl = ""
-			m[provider.Name] = provider
-		}
-
-		application.ProviderObjs = []*Provider{}
-		for _, providerName := range application.Providers {
-			application.ProviderObjs = append(application.ProviderObjs, m[providerName])
-		}
 		return &application
 	} else {
 		return nil
@@ -83,6 +87,7 @@ func getApplicationByClientId(clientId string) *Application {
 	}
 
 	if existed {
+		extendApplication(&application)
 		return &application
 	} else {
 		return nil

web/src/App.js

@@ -327,14 +327,14 @@ class App extends Component {
   }
 
   isDoorPages() {
-    return window.location.pathname.startsWith('/doors/');
+    return window.location.pathname.startsWith('/login/oauth');
   }
 
   render() {
     if (this.isDoorPages()) {
       return (
         <Switch>
-          <Route exact path="/doors/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<Face account={this.state.account} onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
+          <Route exact path="/login/oauth" render={(props) => this.renderLoginIfNotLoggedIn(<Face type={"code"} {...props} />)}/>
         </Switch>
       )
     }

web/src/ApplicationEditPage.js

@@ -247,15 +247,15 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("application:Face Preview")}:
           </Col>
           <Col span={22} >
-            <a style={{marginBottom: '10px'}} target="_blank" href={`/doors/${this.state.application.name}`}>
+            <a style={{marginBottom: '10px'}} target="_blank" href={`/login/oauth?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`}>
               {
-                `${window.location.host}/doors/${this.state.application.name}`
+                `${window.location.host}/login/oauth?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`
               }
             </a>
             <br/>
             <br/>
             <div style={{width: "500px", height: "600px", border: "1px solid rgb(217,217,217)"}}>
-              <Face application={this.state.application} />
+              <Face type={"login"} application={this.state.application} />
             </div>
           </Col>
         </Row>

web/src/auth/AuthBackend.js

@@ -29,6 +29,13 @@ export function register(values) {
   }).then(res => res.json());
 }
 
+export function getApplicationLogin(clientId, responseType, redirectUri, scope, state) {
+  return fetch(`${authConfig.serverUrl}/api/get-app-login?clientId=${clientId}&responseType=${responseType}&redirectUri=${redirectUri}&scope=${scope}&state=${state}`, {
+    method: 'GET',
+    credentials: 'include',
+  }).then(res => res.json());
+}
+
 export function login(values) {
   return fetch(`${authConfig.serverUrl}/api/login`, {
     method: 'POST',

web/src/auth/Face.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Checkbox, Col, Form, Input, Row} from "antd";
+import {Alert, Button, Checkbox, Col, Form, Input, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as Provider from "./Provider";
@@ -22,21 +22,46 @@ import * as Util from "./Util";
 class Face extends React.Component {
   constructor(props) {
     super(props);
-    const queries = new URLSearchParams(window.location.search);
     this.state = {
       classes: props,
+      type: props.type,
       applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
       application: null,
-      clientId: queries.get("client_id"),
+      msg: null,
-      responseType: queries.get("response_type"),
-      redirectUri: queries.get("redirect_uri"),
-      scope: queries.get("scope"),
-      state: queries.get("state"),
     };
   }
 
   componentWillMount() {
-    this.getApplication();
+    if (this.state.type === "login") {
+      this.getApplication();
+    } else if (this.state.type === "code") {
+      this.getApplicationLogin();
+    } else {
+      Util.showMessage("error", `Unknown authentication type: ${this.state.type}`);
+    }
+  }
+
+  getApplicationLogin() {
+    const queries = new URLSearchParams(window.location.search);
+    const clientId = queries.get("client_id");
+    const responseType = queries.get("response_type");
+    const redirectUri = queries.get("redirect_uri");
+    const scope = queries.get("scope");
+    const state = queries.get("state");
+    AuthBackend.getApplicationLogin(clientId, responseType, redirectUri, scope, state)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            application: res.data,
+          });
+        } else {
+          // Util.showMessage("error", res.msg);
+          this.setState({
+            application: res.data,
+            msg: res.msg,
+          });
+        }
+      });
   }
 
   getApplication() {
@@ -74,6 +99,24 @@ class Face extends React.Component {
   };
 
   renderForm(application) {
+    if (this.state.msg !== null) {
+      return (
+        <div style={{display: "inline"}}>
+          <Alert
+            message="Error"
+            showIcon
+            description={this.state.msg}
+            type="error"
+            action={
+              <Button size="small" danger>
+                Detail
+              </Button>
+            }
+          />
+        </div>
+      )
+    }
+
     return (
       <Form
         name="normal_login"
@@ -177,7 +220,7 @@ class Face extends React.Component {
 
     return (
       <Row>
-        <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
+        <Col span={24} style={{display: "flex", justifyContent: "center"}}>
           <div style={{marginTop: "80px", textAlign: "center"}}>
             {
               this.renderLogo(application)

web/src/auth/LoginPage.js

@@ -19,7 +19,7 @@ import {authConfig} from "./Auth";
 class LoginPage extends React.Component {
   render() {
     return (
-      <Face applicationName={authConfig.appName} account={this.props.account} onLoggedIn={this.props.onLoggedIn.bind(this)} {...this.props} />
+      <Face type={"login"} applicationName={authConfig.appName} account={this.props.account} onLoggedIn={this.props.onLoggedIn.bind(this)} {...this.props} />
     )
   }
 }