Show oauth logos.

This commit is contained in:
Yang Luo 2021-02-13 23:00:43 +08:00
parent bac289d387
commit ea09beffe2
6 changed files with 71 additions and 33 deletions

View File

@ -28,6 +28,7 @@ type Application struct {
Logo string `xorm:"varchar(100)" json:"logo"`
Organization string `xorm:"varchar(100)" json:"organization"`
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

View File

@ -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 {

View File

@ -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>
);

View File

@ -130,13 +130,13 @@ class ProviderListPage extends React.Component {
width: '150px',
sorter: (a, b) => a.clientId.localeCompare(b.clientId),
},
{
title: 'Client Secret',
dataIndex: 'clientSecret',
key: 'clientSecret',
width: '150px',
sorter: (a, b) => a.clientSecret.localeCompare(b.clientSecret),
},
// {
// title: 'Client Secret',
// dataIndex: 'clientSecret',
// key: 'clientSecret',
// width: '150px',
// 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>
)
}

View File

@ -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) {

View File

@ -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) {
window.location.href = `${GoogleAuthUri}?client_id=${GoogleClientId}&redirect_uri=${Setting.ClientUrl}/callback/google/${method}&scope=${GoogleAuthScope}&response_type=code&state=${AuthState}`;
export function getAuthLogo(provider) {
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) {
window.location.href = `${GithubAuthUri}?client_id=${GithubClientId}&redirect_uri=${Setting.ClientUrl}/callback/github/${method}&scope=${GithubAuthScope}&response_type=code&state=${AuthState}`;
}
export function getQqAuthCode(method) {
window.location.href = `${QqAuthUri}?client_id=${QqClientId}&redirect_uri=${Setting.ClientUrl}/callback/qq/${method}&scope=${QqAuthScope}&response_type=code&state=${AuthState}`;
}
export function getWeChatAuthCode(method) {
window.location.href = `${WeChatAuthUri}?appid=${WechatClientId}&redirect_uri=${Setting.ClientUrl}/callback/wechat/${method}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
export function getAuthUrl(provider, method) {
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") {
return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/github/${method}&scope=${GithubAuthScope}&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") {
return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${Setting.ClientUrl}/callback/wechat/${method}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
}
}