Show oauth logos.

object/application.go

@@ -24,10 +24,11 @@ type Application struct {
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
 	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
 
-	DisplayName  string   `xorm:"varchar(100)" json:"displayName"`
+	DisplayName  string      `xorm:"varchar(100)" json:"displayName"`
-	Logo         string   `xorm:"varchar(100)" json:"logo"`
+	Logo         string      `xorm:"varchar(100)" json:"logo"`
-	Organization string   `xorm:"varchar(100)" json:"organization"`
+	Organization string      `xorm:"varchar(100)" json:"organization"`
-	Providers    []string `xorm:"varchar(100)" json:"providers"`
+	Providers    []string    `xorm:"varchar(100)" json:"providers"`
+	ProviderObjs []*Provider `xorm:"-" json:"providerObjs"`
 }
 
 func GetApplications(owner string) []*Application {
@@ -48,6 +49,18 @@ func getApplication(owner string, name string) *Application {
 	}
 
 	if existed {
+		providers := GetProviders(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])
+		}
 		return &application
 	} else {
 		return nil

object/provider.go

@@ -28,7 +28,7 @@ type Provider struct {
 	Type         string `xorm:"varchar(100)" json:"type"`
 	ClientId     string `xorm:"varchar(100)" json:"clientId"`
 	ClientSecret string `xorm:"varchar(100)" json:"clientSecret"`
-	ProviderUrl  string `xorm:"varchar(100)" json:"providerUrl"`
+	ProviderUrl  string `xorm:"varchar(200)" json:"providerUrl"`
 }
 
 func GetProviders(owner string) []*Provider {

web/src/Face.js

@@ -35,6 +35,10 @@ class Face extends React.Component {
   }
 
   getApplication() {
+    if (this.state.applicationName === null) {
+      return;
+    }
+
     ApplicationBackend.getApplication("admin", this.state.applicationName)
       .then((application) => {
         this.setState({
@@ -117,9 +121,16 @@ class Face extends React.Component {
           </div>
         </Form.Item>
         <Form.Item>
-          <img width={30} height={30} src={Auth.GithubAuthLogo} alt={"GitHub"}
+          {
-               style={{cursor: "pointer"}} onClick={() => Auth.getGithubAuthCode("signup")}
+            this.getApplicationObj().providerObjs.map(provider => {
-          />
+              return (
+                <img width={30} height={30} src={Auth.getAuthLogo(provider)} alt={provider.displayName} style={{cursor: "pointer", margin: "3px"}} onClick={() => {
+                  window.location.href = Auth.getAuthUrl(provider, "signup");
+                }}
+                />
+              );
+            })
+          }
         </Form.Item>
       </Form>
     );

web/src/ProviderListPage.js

@@ -130,13 +130,13 @@ class ProviderListPage extends React.Component {
         width: '150px',
         sorter: (a, b) => a.clientId.localeCompare(b.clientId),
       },
-      {
+      // {
-        title: 'Client Secret',
+      //   title: 'Client Secret',
-        dataIndex: 'clientSecret',
+      //   dataIndex: 'clientSecret',
-        key: 'clientSecret',
+      //   key: 'clientSecret',
-        width: '150px',
+      //   width: '150px',
-        sorter: (a, b) => a.clientSecret.localeCompare(b.clientSecret),
+      //   sorter: (a, b) => a.clientSecret.localeCompare(b.clientSecret),
-      },
+      // },
       {
         title: 'Provider Url',
         dataIndex: 'providerUrl',
@@ -146,7 +146,9 @@ class ProviderListPage extends React.Component {
         render: (text, record, index) => {
           return (
             <a target="_blank" href={text}>
-              {text}
+              {
+                Setting.getShortText(text)
+              }
             </a>
           )
         }

web/src/Setting.js

@@ -116,6 +116,14 @@ export function getShortName(s) {
   return s.split('/').slice(-1)[0];
 }
 
+export function getShortText(s, maxLength=35) {
+  if (s.length > maxLength) {
+    return `${s.slice(0, maxLength)}...`;
+  } else {
+    return s;
+  }
+}
+
 function getRandomInt(s) {
   let hash = 0;
   if (s.length !== 0) {

web/src/common/Auth.js

@@ -14,11 +14,6 @@
 
 import * as Setting from "../Setting";
 
-export const GoogleClientId  = "";
-export const GithubClientId  = "";
-export const QqClientId  = "";
-export const WechatClientId  = "";
-
 export const GoogleAuthScope  = "profile+email"
 export const GoogleAuthUri = "https://accounts.google.com/signin/oauth";
 export const GoogleAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_google.png";
@@ -31,20 +26,29 @@ export const QqAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_
 export const WeChatAuthScope = "snsapi_login"
 export const WeChatAuthUri = "https://open.weixin.qq.com/connect/qrconnect";
 export const WeChatAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_wechat.png";
+
 export const AuthState = "casdoor";
 
-export function getGoogleAuthCode(method) {
+export function getAuthLogo(provider) {
-  window.location.href = `${GoogleAuthUri}?client_id=${GoogleClientId}&redirect_uri=${Setting.ClientUrl}/callback/google/${method}&scope=${GoogleAuthScope}&response_type=code&state=${AuthState}`;
+  if (provider.type === "google") {
+    return GoogleAuthLogo;
+  } else if (provider.type === "github") {
+    return GithubAuthLogo;
+  } else if (provider.type === "qq") {
+    return QqAuthLogo;
+  } else if (provider.type === "wechat") {
+    return WeChatAuthLogo;
+  }
 }
 
-export function getGithubAuthCode(method) {
+export function getAuthUrl(provider, method) {
-  window.location.href = `${GithubAuthUri}?client_id=${GithubClientId}&redirect_uri=${Setting.ClientUrl}/callback/github/${method}&scope=${GithubAuthScope}&response_type=code&state=${AuthState}`;
+  if (provider.type === "google") {
-}
+    return `${GoogleAuthUri}?client_id=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/google/${method}&scope=${GoogleAuthScope}&response_type=code&state=${AuthState}`;
-
+  } else if (provider.type === "github") {
-export function getQqAuthCode(method) {
+    return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/github/${method}&scope=${GithubAuthScope}&response_type=code&state=${AuthState}`;
-  window.location.href = `${QqAuthUri}?client_id=${QqClientId}&redirect_uri=${Setting.ClientUrl}/callback/qq/${method}&scope=${QqAuthScope}&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}`;
-
+  } else if (provider.type === "wechat") {
-export function getWeChatAuthCode(method) {
+    return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/wechat/${method}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
-  window.location.href = `${WeChatAuthUri}?appid=${WechatClientId}&redirect_uri=${Setting.ClientUrl}/callback/wechat/${method}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
+  }
 }