Post Message
This guide explains how to post message to Crm
Sample Code
Javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>OAuth iframe Example</title>
<style>
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
max-width: 900px;
margin: 24px auto;
padding: 16px;
background: #fafafa;
color: #333
}
label {
display: block;
margin-top: 12px;
font-weight: 600
}
input[type="text"] {
width: 100%;
padding: 8px;
margin-top: 6px;
border: 1px solid #ccc;
border-radius: 6px
}
button {
margin-top: 16px;
padding: 10px 14px;
border-radius: 8px;
border: 0;
background: #0b79d0;
color: white;
cursor: pointer;
transition: background .2s
}
button:hover {
background: #095fa3
}
.note {
margin-top: 8px;
color: #666;
font-size: 13px
}
.log {
margin-top: 18px;
padding: 12px;
border-radius: 8px;
background: #f7f7f7;
border: 1px solid #eee;
max-height: 240px;
overflow: auto
}
pre {
white-space: pre-wrap;
word-break: break-word;
margin: 0
}
.response {
margin-top: 24px;
padding: 16px;
border-radius: 10px;
background: #e8f5e9;
border: 1px solid #c8e6c9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05)
}
.response strong {
display: block;
margin-bottom: 8px;
font-size: 16px;
color: #2e7d32
}
.json-key {
color: #1565c0
}
.json-string {
color: #2e7d32
}
.json-number {
color: #ef6c00
}
.json-boolean {
color: #8e24aa
}
.json-null {
color: #d32f2f
}
</style>
</head>
<body>
<h2>OAuth Parameter Form (iframe)</h2>
<form id="oauthForm">
<label>origin (required)
<input name="origin" type="text" required placeholder="e.g. https://example.com" />
</label>
<label>client_id (required)
<input name="client_id" type="text" required />
</label>
<label>redirect_uri (required)
<input name="redirect_uri" type="text" required />
</label>
<label>scope (required)
<input name="scope" type="text" required />
</label>
<label>response_type (required)
<input name="response_type" type="text" required />
</label>
<label>code_challenge (required)
<input name="code_challenge" type="text" required />
</label>
<label>code_challenge_method (required)
<input name="code_challenge_method" type="text" required />
</label>
<label>state (required)
<input name="state" type="text" required />
</label>
<button type="submit">Submit and Send postMessage</button>
<div class="note">
After submitting, it will send:
<code>window.parent.postMessage({ type: 'GET_CLIENT_OAUTH_CODE', payload: omit(data,'origin'), source: 'iframe' }, origin)</code>
</div>
</form>
<div class="log" id="log" aria-live="polite">
<strong>Logs</strong>
<div id="messages">
<pre>Waiting for messages from the parent window or this form…</pre>
</div>
</div>
<div class="response" id="responseBox" style="display:none;">
<strong>Response:</strong>
<pre id="responseContent"></pre>
</div>
<script>
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
let cls = 'json-number';
if (/^\"/.test(match)) {
if (/:$/.test(match)) {
cls = 'json-key';
} else {
cls = 'json-string';
}
} else if (/true|false/.test(match)) {
cls = 'json-boolean';
} else if (/null/.test(match)) {
cls = 'json-null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
const form = document.getElementById('oauthForm');
const messagesEl = document.getElementById('messages');
const responseBox = document.getElementById('responseBox');
const responseContent = document.getElementById('responseContent');
function log(msg) {
const p = document.createElement('pre');
p.textContent = typeof msg === 'string' ? msg : JSON.stringify(msg, null, 2);
messagesEl.appendChild(p);
messagesEl.scrollTop = messagesEl.scrollHeight;
}
form.addEventListener('submit', function (e) {
e.preventDefault();
const fm = new FormData(form);
const data = {};
for (const [k, v] of fm.entries()) data[k] = String(v).trim();
const missing = Object.keys(data).filter(k => data[k] === '');
if (missing.length) {
alert('The following fields are required: ' + missing.join(', '));
return;
}
const { origin, ...payload } = data;
if (!origin) {
alert('Origin is required and must be a valid origin (e.g. https://example.com)');
return;
}
try {
window.parent.postMessage({
type: 'GET_CLIENT_OAUTH_CODE',
payload: payload,
source: 'iframe'
}, origin);
log({ sentTo: origin, message: { type: 'GET_CLIENT_OAUTH_CODE', payload, source: 'iframe' } });
} catch (err) {
log({ error: 'Failed to send postMessage', reason: String(err) });
alert('postMessage failed to send: ' + err);
}
});
window.addEventListener('message', async function (event) {
log({ from: event.origin, data: event.data });
if (event.data && event.data.type === 'CLIENT_OAUTH_CODE' && event.data.payload.code) {
log({ message: 'Received CLIENT_OAUTH_CODE' });
try {
const response = await fetch(`${GET_TOKEN_URI}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
code: event.data.payload.code,
"grant_type": "authorization_code",
"code_verifier": "random_string_for_pkce_123"
})
}).then(res => res.json());
responseBox.style.display = 'block';
responseContent.innerHTML = syntaxHighlight(response);
} catch (err) {
log({ error: 'Failed to get user info', reason: String(err) });
}
}
}, false);
</script>
</body>
</html>