Description
Hello Team,
I am experiencing an issue while attempting to mount the Coral comments section in our UAT article - https://www.snuat.com.au/australia-news/emergency-crews-respond-to-grass-fire-at-sydney-airport-after-explosion-of-qantas-planes-engine-during-takeoff/live-coverage/659057bcbac9e14b071476326ba36ec4?commentId=0ce4f695-187f-4b74-a531-ec4508830c9e (PFA).
When I click on the "Join the conversation" button, the loadCoralEmbed script is triggered to mount the element. The v9 enabled flag is set to true.
Auth Provider: https://uat.login.newscorpaustralia.com/
The authentication provider generates an idToken (PFA). I have set this id_token in local storage as coral:v2:accessToken with newscorpau.auth.id_Token during the loadCoralEmbed script execution. However, I am encountering the following issues:
Error: "User is not authorised to that resource (USER_NOT_ENTITLED)"
Warning: "Coral: User account is incomplete. Perform logout."
I would appreciate any guidance on how to resolve these issues and any suggestions you might have.
Thank you for your assistance.
LoadCoralEmbed script
`/* global newscorpau, Coral, loadjs */
function loadCoralV9 (accessToken = null) {
const CoralStreamEmbed = Coral.createStreamEmbed({
id: 'coral-comments',
autoRender: true,
rootURL: newscorpau.coralcomments.talk,
storyID: newscorpau.articleID,
storyURL: newscorpau.canonicalURL,
accessToken: accessToken
});
return CoralStreamEmbed;
}
function loadCoral (token) {
Coral.Talk.render(document.querySelector('#coral-comments'), {
talk: newscorpau.coralcomments.talk,
asset_url: newscorpau.canonicalURL,
asset_id: newscorpau.articleID,
auth_token: token,
events (events) {
events.onAny((eventName, data) => {
let coralEvent = null;
if (window.location.href.match(/debugcoralevents=true/i)) {
console.log('%c Coral event', 'background: coral; color: #fff', eventName, data);
}
// Post & Reply
if (eventName === 'mutation.PostComment.success') {
if (data && data.variables && data.variables.input && data.variables.input.parent_id) {
coralEvent = {
events: ['event152'] // Reply
};
} else {
const d = new Date();
coralEvent = {
events: ['event11'], // Post
eVar34: window.location.href,
eVar4: newscorpau.coralcomments.eVar4,
eVar5: newscorpau.coralcomments.eVar5,
eVar6: newscorpau.coralcomments.eVar6,
eVar22: ('00' + (d.getMonth() + 1)).slice(-2) + '-' + ('00' + d.getDate()).slice(-2) + '-' + d.getFullYear() + ' ' + ('00' + d.getHours()).slice(-2) + ':' + ('00' + d.getMinutes()).slice(-2) + ':' + ('00' + d.getSeconds()).slice(-2)
};
}
}
// Like
if (eventName === 'mutation.CreateLikeAction.success') {
coralEvent = {
events: ['event153'] // Like
};
}
// View more replies
// if(eventName === 'ui.Comment.showMoreReplies'){}
// View more comments
if (eventName === 'query.CoralEmbedStream_Embed.fetchMore.CoralEmbedStream_LoadMoreComments.success') {
coralEvent = {
events: ['event154'] // View more
};
}
// Sending to Adobe
if (coralEvent) {
if (window.location.href.match(/debugcoralevents=true/i)) {
console.log('%c Adobe event', 'background: teal; color: #fff', coralEvent);
}
window.mready = window.mready || [];
window.mready.push(metrics => {
metrics.ev(coralEvent);
});
}
});
}
});
}
const showComments = document.querySelector('#comments-load a');
let hasCoralLoaded = false;
// flag to handle coral comments count in byline clicked
let isCoralCommentsCountBtnClicked = false;
// Check if V9 is enabled or not
const isV9Enabled = newscorpau?.coralcomments?.isV9Enabled || false;
function openCoralCommentsHandler (event) {
event.preventDefault();
toggleComments(event);
setButtons();
if (!hasCoralLoaded) {
if (isV9Enabled) {
// Load Coral V9
window.CoralStreamEmbed.render();
} else {
loadjs([newscorpau.coralcomments.url], () => {
if (newscorpau &&
newscorpau.auth &&
newscorpau.auth.status &&
newscorpau.auth.status === 'loggedin') {
loadCoral(newscorpau.auth.id_token);
document.querySelector('.auth-logged-user').textContent = newscorpau.auth.nickname || newscorpau.auth.name;
const commentsCont = document.querySelector('#comments');
if (commentsCont) {
commentsCont.setAttribute('logged-in', 'true');
}
} else {
loadCoral(null);
}
});
}
hasCoralLoaded = true;
}
}
showComments.addEventListener('click', openCoralCommentsHandler);
showComments.addEventListener('openCoralComments', openCoralCommentsHandler);
// Click story header comments count link to expand the comment box
const commentsCountLink = document.querySelector('#comment-count');
if (commentsCountLink) {
commentsCountLink.addEventListener('click', event => {
isCoralCommentsCountBtnClicked = true;
showComments.dispatchEvent(new Event('click'));
});
}
// Auto open the comments for blog only and if article is premium and userState is subscriber
const isBlog = (newscorpau.canonicalURL.indexOf('/blogs') > -1);
const isUserStateSubscriber = newscorpau.userState === 'subscriber';
const isPremiumArticle = newscorpau.isPremiumArticle;
// Expand comment by default if true
const isExpandedByDefault = newscorpau?.coralcomments?.showByDefault || false;
if (document.querySelector('#comments').dataset.open === '0' && (isExpandedByDefault || isBlog || (isPremiumArticle && isUserStateSubscriber))) {
newscorpau.userReady = newscorpau.userReady || [];
newscorpau.userReady.push(user => {
if (user.memType === 'subscriber') {
/**
* There are multiple click handler registered on showComments button. One of which is scrolling to the comment section.
* Dispatching click event thus causes page to scroll to the comment section, which is not needed in this case.
* To prevent this scrolling behaviour, dispatching custom 'openCoralComments'event (registered few lines above this file).
*/
showComments.dispatchEvent(new Event('openCoralComments'));
}
});
}
const toggleComments = function (e) {
let target = e.target;
// if target is SPAN then set target to parent
if (e.target.tagName === 'SPAN') {
target = e.target.parentNode;
}
if (!isCoralCommentsCountBtnClicked) {
target.classList.toggle('hide');
} else {
target.classList.add('hide');
isCoralCommentsCountBtnClicked = false;
}
if (target.classList.contains('hide')) {
// change text
target.childNodes[0].textContent = 'Hide Comments';
document.querySelector('#comment-hide-block').removeAttribute('data-attr-hide');
target.setAttribute('data-tgev-label', 'expand');
} else {
// change text
target.childNodes[0].textContent = 'Join the conversation ';
document.querySelector('#comment-hide-block').setAttribute('data-attr-hide', true);
target.setAttribute('data-tgev-label', 'collapse');
}
};
const setButtons = function () {
const loginButton = document.querySelector('.auth-login-btn');
const registerButton = document.querySelector('.auth-register-btn');
const logoutButton = document.querySelector('.auth-logout-btn');
if (loginButton) {
loginButton.addEventListener('click', event => {
event.preventDefault();
newscorpau.rampart.login(window.location.href);
});
}
if (registerButton) {
registerButton.addEventListener('click', event => {
event.preventDefault();
// - Defined in newscorpau.html.pug - configurable in config/config.php - CTS-2164
const fullSourceCode = newscorpau.sourceCodeMap + newscorpau.coralCommentCode;
const subscribeUrl = newscorpau.subscribeUrl.replace(/(sourceCode=).*?(&|$)/, '$1' + fullSourceCode + '$2');
if (newscorpau && newscorpau.disablePaywall) {
newscorpau.rampart.signup(window.location.href); // phpcs:ignore WordPressVIPMinimum.JS.Window.location -- Setting, not reading window location
} else {
window.location = subscribeUrl + '&mode=register&dest=' + encodeURIComponent(window.location.href);
}
});
}
if (logoutButton) {
logoutButton.addEventListener('click', event => {
event.preventDefault();
newscorpau.rampart.ssoLogout(window.location.href);
});
}
};
const loadCoralComments = new Promise((resolve, reject) => {
function checkCoralUrlAndLoadjs () {
const coralTalkUrl = newscorpau?.coralcomments?.url || false;
const isLoadjsAvailable = typeof loadjs === 'function';
if (coralTalkUrl && isLoadjsAvailable) {
resolve(coralTalkUrl);
} else {
setTimeout(checkCoralUrlAndLoadjs, 100); // Check again after 100ms
}
}
checkCoralUrlAndLoadjs();
});
if (isV9Enabled) {
loadCoralComments.then((coralTalkUrl) => {
loadjs([coralTalkUrl], {
async: true,
success: () => {
const coralAccessToken = newscorpau?.auth?.id_token || null;
if (coralAccessToken) {
localStorage.setItem('coral:v2:accessToken', coralAccessToken);
}
window.CoralStreamEmbed = loadCoralV9(coralAccessToken);
},
error: (error) => {
console.error('Failed to load Coral comments:', error);
}
});
}).catch((error) => {
console.error('Error loading Coral comments:', error);
// Handle the error as needed, e.g., show a message to the user
});
}`