node-red-contrib-viseo-ms-graph
Version:
VISEO Bot Maker - Microsoft Graph
218 lines (194 loc) • 11 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('ms-graph',{
category: '🃏_miscellaneous',
color: '#8accff',
defaults: {
name: { value: undefined },
config: { value: undefined, required: true, type: 'ms-graph-config' },
action: { value: "auth"},
output: { value: undefined },
outputType: { value: "msg"},
redirectType: { value: "msg"},
usernameType: { value: "msg"},
passwordType: { value: "msg"},
scope: { value: undefined },
scopeType: { value: "msg"},
state: { value: undefined },
stateType: { value: "msg"},
code: { value: undefined },
codeType: { value: "msg"},
refresh: { value: undefined },
refreshType: { value: "msg"},
token: { value: undefined },
tokenType: { value: "msg"},
authority: { value: undefined },
authorityType: { value: "msg"},
},
credentials : {
redirect: { type: "text" },
username: { type: "text" },
password: { type: "text" }
},
inputs: 1,
outputs: 1,
icon: "azure.png",
align: "left",
paletteLabel: 'Graph',
label: function() {
if (this.name !== undefined && this.name !== "") return this.name;
else return "Graph " + this.action;
},
oneditprepare: function() {
$("#node-input-redirect").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-redirectType") });
$("#node-input-output").typedInput({ default: 'msg', types: ['msg','global'], typeField: $("#node-input-outputType") });
$("#node-input-scope").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-scopeType") });
$("#node-input-state").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-stateType") });
$("#node-input-code").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-codeType") });
$("#node-input-refresh").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-refreshType") });
$("#node-input-token").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-tokenType") });
$("#node-input-username").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-usernameType") });
$("#node-input-password").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-passwordType") });
$("#node-input-authority").typedInput({ default: 'msg', types: ['msg','str','global'], typeField: $("#node-input-authorityType") });
$("#node-input-action").change( function() {
$(".auth, .code-token, .code, .code-refresh, .password, .api").hide();
let value = $(this).val();
if (value === "auth") $(".auth").show();
if (value === "unauth") $(".unauth").show();
if (value.match(/user|rooms|photo/)) $(".api").show();
if (value.match(/password/)) {
$(".password").show();
}
if (value.match(/code/)) {
$(".code").show();
if (value.match(/refresh/)) $(".code-refresh").show();
else $(".code-token").show();
}
});
},
oneditsave: function() {}
});
</script>
<script type="text/x-red" data-template-name="ms-graph">
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="MS Graph">
</div>
<br>
<b>MS Graph settings </b>
<div class="form-row">
<br>
<label for="node-input-config"><i class="fa fa-lock"></i> Config</label>
<input type="text" id="node-input-config" style="width:70%;">
</div>
<br>
<b>Request settings</b>
<div class="form-row">
<br>
<label for="node-input-action"><i class="fa fa-navicon"></i> Action</label>
<select id="node-input-action" style="width:70%;">
<option value="auth">Get auth URL</option>
<option value="unauth">Get end session URL</option>
<option value="token-code">Get token with code</option>
<option value="token-password">Get token with username/password</option>
<option value="token-code-refresh">Get token with code refresh</option>
<option value="user">Get user information</option>
<option value="photo">Get user photo</option>
<option value="rooms">Get rooms</option>
</select>
</div>
<div style="margin-left: 15px; margin-right: 0px; width: 85px; height: 1px; background-color: lightgrey; display:inline-block;"></div><!--
--><div style="margin-left: 0px; margin-right: 0px; width: 70%; height: 1px; background-color: lightgrey; display:inline-block;"></div>
<br><br>
<div class="form-row password">
<label for="node-input-username" style="margin-left:15px; width: 85px; color:#848484"> Username</label>
<input type="text" id="node-input-username" style="width:70%;">
<input type="hidden" id="node-input-usernameType">
</div>
<div class="form-row password">
<label for="node-input-password" style="margin-left:15px; width: 85px; color:#848484"> Password</label>
<input type="text" id="node-input-password" style="width:70%;">
<input type="hidden" id="node-input-passwordType">
</div>
<div class="form-row auth unauth code">
<label for="node-input-redirect" style="margin-left:15px; width: 85px; color:#848484"> Redirect</label>
<input type="text" id="node-input-redirect" style="width:70%;">
<input type="hidden" id="node-input-redirectType">
</div>
<div class="form-row auth unauth code">
<label for="node-input-state" style="margin-left:15px; width: 85px; color:#848484"> State</label>
<input type="text" id="node-input-state" style="width:70%;">
<input type="hidden" id="node-input-stateType">
</div>
<div class="form-row code-token">
<label for="node-input-code" style="margin-left:15px; width: 85px; color:#848484"> Code</label>
<input type="text" id="node-input-code" style="width:70%;">
<input type="hidden" id="node-input-codeType">
</div>
<div class="form-row code-refresh">
<label for="node-input-refresh" style="margin-left:15px; width: 85px; color:#848484"> Refresh</label>
<input type="text" id="node-input-refresh" style="width:70%;">
<input type="hidden" id="node-input-refreshType">
</div>
<div class="form-row auth unauth password code">
<label for="node-input-authority" style="margin-left:15px; width: 85px; color:#848484"> Authority</label>
<input type="text" id="node-input-authority" style="width:70%;" placeholder="https://login.microsoftonline.com/foo.com">
<input type="hidden" id="node-input-authorityType">
</div>
<div class="form-row auth password code">
<label for="node-input-scope" style="margin-left:15px; width: 85px; color:#848484"> Scope</label>
<input type="text" id="node-input-scope" style="width:70%;" placeholder="scope1 scope2 scope3">
<input type="hidden" id="node-input-scopeType">
</div>
<div class="form-row api">
<label for="node-input-token" style="margin-left:15px; width: 85px; color:#848484"> Token</label>
<input type="text" id="node-input-token" style="width:70%;">
<input type="hidden" id="node-input-tokenType">
</div>
<div style="margin-left: 15px; margin-right: 0px; width: 85px; height: 1px; background-color: lightgrey; display:inline-block;"></div><!--
--><div style="margin-left: 0px; margin-right: 0px; width: 70%; height: 1px; background-color: lightgrey; display:inline-block;"></div>
<br><br>
<div class="form-row">
<label for="node-input-output"><i class="fa fa-globe"></i> Output</label>
<input type="text" id="node-input-output" style="width:70%;">
<input type="hidden" id="node-input-outputType">
</div>
</script>
<style>
.help-section > ol > h4,
.help-section > h3 { font-weight: bold; }
</style>
<script type="text/x-red" data-help-name="ms-graph">
<p>Handles various step for OAuth2 Authentication with Microsoft Graph.</p>
<h3>Details</h3>
<p>Properties</p>
<dl class="message-properties">
<dt>Config <span class="property-type">config</span></dt>
<dd>credentials for Microsoft Graph</dd>
<dt>Redirect <span class="property-type">string</span></dt>
<dd>the redirect URL after validation (must be httpS)</dd>
<dt>Scope <span class="property-type">string</span></dt>
<dd>the authorized credentials separated with comas (see references)</dd>
<dt>State <span class="property-type">string</span></dt>
<dd>some data to stick with the request</dd>
<dt>Authority <span class="property-type">string</span></dt>
<dd>the main URL to call with the tenant, ex: <i>https://login.microsoftonline.com/{tenant}</i></dd>
<dt>Code <span class="property-type">string</span></dt>
<dd>code or property to retrieve or store it</dd>
<dt>Refresh <span class="property-type">string</span></dt>
<dd>refresh token or property to retrieve or store it</dd>
<dt>Access <span class="property-type">string</span></dt>
<dd>access token or property to retrieve or store it</dd>
<dt>Output <span class="property-type">string</span></dt>
<dd>where to store the results</dd>
</dl>
<h3>References</h3>
<ul>
<li><a href="https://docs.microsoft.com/en-us/graph/overview">Microsoft Graph</a> - overview</li>
<li><a href="https://developer.microsoft.com/en-us/graph/docs/concepts/permissions_reference">Microsoft Graph</a> - permissions</li>
<li><a href="https://github.com/NGRP/node-red-contrib-viseo/">VISEO BotMaker</a> - the nodes github repository</li>
</ul>
<h3>Tracking</h3>
<p>This node is likely to display an error message if no key is configured in the VISEO Bot Maker project.
If such an error appears, please get a key <a href="https://key.bot.viseo.io/">here</a>.
</p>
</script>