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

Fix provider type.

Browse Source
This commit is contained in:
Yang Luo
2021-03-28 20:20:40 +08:00
parent 73ffb22c32
commit d6c8bb87c2
5 changed files with 53 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
idp/provider.go
View File

@ -33,11 +33,11 @@ type IdProvider interface {
} }
func GetIdProvider(providerType string, clientId string, clientSecret string, redirectUrl string) IdProvider { func GetIdProvider(providerType string, clientId string, clientSecret string, redirectUrl string) IdProvider {
if providerType == "github" { if providerType == "GitHub" {
return NewGithubIdProvider(clientId, clientSecret, redirectUrl) return NewGithubIdProvider(clientId, clientSecret, redirectUrl)
} else if providerType == "google" { } else if providerType == "Google" {
return NewGoogleIdProvider(clientId, clientSecret, redirectUrl) return NewGoogleIdProvider(clientId, clientSecret, redirectUrl)
} else if providerType == "qq" { } else if providerType == "QQ" {
return NewQqIdProvider(clientId, clientSecret, redirectUrl) return NewQqIdProvider(clientId, clientSecret, redirectUrl)
} }

8
web/src/ProviderEditPage.js
View File

@ -96,10 +96,10 @@ class ProviderEditPage extends React.Component {
<Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}> <Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}>
{ {
[ [
{id: 'google', name: 'Google'}, {id: 'Google', name: 'Google'},
{id: 'github', name: 'GitHub'}, {id: 'GitHub', name: 'GitHub'},
{id: 'qq', name: 'QQ'}, {id: 'QQ', name: 'QQ'},
{id: 'wechat', name: 'WeChat'}, {id: 'WeChat', name: 'WeChat'},
].map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>) ].map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
} }
</Select> </Select>

2
web/src/ProviderListPage.js
View File

@ -49,7 +49,7 @@ class ProviderListPage extends React.Component {
name: `provider_${this.state.providers.length}`, name: `provider_${this.state.providers.length}`,
createdTime: moment().format(), createdTime: moment().format(),
displayName: `New Provider - ${this.state.providers.length}`, displayName: `New Provider - ${this.state.providers.length}`,
type: "github", type: "GitHub",
clientId: "", clientId: "",
clientSecret: "", clientSecret: "",
providerUrl: "https://github.com/organizations/xxx/settings/applications/1234567", providerUrl: "https://github.com/organizations/xxx/settings/applications/1234567",

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

@ -14,7 +14,7 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Button, Checkbox, Col, Form, Input, Row} from "antd"; import {Button, Card, Checkbox, Col, Form, Input, Row} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons"; import {LockOutlined, UserOutlined} from "@ant-design/icons";
import * as AuthBackend from "./AuthBackend"; import * as AuthBackend from "./AuthBackend";
import * as Provider from "./Provider"; import * as Provider from "./Provider";
@ -103,6 +103,40 @@ class LoginPage extends React.Component {
}); });
}; };
renderProviderLogo(provider, application, width, margin, size) {
if (size === "small") {
return (
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
<img width={width} height={width} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
</a>
)
} else {
return (
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
<Card
hoverable
bodyStyle={{padding: 0}}
style={{height: 60, marginBottom: 10, paddingTop: 10}}
>
<Row>
<Col span={3}>
</Col>
<Col span={3}>
<img width={width} height={width} src={Provider.getAuthLogo(provider)} alt={provider.displayName} />
</Col>
<Col span={18}>
<div style={{marginTop: 8, fontWeight: 500, color: "#757575"}}>
Login by {provider.type}
</div>
</Col>
</Row>
</Card>
</a>
)
}
}
renderForm(application) { renderForm(application) {
if (this.state.msg !== null) { if (this.state.msg !== null) {
return Util.renderMessage(this.state.msg) return Util.renderMessage(this.state.msg)
@ -184,11 +218,7 @@ class LoginPage extends React.Component {
<Form.Item> <Form.Item>
{ {
application.providerObjs.map(provider => { application.providerObjs.map(provider => {
return ( return this.renderProviderLogo(provider, application, 30, 5, "small");
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
<img width={30} height={30} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "3px"}} />
</a>
);
}) })
} }
</Form.Item> </Form.Item>
@ -207,11 +237,7 @@ class LoginPage extends React.Component {
<br/> <br/>
{ {
application.providerObjs.map(provider => { application.providerObjs.map(provider => {
return ( return this.renderProviderLogo(provider, application, 40, 10, "big");
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
<img width={40} height={40} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "10px"}} />
</a>
);
}) })
} }
{ {

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

@ -31,13 +31,13 @@ const WeChatAuthUri = "https://open.weixin.qq.com/connect/qrconnect";
const WeChatAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_wechat.png"; const WeChatAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_wechat.png";
export function getAuthLogo(provider) { export function getAuthLogo(provider) {
if (provider.type === "google") { if (provider.type === "Google") {
return GoogleAuthLogo; return GoogleAuthLogo;
} else if (provider.type === "github") { } else if (provider.type === "GitHub") {
return GithubAuthLogo; return GithubAuthLogo;
} else if (provider.type === "qq") { } else if (provider.type === "QQ") {
return QqAuthLogo; return QqAuthLogo;
} else if (provider.type === "wechat") { } else if (provider.type === "WeChat") {
return WeChatAuthLogo; return WeChatAuthLogo;
} }
} }
@ -45,13 +45,13 @@ export function getAuthLogo(provider) {
export function getAuthUrl(application, provider, method) { export function getAuthUrl(application, provider, method) {
const redirectUri = `${window.location.origin}/callback`; const redirectUri = `${window.location.origin}/callback`;
const state = Util.getQueryParamsToState(application.name, provider.name, method); const state = Util.getQueryParamsToState(application.name, provider.name, method);
if (provider.type === "google") { if (provider.type === "Google") {
return `${GoogleAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GoogleAuthScope}&response_type=code&state=${state}`; return `${GoogleAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GoogleAuthScope}&response_type=code&state=${state}`;
} else if (provider.type === "github") { } else if (provider.type === "GitHub") {
return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GithubAuthScope}&response_type=code&state=${state}`; return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GithubAuthScope}&response_type=code&state=${state}`;
} else if (provider.type === "qq") { } else if (provider.type === "QQ") {
return `${QqAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${QqAuthScope}&response_type=code&state=${state}`; return `${QqAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${QqAuthScope}&response_type=code&state=${state}`;
} else if (provider.type === "wechat") { } else if (provider.type === "WeChat") {
return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${redirectUri}&scope=${WeChatAuthScope}&response_type=code&state=${state}#wechat_redirect`; return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${redirectUri}&scope=${WeChatAuthScope}&response_type=code&state=${state}#wechat_redirect`;
} }
} }