Skip to content

Commit

Permalink
Adding Microsoft Login
Browse files Browse the repository at this point in the history
  • Loading branch information
@jolzee
jolzee committed Apr 3, 2020
1 parent 0c18b6e commit 93c6481
Show file tree
Hide file tree
Showing 10 changed files with 168 additions and 96 deletions.
4 changes: 3 additions & 1 deletion .env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,6 @@ VUE_APP_SOLUTION_CONFIG_FILE=.env.solution.json
VUE_APP_SOURCE_MAP=false
VUE_APP_HIDE_AS_BRANDING=false
VUE_APP_KUTT_IT_API_KEY=
VUE_APP_SEND_LOCATION_LOGIN=true
VUE_APP_SEND_LOCATION_LOGIN=true
VUE_APP_AUTH_MS_TENANT=
VUE_APP_AUTH_MS_DOMAIN_HINT=
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
]
},
"dependencies": {
"@livechat/accounts-sdk": "^1.3.4",
"@livechat/accounts-sdk": "^1.4.0",
"@livechat/agent-app-sdk": "^1.4.1",
"@livechat/agent-app-widget-sdk": "^3.0.0",
"@livechat/customer-auth": "^0.4.0-alpha.6",
"@livechat/customer-sdk": "^2.0.0-beta.1",
"@livechat/customer-sdk": "^2.0.0-beta.2",
"@mdi/font": "^5.0.45",
"@sentry/browser": "^5.15.4",
"@sentry/integrations": "^5.15.4",
Expand Down
68 changes: 38 additions & 30 deletions public/embed-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Client's Website</title>
<script type="text/javascript">
window.TENEOCTX || (TENEOCTX = {});
TENEOCTX = {
eventSource: "leopard-embed",
pageTitle: document.title,
pageUrl: window.location.href,
pageTopic: "Help",
message: "This was sent from the customer's web site"
};
</script>
</head>
<body>
<!-- (function() {
var b = document.body;
var scr = document.createElement('script');
scr.src = 'https://192.168.1.112:8080/static/embed-leopard.js';
b.appendChild(scr);
})(); -->
<!-- use the full url to static/embed-leopard.js below | https://domain.com/static/embed-leopard.js -->
<div id="leopardChatWindow"></div>
<script src="static/embed-leopard.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Client's Website</title>
<script type="text/javascript">
window.TENEOCTX || (TENEOCTX = {});
TENEOCTX = {
eventSource: "leopard-embed",
pageTitle: document.title,
pageUrl: window.location.href,
pageTopic: "Help",
message: "This was sent from the customer's web site"
};
</script>
<style>
.highlight:focus {
border: 3px solid red;
}
</style>
</head>
<body>
<!-- (function() {
var b = document.body;
var scr = document.createElement('script');
scr.src = 'https://192.168.1.112:8080/static/embed-leopard.js';
b.appendChild(scr);
})(); -->
<!-- use the full url to static/embed-leopard.js below | https://domain.com/static/embed-leopard.js -->
<input type="button" class="highlight" />
<input type="button" class="highlight" />
<div id="leopardChatWindow"></div>
<input type="button" class="highlight" />
<script src="static/embed-leopard.js"></script>
</body>
</html>
31 changes: 15 additions & 16 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,24 +613,23 @@ export default {
isChatOpen: function(isOpenNew) {
if (isOpenNew) {
const element = this.$el.querySelector("#teneo-input-field");
if (!this.isMobileDevice) {
if (element) {
element.focus();
this.$nextTick(() => {
// this.$refs.userInput.focus(); // possibly duplicated below
element.addEventListener("focusin", e => e.stopPropagation()); // to stop flickering
if (element) {
if (!this.isMobileDevice) {
element.focus();
try {
element.click();
} catch (e) {
// ignore
}
});
this.$nextTick(() => {
// this.$refs.userInput.focus(); // possibly duplicated below
element.addEventListener("focusin", e => e.stopPropagation()); // to stop flickering
element.focus();
try {
element.click();
} catch (e) {
// ignore
}
});
} else {
element.addEventListener("focusin", e => e.stopPropagation()); // to stop flickering
document.activeElement.blur();
}
} else {
element.addEventListener("focusin", e => e.stopPropagation()); // to stop flickering
document.activeElement.blur();
}
}
},
Expand Down
98 changes: 70 additions & 28 deletions src/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,8 +349,34 @@ function storeSetup(vuetify) {
},
userInformationParams(state) {
let userInfoParams = "";

// {
// user: user,
// providerId: "microsoft.com",
// additional: {
// credentials: result.credentials,
// mail: result.additionalUserInfo.profile.mail,
// phone: result.additionalUserInfo.profile.mobilePhone,
// displayName: result.additionalUserInfo.profile.displayName,
// surname: result.additionalUserInfo.profile.surname,
// givenName: result.additionalUserInfo.profile.givenName,
// jobTitle: result.additionalUserInfo.profile.jobTitle,
// userPrincipleName: result.additionalUserInfo.profile.userPrincipleName,
// accessToken: result.credential.accessToken,
// providerId: "microsoft.com"
// }
// }
if (state.auth.userInfo.user) {
userInfoParams = `&name=${state.auth.userInfo.user.displayName}&email=${state.auth.userInfo.user.email}`;
logger.info(`USER-INFO`, state.auth.userInfo.user.additional);
if (
"providerId" in state.auth.userInfo.user &&
state.auth.userInfo.user.providerId === "microsoft.com"
) {
userInfoParams = `&${generateQueryParams(state.auth.userInfo.user.additional)}`;
logger.debug(`Microsoft query Params:`, userInfoParams);
} else {
userInfoParams = `&name=${state.auth.userInfo.user.user.displayName}&email=${state.auth.userInfo.user.user.email}`;
}
}
return userInfoParams;
},
Expand Down Expand Up @@ -994,7 +1020,7 @@ function storeSetup(vuetify) {
return state.auth.userInfo.user ? true : false;
},
userProfileImage(state) {
return state.auth.userInfo.user ? state.auth.userInfo.user.photoURL : "";
return state.auth.userInfo.user.user ? state.auth.userInfo.user.user.photoURL : "";
},
displayName(state) {
return state.auth.userInfo.user ? state.auth.userInfo.user.displayName : "Anonymous";
Expand Down Expand Up @@ -1462,7 +1488,7 @@ function storeSetup(vuetify) {
state.iframe.iframeUrlBase = newUrl.substring(0, newUrl.lastIndexOf("/")) + "/";
},
USER_INFO(state, userInfo) {
state.auth.userInfo.user = userInfo.user;
state.auth.userInfo.user = userInfo;
// TODO: tell sentry and logrocket
},
CHANGE_ASR_TTS(state, lang) {
Expand Down Expand Up @@ -1664,7 +1690,7 @@ function storeSetup(vuetify) {
if (getters.firebase) {
logger.debug(`SET USER INFORMATION > Located Firebase`);
getters.firebase.auth().onAuthStateChanged(function (user) {
if (user) {
if (user && !getters.authenticated) {
commit("USER_INFO", { user: user }); // user is still signed in
}
});
Expand All @@ -1676,7 +1702,7 @@ function storeSetup(vuetify) {
if (getters.firebase) {
logger.debug(`SET USER INFORMATION > Firebase > Found on retry: ${retyCount}`);
getters.firebase.auth().onAuthStateChanged(function (user) {
if (user) {
if (user && !getters.authenticated) {
commit("USER_INFO", { user: user }); // user is still signed in
}
});
Expand Down Expand Up @@ -1743,26 +1769,19 @@ function storeSetup(vuetify) {
case "google":
provider = new getters.firebase.auth.GoogleAuthProvider();
break;
// case "microsoft":
// const scopes = [
// "AccessReview.Read.All",
// "Bookings.Read.All",
// "Organization.Read.All",
// "OrgContact.Read.All",
// "Presence.Read.All",
// "People.Read.All",
// "Notifications.ReadWrite.CreatedByApp"
// ];
// provider = new getters.firebase.auth.OAuthProvider("microsoft.com");
// provider.setCustomParameters({
// prompt: "select_account",
// domain_hint: "artificial-solutions.com"
// });
// scopes.forEach(scope => {
// provider.addScope(scope);
// });

// break;
case "microsoft":
const scopes = ["User.Read.All"];
provider = new getters.firebase.auth.OAuthProvider("microsoft.com");
provider.setCustomParameters({
prompt: "select_account",
tenant: window.leopardConfig.auth.microsoft.tenant,
domain_hint: window.leopardConfig.auth.microsoft.domainHint
});
scopes.forEach(scope => {
provider.addScope(scope);
});

break;
case "facebook":
provider = new getters.firebase.auth.FacebookAuthProvider();
break;
Expand All @@ -1787,9 +1806,32 @@ function storeSetup(vuetify) {
// The signed-in user info.
let user = result.user;
logger.debug(user);
commit("USER_INFO", {
user: user
});
if (socialProvider === "microsoft") {
let userInfo = {
user: user,
providerId: "microsoft.com",
additional: {
credentials: result.credential,
email: result.additionalUserInfo.profile.mail,
phone: result.additionalUserInfo.profile.mobilePhone,
displayName: result.additionalUserInfo.profile.displayName,
surname: result.additionalUserInfo.profile.surname,
givenName: result.additionalUserInfo.profile.givenName,
name: result.additionalUserInfo.profile.givenName,
jobTitle: result.additionalUserInfo.profile.jobTitle,
userPrincipleName: result.additionalUserInfo.profile.userPrincipalName,
accessToken: result.credential.accessToken,
providerId: "microsoft.com"
}
};
logger.debug(`Microsoft User Info:`, userInfo);
commit("USER_INFO", userInfo);
} else {
commit("USER_INFO", {
user: user
});
}

resolve();
})
.catch(function (error) {
Expand Down
6 changes: 6 additions & 0 deletions src/utils/leopardConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ export default {
storageBucket: getEnvValue("VUE_APP_FIREBASE_STORAGE_BUCKET"),
messagingSenderId: getEnvValue("VUE_APP_FIREBASE_MESSAGING_SENDER_ID")
},
auth: {
microsoft: {
tenant: getEnvValue("VUE_APP_AUTH_MS_TENANT"),
domainHint: getEnvValue("VUE_APP_AUTH_MS_DOMAIN_HINT")
}
},
logging: {
sentryDsn: getEnvValue("VUE_APP_SENTRY_DSN"),
logRocket: getEnvValue("VUE_APP_LOG_ROCKET")
Expand Down
33 changes: 24 additions & 9 deletions src/utils/live-chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,11 @@ export class LiveChat {
});

this.sdk.on("connected", payload => {
logger.debug(`CUSTOMER DATA`, payload.customer);
logger.debug(`LiveChat > Conected`, payload);
if (payload.chatsSummary && payload.chatsSummary.length > 0) {
this.chatId = payload.chatsSummary[0].id;
logger.debug(`CHAT ID::`, this.chatId);
this.lastMessage = payload.chatsSummary[0].lastEventsPerType.message.text;
this.lastMessageAuthorId = payload.chatsSummary[0].lastEventsPerType.message.author;
logger.debug(`LiveChat > Last Author ID`, this.lastMessageAuthorId);
Expand Down Expand Up @@ -112,7 +114,7 @@ export class LiveChat {
this.sdk.on("thread_summary", threadSummary => {
logger.debug(`LiveChat > thread_summary`, threadSummary);
logger.debug(`LiveChat > Thread Summary: `, threadSummary);
this.chatId = threadSummary.chat;
this.chatId = threadSummary.chatId;
if ("lc2" in threadSummary.properties) {
try {
let secondsWait = threadSummary.properties.lc2.queue_waiting_time;
Expand Down Expand Up @@ -225,8 +227,8 @@ export class LiveChat {
}
});

this.sdk.on("thread_closed", () => {
logger.debug(`LiveChat > thread_closed`);
this.sdk.on("chat_deactivate", () => {
logger.debug(`LiveChat > chat_deactivate`);
if (this.store.state.liveAgent.isLiveChat) {
let message =
"Chat with live agent ended. You are now talking with the virtual assistant. ";
Expand Down Expand Up @@ -308,7 +310,8 @@ export class LiveChat {
if (this.chatId && this.sdk) {
logger.debug("Have existing chatId and Sending message to LiveChat Agent:" + message);
this.sdk
.sendEvent(this.chatId, {
.sendEvent({
chatId: this.chatId,
type: "message",
text: message
})
Expand All @@ -317,14 +320,26 @@ export class LiveChat {
});
} else if (this.sdk) {
logger.debug("STARTING LiveChat with message" + message);
// .startChat({
// events: [
// {
// type: "message",
// text: message
// }
// ]
// })
this.sdk
.startChat({
events: [
{
type: "message",
text: message
chat: {
thread: {
events: [
{
type: "message",
text: message
}
]
}
]
}
})
.then(chat => {
this.chatId = chat;
Expand Down
Loading

0 comments on commit 93c6481

Please sign in to comment.