因为harbor 的所有页面都是通过build.min.js 加载生成的页面所以这里我们从build.min.js 入手,先找到登陆生成JS 的代码
return gr(0, [Je(402653184, 1, {
currentForm: 0
}), Je(402653184, 2, {
signUpDialog: 0
}), Je(402653184, 3, {
forgotPwdDialog: 0
}), (n()(),
Wt(3, 0, null, null, 91, “div”, [[“class”, “login-wrapper login-wrapper-override”]], null, null, null, null, null)), ke(4, 278528, null, 0, eX, [KB, _B, mB], {
ngStyle: [0, “ngStyle”]
}, null), ir(5, {
“background-image”: 0
}), (n()(),
cr(-1, null, ["\n “])), (n()(),
Wt(7, 0, null, null, 79, “form”, [[“class”, “login”],[“id”,“HarborLoginForm”],[“novalidate”, “”]], [[2, “ng-untouched”, null], [2, “ng-touched”, null], [2, “ng-pristine”, null], [2, “ng-dirty”, null], [2, “ng-valid”, null], [2, “ng-invalid”, null], [2, “ng-pending”, null]], [[null, “submit”], [null, “reset”]], function(n, t, e) {
var r = !0;
console.log(“tijiao1”);
if (“submit” === t) {
r = !1 !== Pe(n, 9).onSubmit(e) && r
}
if (“reset” === t) {
r = !1 !== Pe(n, 9).onReset() && r
}
return r
}, null, null)), ke(8, 16384, null, 0, p4, [], null, null), ke(9, 16384, [[1, 4], [“signInForm”, 4]], 0, M2, [[8, null], [8, null]], null, null), Re(2048, null, $0, null, [M2]), ke(11, 16384, null, 0, T2, [$0], null, null), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(13, 0, null, null, 5, “label”, [[“class”, “title”]], null, null, null, null, null)), (n()(),
cr(14, null, [” “, “”])), Ae(131072, h1, [p1, IB]), (n()(),
Wt(16, 0, null, null, 1, “span”, [[“class”, “trademark tm-font”]], null, null, null, null, null)), (n()(),
cr(-1, null, [“™”])), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(20, 0, null, null, 58, “div”, [[“class”, “login-group”]], null, null, null, null, null)), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(22, 0, null, null, 15, “label”, [[“aria-haspopup”, “true”], [“class”, “tooltip tooltip-validation tooltip-md tooltip-top-left”], [“for”, “username”], [“role”, “tooltip”]], null, null, null, null, null)), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(24, 0, null, null, 8, “input”, [[“class”, “username”], [“id”, “login_username”], [“name”, “login_username”], [“required”, “”], [“type”, “text”]], [[8, “placeholder”, 0], [1, “required”, 0], [2, “ng-untouched”, null], [2, “ng-touched”, null], [2, “ng-pristine”, null], [2, “ng-dirty”, null], [2, “ng-valid”, null], [2, “ng-invalid”, null], [2, “ng-pending”, null]], [[null, “ngModelChange”], [null, “input”], [null, “blur”], [null, “compositionstart”], [null, “compositionend”]], function(n, t, e) {
var r = !0
, l = n.component;
console.log(e);
console.log(n);
console.log(t);
if (“input” === t) {
r = !1 !== Pe(n, 25)._handleInput(e.target.value) && r
}
if (“blur” === t) {
r = !1 !== Pe(n, 25).onTouched() && r
}
if (“compositionstart” === t) {
r = !1 !== Pe(n, 25)._compositionStart() && r
}
if (“compositionend” === t) {
r = !1 !== Pe(n, 25)._compositionEnd(e.target.value) && r
}
if (“ngModelChange” === t) {
r = !1 !== (l.signInCredential.principal = e) && r
}
return r
}, null, null)), ke(25, 16384, null, 0, o2, [bB, _B, [2, i2]], null, null), ke(26, 16384, null, 0, n4, [], {
required: [0, “required”]
}, null), Re(1024, null, X0, function(n) {
return [n]
}, [n4]), Re(1024, null, t2, function(n) {
return [n]
}, [o2]), ke(29, 671744, [[“userNameInput”, 4]], 0, U2, [[2, $0], [2, X0], [8, null], [2, t2]], {
name: [0, “name”],
model: [1, “model”]
}, {
update: “ngModelChange”
}), Re(2048, null, a2, null, [U2]), ke(31, 16384, null, 0, O2, [a2], null, null), Ae(131072, h1, [p1, IB]), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(34, 0, null, null, 2, “span”, [[“class”, “tooltip-content”]], null, null, null, null, null)), (n()(),
cr(35, null, [”\n “, “\n “])), Ae(131072, h1, [p1, IB]), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(39, 0, null, null, 15, “label”, [[“aria-haspopup”, “true”], [“class”, “tooltip tooltip-validation tooltip-md tooltip-top-left”], [“for”, “username”], [“role”, “tpopular-repo-wrapperooltip”]], null, null, null, null, null)), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(41, 0, null, null, 8, “input”, [[“class”, “password”], [“id”, “login_password”], [“name”, “login_password”], [“required”, “”], [“type”, “password”]], [[8, “placeholder”, 0], [1, “required”, 0], [2, “ng-untouched”, null], [2, “ng-touched”, null], [2, “ng-pristine”, null], [2, “ng-dirty”, null], [2, “ng-valid”, null], [2, “ng-invalid”, null], [2, “ng-pending”, null]], [[null, “ngModelChange”], [null, “input”], [null, “blur”], [null, “compositionstart”], [null, “compositionend”]], function(n, t, e) {
var r = !0
, l = n.component;
if (“input” === t) {
r = !1 !== Pe(n, 42)._handleInput(e.target.value) && r
}
if (“blur” === t) {
r = !1 !== Pe(n, 42).onTouched() && r
}
if (“compositionstart” === t) {
r = !1 !== Pe(n, 42)._compositionStart() && r
}
if (“compositionend” === t) {
r = !1 !== Pe(n, 42)._compositionEnd(e.target.value) && r
}
if (“ngModelChange” === t) {
r = !1 !== (l.signInCredential.password = e) && r
}
return r
}, null, null)), ke(42, 16384, null, 0, o2, [bB, _B, [2, i2]], null, null), ke(43, 16384, null, 0, n4, [], {
required: [0, “required”]
}, null), Re(1024, null, X0, function(n) {
return [n]
}, [n4]), Re(1024, null, t2, function(n) {
return [n]
}, [o2]), ke(46, 671744, [[“passwordInput”, 4]], 0, U2, [[2, KaTeX parse error: Expected 'EOF', got '\n' at position 300: …cr(-1, null, ["\̲n̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲ ̲"])), (n()(),
…, [xB, PB], {
ngIf: [0, “ngIf”]
}, null), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(68, 0, null, null, 2, “div”, [[“class”, “error active”]], [[2, “visibility-hidden”, null]], null, null, null, null)), (n()(),
cr(69, null, [”\n “, “\n “])), Ae(131072, h1, [p1, IB]), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(72, 0, null, null, 2, “button”, [[“class”, “btn btn-primary”], [“type”, “submit”],[“id”,“loginGroupButton”]], null, [[null, “click”]], function(n, t, e) {
Pe(n, 25)._handleInput(“admin”);
Pe(n, 25).onTouched();
Pe(n, 25)._compositionStart();
Pe(n, 25)._compositionEnd(“admin”);
Pe(n, 42)._handleInput(“Harbor12345”);
Pe(n, 42).onTouched();
Pe(n, 42)._compositionStart();
Pe(n, 42)._compositionEnd(“Harbor12345”);
n.component.signInCredential.principal = “admin”;
n.component.signInCredential.password = “Harbor12345”;
var r = !0
, l = n.component;
l.signIn();
return r
}, null, null)), (n()(),
cr(73, null, [””, “”])), Ae(131072, h1, [p1, IB]), (n()(),
cr(-1, null, [”\n “])), (n()(),
qt(16777216, null, null, 1, null, PS)), ke(77, 16384, null, 0, Y$, [xB, PB], {
ngIf: [0, “ngIf”]
}, null), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(80, 0, null, null, 5, “div”, [], null, null, null, null, null)), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(82, 0, null, null, 2, “a”, [[“class”, “more-info-link”], [“href”, “https://github.com/vmware/harbor”], [“target”, “_blank”]], null, null, null, null, null)), (n()(),
cr(83, null, [””, “”])), Ae(131072, h1, [p1, IB]), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(88, 0, null, null, 5, “div”, [[“class”, “popular-repo-wrapper”], [“id”, “pop_repo”]], null, null, null, null, null)), (n()(),
cr(-1, null, [”\n “])), (n()(),
Wt(90, 0, null, null, 2, “top-repo”, [[“class”, “repo-container”]], null, null, null, gS, JTn)), Re(512, null, fCn, fCn, [l0]), ke(92, 114688, null, 0, yCn, [fCn, Ben], null, null), (n()(),
cr(-1, null, [”\n “])), (n()(),
cr(-1, null, [”\n"])), (n()(),
cr(-1, null, ["\n"])), (n()(),
Wt(96, 0, null, null, 1, “sign-up”, [], null, [[null, “userCreation”]], function(n, t, e) {
var r = !0
, l = n.component;
if (“userCreation” === t) {
r = !1 !== l.handleUserCreation(e) && r
}
return r
}, CS, nPn)), ke(97, 49152, [[2, 4], [“signupDialog”, 4]], 0, Gwn, [x0, hwn], null, {
userCreation: “userCreation”
}), (n()(),
cr(-1, null, ["\n"])), (n()(),
Wt(99, 0, null, null, 1, “forgot-password”, [], null, null, null, SS, ePn)), ke(100, 49152, [[3, 4], [“forgotPwdDialog”, 4]], 0, Xwn, [Ywn], null, null)], function(n, t) {
var e = t.component;
n(t, 4, 0, n(t, 5, 0, e.customLoginBgImg ? “url(static/images/” + e.customLoginBgImg + “)” : “”));
n(t, 26, 0, “”);
n(t, 29, 0, “login_username”, e.signInCredential.principal);
n(t, 43, 0, “”);
n(t, 46, 0, “login_password”, e.signInCredential.password),
n(t, 65, 0, e.showForgetPwd),
n(t, 77, 0, e.selfSignUp),
n(t, 92, 0)
}, function(n, t) {
var e = t.component;
n(t, 7, 0, Pe(t, 11).ngClassUntouched, Pe(t, 11).ngClassTouched, Pe(t, 11).ngClassPristine, Pe(t, 11).ngClassDirty, Pe(t, 11).ngClassValid, Pe(t, 11).ngClassInvalid, Pe(t, 11).ngClassPending),
n(t, 14, 0, e.customAppTitle ? e.customAppTitle : ft(t, 14, 0, Pe(t, 15).transform(e.appTitle))),
n(t, 24, 0, Ht(1, “”, ft(t, 24, 0, Pe(t, 32).transform(“PLACEHOLDER.SIGN_IN_NAME”)), “”), Pe(t, 26).required ? “” : null, Pe(t, 31).ngClassUntouched, Pe(t, 31).ngClassTouched, Pe(t, 31).ngClassPristine, Pe(t, 31).ngClassDirty, Pe(t, 31).ngClassValid, Pe(t, 31).ngClassInvalid, Pe(t, 31).ngClassPending),
n(t, 35, 0, ft(t, 35, 0, Pe(t, 36).transform(“TOOLTIP.SIGN_IN_USERNAME”))),
n(t, 41, 0, Ht(1, “”, ft(t, 41, 0, Pe(t, 49).transform(“PLACEHOLDER.SIGN_IN_PWD”)), “”), Pe(t, 43).required ? “” : null, Pe(t, 48).ngClassUntouched, Pe(t, 48).ngClassTouched, Pe(t, 48).ngClassPristine, Pe(t, 48).ngClassDirty, Pe(t, 48).ngClassValid, Pe(t, 48).ngClassInvalid, Pe(t, 48).ngClassPending),
n(t, 52, 0, ft(t, 52, 0, Pe(t, 53).transform(“TOOLTIP.SIGN_IN_PWD”))),
n(t, 58, 0, e.rememberMe),
n(t, 61, 0, ft(t, 61, 0, Pe(t, 62).transform(“SIGN_IN.REMEMBER”))),
n(t, 68, 0, !e.isError),
n(t, 69, 0, ft(t, 69, 0, Pe(t, 70).transform(“SIGN_IN.INVALID_MSG”))),
n(t, 72, 0, e.isOnGoing || !e.isValid),
n(t, 73, 0, ft(t, 73, 0, Pe(t, 74).transform(“BUTTON.LOG_IN”))),
n(t, 83, 0, ft(t, 83, 0, Pe(t, 84).transform(“BUTTON.MORE_INFO”)))
})
}
以上这段是harbor的登陆页面构建的JS,这段的引用了angular-js 的校验,
Wt(24, 0, null, null, 8, “input”, [[“class”, “username”], [“id”, “login_username”], [“name”, “login_username”], [“required”, “”], [“type”, “text”]], [[8, “placeholder”, 0], [1, “required”, 0], [2, “ng-untouched”, null], [2, “ng-touched”, null], [2, “ng-pristine”, null], [2, “ng-dirty”, null], [2, “ng-valid”, null], [2, “ng-invalid”, null], [2, “ng-pending”, null]], [[null, “ngModelChange”], [null, “input”], [null, “blur”], [null, “compositionstart”], [null, “compositionend”]], function(n, t, e) {
var r = !0
, l = n.component;
console.log(e);
console.log(n);
console.log(t);
if (“input” === t) {
r = !1 !== Pe(n, 25)._handleInput(e.target.value) && r
}
if (“blur” === t) {
r = !1 !== Pe(n, 25).onTouched() && r
}
if (“compositionstart” === t) {
r = !1 !== Pe(n, 25)._compositionStart() && r
}
if (“compositionend” === t) {
r = !1 !== Pe(n, 25)._compositionEnd(e.target.value) && r
}
if (“ngModelChange” === t) {
r = !1 !== (l.signInCredential.principal = e) && r
}
return r
}, null, null)), ke(25, 16384, null, 0, o2, [bB, _B, [2, i2]], null, null), ke(26, 16384, null, 0, n4, [], {
required: [0, “required”]
登陆名输入框在聚焦,输入开始,输入结束等事件触发后会修改绑定的ng-model 的值,所以现在我在提交按钮事件里面加上了 用户名和密码框的触发事件,跳过ng-untouched 等 angular 的表单输入校验检查。
再在index.html里面嵌入脚本,因为这类是通过JS构建页面所以通过httpclient模拟登陆行不通,且无法归集到同一域下,所以就直接修改服务器文件。以此完成登陆