feat: try to support custom OAuth provider (#667)

* feat: try to support private provider

* fix: modify code according to code review

* feat: set example values for custom params

web/src/ProviderEditPage.js

@@ -212,6 +212,12 @@ class ProviderEditPage extends React.Component {
               if (value === "Local File System") {
                 this.updateProviderField('domain', Setting.getFullServerUrl());
               }
+              if (value === "Custom") {
+                this.updateProviderField('customAuthUrl', 'https://door.casdoor.com/login/oauth/authorize');
+                this.updateProviderField('customScope', 'openid profile email');
+                this.updateProviderField('customTokenUrl', 'https://door.casdoor.com/api/login/oauth/access_token');
+                this.updateProviderField('customUserInfoUrl', 'https://door.casdoor.com/api/userinfo');
+              }
             })}>
               {
                 Setting.getProviderTypeOptions(this.state.provider.category).map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
@@ -256,6 +262,79 @@ class ProviderEditPage extends React.Component {
             </React.Fragment>
           )
         }
+        {
+          this.state.provider.type !== "Custom" ? null : (
+            <React.Fragment>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Auth URL"), i18next.t("provider:Auth URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customAuthUrl} onChange={e => {
+                    this.updateProviderField('customAuthUrl', e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Scope"), i18next.t("provider:Scope - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customScope} onChange={e => {
+                    this.updateProviderField('customScope', e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Token URL"), i18next.t("provider:Token URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customTokenUrl} onChange={e => {
+                    this.updateProviderField('customTokenUrl', e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:UserInfo URL"), i18next.t("provider:UserInfo URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customUserInfoUrl} onChange={e => {
+                    this.updateProviderField('customUserInfoUrl', e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel( i18next.t("general:Favicon"), i18next.t("general:Favicon - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Row style={{marginTop: '20px'}} >
+                    <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                      {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
+                    </Col>
+                    <Col span={23} >
+                      <Input prefix={<LinkOutlined/>} value={this.state.provider.customLogo} onChange={e => {
+                        this.updateProviderField('customLogo', e.target.value);
+                      }} />
+                    </Col>
+                  </Row>
+                  <Row style={{marginTop: '20px'}} >
+                    <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                      {i18next.t("general:Preview")}:
+                    </Col>
+                    <Col span={23} >
+                      <a target="_blank" rel="noreferrer" href={this.state.provider.customLogo}>
+                        <img src={this.state.provider.customLogo} alt={this.state.provider.customLogo} height={90} style={{marginBottom: '20px'}}/>
+                      </a>
+                    </Col>
+                  </Row>
+                </Col>
+              </Row>
+            </React.Fragment>
+          )
+        }
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
             {this.getClientIdLabel()}

web/src/Setting.js

@@ -414,6 +414,7 @@ export function getProviderTypeOptions(category) {
         {id: 'AzureAD', name: 'AzureAD'},
         {id: 'Slack', name: 'Slack'},
         {id: 'Steam', name: 'Steam'},
+        {id: 'Custom', name: 'Custom'},
       ]
     );
   } else if (category === "Email") {

web/src/auth/Provider.js

@@ -107,6 +107,9 @@ const authInfo = {
   Steam: {
     endpoint: "https://steamcommunity.com/openid/login",
   },
+  Custom: {
+    endpoint: "https://example.com/",
+  },
 };
 
 const otherProviderInfo = {
@@ -184,6 +187,9 @@ const otherProviderInfo = {
 
 export function getProviderLogo(provider) {
   if (provider.category === "OAuth") {
+    if (provider.type === "Custom") {
+      return provider.customLogo;  
+    }
     return `${Setting.StaticBaseUrl}/img/social_${provider.type.toLowerCase()}.png`;
   } else {
     return otherProviderInfo[provider.category][provider.type].logo;
@@ -308,5 +314,7 @@ export function getAuthUrl(application, provider, method) {
     return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
   } else if (provider.type === "Steam") {
     return `${endpoint}?openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_select&openid.identity=http://specs.openid.net/auth/2.0/identifier_select&openid.mode=checkid_setup&openid.ns=http://specs.openid.net/auth/2.0&openid.realm=${window.location.origin}&openid.return_to=${redirectUri}?state=${state}`;
+  } else if (provider.type === "Custom") {
+    return `${provider.customAuthUrl}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${provider.customScope}&response_type=code&state=${state}`;
   } 
 }

web/src/locales/zh/data.json

@@ -333,6 +333,8 @@
     "Agent ID - Tooltip": "Agent ID - Tooltip",
     "App ID": "App ID",
     "App ID - Tooltip": "App ID - Tooltip",
+    "Auth URL": "Auth URL",
+    "Auth URL - Tooltip": "Auth URL - 工具提示",
     "Bucket": "存储桶",
     "Bucket - Tooltip": "Bucket名称",
     "Can not parse Metadata": "无法解析元数据",
@@ -380,6 +382,8 @@
     "Region endpoint for Internet": "地域节点 (外网)",
     "Region endpoint for Intranet": "地域节点 (内网)",
     "SAML 2.0 Endpoint (HTTP)": "SAML 2.0 Endpoint (HTTP)",
+    "Scope": "Scope",
+    "Scope - Tooltip": "Scope - 工具提示",
     "SMS account": "SMS account",
     "SMS account - Tooltip": "SMS account - Tooltip",
     "SP ACS URL": "SP ACS URL",
@@ -403,8 +407,12 @@
     "Template Code - Tooltip": "模板CODE",
     "Terms of Use": "使用条款",
     "Terms of Use - Tooltip": "使用条款 - 工具提示",
+    "Token URL": "Token URL",
+    "Token URL - Tooltip": "Token URL - 工具提示",
     "Type": "类型",
     "Type - Tooltip": "类型",
+    "UserInfo URL": "UserInfo URL",
+    "UserInfo URL - Tooltip": "UserInfo URL - 工具提示",
     "alertType": "警报类型",
     "canSignIn": "canSignIn",
     "canSignUp": "canSignUp",