rain-plus/forum-oauth-center
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

feat: authorize page

Browse source
This commit is contained in:
FoskyM 2023-10-01 22:09:46 +08:00
parent 8a23f8ddf0
commit 663828aaf7
No known key found for this signature in database
GPG key ID: 42C0ED6994AD7E9C
8 changed files with 200 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
js/dist/admin.js generated vendored
View file

Binary file not shown.

BIN
js/dist/admin.js.map generated vendored
View file

Binary file not shown.

BIN
js/dist/forum.js generated vendored
View file

Binary file not shown.

BIN
js/dist/forum.js.map generated vendored
View file

Binary file not shown.

292
js/src/forum/components/oauth/AuthorizePage.js
View file

@ -5,128 +5,204 @@ import IndexPage from 'flarum/forum/components/IndexPage';
import LogInModal from 'flarum/forum/components/LogInModal';
import extractText from 'flarum/common/utils/extractText';
import Tooltip from 'flarum/common/components/Tooltip';
import Button from 'flarum/common/components/Button';
export default class AuthorizePage extends IndexPage {
params = [];
client = null;
params = [];
client = null;
scopes = null;
client_scope = [];
loading = true;
is_authorized = false;
oninit(vnode) {
super.oninit(vnode);
if (!app.session.user) {
setTimeout(() => app.modal.show(LogInModal), 500);
}
oninit(vnode) {
super.oninit(vnode);
if (!app.session.user) {
setTimeout(() => app.modal.show(LogInModal), 500);
}
const params = m.route.param();
const params = m.route.param();
if (params.client_id == null || params.response_type == null || params.redirect_uri == null) {
m.route.set('/');
if (params.client_id == null || params.response_type == null || params.redirect_uri == null) {
m.route.set('/');
} else {
this.params = params;
app.store.find('oauth-clients', params.client_id).then(client => {
if (client.length === 0) {
m.route.set('/');
} else {
this.params = params;
app.store.find('oauth-clients', params.client_id).then(client => {
if (client.length === 0) {
m.route.set('/');
} else {
this.client = client[0];
let uris = null;
if (this.client.redirect_uri().indexOf(' ') > -1) {
uris = this.client.redirect_uri().split(' ');
} else {
uris = [this.client.redirect_uri()];
}
this.client = client[0];
let uris = null;
if (this.client.redirect_uri().indexOf(' ') > -1) {
uris = this.client.redirect_uri().split(' ');
} else {
uris = [this.client.redirect_uri()];
}
if (app.forum.attribute('foskym-oauth-center.require_exact_redirect_uri') && uris.indexOf(params.redirect_uri) == -1) {
m.route.set('/');
}
if (app.forum.attribute('foskym-oauth-center.allow_implicit') && params.response_type == 'token') {
m.route.set('/');
}
if (app.forum.attribute('foskym-oauth-center.enforce_state') && params.enforce_state == null) {
m.route.set('/');
}
}
if (app.forum.attribute('foskym-oauth-center.require_exact_redirect_uri') && uris.indexOf(params.redirect_uri) == -1) {
m.route.set('/');
}
if (app.forum.attribute('foskym-oauth-center.allow_implicit') && params.response_type == 'token') {
m.route.set('/');
}
if (app.forum.attribute('foskym-oauth-center.enforce_state') && params.enforce_state == null) {
m.route.set('/');
}
app.store.find('oauth-scopes').then((scopes) => {
this.scopes = scopes
let scope = params.scope;
if (params.scope == null) {
scope = this.client.scope();
}
let scopes_temp = [];
if (scope == null) {
scopes_temp = [];
} else if (scope.indexOf(' ') > -1) {
scopes_temp = scope.split(' ');
} else {
scopes_temp = [scope];
}
let default_scopes = [];
this.scopes.map(scope => {
if (scope.is_default() === 1) {
default_scopes.push(scope);
}
});
scopes_temp = scopes_temp.concat(default_scopes);
this.client_scope = scopes_temp.filter((scope, index) => scopes_temp.indexOf(scope) === index);
console.log( this.client_scope );
this.loading = false;
m.redraw();
});
}
});
}
}
setTitle() {
app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize')));
app.setTitleCount(0);
setTitle() {
app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize')));
app.setTitleCount(0);
}
view() {
if (!this.client) {
return '';
}
return (
!this.loading && <div className="AuthorizePage">
<div className="container">
<div class="oauth-area">
<div class="oauth-main">
<div class="oauth-box oauth-header">
<h2>{app.forum.attribute('title')}</h2>
<p>
{app.translator.trans('foskym-oauth-center.forum.authorize.access')} <a
href={this.client.client_home()} target="_blank">{this.client.client_name()}</a>
</p>
view() {
if (!this.client) {
return '';
}
return (
<div className="AuthorizePage">
<div className="container">
<div class="oauth-area">
<div class="oauth-main">
<div class="oauth-box oauth-header">
<h2>{app.forum.attribute('title')}</h2>
<p>
{app.translator.trans('foskym-oauth-center.forum.authorize.access')} <a href={this.client.client_home()} target="_blank">{this.client.client_name()}</a>
</p>
</div>
<div class="oauth-box oauth-body">
</div>
<div class="oauth-box oauth-body">
<div class="oauth-top">
<img src={app.forum.attribute('faviconUrl')}/>
<i class="fas fa-exchange-alt fa-2x"></i>
<Tooltip text={this.client.client_desc()}>
<img src={this.client.client_icon()}/>
</Tooltip>
</div>
<div class="oauth-scope-area">
<div class="oauth-scope">
<div class="oauth-scope-left">
<img class="oauth-scope-object" src="/static/icon.jpg" style="width:32px"/>
</div>
<div class="oauth-scope-body">
<h6 class="oauth-scope-heading">
保持对已向 计量便民平台 授予访问权限的数据的访问权限 </h6>
<small>
即使当前没有使用该应用，也允许 计量便民平台 查看和更新你授予其访问权限的数据。这不会向
计量便民平台 授予任何其他权限。 </small>
</div>
</div>
<div class="oauth-scope">
<div class="oauth-scope-left">
<i class="oauth-scope-object fa-2x fa fa-user"
style="margin-left:2px;color:#000"></i>
</div>
<div class="oauth-scope-body">
<h6 class="oauth-scope-heading">
读取用户个人资料 </h6>
<small>
访问该用户(mouse123)的个人信息、最新动态等 </small>
</div>
</div>
</div>
<form class="oauth-form" method="post" id="form">
<input type="hidden" name="response_type" value="code"/>
<input type="hidden" name="client_id" value="0eaCTcndUqIGo9LymQ3YVZGYVpEXcHer"/>
<input type="hidden" name="redirect_uri"
value="http://cjludev.top/user/auth/callback"/>
<input type="hidden" name="state" value="123"/>
<input type="hidden" name="scope" value="basic get_user_info"/>
<div style="display: flex;">
<button class="btn btn-success btn-block" type="submit"
id="authorize" style="width: 50%;">授权
</button>
<button class="btn btn-danger btn-block" id="refuse"
style="width: 50%;">拒绝
</button>
</div>
</form>
</div>
</div>
</div>
<div class="oauth-top">
<img src={app.forum.attribute('faviconUrl')}/>
<i class="fas fa-exchange-alt fa-2x"></i>
<Tooltip text={this.client.client_desc()}>
<img src={this.client.client_icon()}/>
</Tooltip>
</div>
<div class="oauth-scope-area">
{
this.client_scope.length > 0 && this.client_scope.map(scope => {
let scope_info = null;
this.scopes.map(s => {
if (s.scope() === scope.scope()) {
scope_info = s;
}
});
if (scope_info == null) {
return '';
}
return (
<div class="oauth-scope">
<div class="oauth-scope-left">
{
(scope_info.scope_icon().indexOf('fa-') > -1) ?
<i class={"oauth-scope-object fa-2x " + scope_info.scope_icon()}
style="margin-left:2px;color:#000"></i> :
<img class="oauth-scope-object" src={scope_info.scope_icon()} style="width:32px"/>
}
</div>
<div class="oauth-scope-body">
<h6 class="oauth-scope-heading">
{scope_info.scope_name()}
</h6>
<small>
{
scope_info.scope_desc()
.replace('{client_name}', this.client.client_name())
.replace('{user}', app.session.user.attribute('displayName'))
}
</small>
</div>
</div>
);
})
}
</div>
<form class="oauth-form" method="post" id="form" onsubmit={this.onsubmit.bind(this)}>
{/* <input type="hidden" name="response_type" value={this.params.response_type}/>
<input type="hidden" name="client_id" value={this.params.client_id}/>
<input type="hidden" name="redirect_uri"
value={this.params.redirect_uri}/>
<input type="hidden" name="state" value={this.params.state}/>
<input type="hidden" name="scope" value={this.params.scope}/>*/}
<input type="hidden" name="is_authorized" value={this.is_authorized}/>
<div style="display: flex; margin-top: 15px" class="oauth-form-item">
<Button className="Button" type="submit" style="width: 50%;" onclick={
this.is_authorized = false
}>
{app.translator.trans('foskym-oauth-center.forum.authorize.deny')}
</Button>
<Button className="Button Button--primary" type="submit" style="width: 50%;" onclick={
this.is_authorized = true
}>
{app.translator.trans('foskym-oauth-center.forum.authorize.agree')}
</Button>
</div>
</form>
</div>
</div>
);
}
</div>
</div>
</div>
);
}
onsubmit(e) {
e.preventDefault();
app.request({
method: 'POST',
url: '/oauth/authorize',
body: {
response_type: this.params.response_type,
client_id: this.params.client_id,
redirect_uri: this.params.redirect_uri,
state: this.params.state,
scope: this.params.scope,
is_authorized: this.is_authorized,
}
}).then((r) => console.log(r));
// Some form handling logic here
}
}

4
less/admin.less
View file

@ -42,6 +42,10 @@
}
}
.Checkbox {
padding: 0 10px;
}
.FormControl {
background: @body-bg;
border-color: @control-bg;

12
less/forum/oauth.less
View file

@ -13,6 +13,8 @@
width: 376px;
margin: 0 auto;
box-sizing: border-box;
box-shadow: 0px 0px 15px 0px #bdbdbd;
border-radius: 12px;
}
.oauth-main::before {
@ -23,8 +25,8 @@
height: 100%;
left: 0;
top: 0;
box-shadow: 0 25px 50px #00000030;
background: hsla(0, 0%, 100%, .3);
border-radius: 12px;
}
.oauth-box {
@ -36,6 +38,7 @@
backdrop-filter: blur(0);
text-align: center;
box-shadow: 0 5px 10px -5px #d2d2d2;
border-radius: 12px 12px 0 0;
}
.oauth-header h2 {
@ -51,6 +54,10 @@
color: #333;
}
.oauth-body {
border-radius: 0 0 12px 12px;
}
.oauth-body .oauth-form-item {
position: relative;
margin-bottom: 15px;
@ -100,7 +107,7 @@ label:before {
}
.oauth-header {
background-color: #fff;
// background-color: #fff;
}
body {
@ -209,6 +216,7 @@ img.oauth-scope-object {
margin-top: 0;
font-weight: 800;
color: #382e2e;
margin-block-end: 0;
}
.oauth-scope-body small {

2
locale/zh-Hans.yml
View file

@ -38,3 +38,5 @@ foskym-oauth-center:
authorized: 授权记录
authorize:
access: 授权访问
agree: 授权
deny: 拒绝