Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue app auth error #834

Merged
merged 4 commits into from
Sep 24, 2019
+1,594 −1,624
Merged

Vue app auth error #834

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7d98632
vue app fix
JohannesDoberer Sep 16, 2019
6bc29d3
Merge branch 'master' into vue-app-auth-error
JohannesDoberer Sep 16, 2019
25204b9
Merge branch 'master' into vue-app-auth-error
zarkosimic Sep 18, 2019
2346d55
Merge branch 'master' into vue-app-auth-error
JohannesDoberer Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,901 changes: 1,283 additions & 1,618 deletions core/examples/luigi-sample-vue/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions core/examples/luigi-sample-vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"@kyma-project/luigi-client": "^0.3.5",
"@kyma-project/luigi-core": "^0.3.5",
"@kyma-project/luigi-client": "^0.6.4",
"@kyma-project/luigi-core": "^0.6.4",
"fundamental-ui": "^1.1.0",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
Expand Down
129 changes: 129 additions & 0 deletions core/examples/luigi-sample-vue/public/auth/auth-mock/login-mock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<title>Luigi Mock Identity Provider</title>
<style type="text/css">
body {
background-color: #f3f4f5;
}

.form-input {
border-radius: 4px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: #666;
display: block;
font-size: 14px;
height: 20px;
line-height: 1.42857143;
margin: auto;
padding: 6px 12px;
width: 200px;
}

#login-button {
display: block;
margin: auto;
cursor: pointer;
border-radius: 4px;
font-size: 1rem;
background-color: #ffffff;
color: #0a6ed1;
border: solid 1px #0a6ed1;
padding: 0 10px;
height: 36px;
max-height: 36px;
min-width: 36px;
transition: all 0.125s ease-in;
}

#login-button:hover {
border-color: #085caf;
color: #085caf;
box-shadow: 0 0 0 1px #0a6ed1;
}

.panel {
background-color: #ffffff;
box-shadow: 0 5px 20px 0 rgba(50, 54, 58, 0.08);
border-radius: 4px;
border: none;
width: 50%;
margin: auto;
min-width: 270px;
padding: 15px;
}

h1 {
text-align: center;
font-size: 1.42857143rem;
line-height: 1.33333333;
font-weight: 400;
display: block;
margin-bottom: 20px;
color: #32363a;
font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol;
}
</style>
</head>

<body>
<div class="panel">
<h1>Login to Luigi sample app</h1>
<form>
<input
type="text"
class="form-input"
value="LuigiUsername"
autocomplete="username"
/><br />
<input
type="password"
class="form-input"
value="LuigiPassword"
autocomplete="current-password"
/><br />
<button id="login-button">Login</button>
</form>
</div>
<script>
window.onload = function() {
var redirectUrl = decodeURIComponent(
window.location.href.match(/redirect_uri=(.*?)(&|$)/)[1]
);
var state = decodeURIComponent(
window.location.href.match(/state=(.*?)(&|$)/)[1]
);
var expiresIn = 3600;

var goTo =
redirectUrl +
'#expires_in=' +
expiresIn +
'&state=' +
state +
'&access_token=thisisanaccesstokenthatisnotreallyneeded& \
id_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. \
eyJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAiLCJzdWIiOiJtYXNrb3Bhd \
G9sIiwiZXhwIjoxNjQzNzY0OTIwLCJhenAiOiJtYXNrb3BhdG9sIiwibm9uY2 \
UiOiJidE5rWVZzc1FldVlWNmEyR1RVZm1wWVFFelBRN3c1ZENCbU54SG54Iiw \
iZW1haWwiOiJsdWlnaXVzZXJAa3ltYS5jeCIsIm5hbWUiOiJMdWlnaSBVc2Vy \
In0.YUBE3tufmmNIJHwzKRXlImteuh_qDeuwGjkzN3Z0erg& \
token_type=bearer';

var loginButton = document.getElementById('login-button');

loginButton.addEventListener('click', function(ev) {
ev.preventDefault();
window.location = removeIndent(goTo);
});

function removeIndent(goToString) {
return goToString.replace(/\s\s+/g, '');
}
};
</script>
</body>
</html>
50 changes: 50 additions & 0 deletions core/examples/luigi-sample-vue/public/auth/auth-mock/logout-mock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>Luigi Mock Identity Provider</title>
</head>
<body>
Logging out...
<script>
var allPossibilitiesOfHashSlashes = '([^/?=&]+)(=([^&]*))?';

var getQueryParams = function(uri) {
var hashParams = {};
uri.replace(new RegExp(allPossibilitiesOfHashSlashes, 'g'), function(
$0,
$1,
$2,
$3
) {
hashParams[$1] = $3;
});
return hashParams;
};

