llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 13:20:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Keycloak idp support (#356)

Browse Source 
* feat: add Keycloak idp support

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* fix: fix the profile UI

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>
This commit is contained in:
Yixiang Zhao
2021-12-13 19:49:30 +08:00
committed by GitHub
parent cf9e628a3e
commit 4ca5f4b196
8 changed files with 88 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/ProviderEditPage.js
View File

@ -111,6 +111,7 @@ class ProviderEditPage extends React.Component {
} else if (provider.category === "SAML") {
return ([
{id: 'Aliyun IDaaS', name: 'Aliyun IDaaS'},
{id: 'Keycloak', name: 'Keycloak'},
]);
} else {
return [];

2
web/src/Setting.js
View File

@ -375,7 +375,7 @@ export function getClickable(text) {
}
export function getProviderLogo(provider) {
const idp = provider.type.toLowerCase();
const idp = provider.type.toLowerCase().trim().split(' ')[0];
const url = `${StaticBaseUrl}/img/social_${idp}.png`;
return (
<img width={30} height={30} src={url} alt={idp} />

9
web/src/UserEditPage.js
View File

@ -29,6 +29,7 @@ import SelectRegionBox from "./SelectRegionBox";
import {Controlled as CodeMirror} from 'react-codemirror2';
import "codemirror/lib/codemirror.css";
import SamlWidget from "./common/SamlWidget";
require('codemirror/theme/material-darker.css');
require("codemirror/mode/javascript/javascript");
@ -302,7 +303,13 @@ class UserEditPage extends React.Component {
<div style={{marginBottom: 20}}>
{
(this.state.application === null || this.state.user === null) ? null : (
this.state.application?.providers.filter(providerItem => Setting.isProviderVisible(providerItem)).map((providerItem, index) => <OAuthWidget key={providerItem.name} labelSpan={(Setting.isMobile()) ? 10 : 3} user={this.state.user} application={this.state.application} providerItem={providerItem} onUnlinked={() => { return this.unlinked()}} />)
this.state.application?.providers.filter(providerItem => Setting.isProviderVisible(providerItem)).map((providerItem, index) =>
(providerItem.category === "OAuth") ? (
<OAuthWidget key={providerItem.name} labelSpan={(Setting.isMobile()) ? 10 : 3} user={this.state.user} application={this.state.application} providerItem={providerItem} onUnlinked={() => { return this.unlinked()}} />
) : (
<SamlWidget key={providerItem.name} labelSpan={(Setting.isMobile()) ? 10 : 3} user={this.state.user} application={this.state.application} providerItem={providerItem} onUnlinked={() => { return this.unlinked()}} />
)
)
)
}
</div>

12
web/src/auth/LoginPage.js
View File

@ -194,14 +194,14 @@ class LoginPage extends React.Component {
return text;
}
getSamlUrl(providerId) {
getSamlUrl(provider) {
const params = new URLSearchParams(this.props.location.search);
let clientId = params.get("client_id")
let clientId = params.get("client_id");
let application = params.get("state");
let realRedirectUri = params.get("redirect_uri");
let redirectUri = `${window.location.origin}/callback/saml`
let providerName = providerId.split('/')[1];
AuthBackend.getSamlLogin(providerId).then((res) => {
let redirectUri = `${window.location.origin}/callback/saml`;
let providerName = provider.name;
AuthBackend.getSamlLogin(`${provider.owner}/${providerName}`).then((res) => {
const replyState = `${clientId}&${application}&${providerName}&${realRedirectUri}&${redirectUri}`;
window.location.href = `${res.data}&RelayState=${btoa(replyState)}`;
});
@ -217,7 +217,7 @@ class LoginPage extends React.Component {
)
} else if (provider.category === "SAML") {
return (
<a key={provider.displayName} onClick={this.getSamlUrl.bind(this, provider.owner + "/" + provider.name)}>
<a key={provider.displayName} onClick={this.getSamlUrl.bind(this, provider)}>
<img width={width} height={width} src={Provider.getProviderLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
</a>
)

4
web/src/auth/Provider.js
View File

@ -125,6 +125,10 @@ const otherProviderInfo = {
logo: `${StaticBaseUrl}/img/social_aliyun.png`,
url: "https://aliyun.com/product/idaas"
},
"Keycloak": {
logo: `${StaticBaseUrl}/img/social_keycloak.png`,
url: "https://www.keycloak.org/"
},
},
};

45
web/src/common/SamlWidget.js Normal file
View File

@ -0,0 +1,45 @@
import React from "react";
import {Col, Row} from "antd";
import * as Setting from "../Setting";
class SamlWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: props,
addressOptions: [],
affiliationOptions: [],
};
}
renderIdp(user, application, providerItem) {
const provider = providerItem.provider;
const name = user.name;
return (
<Row key={provider.name} style={{marginTop: '20px'}}>
<Col style={{marginTop: '5px'}} span={this.props.labelSpan}>
{
Setting.getProviderLogo(provider)
}
<span style={{marginLeft: '5px'}}>
{
`${provider.type}:`
}
</span>
</Col>
<Col span={24 - this.props.labelSpan} style={{marginTop: '5px'}}>
<span style={{
width: this.props.labelSpan === 3 ? '300px' : '130px',
display: (Setting.isMobile()) ? 'inline' : "inline-block"}}>{name}</span>
</Col>
</Row>
)
}
render() {
return this.renderIdp(this.props.user, this.props.application, this.props.providerItem)
}
}
export default SamlWidget;