window.onload = function() {
var redirectTo;
try {
var url = new URL(window.location.href);
var post_logout_redirect_uri = url.searchParams.get(
'post_logout_redirect_uri'
);
redirectTo = post_logout_redirect_uri;

var error = url.searchParams.get('error');
var errorDescription = url.searchParams.get('errorDescription');
if (error) {
redirectTo = redirectTo + '?error=' + error;
if (errorDescription) {
redirectTo += '&errorDescription=' + errorDescription;
}
}
} catch (error) {
redirectTo = decodeURIComponent(
window.location.href.match(/post_logout_redirect_uri=(.*?)(&|$)/)[1]
);
}
window.location.href = redirectTo;
};
</script>
</body>
</html>
112 changes: 112 additions & 0 deletions core/examples/luigi-sample-vue/public/logout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Logout successful</title>
<meta name="description" content="">
<meta name="keywords" content="logout">
<link href="//unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css" rel="stylesheet">
<style>
.sap-icon--log::before {
font-size: 150px;
color: #a0a0a0;
}

.fd-container--centered {
text-align: center;
}

a.fd-button {
color: #FFF;
}

.fd-page {
height: 100vh;
}

.fd-page__content {
display: flex;
align-items: center;
justify-content: center;
}

.fd-has-text-align-center {
text-align: center;
}

.info,
.hint {
text-align: center;
margin: 0;
}

.info {
padding-top: 30px;
font-size: 36px;
}

.hint {
font-size: 18px;
color: #6f7275;
padding-bottom: 30px;
}
</style>
</head>

<body>
<div class="fd-ui fd-ui--fundamental">
<div class="fd-page">
<div class="fd-page__content">
<section class="fd-section">
<p class="fd-has-text-align-center">
<div class="info" id="headline" data-testid="logout-headline">You have successfully logged out.</div>
<div class="hint" id="message" data-testid="logout-message">Sign in again to continue working on awesome
things!</div>
</p>
<p class="fd-has-text-align-center">
<button class="fd-button--emphasized" onclick="login()">Re-Login</button>
</p>
</section>
</div>
</div>
</div>

<script type="text/javascript">
function login() {
window.location.href = window.location.origin;
}

function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results && decodeURIComponent(results[1].replace(/\+/g, ' ')) || '';
}

var error = getUrlParameter('error');
var errorDescription = getUrlParameter('errorDescription');

switch (error) {
case 'tokenExpired':
document.getElementById('headline').innerText = 'Your session has expired.';
break;
case 'loginError':
document.getElementById('headline').innerText = 'Ooops, something went wrong.';
document.getElementById('message').innerText = 'Please try to log in again.';
break;
default:
break;
}

if (errorDescription) {
document.getElementById('message').innerText = errorDescription;
}

</script>
</body>

</html>
21 changes: 17 additions & 4 deletions core/examples/luigi-sample-vue/public/sampleconfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,9 @@ Luigi.setConfig({
* - customIdpProvider (if you provide a class to Luigi.config.auth.customIdpProvider)
*
*/

auth: {
use: 'openIdConnect',
use: 'oAuth2ImplicitGrant',
openIdConnect: {
authority: 'https://example-authority.com',
client_id: 'client',
Expand All @@ -189,18 +190,30 @@ Luigi.setConfig({
loadUserInfo: false
},
oAuth2ImplicitGrant: {
authorizeUrl: 'https://example-url.com/authorize',
logoutUrl: 'https://example-url.com/logout',
authorizeUrl: `${window.location.origin}/auth/auth-mock/login-mock.html`,
logoutUrl: `${window.location.origin}/auth/auth-mock/logout-mock.html`,
post_logout_redirect_uri: '/logout.html',
authorizeMethod: 'GET',
oAuthData: {
client_id: 'egDuozijY5SVr0NSIowUP1dT6RVqHnlp'

// optional: redirect_uri and response_type are provided by default
// scope: '',
// redirect_uri: '/luigi-core/auth/oauth2/callback.html'
// response_type: 'id_token token',

// all specified values inside oAuthData will be added to the oauth call, i.e display="popup",
},
accessTokenExpiringNotificationTime: 60, //in seconds
expirationCheckInterval: 5,
userInfoFn: () => {
return new Promise(resolve => {
resolve({
name: 'Luigi User',
email: 'luigi.user@example.com'
});
});
}
// }
// optional , will be provided by default
// nonceFn: () => {
// console.info('custom nonce function called');
Expand Down
1 change: 1 addition & 0 deletions core/examples/luigi-sample-vue/vue.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
chainWebpack: config => config.resolve.symlinks(false),
pages: {
sampleapp: {
entry: 'src/main.js',
Expand Down